Align component wrapper resolver with collections (#6653)

Author: artf

packages/core/src/data_sources/index.ts

@@ -36,12 +36,13 @@ import { DataCollectionStateType } from './model/data_collection/types';
 import DataRecord from './model/DataRecord';
 import DataSource from './model/DataSource';
 import DataSources from './model/DataSources';
-import { DataComponentTypes, DataRecordProps, DataSourceProps, DataSourcesEvents } from './types';
+import { DataCollectionKeys, DataComponentTypes, DataRecordProps, DataSourceProps, DataSourcesEvents } from './types';
 
 export default class DataSourceManager extends ItemManagerModule<DataSourcesConfig & ModuleConfig, DataSources> {
   storageKey = 'dataSources';
   events = DataSourcesEvents;
   dataComponentTypes = DataComponentTypes;
+  dataCollectionKeys = DataCollectionKeys;
   dataCollectionStateTypes = DataCollectionStateType;
   dataOperationTypes = {
     any: AnyTypeOperation,
@@ -104,8 +105,8 @@ export default class DataSourceManager extends ItemManagerModule<DataSourcesConf
    * @returns {any}
    * const value = dsm.getValue('ds_id.record_id.propName', 'defaultValue');
    */
-  getValue(path: string | string[], defValue?: any) {
-    return get(this.getContext(), path, defValue);
+  getValue(path: string | string[], defValue?: any, opts?: { context?: Record<string, any> }) {
+    return get(opts?.context || this.getContext(), path, defValue);
   }
 
   /**
@@ -130,7 +131,7 @@ export default class DataSourceManager extends ItemManagerModule<DataSourcesConf
     return false;
   }
 
-  private getContext() {
+  getContext() {
     return this.all.reduce((acc, ds) => {
       acc[ds.id] = ds.records.reduce((accR, dr, i) => {
         const dataRecord = dr;

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

@@ -1,14 +1,8 @@
 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,
-  DataCollectionState,
-  DataCollectionStateType,
-  RootDataType,
-} from './data_collection/types';
+import { DataCollectionState, DataCollectionStateMap, DataCollectionStateType } from './data_collection/types';
 
 export const DataVariableType = DataComponentTypes.variable as const;
 
@@ -163,18 +157,15 @@ export default class DataVariable extends Model<DataVariableProps> {
     const collectionItem = collectionsStateMap[collectionId];
     if (!collectionItem) return defaultValue;
 
-    if (collectionId === keyRootData) {
-      const root = collectionItem as RootDataType;
-      return path ? root?.[path as keyof RootDataType] : root;
-    }
-
     if (!variableType) {
       em.logError(`Missing collection variable type for collection: ${collectionId}`);
       return defaultValue;
     }
 
     if (variableType === 'currentItem') {
-      return DataVariable.resolveCurrentItem(collectionItem as DataCollectionState, path, collectionId, em);
+      return (
+        DataVariable.resolveCurrentItem(collectionItem as DataCollectionState, path, collectionId, em) ?? defaultValue
+      );
     }
 
     const state = collectionItem as DataCollectionState;
@@ -190,7 +181,7 @@ export default class DataVariable extends Model<DataVariableProps> {
     const currentItem = collectionItem.currentItem;
     if (!currentItem) {
       em.logError(`Current item is missing for collection: ${collectionId}`);
-      return '';
+      return;
     }
 
     if (currentItem.type === DataVariableType) {
@@ -199,8 +190,7 @@ export default class DataVariable extends Model<DataVariableProps> {
     }
 
     if (path && !(currentItem as any)[path]) {
-      em.logError(`Path not found in current item: ${path} for collection: ${collectionId}`);
-      return '';
+      return;
     }
 
     return path ? (currentItem as any)[path] : currentItem;

packages/core/src/data_sources/types.ts

@@ -22,6 +22,10 @@ export enum DataComponentTypes {
   collectionItem = 'data-collection-item',
 }
 
+export enum DataCollectionKeys {
+  rootData = '__rootData',
+}
+
 export interface DataRecordProps extends ObjectAny {
   /**
    * Record id.

packages/core/src/dom_components/constants.ts

@@ -1,73 +1,73 @@
+import { Model, ModelDestroyOptions } from 'backbone';
 import {
-  isUndefined,
-  isFunction,
+  bindAll,
+  forEach,
+  has,
   isArray,
-  isEmpty,
   isBoolean,
-  has,
+  isEmpty,
+  isFunction,
   isString,
-  forEach,
-  result,
-  bindAll,
+  isUndefined,
   keys,
+  result,
 } from 'underscore';
-import {
-  shallowDiff,
-  capitalize,
-  isEmptyObj,
-  isObject,
-  toLowerCase,
-  escapeAltQuoteAttrValue,
-  escapeAttrValue,
-} from '../../utils/mixins';
+import Frame from '../../canvas/model/Frame';
+import { AddOptions, ExtractMethods, ObjectAny, PrevToNewIdMap, SetOptions } from '../../common';
+import CssRule, { CssRuleJSON } from '../../css_composer/model/CssRule';
+import { DataCollectionStateMap } from '../../data_sources/model/data_collection/types';
+import { DataCollectionKeys } from '../../data_sources/types';
+import { checkAndGetSyncableCollectionItemId } from '../../data_sources/utils';
 import StyleableModel, {
   GetStyleOpts,
   StyleProps,
   UpdateStyleOptions,
 } from '../../domain_abstract/model/StyleableModel';
-import { Model, ModelDestroyOptions } from 'backbone';
-import Components from './Components';
+import EditorModel from '../../editor/model/Editor';
+import ItemView from '../../navigator/view/ItemView';
 import Selector from '../../selector_manager/model/Selector';
 import Selectors from '../../selector_manager/model/Selectors';
+import Trait from '../../trait_manager/model/Trait';
 import Traits from '../../trait_manager/model/Traits';
-import EditorModel from '../../editor/model/Editor';
+import { TraitProperties } from '../../trait_manager/types';
 import {
-  ComponentAdd,
-  ComponentDefinition,
-  ComponentDefinitionDefined,
-  ComponentOptions,
-  ComponentProperties,
-  DragMode,
-  ResetComponentsOptions,
-  SymbolToUpOptions,
-  ToHTMLOptions,
-} from './types';
-import Frame from '../../canvas/model/Frame';
+  capitalize,
+  escapeAltQuoteAttrValue,
+  escapeAttrValue,
+  isEmptyObj,
+  isObject,
+  shallowDiff,
+  toLowerCase,
+} from '../../utils/mixins';
 import { DomComponentsConfig } from '../config/config';
-import ComponentView from '../view/ComponentView';
-import { AddOptions, ExtractMethods, ObjectAny, PrevToNewIdMap, SetOptions } from '../../common';
-import CssRule, { CssRuleJSON } from '../../css_composer/model/CssRule';
-import Trait from '../../trait_manager/model/Trait';
-import { ToolbarButtonProps } from './ToolbarButton';
-import { TraitProperties } from '../../trait_manager/types';
 import { ActionLabelComponents, ComponentsEvents } from '../types';
-import ItemView from '../../navigator/view/ItemView';
+import ComponentView from '../view/ComponentView';
+import Components from './Components';
+import { DataWatchersOptions } from './ModelResolverWatcher';
 import {
-  getSymbolMain,
   getSymbolInstances,
+  getSymbolMain,
+  getSymbolsToUpdate,
   initSymbol,
   isSymbol,
   isSymbolMain,
   isSymbolRoot,
   updateSymbolCls,
   updateSymbolComps,
   updateSymbolProps,
-  getSymbolsToUpdate,
 } from './SymbolUtils';
-import { DataWatchersOptions } from './ModelResolverWatcher';
-import { DataCollectionStateMap } from '../../data_sources/model/data_collection/types';
-import { checkAndGetSyncableCollectionItemId } from '../../data_sources/utils';
-import { keyRootData } from '../constants';
+import { ToolbarButtonProps } from './ToolbarButton';
+import {
+  ComponentAdd,
+  ComponentDefinition,
+  ComponentDefinitionDefined,
+  ComponentOptions,
+  ComponentProperties,
+  DragMode,
+  ResetComponentsOptions,
+  SymbolToUpOptions,
+  ToHTMLOptions,
+} from './types';
 
 export interface IComponent extends ExtractMethods<Component> {}
 export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DataWatchersOptions {}
@@ -446,7 +446,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
     this.emitWithEditor(ComponentsEvents.styleUpdate, this, pros);
     styleKeys.forEach((key) => this.emitWithEditor(`${ComponentsEvents.styleUpdateProperty}${key}`, this, pros));
 
-    const parentCollectionIds = Object.keys(collectionsStateMap).filter((key) => key !== keyRootData);
+    const parentCollectionIds = Object.keys(collectionsStateMap).filter((key) => key !== DataCollectionKeys.rootData);
 
     if (parentCollectionIds.length === 0) return;
 

packages/core/src/dom_components/model/Component.ts

@@ -3,8 +3,8 @@ import ComponentWithCollectionsState from '../../data_sources/model/ComponentWit
 import DataResolverListener from '../../data_sources/model/DataResolverListener';
 import { DataVariableProps } from '../../data_sources/model/DataVariable';
 import { DataCollectionStateMap } from '../../data_sources/model/data_collection/types';
+import { DataCollectionKeys } from '../../data_sources/types';
 import { attrToString } from '../../utils/dom';
-import { keyRootData } from '../constants';
 import Component from './Component';
 import ComponentHead, { type as typeHead } from './ComponentHead';
 import Components from './Components';
@@ -160,15 +160,19 @@ export default class ComponentWrapper extends ComponentWithCollectionsState<Data
     const dsm = em.DataSources;
     if (!dataResolverPath) return {};
 
+    const collectionId = DataCollectionKeys.rootData;
     const allItems = this.getDataSourceItems() as any;
-    const selectedItems = isNumber(resolverCurrentItem)
+    const currentItem = isNumber(resolverCurrentItem)
       ? allItems[resolverCurrentItem]
       : isString(resolverCurrentItem)
         ? dsm.getValue(`${dataResolverPath}.${resolverCurrentItem}`)
         : allItems;
 
     return {
-      [keyRootData]: selectedItems,
+      [collectionId]: {
+        collectionId,
+        currentItem,
+      },
     } as DataCollectionStateMap;
   }
 

packages/core/src/dom_components/model/ComponentWrapper.ts

@@ -1,7 +1,7 @@
 import { DataRecord, DataSourceManager } from '../../../../src';
+import { DataCollectionStateType } from '../../../../src/data_sources/model/data_collection/types';
 import { DataVariableProps, DataVariableType } from '../../../../src/data_sources/model/DataVariable';
-import { DataComponentTypes } from '../../../../src/data_sources/types';
-import { keyRootData } from '../../../../src/dom_components/constants';
+import { DataCollectionKeys, DataComponentTypes } from '../../../../src/data_sources/types';
 import Component from '../../../../src/dom_components/model/Component';
 import ComponentHead from '../../../../src/dom_components/model/ComponentHead';
 import ComponentWrapper from '../../../../src/dom_components/model/ComponentWrapper';
@@ -10,6 +10,7 @@ import EditorModel from '../../../../src/editor/model/Editor';
 import { setupTestEditor } from '../../../common';
 
 describe('ComponentWrapper', () => {
+  const keyRootData = DataCollectionKeys.rootData;
   let em: Editor;
 
   beforeEach(() => {
@@ -101,13 +102,14 @@ describe('ComponentWrapper', () => {
         type: 'default',
         title: {
           type: DataComponentTypes.variable,
+          variableType: DataCollectionStateType.currentItem,
           collectionId: keyRootData,
           path,
         },
         components: {
           tagName: 'span',
           type: DataComponentTypes.variable,
-          dataResolver: { collectionId: keyRootData, path },
+          dataResolver: { collectionId: keyRootData, variableType: DataCollectionStateType.currentItem, path },
         },
       })[0];