Fix dynamic attributes stops watching after a single update

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

@@ -55,8 +55,11 @@ import { ComponentDynamicValueListener } from './ComponentDynamicValueListener';
 import { DynamicValueWatcher } from './DynamicValueWatcher';
 
 export interface IComponent extends ExtractMethods<Component> { }
-
+export interface DynamicWatchersOptions {
-export interface SetAttrOptions extends SetOptions, UpdateStyleOptions { }
+  updateDynamicWatchers?: boolean;
+}
+export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DynamicWatchersOptions { }
+export interface ComponentSetOptions extends SetOptions, DynamicWatchersOptions { }
 
 const escapeRegExp = (str: string) => {
   return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
@@ -334,17 +337,17 @@ export default class Component extends StyleableModel<ComponentProperties> {
     }
   }
 
-  set<A extends string>(attributeName: A, value?: ComponentProperties[A], options?: SetOptions): this;
+  set<A extends string>(attributeName: A, value?: ComponentProperties[A], options?: ComponentSetOptions): this;
-  set(attributeName: Partial<ComponentProperties>, options?: SetOptions): this;
+  set(attributeName: Partial<ComponentProperties>, options?: ComponentSetOptions): this;
   set<A extends string>(
     attributeName: Partial<ComponentProperties> | A,
     value?: SetOptions | ComponentProperties[A],
-    options?: SetOptions,
+    options?: ComponentSetOptions,
   ): this;
   set<A extends string>(
     attributeName: Partial<ComponentProperties> | A,
     value?: SetOptions | ComponentProperties[A],
-    options?: SetOptions,
+    options: ComponentSetOptions = { updateDynamicWatchers: true },
   ): this {
     const props =
       typeof attributeName === 'object'
@@ -356,7 +359,9 @@ export default class Component extends StyleableModel<ComponentProperties> {
     const evaluatedProps = areStaticAttributes
       ? props
       : ComponentDynamicValueListener.evaluateComponentDef(props, this.em);
-    this.componentDVListener?.watchProps(props);
+    if (options.updateDynamicWatchers) {
+      this.componentDVListener?.watchProps(props);
+    }
 
     return super.set(evaluatedProps, options);
   }
@@ -678,10 +683,12 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * @example
    * component.setAttributes({ id: 'test', 'data-key': 'value' });
    */
-  setAttributes(attrs: ObjectAny, opts: SetAttrOptions = {}) {
+  setAttributes(attrs: ObjectAny, opts: SetAttrOptions = { updateDynamicWatchers: true }) {
     const areStaticAttributes = DynamicValueWatcher.areStaticValues(attrs);
     const evaluatedAttributes = areStaticAttributes ? attrs : DynamicValueWatcher.getStaticValues(attrs, this.em);
-    this.componentDVListener.setAttributes(attrs);
+    if (opts.updateDynamicWatchers) {
+      this.componentDVListener.setAttributes(attrs);
+    }
     this.set('attributes', { ...evaluatedAttributes }, opts);
 
     return this;

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

@@ -13,11 +13,11 @@ export class ComponentDynamicValueListener {
     em: EditorModel,
   ) {
     this.propertyWatchClass = new DynamicValueWatcher((key: string, value: any) => {
-      this.component.set(key, value);
+      this.component.set(key, value, { updateDynamicWatchers: false });
     }, em);
 
     this.attributeWatchClass = new DynamicValueWatcher((key: string, value: any) => {
-      this.component.setAttributes({ [key]: value });
+      this.component.setAttributes({ [key]: value }, { updateDynamicWatchers: false });
     }, em);
 
     this.traitsWatchClass = new DynamicValueWatcher((key: string, value: any) => {