From 970990ea2b31ed00907aeda8c454513071230b67 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 29 Feb 2024 01:07:57 +0400
Subject: [PATCH] Improve data variable listeners

---
 src/dataSources/index.ts                          | 11 ++++++++---
 .../view/ComponentDataVariableView.ts             | 15 ++++++++++++++-
 test/specs/dataSources/index.ts                   | 10 ++++++++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/dataSources/index.ts b/src/dataSources/index.ts
index f84757a82..f8645b58a 100644
--- a/src/dataSources/index.ts
+++ b/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;
   }
 }
diff --git a/src/dom_components/view/ComponentDataVariableView.ts b/src/dom_components/view/ComponentDataVariableView.ts
index 8ed653eb4..54c85a547 100644
--- a/src/dom_components/view/ComponentDataVariableView.ts
+++ b/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() {
diff --git a/test/specs/dataSources/index.ts b/test/specs/dataSources/index.ts
index 5f789d4c5..58c22eee4 100644
--- a/test/specs/dataSources/index.ts
+++ b/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', () => {});