feat: add view to rule and watchers for data vars

packages/core/src/css_composer/model/CssRule.ts

@@ -6,6 +6,8 @@ import { getMediaLength } from '../../code_manager/model/CssGenerator';
 import { isEmptyObj, hasWin } from '../../utils/mixins';
 import Selector, { SelectorProps } from '../../selector_manager/model/Selector';
 import EditorModel from '../../editor/model/Editor';
+import CssRuleView from '../view/CssRuleView';
+import DataVariableListenerManager from '../../data_sources/model/DataVariableListenerManager';
 
 /** @private */
 export interface CssRuleProperties {
@@ -92,6 +94,8 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
   config: CssRuleProperties;
   em?: EditorModel;
   opt: any;
+  view?: CssRuleView;
+  dataVariableListeners: Record<string, DataVariableListenerManager> = {};
 
   defaults() {
     return {
@@ -117,6 +121,7 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
     this.em = opt.em;
     this.ensureSelectors(null, null, {});
     this.on('change', this.__onChange);
+    super.setStyle(this.get('style'));
   }
 
   __onChange(m: CssRule, opts: any) {
@@ -360,4 +365,12 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
 
     return true;
   }
+
+  setView(cssRuleView: CssRuleView) {
+    super.setView(cssRuleView);
+  }
+
+  getView() {
+    return this.view;
+  }
 }

packages/core/src/css_composer/view/CssRulesView.ts

@@ -82,6 +82,8 @@ export default class CssRulesView extends View {
       rendered = view.render().el;
     }
 
+    model.setView(view);
+
     const clsName = this.className!;
     const mediaText = model.get('mediaText');
     const defaultBlockId = getBlockId(clsName);

packages/core/src/domain_abstract/model/StyleableModel.ts

@@ -7,6 +7,7 @@ import EditorModel from '../../editor/model/Editor';
 import StyleDataVariable from '../../data_sources/model/StyleDataVariable';
 import { DataVariableType } from '../../data_sources/model/DataVariable';
 import DataVariableListenerManager from '../../data_sources/model/DataVariableListenerManager';
+import CssRuleView from '../../css_composer/view/CssRuleView';
 
 export type StyleProps = Record<
   string,
@@ -35,6 +36,12 @@ export const getLastStyleValue = (value: string | string[]) => {
 export default class StyleableModel<T extends ObjectHash = any> extends Model<T> {
   em?: EditorModel;
   dataVariableListeners: Record<string, DataVariableListenerManager> = {};
+  view?: CssRuleView;
+
+  constructor(attributes: T, options: { em?: EditorModel } = {}) {
+    super(attributes, options);
+    this.em = options.em;
+  }
 
   /**
    * Parse style string to an object
@@ -153,6 +160,17 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
     style[prop] = value;
     this.setStyle(style, { noEvent: true });
     this.trigger(`change:style:${prop}`);
+    this.updateView();
+  }
+
+  setView(view: CssRuleView) {
+    this.view = view;
+  }
+
+  updateView() {
+    if (this.view) {
+      this.view.render();
+    }
   }
 
   /**

packages/core/test/specs/data_sources/model/StyleDataVariable.ts

@@ -183,7 +183,9 @@ describe('StyleDataVariable', () => {
         content: 'Hello World',
       })[0];
 
-      const [rule] = em.getEditor().CssComposer.addCollection([
+      const cssComposer = em.getEditor().CssComposer;
+
+      const [rule] = cssComposer.addCollection([
         {
           selectors: [],
           selectorsAdd: selector,
@@ -198,14 +200,19 @@ describe('StyleDataVariable', () => {
         },
       ]);
 
+      cssComposer.render();
+      const view = rule.getView();
+
       expect(rule.getStyle()).toHaveProperty('color', 'red');
       expect(em.getEditor().getCss()).toContain(`${selector}{color:red;}`);
+      expect(view?.el.innerHTML).toContain(`h1{color:red;}`);
 
       const ds = dsm.get(dsId);
       ds.getRecord(drId)?.set({ value: 'blue' });
 
       expect(rule.getStyle()).toHaveProperty('color', 'blue');
       expect(em.getEditor().getCss()).toContain(`${selector}{color:blue;}`);
+      expect(view?.el.innerHTML).toContain(`h1{color:blue;}`);
     });
   });
 });