Fixes and improvements for datasources (#6649)

* Improve data source TS

* Skip running updateSymbolOverride on non-symbol components

* Refactor data types

* Update default root resolver item

* Resolve direct data sources in ComponentWrapper

* Add updateDebug event

* Fix data resolver update logic

* Fix id removal in ComponentDataCollection and tests

* Clone CSS rules pasted cross components

* Fix attributes/styles collide in data sources

Author: artf

packages/core/src/css_composer/model/CssRule.ts

@@ -129,10 +129,10 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
     this.on('change', this.__onChange);
   }
 
-  __onChange(m: CssRule, opts: any) {
+  __onChange(rule: CssRule, options: any) {
     const { em } = this;
     const changed = this.changedAttributes();
-    changed && !isEmptyObj(changed) && em?.changesUp(opts);
+    changed && !isEmptyObj(changed) && em?.changesUp(options, { rule, changed, options });
   }
 
   clone(): typeof this {

packages/core/src/data_sources/index.ts

@@ -21,21 +21,34 @@
  * @module DataSources
  */
 
+import { Events } from 'backbone';
 import { isEmpty } from 'underscore';
 import { ItemManagerModule, ModuleConfig } from '../abstract/Module';
 import { AddOptions, collectionEvents, ObjectAny, RemoveOptions } from '../common';
 import EditorModel from '../editor/model/Editor';
 import { get, set, stringToPath } from '../utils/mixins';
 import defConfig, { DataSourcesConfig } from './config/config';
+import { AnyTypeOperation } from './model/conditional_variables/operators/AnyTypeOperator';
+import { BooleanOperation } from './model/conditional_variables/operators/BooleanOperator';
+import { NumberOperation } from './model/conditional_variables/operators/NumberOperator';
+import { StringOperation } from './model/conditional_variables/operators/StringOperator';
+import { DataCollectionStateType } from './model/data_collection/types';
 import DataRecord from './model/DataRecord';
 import DataSource from './model/DataSource';
 import DataSources from './model/DataSources';
-import { DataSourcesEvents, DataSourceProps, DataRecordProps } from './types';
-import { Events } from 'backbone';
+import { DataComponentTypes, DataRecordProps, DataSourceProps, DataSourcesEvents } from './types';
 
 export default class DataSourceManager extends ItemManagerModule<DataSourcesConfig & ModuleConfig, DataSources> {
   storageKey = 'dataSources';
   events = DataSourcesEvents;
+  dataComponentTypes = DataComponentTypes;
+  dataCollectionStateTypes = DataCollectionStateType;
+  dataOperationTypes = {
+    any: AnyTypeOperation,
+    boolean: BooleanOperation,
+    number: NumberOperation,
+    string: StringOperation,
+  };
   destroy(): void {}
 
   constructor(em: EditorModel) {
@@ -74,6 +87,16 @@ export default class DataSourceManager extends ItemManagerModule<DataSourcesConf
     return this.all.get(id);
   }
 
+  /**
+   * Return all data sources.
+   * @returns {Array<[DataSource]>}
+   * @example
+   * const ds = dsm.getAll();
+   */
+  getAll() {
+    return [...this.all.models];
+  }
+
   /**
    * Get value from data sources by path.
    * @param {String} path Path to value.
@@ -211,7 +234,10 @@ export default class DataSourceManager extends ItemManagerModule<DataSourcesConf
 
   postLoad() {
     const { em, all } = this;
-    em.listenTo(all, collectionEvents, (m, c, o) => em.changesUp(o || c));
+    em.listenTo(all, collectionEvents, (dataSource, c, o) => {
+      const options = o || c;
+      em.changesUp(options, { dataSource, options });
+    });
     this.em.UndoManager.add(all);
   }
 }

packages/core/src/data_sources/model/ComponentWithCollectionsState.ts

@@ -83,8 +83,9 @@ export default class ComponentWithCollectionsState<DataResolverType> extends Com
   }
 
   protected getDataSourceItems(): DataSourceRecords {
-    const dataSourceProps = this.dataSourceProps;
+    const { dataSourceProps } = this;
     if (!dataSourceProps) return [];
+
     const items = this.listDataSourceItems(dataSourceProps);
     if (items && isArray(items)) {
       return items;

packages/core/src/data_sources/model/ComponentWithDataResolver.ts

@@ -55,14 +55,6 @@ export abstract class ComponentWithDataResolver<T extends DataResolverProps> ext
   }
 
   protected listenToPropsChange() {
-    this.listenTo(
-      this.dataResolver,
-      'change',
-      (() => {
-        this.__changesUp({ m: this });
-      }).bind(this),
-    );
-
     this.on('change:dataResolver', () => {
       // @ts-ignore
       this.dataResolver.set(this.get('dataResolver'));

packages/core/src/data_sources/model/DataSource.ts

@@ -316,7 +316,8 @@ export default class DataSource<DRProps extends DataRecordProps = DataRecordProp
     return this.schema[fieldKey];
   }
 
-  private handleChanges(m: any, c: any, o: any) {
-    this.em.changesUp(o || c);
+  private handleChanges(dataRecord: any, c: any, o: any) {
+    const options = o || c;
+    this.em.changesUp(options, { dataRecord, options });
   }
 }

packages/core/src/data_sources/model/DataVariable.ts

@@ -1,6 +1,7 @@
 import { Model } from '../../common';
 import { keyRootData } from '../../dom_components/constants';
 import EditorModel from '../../editor/model/Editor';
+import { DataComponentTypes } from '../types';
 import { isDataVariable } from '../utils';
 import {
   DataCollectionStateMap,
@@ -9,7 +10,7 @@ import {
   RootDataType,
 } from './data_collection/types';
 
-export const DataVariableType = 'data-variable' as const;
+export const DataVariableType = DataComponentTypes.variable as const;
 
 export interface DataVariableProps {
   type?: typeof DataVariableType;

packages/core/src/data_sources/model/conditional_variables/ComponentDataCondition.ts

@@ -1,3 +1,4 @@
+import Component from '../../../dom_components/model/Component';
 import {
   ComponentAddType,
   ComponentDefinitionDefined,
@@ -6,19 +7,15 @@ import {
   ToHTMLOptions,
 } from '../../../dom_components/model/types';
 import { toLowerCase } from '../../../utils/mixins';
+import { DataComponentTypes, DataResolver } from '../../types';
+import { ComponentWithDataResolver } from '../ComponentWithDataResolver';
+import { DataCollectionStateMap } from '../data_collection/types';
 import { DataCondition, DataConditionProps, DataConditionType } from './DataCondition';
 import { ConditionProps } from './DataConditionEvaluator';
 import { StringOperation } from './operators/StringOperator';
-import { DataConditionIfTrueType, DataConditionIfFalseType } from './constants';
-import { ComponentWithDataResolver } from '../ComponentWithDataResolver';
-import Component from '../../../dom_components/model/Component';
-import { DataResolver } from '../../types';
-import { DataCollectionStateMap } from '../data_collection/types';
-
-export type DataConditionDisplayType = typeof DataConditionIfTrueType | typeof DataConditionIfFalseType;
 
 export interface ComponentDataConditionProps extends ComponentProperties {
-  type: typeof DataConditionType;
+  type: DataComponentTypes.condition;
   dataResolver: DataConditionProps;
 }
 
@@ -28,7 +25,7 @@ export default class ComponentDataCondition extends ComponentWithDataResolver<Da
       // @ts-ignore
       ...super.defaults,
       droppable: false,
-      type: DataConditionType,
+      type: DataComponentTypes.condition,
       dataResolver: {
         condition: {
           left: '',
@@ -38,10 +35,10 @@ export default class ComponentDataCondition extends ComponentWithDataResolver<Da
       },
       components: [
         {
-          type: DataConditionIfTrueType,
+          type: DataComponentTypes.conditionTrue,
         },
         {
-          type: DataConditionIfFalseType,
+          type: DataComponentTypes.conditionFalse,
         },
       ],
     };

packages/core/src/data_sources/model/conditional_variables/constants.ts

@@ -1,21 +1,22 @@
-import { isArray, size } from 'underscore';
+import { isArray } from 'underscore';
 import { ObjectAny } from '../../../common';
 import Component, { keySymbol } from '../../../dom_components/model/Component';
+import { keyDataValues, updateFromWatcher } from '../../../dom_components/model/ModelDataResolverWatchers';
+import { detachSymbolInstance, getSymbolInstances } from '../../../dom_components/model/SymbolUtils';
 import { ComponentAddType, ComponentDefinitionDefined, ComponentOptions } from '../../../dom_components/model/types';
 import EditorModel from '../../../editor/model/Editor';
 import { toLowerCase } from '../../../utils/mixins';
+import { DataComponentTypes } from '../../types';
+import ComponentWithCollectionsState, { DataVariableMap } from '../ComponentWithCollectionsState';
 import DataResolverListener from '../DataResolverListener';
 import { DataVariableProps } from '../DataVariable';
-import { DataCollectionItemType, DataCollectionType, keyCollectionDefinition } from './constants';
+import { keyCollectionDefinition } from './constants';
 import {
   ComponentDataCollectionProps,
   DataCollectionDataSource,
   DataCollectionProps,
   DataCollectionStateMap,
 } from './types';
-import { detachSymbolInstance, getSymbolInstances } from '../../../dom_components/model/SymbolUtils';
-import { keyDataValues, updateFromWatcher } from '../../../dom_components/model/ModelDataResolverWatchers';
-import ComponentWithCollectionsState, { DataVariableMap } from '../ComponentWithCollectionsState';
 
 const AvoidStoreOptions = { avoidStore: true, partial: true };
 
@@ -28,10 +29,10 @@ export default class ComponentDataCollection extends ComponentWithCollectionsSta
       ...super.defaults,
       droppable: false,
       dataResolver: {},
-      type: DataCollectionType,
+      type: DataComponentTypes.collection,
       components: [
         {
-          type: DataCollectionItemType,
+          type: DataComponentTypes.collectionItem,
         },
       ],
     };
@@ -281,32 +282,22 @@ export default class ComponentDataCollection extends ComponentWithCollectionsSta
   }
 
   private ensureFirstChild() {
-    const dataConditionItemModel = this.em.Components.getType(DataCollectionItemType)!.model;
-
-    return (
-      this.firstChild ||
-      new dataConditionItemModel(
-        {
-          type: DataCollectionItemType,
-        },
-        this.opt,
-      )
-    );
+    const dataConditionItemModel = this.em.Components.getType(DataComponentTypes.collectionItem)!.model;
+    return this.firstChild || new dataConditionItemModel({ type: DataComponentTypes.collectionItem }, this.opt);
   }
 
   private get collectionId() {
     return this.dataResolverProps?.collectionId ?? '';
   }
 
   static isComponent(el: HTMLElement) {
-    return toLowerCase(el.tagName) === DataCollectionType;
+    return toLowerCase(el.tagName) === DataComponentTypes.collection;
   }
 
   toJSON(opts?: ObjectAny) {
     const json = super.toJSON.call(this, opts) as ComponentDataCollectionProps;
     delete json.droppable;
     delete json[keySymbol];
-    delete json.attributes?.id;
 
     const firstChild = this.firstChild as any;
     return { ...json, components: [firstChild] };

packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts

@@ -1,3 +1 @@
-export const DataCollectionType = 'data-collection';
-export const DataCollectionItemType = 'data-collection-item';
 export const keyCollectionDefinition = 'dataResolver';