refactor: *

src/data_sources/model/StyleDataVariable.ts

@@ -1,14 +1,38 @@
-import { Model, ObjectAny } from '../../common';
+import { Model } from '../../common';
-export const type = 'data-variable-css';
+import EditorModel from '../../editor/model/Editor';
+import { get, stringToPath } from '../../utils/mixins';
 
-interface StyleDataVariableProps extends ObjectAny {
+export default class StyleDataVariable extends Model {
-  type: string;
+  em?: EditorModel;
-  path: string;
+
-  value: string;
+  defaults() {
-}
+    return {
+      type: 'data-variable-css',
+      value: '',
+      path: '',
+    };
+  }
+
+  initialize(attrs: any, options: any) {
+    super.initialize(attrs, options);
+    this.em = options.em;
+    this.listenToDataSource();
+
+    return this;
+  }
+
+  listenToDataSource() {
+    const { path } = this.attributes;
+    const resolvedPath = stringToPath(path).join('.');
+
+    if (this.em) {
+      this.listenTo(this.em.DataSources, `change:${resolvedPath}`, this.onDataSourceChange);
+    }
+  }
 
-export default class StyleDataVariable<T extends StyleDataVariableProps = StyleDataVariableProps> extends Model<T> {
+  onDataSourceChange(model: any) {
-  constructor(props: T, opts = {}) {
+    const { path } = this.attributes;
-    super(props, opts);
+    const newValue = get(model, stringToPath(path).join('.'), '');
+    this.set({ value: newValue });
   }
 }

src/domain_abstract/model/StyleableModel.ts

@@ -2,7 +2,7 @@ import { isArray, isString, keys } from 'underscore';
 import { Model, ObjectAny, ObjectHash, SetOptions } from '../../common';
 import ParserHtml from '../../parser/model/ParserHtml';
 import Selectors from '../../selector_manager/model/Selectors';
-import { shallowDiff, get, stringToPath } from '../../utils/mixins';
+import { shallowDiff, stringToPath } from '../../utils/mixins';
 import EditorModel from '../../editor/model/Editor';
 import StyleDataVariable from '../../data_sources/model/StyleDataVariable';
 import { DataSourcesEvents, DataVariableListener } from '../../data_sources/types';
@@ -91,54 +91,46 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
 
     const propNew = { ...prop };
     const newStyle = { ...propNew };
-    // Remove empty style properties
+
-    keys(newStyle).forEach(prop => {
+    keys(newStyle).forEach(key => {
-      if (newStyle[prop] === '') {
+      // Remove empty style properties
-        delete newStyle[prop];
+      if (newStyle[key] === '') {
+        delete newStyle[key];
+
+        return;
       }
-    });
 
-    this.convertToStyleDataVariable(newStyle);
+      const styleValue = newStyle[key];
+      if (typeof styleValue === 'object' && styleValue.type === 'data-variable-css') {
+        newStyle[key] = new StyleDataVariable(styleValue, { em: this.em });
+      }
+    });
 
     this.set('style', newStyle, opts as any);
+
     const diff = shallowDiff(propOrig, newStyle);
     // Delete the property used for partial updates
     delete diff.__p;
 
     keys(diff).forEach(pr => {
-      // @ts-ignore
       const { em } = this;
-      if (opts.noEvent) return;
+      if (opts.noEvent) {
+        return;
+      }
+
       this.trigger(`change:style:${pr}`);
       if (em) {
         em.trigger('styleable:change', this, pr, opts);
         em.trigger(`styleable:change:${pr}`, this, pr, opts);
-      }
-    });
 
-    this.processDataVariableStyles(newStyle);
+        const styleValue = newStyle[pr];
-
+        if (styleValue instanceof StyleDataVariable) {
-    return newStyle;
+          this.listenToDataVariable(styleValue, pr);
-  }
+        }
-
-  convertToStyleDataVariable(style: StyleProps) {
-    keys(style).forEach(key => {
-      const styleValue = style[key];
-      // @ts-ignore
-      if (typeof styleValue === 'object' && styleValue.type === 'data-variable-css') {
-        // @ts-ignore
-        style[key] = new StyleDataVariable(styleValue, { em: this.em });
       }
     });
-  }
 
-  processDataVariableStyles(style: StyleProps) {
+    return newStyle;
-    keys(style).forEach(key => {
-      const styleValue = style[key];
-      if (styleValue instanceof StyleDataVariable) {
-        this.listenToDataVariable(styleValue, key);
-      }
-    });
   }
 
   listenToDataVariable(dataVar: StyleDataVariable, styleProp: string) {
@@ -155,6 +147,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
 
     dataListeners.forEach(ls =>
       this.listenTo(ls.obj, ls.event, () => {
+        console.log('data variable change', ls.obj, ls.event);
         const newValue = em?.DataSources.getValue(normPath, dataVar.get('value'));
         this.updateStyleProp(styleProp, newValue);
       })

test/specs/data_sources/index.ts

@@ -34,7 +34,7 @@ describe('DataSourceManager', () => {
     expect(dsm).toBeTruthy();
   });
 
-  describe.only('Style', () => {
+  describe('Style', () => {
     let fixtures: HTMLElement;
     let cmpRoot: ComponentWrapper;
 
@@ -66,16 +66,15 @@ describe('DataSourceManager', () => {
         content: 'Hello World',
         style: {
           color: {
-            type: 'data-variable',
+            type: 'data-variable-css',
             value: 'black',
             path: 'colors-data.id1.color',
           },
         },
       })[0];
 
-      const el = cmp.getEl();
+      const style = cmp.getStyle();
-      console.log('el', el?.style);
+      expect(style).toHaveProperty('color', 'red');
-      expect(el?.style.color).toBe('red');
     });
   });