Refactor

src/dataSources/index.ts

@@ -1,8 +1,10 @@
 import { ItemManagerModule, ModuleConfig } from '../abstract/Module';
 import { AddOptions, ObjectAny } from '../common';
 import EditorModel from '../editor/model/Editor';
-import { get } from '../utils/mixins';
-import { DataSources } from './model/DataSources';
+import { get, stringToPath } from '../utils/mixins';
+import DataRecord from './model/DataRecord';
+import DataSource from './model/DataSource';
+import DataSources from './model/DataSources';
 import { DataSourceProps, DataSourcesEvents } from './types';
 
 export default class DataSourceManager extends ItemManagerModule<ModuleConfig, DataSources> {
@@ -15,15 +17,7 @@ export default class DataSourceManager extends ItemManagerModule<ModuleConfig, D
   }
 
   getValue(key: string | string[], defValue: any) {
-    const context = this.all.reduce((acc, ds) => {
-      acc[ds.id] = ds.records.reduce((accR, dr, i) => {
-        accR[i] = dr.attributes;
-        accR[dr.id || i] = dr.attributes;
-        return accR;
-      }, {} as ObjectAny);
-      return acc;
-    }, {} as ObjectAny);
-    return get(context, key, defValue);
+    return get(this.getContext(), key, defValue);
   }
 
   add(props: DataSourceProps, opts: AddOptions = {}) {
@@ -33,6 +27,27 @@ export default class DataSourceManager extends ItemManagerModule<ModuleConfig, D
   }
 
   get(id: string) {
-    return this.all.add(id);
+    return this.all.get(id);
+  }
+
+  getContext() {
+    return this.all.reduce((acc, ds) => {
+      acc[ds.id] = ds.records.reduce((accR, dr, i) => {
+        accR[i] = dr.attributes;
+        accR[dr.id || i] = dr.attributes;
+        return accR;
+      }, {} as ObjectAny);
+      return acc;
+    }, {} as ObjectAny);
+  }
+
+  fromPath(path: string) {
+    const result: [DataSource?, DataRecord?] = [];
+    const [dsId, drId] = stringToPath(path || '');
+    const dataSource = this.get(dsId);
+    const dataRecord = dataSource?.records.get(drId);
+    dataSource && result.push(dataSource);
+    dataRecord && result.push(dataRecord);
+    return result;
   }
 }

src/dataSources/model/DataRecord.ts

@@ -1,9 +1,9 @@
 import { keys } from 'underscore';
 import { Model } from '../../common';
 import { DataRecordProps, DataSourcesEvents } from '../types';
-import { DataRecords } from './DataRecords';
+import DataRecords from './DataRecords';
 
