Refactor dynamic component watcher

packages/core/src/dom_components/model/Component.ts

@@ -274,16 +274,16 @@ export default class Component extends StyleableModel<ComponentProperties> {
         [keyCollectionsStateMap]: props[keyCollectionsStateMap],
       }));
     }
+    const componentDVListener = new ComponentDynamicValueWatcher(undefined, {
+      em: opt.em,
+      collectionsStateMap: props[keyCollectionsStateMap],
+    });
     super(props, {
       ...opt,
       // @ts-ignore
-      [keyCollectionsStateMap]: props[keyCollectionsStateMap],
-    });
-    this.componentDVListener = new ComponentDynamicValueWatcher(this, {
-      em: opt.em,
-      collectionsStateMap: props[keyCollectionsStateMap],
+      componentDVListener,
     });
-    this.componentDVListener.addProps(props);
+    this.componentDVListener = componentDVListener;
 
     bindAll(this, '__upSymbProps', '__upSymbCls', '__upSymbComps');
     const em = opt.em;
@@ -372,14 +372,12 @@ export default class Component extends StyleableModel<ComponentProperties> {
     }
 
     // @ts-ignore
-    const em = this.em || options.em;
-    // @ts-ignore
-    const collectionsStateMap = this.get(keyCollectionsStateMap) || options[keyCollectionsStateMap];
-    const evaluatedAttributes = DynamicValueWatcher.getStaticValues(attributes, { em, collectionsStateMap });
+    const componentDVListener = this.componentDVListener || options.componentDVListener;
+    const evaluatedAttributes = componentDVListener.getStaticValues(attributes);
 
     const shouldSkipWatcherUpdates = options.skipWatcherUpdates || options.fromDataSource;
     if (!shouldSkipWatcherUpdates) {
-      this.componentDVListener?.addProps(attributes);
+      componentDVListener?.addProps(attributes);
     }
 
     return super.set(evaluatedAttributes, options);
