Fix collection component symbols

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

@@ -19,6 +19,12 @@ import DynamicVariableListenerManager from '../DataVariableListenerManager';
 
 export default class ComponentDataCollection extends Component {
   constructor(props: ComponentDataCollectionDefinition, opt: ComponentOptions) {
+    const collectionDef = props[keyCollectionDefinition];
+    if (opt.forCloning) {
+      // @ts-ignore
+      return super(props, opt);
+    }
+
     const em = opt.em;
     // @ts-ignore
     const cmp: ComponentDataCollection = super(
@@ -31,7 +37,6 @@ export default class ComponentDataCollection extends Component {
       opt,
     );
 
-    const collectionDef = props[keyCollectionDefinition];
     if (!collectionDef) {
       em.logError('missing collection definition');
 
@@ -41,11 +46,11 @@ export default class ComponentDataCollection extends Component {
     const parentCollectionStateMap = (props[keyCollectionsStateMap] || {}) as DataCollectionStateMap;
 
     const components: Component[] = getCollectionItems(em, collectionDef, parentCollectionStateMap, opt);
+    cmp.components(components);
 
     if (this.hasDynamicDataSource()) {
       this.watchDataSource(em, collectionDef, parentCollectionStateMap, opt);
     }
-    cmp.components(components);
 
     return cmp;
   }
@@ -60,7 +65,7 @@ export default class ComponentDataCollection extends Component {
   }
 
   toJSON(opts?: ObjectAny) {
-    const json = super.toJSON(opts) as ComponentDataCollectionDefinition;
+    const json = super.toJSON.call(this, opts) as ComponentDataCollectionDefinition;
 
     const firstChild = this.getBlockDefinition();
     json[keyCollectionDefinition].componentDef = firstChild;
@@ -166,9 +171,8 @@ function getCollectionItems(
         },
         opt,
       );
-      blockSymbolMain!.setSymbolOverride([keyCollectionsStateMap]);
+      setCollectionStateMapAndPropagate(collectionsStateMap, collectionId)(blockSymbolMain);
     }
-    blockSymbolMain!.set(keyCollectionsStateMap, collectionsStateMap);
     const instance = blockSymbolMain!.clone({ symbol: true });
     setCollectionStateMapAndPropagate(collectionsStateMap, collectionId)(instance);
 
@@ -183,6 +187,7 @@ function setCollectionStateMapAndPropagate(
   collectionId: string | undefined,
 ) {
   return (model: Component) => {
+    // Set the collectionStateMap on the current model
     setCollectionStateMap(collectionsStateMap)(model);
 
     // Listener function for the 'add' event
@@ -199,13 +204,16 @@ function setCollectionStateMapAndPropagate(
       model.collectionStateListeners.push(listenerKey);
 
       // Add a 'remove' listener to clean up
-      model.listenTo(model.components(), 'remove', () => {
+      const removeListener = () => {
         model.stopListening(model.components(), 'add', addListener); // Remove the 'add' listener
+        model.off(`change:${keyCollectionsStateMap}`, handleCollectionStateMapChange); // Remove the change listener
         const index = model.collectionStateListeners.indexOf(listenerKey);
         if (index > -1) {
           model.collectionStateListeners.splice(index, 1); // Remove the listener key
         }
-      });
+      };
+
+      model.listenTo(model.components(), 'remove', removeListener);
     }
 
     // Recursively apply to all child components
@@ -215,9 +223,21 @@ function setCollectionStateMapAndPropagate(
       .forEach((component: Component) => {
         setCollectionStateMapAndPropagate(collectionsStateMap, collectionId)(component);
       });
+
+    // Listen for changes in the collectionStateMap and propagate to children
+    model.on(`change:${keyCollectionsStateMap}`, handleCollectionStateMapChange);
   };
 }
 
+function handleCollectionStateMapChange(this: Component) {
+  const updatedCollectionsStateMap = this.get(keyCollectionsStateMap);
+  this.components()
+    ?.toArray()
+    .forEach((component: Component) => {
+      setCollectionStateMap(updatedCollectionsStateMap)(component);
+    });
+}
+
 function logErrorIfMissing(property: any, propertyPath: string, em: EditorModel) {
   if (!property) {
     em.logError(`The "${propertyPath}" property is required in the collection definition.`);
@@ -250,10 +270,12 @@ function validateCollectionConfig(
 function setCollectionStateMap(collectionsStateMap: DataCollectionStateMap) {
   return (cmp: Component) => {
     cmp.set(keyIsCollectionItem, true);
-    cmp.set(keyCollectionsStateMap, {
+    const updatedCollectionStateMap = {
       ...cmp.get(keyCollectionsStateMap),
       ...collectionsStateMap,
-    });
+    };
+    cmp.set(keyCollectionsStateMap, updatedCollectionStateMap);
+    cmp.componentDVListener.updateCollectionStateMap(updatedCollectionStateMap);
   };
 }
 

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

@@ -311,7 +311,6 @@ export default class Component extends StyleableModel<ComponentProperties> {
     this.ccid = Component.createId(this, opt);
     this.preInit();
     this.initClasses();
-    this.listenTo(this, `change:${keyCollectionsStateMap}`, this.handleCollectionsMapStateChange);
     this.initComponents();
     this.initTraits();
     this.initToolbar();
@@ -1358,6 +1357,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
     attr.status = '';
     // @ts-ignore
     opts.collection = null;
+    opts.forCloning = true;
     // @ts-ignore
     const cloned = new this.constructor(attr, opts);
 
@@ -1588,7 +1588,6 @@ export default class Component extends StyleableModel<ComponentProperties> {
     let obj = Model.prototype.toJSON.call(this, opts);
     obj = { ...obj, ...this.componentDVListener.getDynamicPropsDefs() };
     obj.attributes = this.componentDVListener.getAttributesDefsOrValues(this.getAttributes());
-    delete obj.componentDVListener;
     delete obj.attributes.class;
     delete obj.toolbar;
     delete obj.traits;
@@ -1977,13 +1976,6 @@ export default class Component extends StyleableModel<ComponentProperties> {
     selector && selector.set({ name: id, label: id });
   }
 
-  private handleCollectionsMapStateChange(m: any, v: DataCollectionStateMap, opts = {}) {
-    this.componentDVListener.updateCollectionStateMap(v);
-    this.components()?.forEach((child) => {
-      child.set?.(keyCollectionsStateMap, v);
-    });
-  }
-
   static typeExtends = new Set<string>();
 
   static getDefaults() {

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

@@ -322,4 +322,5 @@ export interface ComponentOptions {
   frame?: Frame;
   temporary?: boolean;
   avoidChildren?: boolean;
+  forCloning?: boolean;
 }

packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts

@@ -232,6 +232,7 @@ describe('Collection component', () => {
           // @ts-ignore
           type: CollectionVariableType,
           variableType: DataCollectionStateVariableType.currentItem,
+          collectionId: 'my_collection',
           path: 'age',
         });
         expect(firstGrandchild.get('name')).toBe('new_value_12');
@@ -368,6 +369,7 @@ describe('Collection component', () => {
             // @ts-ignore
             type: CollectionVariableType,
             variableType: DataCollectionStateVariableType.currentItem,
+            collectionId: 'my_collection',
             path: 'age',
           },
         });