Update collection items on datasource updates

packages/core/src/data_sources/model/collection_component/CollectionComponent.ts

@@ -1,4 +1,4 @@
-import { DataVariableType } from './../DataVariable';
+import DataVariable, { DataVariableType } from './../DataVariable';
 import { isArray } from 'underscore';
 import Component, { keySymbol, keySymbolOvrd, keySymbols } from '../../../dom_components/model/Component';
 import { ComponentDefinition, ComponentOptions, ComponentProperties } from '../../../dom_components/model/types';
@@ -9,6 +9,7 @@ import EditorModel from '../../../editor/model/Editor';
 import { keyCollectionsStateMap } from '../../../dom_components/model/Component';
 import { CollectionComponentDefinition, CollectionDefinition, CollectionState, CollectionsStateMap } from './types';
 import { keyCollectionDefinition, keyInnerCollectionState, CollectionComponentType } from './constants';
+import DynamicVariableListenerManager from '../DataVariableListenerManager';
 
 export default class CollectionComponent extends Component {
   constructor(props: CollectionComponentDefinition, opt: ComponentOptions) {
@@ -32,12 +33,35 @@ export default class CollectionComponent extends Component {
 
     // @ts-ignore
     super(conditionalCmptDef, opt);
+
+    if (this.hasDynamicDataSource()) {
+      const path = this.get(keyCollectionDefinition).config.dataSource?.path;
+      new DynamicVariableListenerManager({
+        em: em,
+        dataVariable: new DataVariable(
+          {
+            type: 'data-variable',
+            path,
+          },
+          { em },
+        ),
+        updateValueFromDataVariable: () => {
+          const collectionItems = getCollectionItems(em, collectionDefinition, parentCollectionStateMap, opt);
+          this.components(collectionItems);
+        },
+      });
+    }
   }
 
   static isComponent(el: HTMLElement) {
     return toLowerCase(el.tagName) === CollectionComponentType;
   }
 
+  hasDynamicDataSource() {
+    const dataSource = this.get(keyCollectionDefinition).config.dataSource;
+    return typeof dataSource === 'object' && dataSource.type === DataVariableType;
+  }
+
   toJSON(opts?: ObjectAny) {
     const json = super.toJSON(opts) as CollectionComponentDefinition;
 
@@ -109,7 +133,7 @@ function getCollectionItems(
 
     components.push(cmpDefinition);
   }
-  
+
   return components;
 }
 

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

@@ -74,6 +74,7 @@ export class ComponentDynamicValueWatcher {
     const haveOverridenAttributes = Object.keys(attributesKeys).length;
     if (haveOverridenAttributes) combinedKeys.push('attributes');
 
+    if (!combinedKeys.length && !this.component.getSymbolOverride()) return;
     this.component.setSymbolOverride(combinedKeys);
   }
 

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

@@ -3,10 +3,8 @@ import { CollectionsStateMap } from '../../data_sources/model/collection_compone
 import { ObjectAny } from '../../common';
 import DynamicVariableListenerManager from '../../data_sources/model/DataVariableListenerManager';
 import { evaluateDynamicValueDefinition, isDynamicValueDefinition } from '../../data_sources/model/utils';
-import { DynamicValue } from '../../data_sources/types';
 import EditorModel from '../../editor/model/Editor';
 import Component from './Component';
-import CollectionVariable from '../../data_sources/model/collection_component/CollectionVariable';
 
 export interface DynamicWatchersOptions {
   skipWatcherUpdates?: boolean;
@@ -39,25 +37,30 @@ export class DynamicValueWatcher {
 
   addDynamicValues(values: ObjectAny | undefined, options: DynamicWatchersOptions = {}) {
     if (!values) return {};
-    const { evaluatedValues, dynamicValues } = this.evaluateValues(values);
+    const evaluatedValues = this.evaluateValues(values);
 
     const shouldSkipWatcherUpdates = options.skipWatcherUpdates || options.fromDataSource;
     if (!shouldSkipWatcherUpdates) {
-      this.updateListeners(dynamicValues);
+      this.updateListeners(values);
     }
 
     return evaluatedValues;
   }
 
-  private updateListeners(dynamicProps: { [key: string]: DynamicValue }) {
+  private updateListeners(values: { [key: string]: any }) {
     const em = this.options.em;
-    this.removeListeners(Object.keys(dynamicProps));
-    const propsKeys = Object.keys(dynamicProps);
+    this.removeListeners(Object.keys(values));
+    const propsKeys = Object.keys(values);
     for (let index = 0; index < propsKeys.length; index++) {
       const key = propsKeys[index];
+      if (!isDynamicValueDefinition(values[key])) {
+        continue;
+      }
+
+      const { variable } = evaluateDynamicValueDefinition(values[key], this.options);
       this.dynamicVariableListeners[key] = new DynamicVariableListenerManager({
         em: em,
-        dataVariable: dynamicProps[key],
+        dataVariable: variable,
         updateValueFromDataVariable: (value: any) => {
           this.updateFn.bind(this)(this.component, key, value);
         },
@@ -66,28 +69,20 @@ export class DynamicValueWatcher {
   }
 
   private evaluateValues(values: ObjectAny) {
-    const dynamicValues: {
-      [key: string]: DynamicValue;
-    } = {};
     const evaluatedValues: {
       [key: string]: any;
     } = { ...values };
-    const valuesToBeOverriden: string[] = [];
     const propsKeys = Object.keys(values);
     for (let index = 0; index < propsKeys.length; index++) {
       const key = propsKeys[index];
       if (!isDynamicValueDefinition(values[key])) {
         continue;
       }
-      const { value, variable } = evaluateDynamicValueDefinition(values[key], this.options);
+      const { value } = evaluateDynamicValueDefinition(values[key], this.options);
       evaluatedValues[key] = value;
-      dynamicValues[key] = variable;
-      if (variable instanceof CollectionVariable) {
-        valuesToBeOverriden.push(key);
-      }
     }
 
-    return { evaluatedValues, dynamicValues, valuesToBeOverriden };
+    return evaluatedValues;
   }
 
   /**