@stylable/runtime - npm Package Compare versions

Comparing version 3.8.1 to 3.8.4

cjs/cached-node-renderer.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CacheStyleNodeRenderer = void 0;
-class CacheStyleNodeRenderer {
-    constructor(options) {
+var CacheStyleNodeRenderer = /** @class */ (function () {
+    function CacheStyleNodeRenderer(options) {
+        var _this = this;
         this.options = options;
-        this.create = (stylesheet, key) => {
-            const node = this.options.createElement('style');
+        this.create = function (stylesheet, key) {
+            var node = _this.options.createElement('style');
             node.textContent = stylesheet.$css || '';
-            node.setAttribute(this.options.attrKey, key);
+            node.setAttribute(_this.options.attrKey, key);
             node.setAttribute('st-depth', stylesheet.$depth + '');
             return node;
         };
-        this.hasKey = (node) => node.hasAttribute(this.options.attrKey);
-        this.update = (stylesheet, node) => {
+        this.hasKey = function (node) { return node.hasAttribute(_this.options.attrKey); };
+        this.update = function (stylesheet, node) {
             if (node.textContent !== stylesheet.$css) {
@@ -21,6 +22,7 @@ node.textContent = stylesheet.$css || '';
         };
-        this.renderKey = (stylesheet) => stylesheet.$id;
+        this.renderKey = function (stylesheet) { return stylesheet.$id; };
     }
-}
+    return CacheStyleNodeRenderer;
+}());
 exports.CacheStyleNodeRenderer = CacheStyleNodeRenderer;
 //# sourceMappingURL=cached-node-renderer.js.map

cjs/css-runtime-renderer.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.$ = exports.RuntimeRenderer = void 0;
-const cached_node_renderer_1 = require("./cached-node-renderer");
-const keyed_list_renderer_1 = require("./keyed-list-renderer");
-class RuntimeRenderer {
-    constructor() {
+var cached_node_renderer_1 = require("./cached-node-renderer");
+var keyed_list_renderer_1 = require("./keyed-list-renderer");
+var RuntimeRenderer = /** @class */ (function () {
+    function RuntimeRenderer() {
+        var _this = this;
         this.styles = [];
@@ -13,9 +14,9 @@ this.stylesMap = {};
         this.id = null;
-        this.update = () => {
-            if (this.renderer) {
-                this.renderer.render(this.window.document.head, this.styles);
+        this.update = function () {
+            if (_this.renderer) {
+                _this.renderer.render(_this.window.document.head, _this.styles);
             }
         };
     }
-    init(_window) {
+    RuntimeRenderer.prototype.init = function (_window) {
         if (this.window || !_window) {
@@ -33,20 +34,20 @@ return;
         this.update();
-    }
-    onRegister() {
+    };
+    RuntimeRenderer.prototype.onRegister = function () {
         if (this.window) {
             this.window.requestAnimationFrame(this.update);
         }
-    }
-    register(stylesheet) {
-        const registered = this.stylesMap[stylesheet.$id];
+    };
+    RuntimeRenderer.prototype.register = function (stylesheet) {
+        var registered = this.stylesMap[stylesheet.$id];
         if (registered) {
             this.removeStyle(registered);
         }
-        const i = this.findDepthIndex(stylesheet.$depth);
+        var i = this.findDepthIndex(stylesheet.$depth);
         this.styles.splice(i + 1, 0, stylesheet);
         this.stylesMap[stylesheet.$id] = stylesheet;
         this.onRegister();
-    }
-    removeStyle(stylesheet) {
-        const i = this.styles.indexOf(stylesheet);
+    };
+    RuntimeRenderer.prototype.removeStyle = function (stylesheet) {
+        var i = this.styles.indexOf(stylesheet);
         if (~i) {
@@ -56,7 +57,7 @@ this.styles.splice(i, 1);
         delete this.stylesMap[stylesheet.$id];
-    }
-    findDepthIndex(depth) {
-        let index = this.styles.length;
+    };
+    RuntimeRenderer.prototype.findDepthIndex = function (depth) {
+        var index = this.styles.length;
         while (index--) {
-            const stylesheet = this.styles[index];
+            var stylesheet = this.styles[index];
             if (stylesheet.$depth <= depth) {
@@ -67,19 +68,23 @@ return index;
         return index;
-    }
-    getStyles(ids, sortIndexes) {
-        return this.sortStyles(ids.map((id) => this.stylesMap[id]), sortIndexes);
-    }
-    sortStyles(styles, sortIndexes = false) {
-        const s = styles.slice();
+    };
+    RuntimeRenderer.prototype.getStyles = function (ids, sortIndexes) {
+        var _this = this;
+        return this.sortStyles(ids.map(function (id) { return _this.stylesMap[id]; }), sortIndexes);
+    };
+    RuntimeRenderer.prototype.sortStyles = function (styles, sortIndexes) {
+        var _this = this;
+        if (sortIndexes === void 0) { sortIndexes = false; }
+        var s = styles.slice();
         if (sortIndexes) {
-            s.sort((a, b) => {
-                return this.styles.indexOf(a) - this.styles.indexOf(b);
+            s.sort(function (a, b) {
+                return _this.styles.indexOf(a) - _this.styles.indexOf(b);
             });
         }
-        s.sort((a, b) => {
+        s.sort(function (a, b) {
             return a.$depth - b.$depth;
         });
         return s;
-    }
-}
+    };
+    return RuntimeRenderer;
+}());
 exports.RuntimeRenderer = RuntimeRenderer;
@@ -86,0 +91,0 @@ // The $ export is a convention with the webpack plugin if changed both needs a change

cjs/css-runtime-stylesheet.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRenderable = exports.create = void 0;
-const stateMiddleDelimiter = '-';
-const booleanStateDelimiter = '--';
-const stateWithParamDelimiter = '---';
+var stateMiddleDelimiter = '-';
+var booleanStateDelimiter = '--';
+var stateWithParamDelimiter = '---';
 function create(namespace, exports, css, depth, id, renderer) {
-    const stylesheet = {
-        namespace,
+    var stylesheet = {
+        namespace: namespace,
         classes: exports.classes,
@@ -14,4 +14,4 @@ keyframes: exports.keyframes,
         stVars: exports.stVars,
-        cssStates,
-        style,
+        cssStates: cssStates,
+        style: style,
         st: style,
@@ -26,6 +26,6 @@ $id: id,
     function cssStates(stateMapping) {
-        const classNames = [];
-        for (const stateName in stateMapping) {
-            const stateValue = stateMapping[stateName];
-            const stateClass = createStateClass(stateName, stateValue);
+        var classNames = [];
+        for (var stateName in stateMapping) {
+            var stateValue = stateMapping[stateName];
+            var stateClass = createStateClass(stateName, stateValue);
             if (stateClass) {
@@ -38,6 +38,6 @@ classNames.push(stateClass);
     function createBooleanStateClassName(stateName) {
-        return `${namespace}${booleanStateDelimiter}${stateName}`;
+        return "" + namespace + booleanStateDelimiter + stateName;
     }
     function createStateWithParamClassName(stateName, param) {
-        return `${namespace}${stateWithParamDelimiter}${stateName}${stateMiddleDelimiter}${param.length}${stateMiddleDelimiter}${param.replace(/\s/gm, '_')}`;
+        return "" + namespace + stateWithParamDelimiter + stateName + stateMiddleDelimiter + param.length + stateMiddleDelimiter + param.replace(/\s/gm, '_');
     }
@@ -56,10 +56,10 @@ function createStateClass(stateName, stateValue) {
         }
-        const valueAsString = stateValue.toString();
+        var valueAsString = stateValue.toString();
         return createStateWithParamClassName(stateName, valueAsString);
     }
     function style() {
-        const classNames = [];
-        for (let i = 0; i < arguments.length; i++) {
+        var classNames = [];
+        for (var i = 0; i < arguments.length; i++) {
             // eslint-disable-next-line prefer-rest-params
-            const item = arguments[i];
+            var item = arguments[i];
             if (item) {
@@ -70,5 +70,5 @@ if (typeof item === 'string') {
                 else if (i === 1) {
-                    for (const stateName in item) {
-                        const stateValue = item[stateName];
-                        const stateClass = createStateClass(stateName, stateValue);
+                    for (var stateName in item) {
+                        var stateValue = item[stateName];
+                        var stateClass = createStateClass(stateName, stateValue);
                         if (stateClass) {
@@ -75,0 +75,0 @@ classNames[classNames.length] = stateClass;

cjs/keyed-list-renderer.js

@@ -5,8 +5,8 @@ "use strict";
 function createDOMListRenderer(nodeRenderer) {
-    let first;
-    const nodes = {};
-    const setNode = (dataItem, node) => (nodes[nodeRenderer.renderKey(dataItem)] = node);
-    const renderNode = (dataItem) => {
-        const key = nodeRenderer.renderKey(dataItem);
-        const node = nodes[key];
+    var first;
+    var nodes = {};
+    var setNode = function (dataItem, node) { return (nodes[nodeRenderer.renderKey(dataItem)] = node); };
+    var renderNode = function (dataItem) {
+        var key = nodeRenderer.renderKey(dataItem);
+        var node = nodes[key];
         return node
@@ -16,7 +16,8 @@ ? nodeRenderer.update(dataItem, node)
     };
-    const render = (container, data = []) => {
+    var render = function (container, data) {
+        if (data === void 0) { data = []; }
         if (data.length) {
-            let node;
-            let next = first;
-            for (let i = 0; i < data.length; i++) {
+            var node = void 0;
+            var next = first;
+            for (var i = 0; i < data.length; i++) {
                 node = renderNode(data[i]);
@@ -42,3 +43,3 @@ if (node !== next) {
             while (first) {
-                const next = first.nextElementSibling;
+                var next = first.nextElementSibling;
                 container.removeChild(first);
@@ -49,5 +50,5 @@ first = next && nodeRenderer.hasKey(next) ? next : undefined;
     };
-    return { render, nodes };
+    return { render: render, nodes: nodes };
 }
 exports.createDOMListRenderer = createDOMListRenderer;
 //# sourceMappingURL=keyed-list-renderer.js.map

package.json

 {
   "name": "@stylable/runtime",
-  "version": "3.8.1",
+  "version": "3.8.4",
   "description": "Stylable runtime DOM integration",
@@ -5,0 +5,0 @@ "main": "cjs/index.js",

runtime.lib.js

@@ -1,2 +0,2 @@
-/* runtime version: 3.8.1 */
+/* runtime version: 3.8.4 */
 function StylableRuntime(exports){
@@ -3,0 +3,0 @@ exports = exports || {};

No alert changes

Improved metrics

Total package byte prevSize

52682

1.93%

Number of package files

35

2.94%

Lines of code

910

1.68%

No dependency changes