Improve data variable listeners

src/dataSources/index.ts

@@ -42,12 +42,17 @@ export default class DataSourceManager extends ItemManagerModule<ModuleConfig, D
   }
 
   fromPath(path: string) {
-    const result: [DataSource?, DataRecord?] = [];
-    const [dsId, drId] = stringToPath(path || '');
+    const result: [DataSource?, DataRecord?, string?] = [];
+    const [dsId, drId, ...resPath] = stringToPath(path || '');
     const dataSource = this.get(dsId);
     const dataRecord = dataSource?.records.get(drId);
     dataSource && result.push(dataSource);
-    dataRecord && result.push(dataRecord);
+
+    if (dataRecord) {
+      result.push(dataRecord);
+      resPath.length && result.push(resPath.join('.'));
+    }
+
     return result;
   }
 }

src/dom_components/view/ComponentDataVariableView.ts

@@ -1,13 +1,26 @@
 import { DataSourcesEvents } from '../../dataSources/types';
+import { stringToPath } from '../../utils/mixins';
 import ComponentDataVariable from '../model/ComponentDataVariable';
 import ComponentView from './ComponentView';
 
 export default class ComponentDataVariableView extends ComponentView<ComponentDataVariable> {
   initialize(opt = {}) {
     super.initialize(opt);
+    this.listenToData();
+  }
+
+  listenToData() {
     const { model, em } = this;
     const { path } = model.attributes;
-    this.listenTo(em, `${DataSourcesEvents.path}:${path}`, () => this.postRender());
+    const normPath = stringToPath(path || '').join('.');
+    const [ds, dr] = em.DataSources.fromPath(path);
+
+    if (ds) {
+      this.listenTo(ds.records, 'add remove reset', this.postRender);
+      dr && this.listenTo(dr, 'change', this.postRender);
+    }
+
+    this.listenTo(em, `${DataSourcesEvents.path}:${normPath}`, this.postRender);
   }
 
   postRender() {

test/specs/dataSources/index.ts

@@ -92,12 +92,18 @@ describe('DataSourceManager', () => {
       const cmpVar = cmpRoot.append({
         type: 'data-variable',
         value: 'default',
-        path: 'ds1.id4.name',
+        path: 'ds1[id4]name',
       })[0];
-      ds.addRecord({ id: 'id4', name: 'Name4' });
+      const newRecord = ds.addRecord({ id: 'id4', name: 'Name4' });
       expect(cmpVar.getEl()?.innerHTML).toBe('Name4');
+      newRecord.set({ name: 'up' });
+      expect(cmpVar.getEl()?.innerHTML).toBe('up');
     });
 
+    test('component is properly updating on data source add', () => {});
+
+    test('component is properly updating on data source reset', () => {});
+
     test('component is properly updating on record change', () => {});
 
     test('component is properly updating on record remove', () => {});