@node-projects/web-component-designer-visualization-addons 0.1.28 → 0.1.30

package/README.md

@@ -15,5 +15,6 @@ It is used for example by the iobroker.webui.
 
 - long
 - blockly
+- @adobe/css-tools ( only if you use Bindingshelper.parseCssBindings() )
 
 ## Usage

package/dist/helpers/BindingsHelper.d.ts

@@ -42,8 +42,8 @@ export declare class BindingsHelper {
     getBindingAttributeName(element: Element, propertyName: string, propertyTarget: BindingTarget): string;
     getBindings(element: Element): Generator<namedBinding, void, unknown>;
     applyAllBindings(rootElement: ParentNode, relativeSignalPath: string, root: HTMLElement): (() => void)[];
-    parseCssBindings(sheet: CSSStyleSheet, element: Element, root: HTMLElement): void;
-    parseCssBinding(value: string, element: Element, root: HTMLElement): string;
+    parseCssBindings(sheet: string, element: Element, root: HTMLElement): Promise<[stylesheet: CSSStyleSheet, unsub: (() => void)[]]>;
+    parseCssBinding(value: string, element: Element, root: HTMLElement): [name: string, unsub: (() => void)[]];
     applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement): () => void;
     private addTwoWayBinding;
     private static parseValueWithType;

package/dist/helpers/BindingsHelper.js

@@ -1,4 +1,4 @@
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { TypedEvent, cssFromString } from "@node-projects/base-custom-webcomponent";
 import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
 import { PropertiesHelper } from "@node-projects/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
 //;,[ are not allowed in bindings, so they could be used for a short form...
@@ -392,18 +392,30 @@ export class BindingsHelper {
         return retVal;
     }
     static #cssBindingsVarId = 0;
-    parseCssBindings(sheet, element, root) {
-        for (let r of sheet.cssRules) {
-            if (r instanceof CSSStyleRule) {
-                for (const s of r.style) {
-                    const v = r.style.getPropertyValue(s);
-                    if (v.includes(bindingPrefixInsideCss)) {
-                        const newValue = this.parseCssBinding(v, element, root);
-                        r.style.setProperty(s, newValue);
+    async parseCssBindings(sheet, element, root) {
+        const parser = (await import("@adobe/css-tools"));
+        const ast = parser.parse(sheet);
+        let unsub;
+        for (let r of ast.stylesheet.rules) {
+            if (r.type === parser.CssTypes.rule) {
+                for (const d of r.declarations) {
+                    if (d.type === parser.CssTypes.declaration) {
+                        if (d.value.includes(bindingPrefixInsideCss)) {
+                            const newValue = this.parseCssBinding(d.value, element, root);
+                            d.value = newValue[0];
+                            if (unsub) {
+                                unsub.push(...newValue[1]);
+                            }
+                            else {
+                                unsub = newValue[1];
+                            }
+                        }
                     }
                 }
             }
         }
+        const newStyle = parser.stringify(ast, { indent: '', compress: true });
+        return [cssFromString(newStyle), unsub];
     }
     parseCssBinding(value, element, root) {
         value = value.trim();
@@ -413,6 +425,7 @@ export class BindingsHelper {
         let binding = '';
         let escape = false;
         let quote = null;
+        let unsub = [];
         for (let n = 0; n < value.length; n++) {
             const c = value[n];
             if (inBind) {
@@ -429,9 +442,10 @@ export class BindingsHelper {
                     if (binding.startsWith('{')) {
                         bnd = JSON.parse(binding);
                     }
-                    this.applyBinding(element, bnd, '', root);
+                    unsub.push(this.applyBinding(element, bnd, '', root));
                     res += 'var(' + varName + ')';
                     inBind = false;
+                    binding = '';
                 }
                 else
                     binding += c;
@@ -461,7 +475,7 @@ export class BindingsHelper {
                 tmp += c;
             }
         }
-        return res + tmp;
+        return [res + tmp, unsub];
     }
     applyBinding(element, binding, relativeSignalPath, root) {
         let unsubscribeList = [];

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "web-component-designer addon for visualizations",
   "name": "@node-projects/web-component-designer-visualization-addons",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",
@@ -13,15 +13,16 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@adobe/css-tools": "^4.3.3",
+    "@blockly/zoom-to-fit": "^5.0.11",
     "@node-projects/base-custom-webcomponent": ">=0.19.0",
-    "@node-projects/web-component-designer": ">=0.1.1",
-    "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.12",
-    "@node-projects/web-component-designer-codeview-monaco": ">=0.1.18",
     "@node-projects/propertygrid.webcomponent": ">=1.0.2",
     "@node-projects/splitview.webcomponent": ">=1.0.1",
-    "@blockly/zoom-to-fit": "^5.0.11",
+    "@node-projects/web-component-designer": ">=0.1.1",
+    "@node-projects/web-component-designer-codeview-monaco": ">=0.1.18",
+    "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.12",
     "blockly": "^10.4.2",
-    "long": "^5.2.3" 
+    "long": "^5.2.3"
   },
   "repository": {
     "type": "git",