Refactor collectionsStateMap propagation

packages/core/src/data_sources/model/collection_component/CollectionComponent.ts

@@ -147,6 +147,7 @@ function getCollectionItems(
         {
           ...block,
           [keyCollectionsStateMap]: collectionsStateMap,
+          isCollectionItem: true,
         },
         opt,
       );

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

@@ -72,6 +72,7 @@ export const keySymbolOvrd = '__symbol_ovrd';
 export const keyUpdate = ComponentsEvents.update;
 export const keyUpdateInside = ComponentsEvents.updateInside;
 export const keyCollectionsStateMap = '__collections_state_map';
+export const keyIsCollectionItem = '__is_collection_item';
 
 /**
  * The Component object represents a single node of our template structure, so when you update its properties the changes are
@@ -262,13 +263,6 @@ export default class Component extends StyleableModel<ComponentProperties> {
   componentDVListener: ComponentDynamicValueWatcher;
 
   constructor(props: ComponentProperties = {}, opt: ComponentOptions) {
-    if (props[keyCollectionsStateMap]) {
-      // @ts-ignore
-      props.components = props.components?.forEach((component) => ({
-        ...component,
-        [keyCollectionsStateMap]: props[keyCollectionsStateMap],
-      }));
-    }
     const componentDVListener = new ComponentDynamicValueWatcher(undefined, {
       em: opt.em,
       collectionsStateMap: props[keyCollectionsStateMap],
@@ -304,7 +298,12 @@ export default class Component extends StyleableModel<ComponentProperties> {
     }
 
     opt.em = em;
-    this.opt = opt;
+    this.opt = {
+      ...opt,
+      // @ts-ignore
+      [keyCollectionsStateMap]: props[keyCollectionsStateMap],
+      isCollectionItem: !!props['isCollectionItem'],
+    };
     this.em = em!;
     this.config = opt.config || {};
     this.setAttributes({

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

@@ -2,7 +2,7 @@ import { ObjectAny } from '../../common';
 import { CollectionVariableType } from '../../data_sources/model/collection_component/constants';
 import { CollectionsStateMap } from '../../data_sources/model/collection_component/types';
 import EditorModel from '../../editor/model/Editor';
-import Component from './Component';
+import Component, { keyCollectionsStateMap } from './Component';
 import { DynamicWatchersOptions } from './DynamicValueWatcher';
 import { DynamicValueWatcher } from './DynamicValueWatcher';
 
@@ -70,7 +70,7 @@ export class ComponentDynamicValueWatcher {
   }
 
   updateSymbolOverride() {
-    if (!this.component) return;
+    if (!this.component || !this.component.get('isCollectionItem')) return;
 
     const keys = this.propertyWatcher.getDynamicValuesOfType(CollectionVariableType);
     const attributesKeys = this.attributeWatcher.getDynamicValuesOfType(CollectionVariableType);

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

@@ -1,5 +1,5 @@
 import { isEmpty, isArray, isString, isFunction, each, includes, extend, flatten, keys } from 'underscore';
-import Component from './Component';
+import Component, { keyCollectionsStateMap } from './Component';
 import { AddOptions, Collection } from '../../common';
 import { DomComponentsConfig } from '../config/config';
 import EditorModel from '../../editor/model/Editor';
@@ -17,6 +17,7 @@ import ComponentText from './ComponentText';
 import ComponentWrapper from './ComponentWrapper';
 import { ComponentsEvents, ParseStringOptions } from '../types';
 import { isSymbolInstance, isSymbolRoot, updateSymbolComps } from './SymbolUtils';
+import { CollectionsStateMap } from '../../data_sources/model/collection_component/types';
 
 export const getComponentIds = (cmp?: Component | Component[] | Components, res: string[] = []) => {
   if (!cmp) return [];
@@ -87,6 +88,8 @@ export interface ComponentsOptions {
   em: EditorModel;
   config?: DomComponentsConfig;
   domc?: ComponentManager;
+  collectionsStateMap?: CollectionsStateMap;
+  isCollectionItem?: boolean;
 }
 
 interface AddComponentOptions extends AddOptions {
@@ -324,13 +327,30 @@ Component> {
    */
   processDef(mdl: Component | ComponentDefinition | ComponentDefinitionDefined) {
     // Avoid processing Models
-    if (mdl.cid && mdl.ccid) return mdl;
+    if (mdl.cid && mdl.ccid) {
+      const componentCollectionsStateMap = mdl.get(keyCollectionsStateMap);
+      const parentCollectionsStateMap = this.opt.collectionsStateMap;
+      mdl.set(keyCollectionsStateMap, {
+        ...componentCollectionsStateMap,
+        ...parentCollectionsStateMap,
+      });
+
+      mdl.set('isCollectionItem', this.opt.isCollectionItem);
+
+      return mdl;
+    }
     const { em, config = {} } = this;
     const { processor } = config;
     let model = mdl;
 
     if (processor) {
-      model = { ...model }; // Avoid 'Cannot delete property ...'
+      model = {
+        [keyCollectionsStateMap]: {
+          ...this.opt.collectionsStateMap,
+        },
+        isCollectionItem: this.opt.isCollectionItem,
+        ...model,
+      }; // Avoid 'Cannot delete property ...'
       const modelPr = processor(model);
       if (modelPr) {
         //@ts-ignore

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

@@ -11,7 +11,7 @@ import Component from './Component';
 import Components from './Components';
 import { ToolbarButtonProps } from './ToolbarButton';
 import { ParseNodeOptions } from '../../parser/config/config';
-import { DynamicValueDefinition } from '../../data_sources/types';
+import { CollectionsStateMap } from '../../data_sources/model/collection_component/types';
 
 export type DragMode = 'translate' | 'absolute' | '';
 
@@ -321,4 +321,5 @@ export interface ComponentOptions {
   frame?: Frame;
   temporary?: boolean;
   avoidChildren?: boolean;
+  collectionsStateMap?: CollectionsStateMap;
 }

packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap

@@ -22,6 +22,7 @@ exports[`Collection component Stringfication Collection with dynamic datasource
         "type": "parent-collection-variable",
         "variable_type": "current_item",
       },
+      "isCollectionItem": false,
       "property_trait": {
         "path": "user",
         "type": "parent-collection-variable",