feat: data watchers

src/data_sources/index.ts

@@ -6,6 +6,7 @@ import DataRecord from './model/DataRecord';
 import DataSource from './model/DataSource';
 import DataSources from './model/DataSources';
 import { DataSourceProps, DataSourcesEvents } from './types';
+import { Events } from 'backbone';
 
 export default class DataSourceManager extends ItemManagerModule<ModuleConfig, DataSources> {
   storageKey = '';
@@ -14,6 +15,7 @@ export default class DataSourceManager extends ItemManagerModule<ModuleConfig, D
 
   constructor(em: EditorModel) {
     super(em, 'DataSources', new DataSources([], em), DataSourcesEvents);
+    Object.assign(this, Events); // Mixin Backbone.Events
   }
 
   /**

src/domain_abstract/model/StyleableModel.ts

@@ -5,13 +5,14 @@ import Selectors from '../../selector_manager/model/Selectors';
 import { shallowDiff, get, stringToPath } from '../../utils/mixins';
 import EditorModel from '../../editor/model/Editor';
 import StyleDataVariable from '../../data_sources/model/StyleDataVariable';
+import { DataSourcesEvents, DataVariableListener } from '../../data_sources/types';
 
 export type StyleProps = Record<
   string,
   | string
   | string[]
   | {
-      type: 'data-variable';
+      type: 'data-variable-css';
       value: string;
       path: string;
     }
@@ -32,6 +33,7 @@ export const getLastStyleValue = (value: string | string[]) => {
 
 export default class StyleableModel<T extends ObjectHash = any> extends Model<T> {
   em?: EditorModel;
+  dataListeners: DataVariableListener[] = [];
 
   /**
    * Forward style string to `parseStyle` to be parse to an object
@@ -123,7 +125,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
     keys(style).forEach(key => {
       const styleValue = style[key];
       // @ts-ignore
-      if (typeof styleValue === 'object' && styleValue.type === 'data-variable') {
+      if (typeof styleValue === 'object' && styleValue.type === 'data-variable-css') {
         // @ts-ignore
         style[key] = new StyleDataVariable(styleValue, { em: this.em });
       }
@@ -133,26 +135,37 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
   processDataVariableStyles(style: StyleProps) {
     keys(style).forEach(key => {
       const styleValue = style[key];
-      // @ts-ignore
       if (styleValue instanceof StyleDataVariable) {
-        // @ts-ignore
         this.listenToDataVariable(styleValue, key);
       }
     });
   }
 
   listenToDataVariable(dataVar: StyleDataVariable, styleProp: string) {
-    this.listenTo(dataVar, 'change:value', (model: any) => {
-      const newValue = model.get('value');
-      this.updateStyleProp(styleProp, newValue);
-    });
+    const { em } = this;
+    const { path } = dataVar.attributes;
+    const normPath = stringToPath(path || '').join('.');
+    const dataListeners: DataVariableListener[] = [];
+    const prevListeners = this.dataListeners || [];
+
+    prevListeners.forEach(ls => this.stopListening(ls.obj, ls.event, this.updateStyleProp));
+
+    dataListeners.push({ obj: dataVar, event: 'change:value' });
+    dataListeners.push({ obj: em, event: `${DataSourcesEvents.path}:${normPath}` });
+
+    dataListeners.forEach(ls =>
+      this.listenTo(ls.obj, ls.event, () => {
+        const newValue = em?.DataSources.getValue(normPath, dataVar.get('value'));
+        this.updateStyleProp(styleProp, newValue);
+      })
+    );
+    this.dataListeners = dataListeners;
   }
 
   updateStyleProp(prop: string, value: string) {
     const style = this.getStyle();
     style[prop] = value;
-    // @ts-ignore
-    this.set('style', style, { noEvent: true });
+    this.setStyle(style, { noEvent: true });
     this.trigger(`change:style:${prop}`);
   }
 
@@ -160,11 +173,8 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
     const resolvedStyle = { ...style };
     keys(resolvedStyle).forEach(key => {
       const styleValue = resolvedStyle[key];
-      // @ts-ignore
       if (styleValue instanceof StyleDataVariable) {
-        // @ts-ignore
         const resolvedValue = this.em?.DataSources.getValue(styleValue.get('path'), styleValue.get('value'));
-        // @ts-ignore
         resolvedStyle[key] = resolvedValue || styleValue.get('value');
       }
     });

src/style_manager/model/PropertyComposite.ts

@@ -277,7 +277,7 @@ export default class PropertyComposite<T extends Record<string, any> = PropertyC
     const result = this.getStyleFromProps()[this.getName()] || '';
 
     if (result && typeof result !== 'string' && 'type' in result) {
-      if (result.type === 'data-variable') {
+      if (result.type === 'data-variable-css') {
         console.log('Datasources __getFullValue');
       }
     }
@@ -309,7 +309,7 @@ export default class PropertyComposite<T extends Record<string, any> = PropertyC
     const value = style[name];
 
     if (value && typeof value !== 'string' && 'type' in value) {
-      if (value.type === 'data-variable') {
+      if (value.type === 'data-variable-css') {
         console.log('Datasources __splitStyleName');
       }
     }
@@ -357,7 +357,7 @@ export default class PropertyComposite<T extends Record<string, any> = PropertyC
       const value = style[name];
 
       if (value && typeof value !== 'string' && 'type' in value) {
-        if (value.type === 'data-variable') {
+        if (value.type === 'data-variable-css') {
           console.log('Datasources __getPropsFromStyle');
         }
       }

test/specs/data_sources/index.ts

@@ -53,11 +53,12 @@ describe('DataSourceManager', () => {
       fixtures.appendChild(wrapperEl.el);
     });
 
-    test('todo', () => {
+    test('component initializes with data-variable style', () => {
       const styleDataSource: DataSourceProps = {
         id: 'colors-data',
         records: [{ id: 'id1', color: 'red' }],
       };
+      dsm.add(styleDataSource);
 
       const cmp = cmpRoot.append({
         tagName: 'h1',
@@ -66,11 +67,15 @@ describe('DataSourceManager', () => {
         style: {
           color: {
             type: 'data-variable',
-            default: 'black',
+            value: 'black',
             path: 'colors-data.id1.color',
           },
         },
       })[0];
+
+      const el = cmp.getEl();
+      console.log('el', el?.style);
+      expect(el?.style.color).toBe('red');
     });
   });