@@ -704,13 +702,11 @@ export default class Component extends StyleableModel<ComponentProperties> {
    */
   setAttributes(attrs: ObjectAny, opts: SetAttrOptions = { skipWatcherUpdates: false, fromDataSource: false }) {
     // @ts-ignore
-    const em = this.em || opts.em;
-    // @ts-ignore
-    const collectionsStateMap = this.get(keyCollectionsStateMap) || opts[keyCollectionsStateMap];
-    const evaluatedAttributes = DynamicValueWatcher.getStaticValues(attrs, { em, collectionsStateMap });
+    const componentDVListener = this.componentDVListener || opts.componentDVListener;
+    const evaluatedAttributes = componentDVListener.getStaticValues(attrs);
     const shouldSkipWatcherUpdates = opts.skipWatcherUpdates || opts.fromDataSource;
     if (!shouldSkipWatcherUpdates) {
-      this.componentDVListener.setAttributes(attrs);
+      componentDVListener.setAttributes(attrs);
     }
     this.set('attributes', { ...evaluatedAttributes }, opts);
 

packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts

@@ -9,28 +9,42 @@ export class ComponentDynamicValueWatcher {
   private attributeWatcher: DynamicValueWatcher;
 
   constructor(
-    private component: Component,
-    options: {
+    component: Component | undefined,
+    private options: {
       em: EditorModel;
       collectionsStateMap: CollectionsStateMap;
     },
   ) {
-    this.propertyWatcher = new DynamicValueWatcher(this.createPropertyUpdater(), options);
-    this.attributeWatcher = new DynamicValueWatcher(this.createAttributeUpdater(), options);
+    this.propertyWatcher = new DynamicValueWatcher(component, this.createPropertyUpdater(), options);
+    this.attributeWatcher = new DynamicValueWatcher(component, this.createAttributeUpdater(), options);
   }
-
   private createPropertyUpdater() {
-    return (key: string, value: any) => {
-      this.component.set(key, value, { fromDataSource: true, avoidStore: true });
+    return (component: Component | undefined, key: string, value: any) => {
+      if (!component) return;
+      component.set(key, value, { fromDataSource: true, avoidStore: true });
     };
   }
 
   private createAttributeUpdater() {
-    return (key: string, value: any) => {
-      this.component.addAttributes({ [key]: value }, { fromDataSource: true, avoidStore: true });
+    return (component: Component | undefined, key: string, value: any) => {
+      if (!component) return;
+      component.addAttributes({ [key]: value }, { fromDataSource: true, avoidStore: true });
     };
   }
 
+  bindComponent(component: Component) {
+    this.propertyWatcher.bindComponent(component);
+    this.attributeWatcher.bindComponent(component);
+  }
+
+  getStaticValues(values: ObjectAny | undefined): ObjectAny {
+    return this.attributeWatcher.getStaticValues(values);
+  }
+
+  areStaticValues(values: ObjectAny | undefined) {
+    return this.attributeWatcher.areStaticValues(values);
+  }
+
   addProps(props: ObjectAny) {
     this.propertyWatcher.addDynamicValues(props);
   }

packages/core/src/dom_components/model/DynamicValueWatcher.ts

@@ -4,29 +4,20 @@ import DynamicVariableListenerManager from '../../data_sources/model/DataVariabl
 import { evaluateDynamicValueDefinition, isDynamicValueDefinition } from '../../data_sources/model/utils';
 import { DynamicValue } from '../../data_sources/types';
 import EditorModel from '../../editor/model/Editor';
+import Component from './Component';
 
 export class DynamicValueWatcher {
   private dynamicVariableListeners: { [key: string]: DynamicVariableListenerManager } = {};
-  private em: EditorModel;
-  private collectionsStateMap: CollectionsStateMap | undefined;
   constructor(
-    private updateFn: (key: string, value: any) => void,
-    options: {
+    private component: Component | undefined,
+    private updateFn: (component: Component | undefined, key: string, value: any) => void,
+    private options: {
       em: EditorModel;
       collectionsStateMap?: CollectionsStateMap;
     },
-  ) {
-    this.em = options.em;
-    this.collectionsStateMap = options.collectionsStateMap;
-  }
+  ) {}
 
-  static getStaticValues(
-    values: ObjectAny | undefined,
-    options: {
-      em: EditorModel;
-      collectionsStateMap?: CollectionsStateMap;
-    },
-  ): ObjectAny {
+  getStaticValues(values: ObjectAny | undefined): ObjectAny {
     if (!values) return {};
     const evaluatedValues: ObjectAny = { ...values };
     const propsKeys = Object.keys(values);
@@ -35,26 +26,31 @@ export class DynamicValueWatcher {
       const valueDefinition = values[key];
       if (!isDynamicValueDefinition(valueDefinition)) continue;
 
-      const { value } = evaluateDynamicValueDefinition(valueDefinition, options);
+      const { value } = evaluateDynamicValueDefinition(valueDefinition, this.options);
       evaluatedValues[key] = value;
     }
 
     return evaluatedValues;
   }
 
-  static areStaticValues(values: ObjectAny | undefined) {
+  areStaticValues(values: ObjectAny | undefined) {
     if (!values) return true;
     return Object.keys(values).every((key) => {
       return !isDynamicValueDefinition(values[key]);
     });
   }
 
+  bindComponent(component: Component) {
+    this.component = component;
+  }
+
   setDynamicValues(values: ObjectAny | undefined) {
     this.removeListeners();
     return this.addDynamicValues(values);
   }
 
   addDynamicValues(values: ObjectAny | undefined) {
+    const em = this.options.em;
     if (!values) return {};
     this.removeListeners(Object.keys(values));
     const dynamicProps = this.getDynamicValues(values);
@@ -62,10 +58,10 @@ export class DynamicValueWatcher {
     for (let index = 0; index < propsKeys.length; index++) {
       const key = propsKeys[index];
       this.dynamicVariableListeners[key] = new DynamicVariableListenerManager({
-        em: this.em,
+        em: em,
         dataVariable: dynamicProps[key],
         updateValueFromDataVariable: (value: any) => {
-          this.updateFn.bind(this)(key, value);
+          this.updateFn.bind(this)(this.component, key, value);
         },
       });
     }
@@ -83,10 +79,7 @@ export class DynamicValueWatcher {
       if (!isDynamicValueDefinition(values[key])) {
         continue;
       }
-      const { variable } = evaluateDynamicValueDefinition(values[key], {
-        em: this.em,
-        collectionsStateMap: this.collectionsStateMap,
-      });
+      const { variable } = evaluateDynamicValueDefinition(values[key], this.options);
       dynamicValues[key] = variable;
     }