Add collection component stringfication

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

@@ -1,17 +1,17 @@
 import { DataVariableType } from './../DataVariable';
 import { isArray } from 'underscore';
-import Component from '../../../dom_components/model/Component';
+import Component, { keySymbol, keySymbolOvrd, keySymbols } from '../../../dom_components/model/Component';
 import { ComponentDefinition, ComponentOptions, ComponentProperties } from '../../../dom_components/model/types';
 import { toLowerCase } from '../../../utils/mixins';
 import DataSource from '../DataSource';
 import { ObjectAny } from '../../../common';
 import EditorModel from '../../../editor/model/Editor';
 import { keyCollectionsStateMap } from '../../../dom_components/model/Component';
-import { CollectionDefinition, CollectionState, CollectionsStateMap } from './types';
+import { CollectionComponentDefinition, CollectionDefinition, CollectionState, CollectionsStateMap } from './types';
 import { keyCollectionDefinition, keyInnerCollectionState, CollectionComponentType } from './constants';
 
 export default class CollectionComponent extends Component {
-  constructor(props: CollectionDefinition & ComponentProperties, opt: ComponentOptions) {
+  constructor(props: CollectionComponentDefinition, opt: ComponentOptions) {
     const em = opt.em;
     const { collection_name, block, config } = props[keyCollectionDefinition];
     if (!block) {
@@ -42,12 +42,13 @@ export default class CollectionComponent extends Component {
       };
 
       const collectionsStateMap: CollectionsStateMap = {
-        ...props[keyCollectionsStateMap],
+        ...(props[keyCollectionsStateMap] || {}),
         ...(collection_name && { [collection_name]: collectionState }),
         [keyInnerCollectionState]: collectionState,
       };
 
       if (index === start_index) {
+        // @ts-ignore
         const type = em.Components.getType(block?.type || 'default');
         const model = type.model;
         blockComponent = new model(
@@ -70,6 +71,7 @@ export default class CollectionComponent extends Component {
       components: components,
       dropbbable: false,
     };
+
     // @ts-ignore
     super(conditionalCmptDef, opt);
   }
@@ -77,6 +79,18 @@ export default class CollectionComponent extends Component {
   static isComponent(el: HTMLElement) {
     return toLowerCase(el.tagName) === CollectionComponentType;
   }
+
+  toJSON(opts?: ObjectAny) {
+    const json = super.toJSON(opts) as CollectionComponentDefinition;
+
+    const firstChild = this.components().at(0)?.toJSON() || {};
+    const keysToRemove = ['attributes?.id', keySymbol, keySymbols, keySymbolOvrd, keyCollectionsStateMap];
+    keysToRemove.forEach((key) => delete firstChild[key]);
+    json[keyCollectionDefinition].block = firstChild;
+
+    delete json.components;
+    return json;
+  }
 }
 
 function getDataSourceItems(dataSource: any, em: EditorModel) {

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

@@ -1,14 +1,13 @@
-import { CollectionComponentType } from './constants';
+import { CollectionComponentType, keyCollectionDefinition } from './constants';
 
-import { ComponentDefinition } from '../../../dom_components/model/types';
+import { ComponentDefinition, ComponentProperties } from '../../../dom_components/model/types';
 import { CollectionVariableDefinition } from '../../../../test/specs/dom_components/model/ComponentTypes';
 import { DataVariableDefinition } from '../DataVariable';
-import { ConditionDefinition } from '../conditional_variables/DataCondition';
 
 type CollectionDataSource = any[] | DataVariableDefinition | CollectionVariableDefinition;
 type CollectionConfig = {
   start_index?: number;
-  end_index?: number | ConditionDefinition;
+  end_index?: number;
   dataSource: CollectionDataSource;
 };
 
@@ -26,6 +25,10 @@ export type CollectionsStateMap = {
   [key: string]: CollectionState;
 };
 
+export type CollectionComponentDefinition = {
+  [keyCollectionDefinition]: CollectionDefinition;
+} & ComponentDefinition;
+
 export type CollectionDefinition = {
   type: typeof CollectionComponentType;
   collection_name?: string;