Add component dynamic variables serialization

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

@@ -16,7 +16,7 @@ export interface DynamicVariableListenerManagerOptions {
 export default class DynamicVariableListenerManager {
   private dataListeners: DataVariableListener[] = [];
   private em: EditorModel;
-  private dynamicVariable: DynamicValue;
+  dynamicVariable: DynamicValue;
   private updateValueFromDynamicVariable: (value: any) => void;
   private model = new Model();
 

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

@@ -1560,8 +1560,9 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * @private
    */
   toJSON(opts: ObjectAny = {}): ComponentDefinition {
-    const obj = Model.prototype.toJSON.call(this, opts);
-    obj.attributes = this.getAttributes();
+    let obj = Model.prototype.toJSON.call(this, opts);
+    obj.attributes = this.componentDVListener.getAttributesDefsOrValues(this.getAttributes());
+    obj = { ...obj, ...this.componentDVListener.getDynamicPropsDefs() };
     delete obj.attributes.class;
     delete obj.toolbar;
     delete obj.status;

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

@@ -20,10 +20,7 @@ export class ComponentDynamicValueListener {
     }, em);
   }
 
-  static evaluateComponentDef(
-    values: ObjectAny,
-    em: EditorModel,
-  ) {
+  static evaluateComponentDef(values: ObjectAny, em: EditorModel) {
     const props = DynamicValueWatcher.getStaticValues(values, em);
     props.attributes = DynamicValueWatcher.getStaticValues(props.attributes, em);
 
@@ -39,16 +36,24 @@ export class ComponentDynamicValueListener {
     this.propertyWatchClass.watchDynamicValue(props);
   }
 
+  getDynamicPropsDefs() {
+    return this.propertyWatchClass.getAllSerializableValues();
+  }
+
   setAttributes(attributes: ObjectAny) {
     this.attributeWatchClass.removeListeners();
     this.attributeWatchClass.watchDynamicValue(attributes);
   }
 
-  removeAttributes(attrArr: string[]) {
-    this.attributeWatchClass.removeListeners(attrArr);
-  }
-
   watchAttributes(attributes: ObjectAny) {
     this.attributeWatchClass.watchDynamicValue(attributes);
   }
+
+  removeAttributes(attributes: string[]) {
+    this.attributeWatchClass.removeListeners(attributes);
+  }
+
+  getAttributesDefsOrValues(attributes: ObjectAny) {
+    return this.attributeWatchClass.getSerializableValues(attributes);
+  }
 }

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

@@ -77,4 +77,29 @@ export class DynamicValueWatcher {
     const propsKeys = keys ? keys : Object.keys(this.dynamicVariableListeners);
     propsKeys.forEach((key) => this.dynamicVariableListeners[key].destroy());
   }
+
+  getSerializableValues(values: ObjectAny) {
+    const serializableValues = { ...values };
+    const propsKeys = Object.keys(serializableValues);
+    for (let index = 0; index < propsKeys.length; index++) {
+      const key = propsKeys[index];
+      if (this.dynamicVariableListeners[key]) {
+        serializableValues[key] = this.dynamicVariableListeners[key].dynamicVariable.toJSON();
+        continue;
+      }
+    }
+
+    return serializableValues;
+  }
+
+  getAllSerializableValues() {
+    const serializableValues: ObjectAny = {};
+    const propsKeys = Object.keys(this.dynamicVariableListeners);
+    for (let index = 0; index < propsKeys.length; index++) {
+      const key = propsKeys[index];
+      serializableValues[key] = this.dynamicVariableListeners[key].dynamicVariable.toJSON();
+    }
+
+    return serializableValues;
+  }
 }