Update data variable listener

src/abstract/Module.ts

@@ -125,7 +125,7 @@ export abstract class ItemManagerModule<
   TCollection extends Collection = Collection
 > extends Module<TConf> {
   cls: any[] = [];
-  protected all: TCollection;
+  all: TCollection;
   view?: View;
 
   constructor(

src/dom_components/view/ComponentDataVariableView.ts

@@ -13,13 +13,16 @@ export default class ComponentDataVariableView extends ComponentView<ComponentDa
     const { model, em } = this;
     const { path } = model.attributes;
     const normPath = stringToPath(path || '').join('.');
-    const [ds, dr] = em.DataSources.fromPath(path);
+    const { DataSources } = em;
+    const [ds, dr] = DataSources.fromPath(path);
 
     if (ds) {
+      this.listenTo(ds.records, 'add remove reset', this.postRender);
       this.listenTo(ds.records, 'add remove reset', this.postRender);
       dr && this.listenTo(dr, 'change', this.postRender);
     }
 
+    this.listenTo(DataSources.all, 'add remove reset', this.postRender);
     this.listenTo(em, `${DataSourcesEvents.path}:${normPath}`, this.postRender);
   }
 

test/specs/dataSources/index.ts

@@ -1,6 +1,6 @@
 import Editor from '../../../src/editor/model/Editor';
 import DataSourceManager from '../../../src/dataSources';
-import { DataSourceProps } from '../../../src/dataSources/types';
+import { DataSourceProps, DataSourcesEvents } from '../../../src/dataSources/types';
 import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper';
 
 describe('DataSourceManager', () => {
@@ -94,13 +94,24 @@ describe('DataSourceManager', () => {
         value: 'default',
         path: 'ds1[id4]name',
       })[0];
+      const eventFn = jest.fn();
+      em.on(`${DataSourcesEvents.path}:ds1.id4.name`, eventFn);
       const newRecord = ds.addRecord({ id: 'id4', name: 'Name4' });
       expect(cmpVar.getEl()?.innerHTML).toBe('Name4');
       newRecord.set({ name: 'up' });
       expect(cmpVar.getEl()?.innerHTML).toBe('up');
+      expect(eventFn).toBeCalledTimes(1);
     });
 
-    test('component is properly updating on data source add', () => {});
+    test('component is properly updating on data source add', () => {
+      const cmpVar = cmpRoot.append({
+        type: 'data-variable',
+        value: 'default',
+        path: 'ds1.id1.name',
+      })[0];
+      const ds = dsm.add(dsTest);
+      expect(cmpVar.getEl()?.innerHTML).toBe('Name1');
+    });
 
     test('component is properly updating on data source reset', () => {});
 
@@ -109,5 +120,7 @@ describe('DataSourceManager', () => {
     test('component is properly updating on record remove', () => {});
 
     test('component is properly updating on record reset', () => {});
+
+    test('component is properly updating on its prop changes', () => {});
   });
 });