feat: changeProp usage

src/dom_components/model/Component.ts

@@ -909,14 +909,18 @@ export default class Component extends StyleableModel<ComponentProperties> {
     const traitDataVariableAttr: ObjectAny = {};
     const traits = this.traits;
     traits.each((trait) => {
-      if (!trait.changeProp) {
-        const name = trait.getName();
-        const value = trait.getInitValue();
-        if (trait.dataVariable) {
-          traitDataVariableAttr[name] = trait.dataVariable;
-        }
+      const name = trait.getName();
+      const value = trait.getInitValue();
+
+      if (trait.changeProp) {
+        this.set(name, value);
+      } else {
         if (name && value) attrs[name] = value;
       }
+
+      if (trait.dataVariable) {
+        traitDataVariableAttr[name] = trait.dataVariable;
+      }
     });
     traits.length && this.set('attributes', attrs);
     Object.keys(traitDataVariableAttr).length && this.set('attributes-data-variable', traitDataVariableAttr);

test/specs/data_sources/model/TraitDataVariable.ts

@@ -287,4 +287,40 @@ describe('TraitDataVariable', () => {
       expect(cmp?.getAttributes().href).toBe('url-to-dog-image');
     });
   });
+
+  describe('changeProp', () => {
+    test('component initializes and updates data-variable value using changeProp', () => {
+      const inputDataSource: DataSourceProps = {
+        id: 'test-change-prop-datasource',
+        records: [{ id: 'id1', value: 'I love grapes' }],
+      };
+      dsm.add(inputDataSource);
+
+      const cmp = cmpRoot.append({
+        tagName: 'div',
+        type: 'default',
+        traits: [
+          {
+            name: 'test-change-prop',
+            type: 'text',
+            changeProp: true,
+            value: {
+              type: DataVariableType,
+              value: 'default',
+              path: `${inputDataSource.id}.id1.value`,
+            },
+          },
+        ],
+      })[0];
+
+      let property = cmp.get('test-change-prop');
+      expect(property).toBe('I love grapes');
+
+      const testDs = dsm.get(inputDataSource.id);
+      testDs.getRecord('id1')?.set({ value: 'I really love grapes' });
+
+      property = cmp.get('test-change-prop');
+      expect(property).toBe('I really love grapes');
+    });
+  });
 });