Pages datasources

packages/core/src/data_sources/index.ts

@@ -88,7 +88,9 @@ export default class DataSourceManager extends ItemManagerModule<ModuleConfig, D
       acc[ds.id] = ds.records.reduce((accR, dr, i) => {
         const dataRecord = dr;
 
-        accR[dataRecord.id || i] = dataRecord.attributes;
+        const attributes = { ...dataRecord.attributes };
+        delete attributes.__p;
+        accR[dataRecord.id || i] = attributes;
 
         return accR;
       }, {} as ObjectAny);

packages/core/src/data_sources/model/ComponentWithCollectionsState.ts

@@ -0,0 +1,120 @@
+import { DataCollectionStateMap } from '../../data_sources/model/data_collection/types';
+import DataResolverListener from '../../data_sources/model/DataResolverListener';
+import DataVariable, { DataVariableProps, DataVariableType } from '../../data_sources/model/DataVariable';
+import Components from '../../dom_components/model/Components';
+import Component from '../../dom_components/model/Component';
+import { ObjectAny } from '../../common';
+import DataSource from './DataSource';
+import { isArray } from 'underscore';
+
+export type DataVariableMap = Record<string, DataVariableProps>;
+
+export type DataSourceRecords = DataVariableProps[] | DataVariableMap;
+
+export default class ComponentWithCollectionsState<DataResolverType> extends Component {
+  collectionsStateMap: DataCollectionStateMap = {};
+  dataSourceWatcher?: DataResolverListener;
+
+  constructor(props: any, opt: any) {
+    super(props, opt);
+    this.listenToPropsChange();
+  }
+
+  onCollectionsStateMapUpdate(collectionsStateMap: DataCollectionStateMap) {
+    this.collectionsStateMap = collectionsStateMap;
+    this.dataResolverWatchers?.onCollectionsStateMapUpdate?.();
+
+    this.components().forEach((cmp) => {
+      cmp.onCollectionsStateMapUpdate?.(collectionsStateMap);
+    });
+  }
+
+  syncOnComponentChange(model: Component, collection: Components, opts: any) {
+    const prev = this.collectionsStateMap;
+    this.collectionsStateMap = {};
+    super.syncOnComponentChange(model, collection, opts);
+    this.collectionsStateMap = prev;
+    this.onCollectionsStateMapUpdate(prev);
+  }
+
+  setDataResolver(dataResolver: DataResolverType | undefined) {
+    return this.set('dataResolver', dataResolver);
+  }
+
+  get dataResolverProps(): DataResolverType | undefined {
+    return this.get('dataResolver');
+  }
+
+  protected listenToDataSource() {
+    const path = this.dataResolverPath;
+    if (!path) return;
+
+    const { em, collectionsStateMap } = this;
+    this.dataSourceWatcher?.destroy();
+    this.dataSourceWatcher = new DataResolverListener({
+      em,
+      resolver: new DataVariable({ type: DataVariableType, path }, { em, collectionsStateMap }),
+      onUpdate: () => this.onDataSourceChange(),
+    });
+  }
+
+  protected listenToPropsChange() {
+    this.on(`change:dataResolver`, () => {
+      this.listenToDataSource();
+    });
+
+    this.listenToDataSource();
+  }
+
+  protected get dataSourceProps(): DataVariableProps | undefined {
+    return this.get('dataResolver');
+  }
+
+  protected get dataResolverPath(): string | undefined {
+    return this.dataSourceProps?.path;
+  }
+
+  protected onDataSourceChange() {
+    this.onCollectionsStateMapUpdate(this.collectionsStateMap);
+  }
+
+  protected getDataSourceItems(): DataSourceRecords {
+    const dataSourceProps = this.dataSourceProps;
+    if (!dataSourceProps) return [];
+    const items = this.listDataSourceItems(dataSourceProps);
+    if (items && isArray(items)) {
+      return items;
+    }
+
+    const clone = { ...items };
+    return clone;
+  }
+
+  protected listDataSourceItems(dataSource: DataSource | DataVariableProps): DataSourceRecords {
+    const path = dataSource instanceof DataSource ? dataSource.get('id')! : dataSource.path;
+    if (!path) return [];
+    let value = this.em.DataSources.getValue(path, []);
+
+    const isDatasourceId = path.split('.').length === 1;
+    if (isDatasourceId) {
+      value = Object.entries(value).map(([_, value]) => value);
+    }
+
+    return value;
+  }
+
+  protected getItemKey(items: DataVariableProps[] | { [x: string]: DataVariableProps }, index: number) {
+    return isArray(items) ? index : Object.keys(items)[index];
+  }
+
+  private removePropsListeners() {
+    this.off(`change:dataResolver`);
+    this.dataSourceWatcher?.destroy();
+    this.dataSourceWatcher = undefined;
+  }
+
+  destroy(options?: ObjectAny): false | JQueryXHR {
+    this.removePropsListeners();
+    return super.destroy(options);
+  }
+}

