Fix attributes not watching after refactor

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

@@ -55,13 +55,13 @@ import { ComponentDynamicValueWatcher } from './ComponentDynamicValueWatcher';
 import { DynamicValueWatcher } from './DynamicValueWatcher';
 import { DynamicValueDefinition } from '../../data_sources/types';
 
-export interface IComponent extends ExtractMethods<Component> {}
+export interface IComponent extends ExtractMethods<Component> { }
 export interface DynamicWatchersOptions {
   skipWatcherUpdates?: boolean;
   fromDataSource?: boolean;
 }
-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, '\\$&');
@@ -227,12 +227,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)
@@ -240,12 +240,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;
@@ -267,7 +267,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
   constructor(props: ComponentProperties = {}, opt: ComponentOptions) {
     super(props, opt);
     this.componentDVListener = new ComponentDynamicValueWatcher(this, opt.em);
-    this.componentDVListener.watchComponentDef(props);
+    this.componentDVListener.addProps(props);
 
     bindAll(this, '__upSymbProps', '__upSymbCls', '__upSymbComps');
     const em = opt.em;
@@ -706,9 +706,11 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * component.addAttributes({ 'data-key': 'value' });
    */
   addAttributes(attrs: ObjectAny, opts: SetAttrOptions = {}) {
+    const dynamicAttributes = this.componentDVListener.getDynamicAttributesDefs();
     return this.setAttributes(
       {
         ...this.getAttributes({ noClass: true }),
+        ...dynamicAttributes,
         ...attrs,
       },
       opts,

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

@@ -17,41 +17,40 @@ export class ComponentDynamicValueWatcher {
 
   private createPropertyUpdater() {
     return (key: string, value: any) => {
-      this.component.set(key, value, { skipWatcherUpdates: true, avoidStore: true });
+      this.component.set(key, value, { fromDataSource: true, avoidStore: true });
     };
   }
 
   private createAttributeUpdater() {
     return (key: string, value: any) => {
-      this.component.addAttributes({ [key]: value }, { skipWatcherUpdates: true, avoidStore: true });
+      this.component.addAttributes({ [key]: value }, { fromDataSource: true, avoidStore: true });
     };
   }
 
-  watchComponentDef(values: ObjectAny) {
-    this.addProps(values);
-    this.addAttributes(values.attributes);
-  }
-
   addProps(props: ObjectAny) {
     this.propertyWatcher.addDynamicValues(props);
   }
 
-  getDynamicPropsDefs() {
+  addAttributes(attributes: ObjectAny) {
-    return this.propertyWatcher.getAllSerializableValues();
+    this.attributeWatcher.addDynamicValues(attributes);
   }
 
   setAttributes(attributes: ObjectAny) {
     this.attributeWatcher.setDynamicValues(attributes);
   }
 
-  addAttributes(attributes: ObjectAny) {
-    this.attributeWatcher.addDynamicValues(attributes);
-  }
-
   removeAttributes(attributes: string[]) {
     this.attributeWatcher.removeListeners(attributes);
   }
 
+  getDynamicPropsDefs() {
+    return this.propertyWatcher.getAllSerializableValues();
+  }
+
+  getDynamicAttributesDefs() {
+    return this.attributeWatcher.getAllSerializableValues();
+  }
+
   getAttributesDefsOrValues(attributes: ObjectAny) {
     return this.attributeWatcher.getSerializableValues(attributes);
   }

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

@@ -46,7 +46,6 @@ export class DynamicValueWatcher {
     const propsKeys = Object.keys(dynamicProps);
     for (let index = 0; index < propsKeys.length; index++) {
       const key = propsKeys[index];
-
       this.dynamicVariableListeners[key] = new DynamicVariableListenerManager({
         em: this.em,
         dataVariable: dynamicProps[key],