dothtml 6.0.0-beta.44 → 6.0.0-beta.46

package/build_module/v-meta-nodes/style-v-node.js

@@ -5,131 +5,227 @@ import FilterVStyle from "../v-style-nodes/filter-v-style";
 import TransformVStyle from "../v-style-nodes/transform-v-style";
 import { formatCssLength } from "../css/format-css-type";
 import Binding from "../reactivity/binding";
+import BaseVStyle from "../v-style-nodes/base-v-style";
+import { scheduler } from "../reactivity/scheduler";
+import { Priority } from "../reactivity/priority";
+import Watcher from "../reactivity/watcher";
 export default class StyleVNode extends VMetaNode {
-    constructor(styleValue) {
+    constructor(styleSource) {
         super();
         this.observables = [];
         this.observableIds = [];
-        this.styleValue = styleValue;
-        {
-            for (let prop in this.styleValue) {
-                let value = this.styleValue[prop];
-                if (value instanceof Binding) {
-                    this.observables.push(value);
-                }
-                else if (typeof value === "object") {
-                    let builder;
-                    switch (prop) {
-                        case "filter": {
-                            builder = new FilterVStyle(prop);
-                            break;
-                        }
-                        case "transform": {
-                            builder = new TransformVStyle(prop);
-                            break;
-                        }
-                    }
-                    let funcArray;
-                    if (value instanceof Array) {
-                        funcArray = value;
+        this.isQueued = false;
+        this.updateSubscription = {
+            active: true,
+            update: () => {
+                this.isQueued = false;
+                this.applyStyles();
+            }
+        };
+        this.styleSource = styleSource;
+        if (this.styleSource instanceof BaseVStyle) {
+            this.styleSource._setOnUpdate(() => this.update());
+        }
+        this.extractObservables();
+    }
+    extractObservables() {
+        const source = this.styleSource instanceof BaseVStyle ? this.styleSource.getProps() : this.styleSource;
+        if (Array.isArray(source)) {
+            for (let i = 0; i < source.length; i++) {
+                let p = source[i];
+                this.processValue(p.prop, p.value, (newVal) => p.value = newVal);
+            }
+        }
+        else {
+            for (let prop in source) {
+                this.processValue(prop, source[prop], (newVal) => source[prop] = newVal);
+            }
+        }
+    }
+    processValue(prop, value, setter) {
+        if (!this.tryExtractObservable(value)) {
+            if (typeof value === "object" && value !== null && !(value instanceof CssFunctionBuilderVStyle)) {
+                let builder;
+                switch (prop) {
+                    case "filter": {
+                        builder = new FilterVStyle(prop);
+                        break;
                     }
-                    else {
-                        funcArray = [value];
+                    case "transform": {
+                        builder = new TransformVStyle(prop);
+                        break;
                     }
-                    for (let i = 0; i < funcArray.length; i++) {
-                        let funcValue = funcArray[i];
+                }
+                if (builder) {
+                    let funcArray = Array.isArray(value) ? value : [value];
+                    for (let funcValue of funcArray) {
                         for (let k in funcValue) {
                             let v = funcValue[k];
-                            if (v instanceof Binding) {
-                                this.observables.push(v);
-                            }
-                            else if (v instanceof Array) {
-                                for (let j in v) {
-                                    let w = v[j];
-                                    if (w instanceof Binding) {
-                                        this.observables.push(w);
-                                    }
+                            this.tryExtractObservable(v);
+                            if (Array.isArray(v)) {
+                                for (let w of v) {
+                                    this.tryExtractObservable(w);
                                 }
                             }
-                            if (builder && builder[k]) {
-                                builder[k](v);
+                            if (typeof builder[k] === "function") {
+                                if (Array.isArray(v)) {
+                                    builder[k](...v);
+                                }
+                                else {
+                                    builder[k](v);
+                                }
                             }
                         }
                     }
-                    if (builder) {
-                        this.styleValue[prop] = builder;
-                    }
+                    setter(builder);
+                }
+            }
+        }
+    }
+    tryExtractObservable(value) {
+        if (value instanceof Binding || value instanceof Watcher) {
+            if (this.observables.indexOf(value) === -1) {
+                this.observables.push(value);
+                if (this.target) {
+                    let id = value.subscribe(() => this.update());
+                    this.observableIds.push(id);
                 }
             }
+            return true;
         }
+        return false;
     }
     render(target, document = window.document, shadowRoot) {
         this.target = target;
         this.document = document;
         this.shadowRoot = shadowRoot;
-        {
-            for (let i in this.observables) {
-                let observable = this.observables[i];
-                let id = observable._subscribe(this);
-                this.observableIds.push(id);
+        for (let observable of this.observables) {
+            let id = observable.subscribe(() => this.update());
+            this.observableIds.push(id);
+        }
+        if (typeof target === "string") {
+            this.styleElement = this.document.createElement("style");
+            if (this.shadowRoot) {
+                this.shadowRoot.appendChild(this.styleElement);
+            }
+            else {
+                this.document.head.appendChild(this.styleElement);
             }
         }
-        this.update();
+        this.applyStyles();
     }
     update() {
-        let allStylesToApply = [];
-        for (let prop in this.styleValue) {
-            let cssValue;
-            {
-                let value = this.styleValue[prop];
-                if (value instanceof Binding) {
-                    cssValue = value._get();
-                }
-                else if (value instanceof CssFunctionBuilderVStyle) {
-                    cssValue = value.toString();
-                }
-                else {
-                    cssValue = `${value}`;
-                }
+        if (!this.isQueued) {
+            this.isQueued = true;
+            scheduler.enqueue(this.updateSubscription, Priority.Normal);
+        }
+    }
+    applyStyles() {
+        if (!this.target)
+            return;
+        if (typeof this.target === "string") {
+            if (this.styleElement) {
+                this.styleElement.textContent = `${this.target} { ${this.getStyleString()} }`;
             }
-            let cssType, cssProp, cssUnit;
-            {
-                let registeredProp = cssProps[prop];
-                if (registeredProp) {
-                    cssType = cssProps[prop].type;
-                    cssProp = cssProps[prop].cssName;
-                    cssUnit = cssProps[prop].unit;
+        }
+        else {
+            this.extractObservables();
+            const source = this.styleSource instanceof BaseVStyle ? this.styleSource.getProps() : this.styleSource;
+            if (Array.isArray(source)) {
+                for (const p of source) {
+                    const value = p.value instanceof Binding ? p.value._get() : (p.value instanceof Watcher ? p.value.value : p.value);
+                    this.applySingleStyle(p.prop, value);
                 }
-                else {
-                    cssType = "custom";
-                    cssProp = prop;
+            }
+            else {
+                for (let prop in source) {
+                    const value = source[prop] instanceof Binding ? source[prop]._get() : (source[prop] instanceof Watcher ? source[prop].value : source[prop]);
+                    this.applySingleStyle(prop, value);
                 }
             }
-            let formattedValue = cssValue;
-            switch (cssType) {
-                case "length":
-                    formattedValue = formatCssLength(cssValue, cssUnit);
-                    break;
+        }
+    }
+    applySingleStyle(prop, value) {
+        let cssValue;
+        if (value instanceof CssFunctionBuilderVStyle) {
+            cssValue = value.toString();
+        }
+        else {
+            cssValue = value;
+        }
+        let cssProp = prop;
+        let cssUnit = undefined;
+        const registeredProp = cssProps[prop];
+        if (registeredProp) {
+            cssProp = registeredProp.cssName;
+            cssUnit = registeredProp.unit;
+            if (registeredProp.type === "length" && typeof cssValue === "number") {
+                cssValue = formatCssLength(cssValue, cssUnit);
             }
-            allStylesToApply.push({ cssProp, cssValue: formattedValue });
         }
         if (this.target instanceof HTMLElement) {
-            for (let i in allStylesToApply) {
-                let assignment = allStylesToApply[i];
-                this.target.style[assignment.cssProp] = assignment.cssValue;
+            this.target.style.setProperty(cssProp, `${cssValue}`);
+        }
+    }
+    getStyleString() {
+        let styles = "";
+        const source = this.styleSource instanceof BaseVStyle ? this.styleSource.getProps() : this.styleSource;
+        if (Array.isArray(source)) {
+            for (const p of source) {
+                styles += this.formatSingleStyle(p.prop, p.value);
+            }
+        }
+        else {
+            for (let prop in source) {
+                styles += this.formatSingleStyle(prop, source[prop]);
             }
         }
-        else if (typeof this.target === "string") {
+        return styles;
+    }
+    formatSingleStyle(prop, value) {
+        let cssValue = value instanceof Binding ? value._get() : (value instanceof Watcher ? value.value : value);
+        if (cssValue instanceof CssFunctionBuilderVStyle) {
+            cssValue = cssValue.toString();
+        }
+        let cssProp = prop;
+        let cssUnit = undefined;
+        const registeredProp = cssProps[prop];
+        if (registeredProp) {
+            cssProp = registeredProp.cssName;
+            cssUnit = registeredProp.unit;
+            if (registeredProp.type === "length" && typeof cssValue === "number") {
+                cssValue = formatCssLength(cssValue, cssUnit);
+            }
         }
+        return `${cssProp}: ${cssValue}; `;
     }
     unrender() {
-        for (let i in this.observableIds) {
+        for (let i = 0; i < this.observableIds.length; i++) {
             let id = this.observableIds[i];
             let observable = this.observables[i];
-            observable._unsubscribe(id);
+            if (observable instanceof Binding) {
+                observable._unsubscribe(id);
+            }
+            else {
+                observable._detachBinding(id);
+            }
+        }
+        this.observableIds = [];
+        this.observables = [];
+        if (this.styleElement) {
+            this.styleElement.remove();
+            this.styleElement = null;
+        }
+        this.target = null;
+        this.updateSubscription.active = false;
+    }
+    toString() {
+        if (typeof this.target === "string") {
+            return `${this.target} { ${this.getStyleString()} }`;
+        }
+        else {
+            return this.getStyleString();
         }
-        this.observables.length = 0;
     }
-    toString() { }
 }
 //# sourceMappingURL=style-v-node.js.map

package/build_module/v-meta-nodes/style-v-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-v-node.js","sourceRoot":"","sources":["../../src/v-meta-nodes/style-v-node.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"style-v-node.js","sourceRoot":"","sources":["../../src/v-meta-nodes/style-v-node.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,SAAS,MAAM,eAAe,CAAC;AACtC,OAAO,wBAAwB,MAAM,+CAA+C,CAAC;AACrF,OAAO,YAAY,MAAM,iCAAiC,CAAC;AAC3D,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,UAAU,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,SAAS;IAkBhD,YAAY,WAAiC;QAC5C,KAAK,EAAE,CAAC;QAZD,gBAAW,GAAmB,EAAE,CAAC;QACjC,kBAAa,GAAkB,EAAE,CAAC;QAClC,aAAQ,GAAG,KAAK,CAAC;QACjB,uBAAkB,GAAG;YAC5B,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,WAAW,EAAE,CAAC;YACpB,CAAC;SACD,CAAC;QAID,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAE/B,IAAI,IAAI,CAAC,WAAW,YAAY,UAAU,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;SACnD;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC3B,CAAC;IAEO,kBAAkB;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,YAAY,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QAEvG,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAE1B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACvC,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;gBAClB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC;aACjE;SACD;aAAM;YAEN,KAAK,IAAI,IAAI,IAAI,MAAM,EAAE;gBACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC;aACzE;SACD;IACF,CAAC;IAEO,YAAY,CAAC,IAAY,EAAE,KAAU,EAAE,MAAwB;QACtE,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE;YACtC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,CAAC,KAAK,YAAY,wBAAwB,CAAC,EAAE;gBAEhG,IAAI,OAAiC,CAAC;gBACtC,QAAQ,IAAI,EAAE;oBACb,KAAK,QAAQ,CAAC,CAAC;wBACd,OAAO,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;wBACjC,MAAM;qBACN;oBACD,KAAK,WAAW,CAAC,CAAC;wBACjB,OAAO,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC;wBACpC,MAAM;qBACN;iBACD;gBAED,IAAI,OAAO,EAAE;oBACZ,IAAI,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;oBACvD,KAAK,IAAI,SAAS,IAAI,SAAS,EAAE;wBAChC,KAAK,IAAI,CAAC,IAAI,SAAS,EAAE;4BACxB,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;4BACrB,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;4BAC7B,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gCACrB,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE;oCAChB,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;iCAC7B;6BACD;4BAED,IAAI,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,UAAU,EAAE;gCACrC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;oCACrB,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;iCACjB;qCAAM;oCACN,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iCACd;6BACD;yBACD;qBACD;oBACD,MAAM,CAAC,OAAO,CAAC,CAAC;iBAChB;aACD;SACD;IACF,CAAC;IAEO,oBAAoB,CAAC,KAAU;QACtC,IAAI,KAAK,YAAY,OAAO,IAAI,KAAK,YAAY,OAAO,EAAE;YACzD,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,KAAY,CAAC,KAAK,CAAC,CAAC,EAAE;gBAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAY,CAAC,CAAC;gBACpC,IAAI,IAAI,CAAC,MAAM,EAAE;oBAEhB,IAAI,EAAE,GAAI,KAAa,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;oBACvD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;iBAC5B;aACD;YACD,OAAO,IAAI,CAAC;SACZ;QACD,OAAO,KAAK,CAAC;IACd,CAAC;IAED,MAAM,CAAC,MAA4B,EAAE,WAAqB,MAAM,CAAC,QAAQ,EAAE,UAAuB;QACjG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAE7B,KAAK,IAAI,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE;YACxC,IAAI,EAAE,GAAI,UAAkB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;YAC5D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC5B;QAED,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;YAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACzD,IAAI,IAAI,CAAC,UAAU,EAAE;gBACpB,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;aAC/C;iBAAM;gBACN,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;aAClD;SACD;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,MAAM;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAyB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;SACnE;IACF,CAAC;IAEO,WAAW;QAClB,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEzB,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;YACpC,IAAI,IAAI,CAAC,YAAY,EAAE;gBACtB,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC;aAC9E;SACD;aAAM;YACN,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,YAAY,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;YAEvG,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBAC1B,KAAK,MAAM,CAAC,IAAI,MAAM,EAAE;oBACvB,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,YAAY,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,YAAY,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;oBACnH,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;iBACrC;aACD;iBAAM;gBACN,KAAK,IAAI,IAAI,IAAI,MAAM,EAAE;oBACxB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;oBAC5I,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;iBACnC;aACD;SACD;IACF,CAAC;IAEO,gBAAgB,CAAC,IAAY,EAAE,KAAU;QAChD,IAAI,QAAQ,CAAC;QACb,IAAI,KAAK,YAAY,wBAAwB,EAAE;YAC9C,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;SAC5B;aAAM;YACN,QAAQ,GAAG,KAAK,CAAC;SACjB;QAED,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,IAAI,OAAO,GAAG,SAAS,CAAC;QAExB,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;QACtC,IAAI,cAAc,EAAE;YACnB,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC;YACjC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC;YAC9B,IAAI,cAAc,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;gBACrE,QAAQ,GAAG,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;aAC9C;SACD;QAED,IAAI,IAAI,CAAC,MAAM,YAAY,WAAW,EAAE;YACvC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;SACtD;IACF,CAAC;IAEO,cAAc;QACrB,IAAI,MAAM,GAAG,EAAE,CAAC;QAChB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,YAAY,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QAEvG,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC1B,KAAK,MAAM,CAAC,IAAI,MAAM,EAAE;gBACvB,MAAM,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;aAClD;SACD;aAAM;YACN,KAAK,IAAI,IAAI,IAAI,MAAM,EAAE;gBACxB,MAAM,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;aACrD;SACD;QACD,OAAO,MAAM,CAAC;IACf,CAAC;IAEO,iBAAiB,CAAC,IAAY,EAAE,KAAU;QACjD,IAAI,QAAQ,GAAG,KAAK,YAAY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,YAAY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAC1G,IAAI,QAAQ,YAAY,wBAAwB,EAAE;YACjD,QAAQ,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC;SAC/B;QAED,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,IAAI,OAAO,GAAG,SAAS,CAAC;QAExB,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;QACtC,IAAI,cAAc,EAAE;YACnB,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC;YACjC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC;YAC9B,IAAI,cAAc,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;gBACrE,QAAQ,GAAG,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;aAC9C;SACD;QACD,OAAO,GAAG,OAAO,KAAK,QAAQ,IAAI,CAAC;IACpC,CAAC;IAED,QAAQ;QACP,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACnD,IAAI,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YAC/B,IAAI,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACrC,IAAI,UAAU,YAAY,OAAO,EAAE;gBACjC,UAAkB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;aACrC;iBAAM;gBACL,UAAkB,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;aACvC;SACD;QACD,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;YAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SACzB;QAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,KAAK,CAAC;IACxC,CAAC;IAED,QAAQ;QACP,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;YACpC,OAAO,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC;SACrD;aAAM;YACN,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;SAC7B;IACF,CAAC;CACD"}

package/build_module/v-style-nodes/base-v-style.d.ts

@@ -1,14 +1,13 @@
-import VStyle from "./v-style";
-export default class BaseVStyle extends VStyle {
+export default class BaseVStyle {
     private readonly _isBase;
     private props;
-    private subscriptions;
-    private renderedSubBuilders;
-    private selector;
-    private target;
-    _render(target: HTMLElement): void;
-    _unrender(): void;
-    renderAndSetPropValue(prop: any, value: any): void;
-    updateProp(prop: string, value: string): void;
-    setProp(propName: any, value: any): any;
+    private onUpdate;
+    setProp(propName: string, value: any): any;
+    _setOnUpdate(callback: () => void): void;
+    variable(name: string, value: any): any;
+    v(name: string): string;
+    getProps(): {
+        prop: string;
+        value: any;
+    }[];
 }

package/build_module/v-style-nodes/base-v-style.js

@@ -1,52 +1,8 @@
-import Binding from "../reactivity/binding";
-import ReactiveStyle from "../reactivity/reactive-style";
-import VStyle from "./v-style";
-export default class BaseVStyle extends VStyle {
+import cssProps from "../css/css-props";
+export default class BaseVStyle {
     constructor() {
-        super(...arguments);
         this._isBase = false;
         this.props = [];
-        this.subscriptions = {};
-        this.renderedSubBuilders = [];
-    }
-    _render(target) {
-        this.target = target;
-        for (let i = 0; i < this.props.length; i++) {
-            let P = this.props[i];
-            this.renderAndSetPropValue(P.prop, P.value);
-        }
-    }
-    _unrender() {
-        for (let i = 0; i < this.renderedSubBuilders.length; i++) {
-            let sb = this.renderedSubBuilders[i];
-            sb._unrender();
-        }
-        this.renderedSubBuilders.length = 0;
-        for (let s in this.subscriptions) {
-            let P = this.subscriptions[s];
-            P._unsubscribe(Number(s));
-        }
-        this.subscriptions = {};
-        this.target = null;
-    }
-    renderAndSetPropValue(prop, value) {
-        if (value instanceof Binding) {
-            let id = value._subscribe(new ReactiveStyle(this, prop));
-            this.subscriptions[id] = value;
-            this.updateProp(prop, value._get());
-        }
-        else if (value instanceof VStyle) {
-            this.renderedSubBuilders.push(value);
-            value._render(this.target);
-        }
-        else {
-            this.updateProp(prop, value);
-        }
-    }
-    updateProp(prop, value) {
-        if (this.target) {
-            this.target.style[prop] = value;
-        }
     }
     setProp(propName, value) {
         if (this._isBase) {
@@ -54,60 +10,32 @@ export default class BaseVStyle extends VStyle {
             return newStyle.setProp(propName, value);
         }
         else {
-            if (value && value.call && value.apply) {
-                let builder;
-                switch (propName) {
-                    case "transform": {
-                        break;
-                    }
-                    case "filter":
-                    case "backdrop-filter": {
-                        break;
-                    }
-                    default: throw new Error(`${propName} does not have a builder.`);
-                }
-                value(builder);
-                value = builder;
-                if (this.target) {
-                    this.renderedSubBuilders.push(builder);
-                    builder._render(this.target);
-                }
-            }
-            else {
-                if (this.target) {
-                    let observerId = value.subscribeStyle(this, propName);
-                    this.subscriptions[observerId] = value;
-                    this.renderAndSetPropValue(propName, value);
-                }
-            }
             this.props.push({ prop: propName, value: value });
+            if (this.onUpdate)
+                this.onUpdate();
             return this;
         }
     }
+    _setOnUpdate(callback) {
+        this.onUpdate = callback;
+    }
+    variable(name, value) {
+        if (!name.startsWith("--"))
+            name = "--" + name;
+        return this.setProp(name, value);
+    }
+    v(name) {
+        if (!name.startsWith("--"))
+            name = "--" + name;
+        return `var(${name})`;
+    }
+    getProps() {
+        return this.props;
+    }
 }
-{
-    const _allProps = {
-        "color": "color|background-Color|border-Bottom-Color|border-Color|border-Left-Color|border-Right-Color|border-Top-Color|text-Decoration-Color|outline-Color|column-Rule-Color",
-        "length": "background-Size|block-Size|border-Bottom-Left-Radius|border-Bottom-Right-Radius|border-Bottom-Width|border-Image-Width|border-Left-Width|border-Radius|border-Right-Width|border-Top-Left-Radius|border-Top-Right-Radius|border-Top-Width|border-Width|bottom|gap|height|left|margin|margin-Bottom|margin-Left|margin-Right|margin-Top|max-Height|max-Width|min-Height|min-Width|padding|padding-Bottom|padding-Left|padding-Right|padding-Top|right|top|width|line-Height|flex-Basis|font-Size|text-Indent",
-        "url": "background-Image|border-Image|list-Style-Image|content|image-Orientation",
-        "transformation": "transform",
-        "filter": "filter|backdrop-Filter",
-        "misc": "all|appearance|aspect-Ratio|opacity|background|background-Attachment|background-Blend-Mode|background-Position|background-Repeat|background-Clip|background-Origin|border|border-Bottom|border-Bottom-Style|border-Image-Outset|border-Image-Repeat|border-Image-Slice|border-Image-Source|border-Left|border-Left-Style|border-Right|border-Right-Style|border-Style|border-Top|border-Top-Style|box-Decoration-Break|box-Shadow|clear|clip|display|float|overflow|box|overflow-X|overflow-Y|position|visibility|vertical-Align|z-Index|align-Content|align-Items|align-Self|flex|flex-Basis|flex-Direction|flex-Flow|flex-Grow|flex-Shrink|flex-Wrap|grid|grid-Area|grid-Auto-Columns|grid-auto-Rows|grid-Column|grid-Column-End|grid-Column-Gap|grid-Column-Start|grid-Gap|grid-Row|grid-Row-End|grid-Row-Gap|grid-Row-Start|grid-Template|grid-Template-Areas|grid-Template-Columns|grid-Template-Rows|justify-Content|order|hanging-Punctuation|hyphens|letter-Spacing|line-Break|overflow-Wrap|tab-Size|text-Align|text-Align-Last|text-Combine-Upright|text-Justify|text-Transform|white-Space|word-Break|word-Spacing|word-Wrap|text-Decoration|text-Decoration-Line|text-Decoration-Style|text-Shadow|text-Underline-Position|font|font-Family|font-Feature-Settings|font-Kerning|font-Language-Override|font-Size-Adjust|font-Stretch|font-Style|font-Synthesis|font-Variant|font-Variant-Alternates|font-Variant-Caps|font-Variant-East-Asian|font-Variant-Ligatures|font-Variant-Numeric|font-Variant-Position|font-Weight|direction|text-Orientation|text-Combine-Upright|unicode-Bidi|user-Select|writing-Mode|border-Collapse|border-Spacing|caption-Side|empty-Cells|table-Layout|counter-Increment|counter-Reset|list-Style|list-Style-Position|list-Style-Type|animation|animation-Delay|animation-Direction|animation-Duration|animation-Fill-Mode|animation-Iteration-Count|animation-Name|animation-Play-State|animation-Timing-Function|backface-Visibility|perspective2d|perspective-Origin|transform-Origin|transform-Style|transition|transition-Property|transition-Duration|transition-Timing-Function|transition-Delay|box-Sizing|cursor|ime-Mode|nav-Down|nav-Index|nav-Left|nav-Right|nav-Up|outline|outline-Offset|outline-Style|outline-Width|resize|text-Overflow|break-After|break-Before|break-Inside|column-Count|column-Fill|column-Gap|column-Rule|column-Rule-Style|column-Rule-Width|column-Span|column-Width|columns|widows|orphans|page-Break-After|page-Break-Before|page-Break-Inside|marks|quotes|image-Rendering|image-Resolution|object-Fit|object-Position|mask|mask-Type|mark|mark-After|mark-Before|phonemes|rest|rest-After|rest-Before|voice-Balance|voice-Duration|voice-Pitch|voice-Pitch-Range|voice-Rate|voice-Stress|voice-Volume|marquee-Direction|marquee-Play-Count|marquee-Speed|marquee-Style|pointer-Events",
+for (let key in cssProps) {
+    BaseVStyle.prototype[key] = function (value) {
+        return this.setProp(key, value);
     };
-    for (let k in _allProps) {
-        let str = _allProps[k];
-        let props = str.split("|");
-        let types = k.split("|");
-        for (let t in types) {
-            for (let i = 0; i < props.length; i++) {
-                let pName = props[i];
-                let cssName = pName.toLowerCase();
-                let jsName = pName.split("-").join("");
-                BaseVStyle.prototype[jsName] = function () {
-                    return this.setProp(cssName, ...arguments);
-                };
-            }
-        }
-    }
 }
 //# sourceMappingURL=base-v-style.js.map

package/build_module/v-style-nodes/base-v-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-v-style.js","sourceRoot":"","sources":["../../src/v-style-nodes/base-v-style.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-v-style.js","sourceRoot":"","sources":["../../src/v-style-nodes/base-v-style.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AAExC,MAAM,CAAC,OAAO,OAAO,UAAU;IAA/B;QAIkB,YAAO,GAAG,KAAK,CAAC;QACzB,UAAK,GAAwC,EAAE,CAAC;IA0CzD,CAAC;IAvCA,OAAO,CAAC,QAAgB,EAAE,KAAU;QACnC,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,QAAQ,GAAG,IAAI,UAAU,EAAE,CAAC;YAChC,OAAO,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;SACzC;aACI;YACJ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;YAClD,IAAI,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnC,OAAO,IAAI,CAAC;SACZ;IACF,CAAC;IAED,YAAY,CAAC,QAAoB;QAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1B,CAAC;IAOD,QAAQ,CAAC,IAAY,EAAE,KAAU;QAChC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;QAC/C,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC;IAOD,CAAC,CAAC,IAAY;QACb,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;QAC/C,OAAO,OAAO,IAAI,GAAG,CAAC;IACvB,CAAC;IAED,QAAQ;QACP,OAAO,IAAI,CAAC,KAAK,CAAC;IACnB,CAAC;CACD;AAGD,KAAK,IAAI,GAAG,IAAI,QAAQ,EAAE;IACzB,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,UAAU,KAAU;QAG/C,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;CACF"}

package/build_module/v-style-nodes/css-function-builder-v-style.d.ts

@@ -1,6 +1,5 @@
 import Binding from "../reactivity/binding";
 export default abstract class CssFunctionBuilderVStyle {
-    simpleValue: string;
     funcs: Array<{
         func: string;
         args: Array<{
@@ -9,8 +8,6 @@ export default abstract class CssFunctionBuilderVStyle {
         }>;
     }>;
     readonly propName: string;
-    subscriptions: Record<number, Binding>;
-    target: HTMLElement;
     constructor(propName: string);
     toString(): string;
     appendFunction(filter: string, args: any): this;

package/build_module/v-style-nodes/css-function-builder-v-style.js

@@ -1,19 +1,24 @@
 import Binding from "../reactivity/binding";
+import Watcher from "../reactivity/watcher";
 export default class CssFunctionBuilderVStyle {
     constructor(propName) {
         this.funcs = [];
-        this.subscriptions = {};
         this.propName = propName;
     }
     toString() {
         let result = "";
         for (let t of this.funcs) {
-            let argValues = t.args.map(arg => {
-                if (arg.v instanceof Binding) {
-                    return arg.f(arg.v._get());
+            let argValues = Array.from(t.args).map(arg => {
+                let v = arg.v !== undefined ? arg.v : arg;
+                let f = arg.f || ((val) => `${val}`);
+                if (v instanceof Binding) {
+                    return f(v._get());
+                }
+                else if (v instanceof Watcher) {
+                    return f(v.value);
                 }
                 else {
-                    return arg.f(arg.v).split(" ").join(", ");
+                    return f(v).toString().split(" ").join(", ");
                 }
             }).join(", ");
             result += `${t.func}(${argValues}) `;

package/build_module/v-style-nodes/css-function-builder-v-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-function-builder-v-style.js","sourceRoot":"","sources":["../../src/v-style-nodes/css-function-builder-v-style.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAI5C,MAAM,CAAC,OAAO,OAAgB,wBAAwB;IAWrD,YAAY,QAAgB;QAR5B,UAAK,GAGA,EAAE,CAAC;QAER,kBAAa,GAA4B,EAAE,CAAC;QAI3C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1B,CAAC;IAED,QAAQ;QACP,IAAI,MAAM,GAAG,EAAE,CAAC;QAGhB,KAAI,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,EAAC;YAEvB,IAAI,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBAChC,IAAG,GAAG,CAAC,CAAC,YAAY,OAAO,EAAC;oBAC3B,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC3B;qBACG;oBACH,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC1C;YACF,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAGd,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,SAAS,IAAI,CAAC;SACrC;QAED,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC;IA6ED,cAAc,CAAC,MAAc,EAAE,IAAI;QAClC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAC;IACb,CAAC;CAED"}
+{"version":3,"file":"css-function-builder-v-style.js","sourceRoot":"","sources":["../../src/v-style-nodes/css-function-builder-v-style.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAgB,wBAAwB;IAQrD,YAAY,QAAgB;QAN5B,UAAK,GAGA,EAAE,CAAC;QAIP,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1B,CAAC;IAED,QAAQ;QACP,IAAI,MAAM,GAAG,EAAE,CAAC;QAGhB,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE;YACzB,IAAI,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBAC5C,IAAI,CAAC,GAAI,GAAW,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC5D,IAAI,CAAC,GAAI,GAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;gBAE9C,IAAI,CAAC,YAAY,OAAO,EAAE;oBACzB,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;iBACnB;qBAAM,IAAI,CAAC,YAAY,OAAO,EAAE;oBAChC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;iBAClB;qBACI;oBACJ,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC7C;YACF,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAGd,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,SAAS,IAAI,CAAC;SACrC;QAED,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC;IAED,cAAc,CAAC,MAAc,EAAE,IAAI;QAClC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAC;IACb,CAAC;CAED"}

package/build_module/v-style-nodes/style-sheet-builder.d.ts

@@ -0,0 +1,9 @@
+import BaseVStyle from "./base-v-style";
+export default class StyleSheetBuilder {
+    private rules;
+    class(name: string, callback: (s: BaseVStyle) => void): this;
+    rule(selector: string, callback: (s: BaseVStyle) => void): this;
+    v(name: string): string;
+    toString(): string;
+    hasRules(): boolean;
+}