feat: reuse DataVariableListenerManager on ComponentDataVar

src/data_sources/model/ComponentDataVariable.ts

@@ -14,9 +14,13 @@ export default class ComponentDataVariable extends Component {
     };
   }
 
-  getInnerHTML(opts: ToHTMLOptions) {
+  getDataValue() {
     const { path, defaultValue } = this.attributes;
-    const val = this.em.DataSources.getValue(path, defaultValue);
+    return this.em.DataSources.getValue(path, defaultValue);
+  }
+
+  getInnerHTML(opts: ToHTMLOptions) {
+    const val = this.getDataValue();
 
     return val;
   }

src/data_sources/model/DataVariableListenerManager.ts

@@ -3,19 +3,21 @@ import { stringToPath } from '../../utils/mixins';
 import { Model } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 import DataVariable from './DataVariable';
+import ComponentView from '../../dom_components/view/ComponentView';
+import ComponentDataVariable from './ComponentDataVariable';
 
 export interface DataVariableListenerManagerOptions {
-  model: Model;
+  model: Model | ComponentView;
   em: EditorModel;
-  dataVariable: DataVariable;
+  dataVariable: DataVariable | ComponentDataVariable;
   updateValueFromDataVariable: (value: any) => void;
 }
 
 export default class DataVariableListenerManager {
   private dataListeners: DataVariableListener[] = [];
   private em: EditorModel;
-  private model: Model;
-  private dataVariable: DataVariable;
+  private model: Model | ComponentView;
+  private dataVariable: DataVariable | ComponentDataVariable;
   private updateValueFromDataVariable: (value: any) => void;
 
   constructor(options: DataVariableListenerManagerOptions) {

src/data_sources/view/ComponentDataVariableView.ts

@@ -1,38 +1,18 @@
-import { DataSourcesEvents, DataVariableListener } from '../../data_sources/types';
 import ComponentView from '../../dom_components/view/ComponentView';
-import { stringToPath } from '../../utils/mixins';
 import ComponentDataVariable from '../model/ComponentDataVariable';
+import DataVariableListenerManager from '../model/DataVariableListenerManager';
 
 export default class ComponentDataVariableView extends ComponentView<ComponentDataVariable> {
-  dataListeners: DataVariableListener[] = [];
+  dataVariableListener?: DataVariableListenerManager;
 
   initialize(opt = {}) {
     super.initialize(opt);
-    this.listenToData();
-    this.listenTo(this.model, 'change:path', this.listenToData);
-  }
-
-  listenToData() {
-    const { model, em } = this;
-    const { path } = model.attributes;
-    const normPath = stringToPath(path || '').join('.');
-    const { DataSources } = em;
-    const [ds, dr] = DataSources.fromPath(path);
-    const dataListeners: DataVariableListener[] = [];
-    const prevListeners = this.dataListeners || [];
-
-    prevListeners.forEach((ls) => this.stopListening(ls.obj, ls.event, this.postRender));
-
-    ds && dataListeners.push({ obj: ds.records, event: 'add remove reset' });
-    dr && dataListeners.push({ obj: dr, event: 'change' });
-    dataListeners.push(
-      { obj: model, event: 'change:path change:value' },
-      { obj: DataSources.all, event: 'add remove reset' },
-      { obj: em, event: `${DataSourcesEvents.path}:${normPath}` },
-    );
-
-    dataListeners.forEach((ls) => this.listenTo(ls.obj, ls.event, this.postRender));
-    this.dataListeners = dataListeners;
+    this.dataVariableListener = new DataVariableListenerManager({
+      model: this,
+      em: this.em!,
+      dataVariable: this.model,
+      updateValueFromDataVariable: () => this.postRender(),
+    });
   }
 
   postRender() {