fix: more usage of fromPath for nested items

src/data_sources/model/ComponentDataVariable.ts

@@ -1,6 +1,6 @@
 import Component from '../../dom_components/model/Component';
 import { ToHTMLOptions } from '../../dom_components/model/types';
-import { stringToPath, toLowerCase } from '../../utils/mixins';
+import { toLowerCase } from '../../utils/mixins';
 import { DataVariableType } from './DataVariable';
 
 export default class ComponentDataVariable extends Component {
@@ -14,10 +14,11 @@ export default class ComponentDataVariable extends Component {
     };
   }
 
-  getInnerHTML(opts: ToHTMLOptions & { keepVariables?: boolean } = {}) {
+  getInnerHTML(opts: ToHTMLOptions) {
     const { path, value } = this.attributes;
+    const val = this.em.DataSources.getValue(path, value);
 
-    return opts.keepVariables ? path : this.em.DataSources.getValue(path, value);
+    return val;
   }
 
   static isComponent(el: HTMLElement) {

src/data_sources/model/DataVariable.ts

@@ -36,10 +36,9 @@ export default class DataVariable extends Model {
   }
 
   getDataValue() {
-    const { path } = this.attributes;
+    const { path, value } = this.attributes;
-    const [dsId, drId, key] = stringToPath(path);
+    const val = this.em?.DataSources?.getValue?.(path, value);
-    const ds = this?.em?.DataSources.get(dsId);
+
-    const dr = ds && ds.getRecord(drId);
+    return val;
-    return dr?.get(key);
   }
 }

src/domain_abstract/model/StyleableModel.ts

@@ -148,11 +148,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
 
     dataListeners.forEach((ls) =>
       this.listenTo(ls.obj, ls.event, () => {
-        const [dsId, drId, keyPath] = stringToPath(path);
+        const newValue = dataVar.getDataValue();
-        const ds = em?.DataSources.get(dsId);
-        const dr = ds && ds.records.get(drId);
-        const newValue = dr && dr.get(keyPath);
-
         this.updateStyleProp(styleProp, newValue);
       }),
     );
@@ -185,12 +181,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
       }
 
       if (styleValue instanceof StyleDataVariable) {
-        const [dsId, drId, keyPath] = stringToPath(styleValue.get('path'));
+        resolvedStyle[key] = styleValue.getDataValue();
-        const ds = this.em?.DataSources.get(dsId);
-        const dr = ds && ds.records.get(drId);
-        const resolvedValue = dr && dr.get(keyPath);
-
-        resolvedStyle[key] = resolvedValue || styleValue.get('value');
       }
     });
     return resolvedStyle;

test/specs/data_sources/model/StyleDataVariable.ts

@@ -105,4 +105,41 @@ describe('StyleDataVariable', () => {
     const style = cmp.getStyle();
     expect(style).toHaveProperty('color', 'black');
   });
+
+  test('component initializes and updates with data-variable style for nested object', () => {
+    const styleDataSource: DataSourceProps = {
+      id: 'style-data',
+      records: [
+        {
+          id: 'id1',
+          nestedObject: {
+            color: 'red',
+          },
+        },
+      ],
+    };
+    dsm.add(styleDataSource);
+
+    const cmp = cmpRoot.append({
+      tagName: 'h1',
+      type: 'text',
+      content: 'Hello World',
+      style: {
+        color: {
+          type: DataVariableType,
+          value: 'black',
+          path: 'style-data.id1.nestedObject.color',
+        },
+      },
+    })[0];
+
+    const style = cmp.getStyle();
+    expect(style).toHaveProperty('color', 'red');
+
+    const ds = dsm.get('style-data');
+    ds.getRecord('id1')?.set({ nestedObject: { color: 'blue' } });
+
+    const updatedStyle = cmp.getStyle();
+    expect(updatedStyle).toHaveProperty('color', 'blue');
+  });
 });

test/specs/data_sources/model/TraitDataVariable.ts

@@ -134,6 +134,42 @@ describe('TraitDataVariable', () => {
       expect(input?.getAttribute('value')).toBe('new-value');
       expect(cmp?.getAttributes().value).toBe('new-value');
     });
+
+    test('component initializes data-variable value for nested object', () => {
+      const inputDataSource: DataSourceProps = {
+        id: 'nested-input-data',
+        records: [
+          {
+            id: 'id1',
+            nestedObject: {
+              value: 'nested-value',
+            },
+          },
+        ],
+      };
+      dsm.add(inputDataSource);
+
+      const cmp = cmpRoot.append({
+        tagName: 'input',
+        traits: [
+          'name',
+          {
+            type: 'text',
+            label: 'Value',
+            name: 'value',
+            value: {
+              type: DataVariableType,
+              value: 'default',
+              path: 'nested-input-data.id1.nestedObject.value',
+            },
+          },
+        ],
+      })[0];
+
+      const input = cmp.getEl();
+      expect(input?.getAttribute('value')).toBe('nested-value');
+      expect(cmp?.getAttributes().value).toBe('nested-value');
+    });
   });
 
   describe('checkbox input component', () => {