packages/core/src/data_sources/model/DataResolverListener.ts

@@ -17,7 +17,7 @@ export interface DataResolverListenerProps {
 }
 
 interface ListenerWithCallback extends DataSourceListener {
-  callback: () => void;
+  callback: (opts?: any) => void;
 }
 
 export default class DataResolverListener {
@@ -39,7 +39,11 @@ export default class DataResolverListener {
     this.onUpdate(value);
   };
 
-  private createListener(obj: any, event: string, callback: () => void = this.onChange): ListenerWithCallback {
+  private createListener(
+    obj: any,
+    event: string,
+    callback: (opts?: any) => void = this.onChange,
+  ): ListenerWithCallback {
     return { obj, event, callback };
   }
 
@@ -98,6 +102,15 @@ export default class DataResolverListener {
     dataListeners.push(
       this.createListener(em.DataSources.all, 'add remove reset', onChangeAndRewatch),
       this.createListener(em, `${DataSourcesEvents.path}:${normPath}`),
+      this.createListener(em, DataSourcesEvents.path, ({ path: eventPath }: { path: string }) => {
+        if (
+          // Skip same path as it's already handled be the listener above
+          eventPath !== path &&
+          eventPath.startsWith(path)
+        ) {
+          this.onChange();
+        }
+      }),
     );
 
     return dataListeners;

packages/core/src/data_sources/model/DataVariable.ts

@@ -1,7 +1,13 @@
 import { Model } from '../../common';
+import { keyRootData } from '../../dom_components/constants';
 import EditorModel from '../../editor/model/Editor';
 import { isDataVariable } from '../utils';
-import { DataCollectionStateMap, DataCollectionState, DataCollectionStateType } from './data_collection/types';
+import {
+  DataCollectionStateMap,
+  DataCollectionState,
+  DataCollectionStateType,
+  RootDataType,
+} from './data_collection/types';
 
 export const DataVariableType = 'data-variable' as const;
 
@@ -134,44 +140,52 @@ export default class DataVariable extends Model<DataVariableProps> {
     );
   }
 
-  private resolveCollectionVariable(): unknown {
+  private resolveCollectionVariable() {
     const { em, collectionsStateMap } = this;
     return DataVariable.resolveCollectionVariable(this.attributes, { em, collectionsStateMap });
   }
 
   static resolveCollectionVariable(
-    dataResolverProps: {
+    params: {
       collectionId?: string;
       variableType?: DataCollectionStateType;
       path?: string;
       defaultValue?: string;
     },
-    opts: DataVariableOptions,
-  ): unknown {
-    const { collectionId = '', variableType, path, defaultValue = '' } = dataResolverProps;
-    const { em, collectionsStateMap } = opts;
+    ctx: DataVariableOptions,
+  ) {
+    const { collectionId = '', variableType, path, defaultValue = '' } = params;
+    const { em, collectionsStateMap } = ctx;
 
     if (!collectionsStateMap) return defaultValue;
 
     const collectionItem = collectionsStateMap[collectionId];
     if (!collectionItem) return defaultValue;
 
+    if (collectionId === keyRootData) {
+      const root = collectionItem as RootDataType;
+      return path ? root?.[path as keyof RootDataType] : root;
+    }
+
     if (!variableType) {
       em.logError(`Missing collection variable type for collection: ${collectionId}`);
       return defaultValue;
     }
 
-    return variableType === 'currentItem'
-      ? DataVariable.resolveCurrentItem(collectionItem, path, collectionId, em)
-      : collectionItem[variableType];
+    if (variableType === 'currentItem') {
+      return DataVariable.resolveCurrentItem(collectionItem as DataCollectionState, path, collectionId, em);
+    }
+
+    const state = collectionItem as DataCollectionState;
+    return state[variableType] ?? defaultValue;
   }
 
   private static resolveCurrentItem(
     collectionItem: DataCollectionState,
     path: string | undefined,
     collectionId: string,
     em: EditorModel,
-  ): unknown {
+  ) {
     const currentItem = collectionItem.currentItem;
     if (!currentItem) {
       em.logError(`Current item is missing for collection: ${collectionId}`);