-export class DataRecord<T extends DataRecordProps = DataRecordProps> extends Model<T> {
+export default class DataRecord<T extends DataRecordProps = DataRecordProps> extends Model<T> {
   constructor(props: T, opts = {}) {
     super(props, opts);
     this.on('change', this.handleChange);

src/dataSources/model/DataRecords.ts

@@ -1,9 +1,9 @@
 import { Collection } from '../../common';
 import { DataRecordProps } from '../types';
-import { DataRecord } from './DataRecord';
-import { DataSource } from './DataSource';
+import DataRecord from './DataRecord';
+import DataSource from './DataSource';
 
-export class DataRecords extends Collection<DataRecord> {
+export default class DataRecords extends Collection<DataRecord> {
   dataSource: DataSource;
 
   constructor(models: DataRecord[] | DataRecordProps[], options: { dataSource: DataSource }) {

src/dataSources/model/DataSource.ts

@@ -1,13 +1,13 @@
-import { Collection } from 'backbone';
-import { CombinedModelConstructorOptions, Model } from '../../common';
+import { AddOptions, CombinedModelConstructorOptions, Model } from '../../common';
 import EditorModel from '../../editor/model/Editor';
-import { DataSourceProps } from '../types';
-import { DataRecords } from './DataRecords';
-import { DataSources } from './DataSources';
+import { DataRecordProps, DataSourceProps } from '../types';
+import DataRecord from './DataRecord';
+import DataRecords from './DataRecords';
+import DataSources from './DataSources';
 
 interface DataSourceOptions extends CombinedModelConstructorOptions<{ em: EditorModel }, DataSource> {}
 
-export class DataSource extends Model<DataSourceProps> {
+export default class DataSource extends Model<DataSourceProps> {
   defaults() {
     return {
       records: [],
@@ -21,6 +21,8 @@ export class DataSource extends Model<DataSourceProps> {
     if (!(records instanceof DataRecords)) {
       this.set({ records: new DataRecords(records!, { dataSource: this }) });
     }
+
+    this.listenTo(this.records, 'add', this.onAdd);
   }
 
   get records() {
@@ -30,4 +32,12 @@ export class DataSource extends Model<DataSourceProps> {
   get em() {
     return (this.collection as unknown as DataSources).em;
   }
+
+  onAdd(dr: DataRecord) {
+    dr.triggerChange();
+  }
+
+  addRecord(record: DataRecordProps, opts?: AddOptions) {
+    return this.records.add(record, opts);
+  }
 }

src/dataSources/model/DataSources.ts

@@ -1,9 +1,9 @@
 import { Collection } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 import { DataSourceProps } from '../types';
-import { DataSource } from './DataSource';
+import DataSource from './DataSource';
 
-export class DataSources extends Collection<DataSource> {
+export default class DataSources extends Collection<DataSource> {
   em: EditorModel;
 
   constructor(models: DataSource[] | DataSourceProps[], em: EditorModel) {

src/dataSources/types.ts

@@ -1,6 +1,6 @@
 import { ObjectAny } from '../common';
-import { DataRecord } from './model/DataRecord';
-import { DataRecords } from './model/DataRecords';
+import DataRecord from './model/DataRecord';
+import DataRecords from './model/DataRecords';
 
 export interface DataSourceProps {
   /**

src/utils/mixins.ts

@@ -9,7 +9,8 @@ const obj: ObjectAny = {};
 
 const reEscapeChar = /\\(\\)?/g;
 const rePropName = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;
-const stringToPath = function (string: string) {
+
+export const stringToPath = function (string: string) {
   const result = [];
   if (string.charCodeAt(0) === 46 /* . */) result.push('');
   string.replace(rePropName, (match: string, number, quote, subString) => {

test/specs/dataSources/index.ts

@@ -21,7 +21,6 @@ describe('DataSourceManager', () => {
       avoidInlineStyle: true,
     });
     dsm = em.DataSources;
-    // em.Pages.onLoad();
   });
 
   afterEach(() => {
@@ -69,8 +68,7 @@ describe('DataSourceManager', () => {
       fixtures.appendChild(wrapperEl.el);
     });
 
-    test('component is properly initiliazed with a value', () => {
-      dsm.add(dsTest);
+    test('component is properly initiliazed with default value', () => {
       const cmpVar = cmpRoot.append({
         type: 'data-variable',
         value: 'default',
@@ -79,9 +77,31 @@ describe('DataSourceManager', () => {
       expect(cmpVar.getEl()?.innerHTML).toBe('default');
     });
 
-    test('component is properly updating on record add', () => {});
+    test('component is properly initiliazed with current value', () => {
+      dsm.add(dsTest);
+      const cmpVar = cmpRoot.append({
+        type: 'data-variable',
+        value: 'default',
+        path: 'ds1.id2.name',
+      })[0];
+      expect(cmpVar.getEl()?.innerHTML).toBe('Name2');
+    });
+
+    test('component is properly updating on record add', () => {
+      const ds = dsm.add(dsTest);
+      const cmpVar = cmpRoot.append({
+        type: 'data-variable',
+        value: 'default',
+        path: 'ds1.id4.name',
+      })[0];
+      ds.addRecord({ id: 'id4', name: 'Name4' });
+      expect(cmpVar.getEl()?.innerHTML).toBe('Name4');
+    });
+
     test('component is properly updating on record change', () => {});
+
     test('component is properly updating on record remove', () => {});
+
     test('component is properly updating on record reset', () => {});
   });
 });