@node-projects/web-component-designer-visualization-addons 0.1.29 → 0.1.31

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: string, element: Element, root: HTMLElement): Promise<CSSStyleSheet>;
-    parseCssBinding(value: string, element: Element, root: HTMLElement): string;
+    parseCssBindings(sheet: string, element: Element, relativeSignalPath: string, root: HTMLElement): Promise<[stylesheet: CSSStyleSheet, unsub: (() => void)[]]>;
+    parseCssBinding(value: string, element: Element, relativeSignalPath: string, 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

@@ -392,25 +392,32 @@ export class BindingsHelper {
         return retVal;
     }
     static #cssBindingsVarId = 0;
-    async parseCssBindings(sheet, element, root) {
+    async parseCssBindings(sheet, element, relativeSignalPath, 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;
+                            const newValue = this.parseCssBinding(d.value, element, relativeSignalPath, 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);
+        return [cssFromString(newStyle), unsub];
     }
-    parseCssBinding(value, element, root) {
+    parseCssBinding(value, element, relativeSignalPath, root) {
         value = value.trim();
         let res = '';
         let tmp = '';
@@ -418,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) {
@@ -434,9 +442,10 @@ export class BindingsHelper {
                     if (binding.startsWith('{')) {
                         bnd = JSON.parse(binding);
                     }
-                    this.applyBinding(element, bnd, '', root);
+                    unsub.push(this.applyBinding(element, bnd, relativeSignalPath, root));
                     res += 'var(' + varName + ')';
                     inBind = false;
+                    binding = '';
                 }
                 else
                     binding += c;
@@ -466,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.29",
+  "version": "0.1.31",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",