Improve DataCollectionVariable serialization

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

@@ -13,9 +13,9 @@ export default class ComponentDataCollectionVariable extends Component {
       // @ts-ignore
       ...super.defaults,
       type: CollectionVariableType,
-      variableType: '',
+      collectionName: undefined,
-      path: '',
+      variableType: undefined,
-      collectionName: keyInnerCollectionState,
+      path: undefined,
     };
   }
 

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

@@ -18,9 +18,9 @@ export default class DataCollectionVariable extends Model<ResolvedDataCollection
   defaults(): Partial<ResolvedDataCollectionVariable> {
     return {
       type: CollectionVariableType,
+      collectionName: undefined,
       variableType: undefined,
-      path: '',
+      path: undefined,
-      collectionName: keyInnerCollectionState,
       value: undefined,
     };
   }
@@ -86,8 +86,17 @@ export default class DataCollectionVariable extends Model<ResolvedDataCollection
   destroy() {
     this.dynamicValueListener?.destroy();
     this.dataVariable?.destroy();
+
     return super.destroy();
   }
+
+  toJSON(options?: any) {
+    const json = super.toJSON(options);
+    delete json.value;
+    !json.collectionName && delete json.collectionName;
+
+    return json;
+  }
 }
 
 function resolveCollectionVariable(

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

@@ -57,9 +57,9 @@ import { ComponentDynamicValueWatcher } from './ComponentDynamicValueWatcher';
 import { DynamicWatchersOptions } from './DynamicValueWatcher';
 import { keyIsCollectionItem } from '../../data_sources/model/data_collection/constants';
 
-export interface IComponent extends ExtractMethods<Component> { }
+export interface IComponent extends ExtractMethods<Component> {}
-export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DynamicWatchersOptions { }
+export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DynamicWatchersOptions {}
-export interface ComponentSetOptions extends SetOptions, DynamicWatchersOptions { }
+export interface ComponentSetOptions extends SetOptions, DynamicWatchersOptions {}
 
 const escapeRegExp = (str: string) => {
   return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
@@ -229,12 +229,12 @@ export default class Component extends StyleableModel<ComponentProperties> {
     return this.frame?.getPage();
   }
 
-  preInit() { }
+  preInit() {}
 
   /**
    * Hook method, called once the model is created
    */
-  init() { }
+  init() {}
 
   /**
    * Hook method, called when the model has been updated (eg. updated some model's property)
@@ -242,12 +242,12 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * @param {*} value Property value, if triggered after some property update
    * @param {*} previous Property previous value, if triggered after some property update
    */
-  updated(property: string, value: any, previous: any) { }
+  updated(property: string, value: any, previous: any) {}
 
   /**
    * Hook method, called once the model has been removed
    */
-  removed() { }
+  removed() {}
 
   em!: EditorModel;
   opt!: ComponentOptions;

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

@@ -56,8 +56,8 @@ export class ComponentDynamicValueWatcher extends Model<Component> {
       Object.entries(props).map(([key, value]) =>
         excludedFromEvaluation.includes(key)
           ? [key, value] // Return excluded keys as they are
-          : [key, this.propertyWatcher.addDynamicValues({ [key]: value }, options)[key]]
+          : [key, this.propertyWatcher.addDynamicValues({ [key]: value }, options)[key]],
-      )
+      ),
     );
 
     if (props.attributes) {