Exclude "components" property from being dynamic

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 SetAttrOptions extends SetOptions, UpdateStyleOptions, DynamicWatchersOptions {}
-export interface ComponentSetOptions extends SetOptions, DynamicWatchersOptions {}
+export interface IComponent extends ExtractMethods<Component> { }
+export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, 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

@@ -50,14 +50,23 @@ export class ComponentDynamicValueWatcher extends Model<Component> {
   }
 
   addProps(props: ObjectAny, options: DynamicWatchersOptions = {}) {
-    const evaluatedProps = this.propertyWatcher.addDynamicValues(props, options);
+    const excludedFromEvaluation = ['components'];
+
+    const evaluatedProps = Object.fromEntries(
+      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]]
+      )
+    );
+
     if (props.attributes) {
       const evaluatedAttributes = this.attributeWatcher.setDynamicValues(props.attributes, options);
       evaluatedProps['attributes'] = evaluatedAttributes;
     }
 
-    const skipOverridUpdates = options.skipWatcherUpdates || options.fromDataSource;
-    if (!skipOverridUpdates) {
+    const skipOverrideUpdates = options.skipWatcherUpdates || options.fromDataSource;
+    if (!skipOverrideUpdates) {
       this.updateSymbolOverride();
     }