Feature/data sources

src/abstract/Module.ts

@@ -125,7 +125,7 @@ export abstract class ItemManagerModule<
   TCollection extends Collection = Collection
 > extends Module<TConf> {
   cls: any[] = [];
-  protected all: TCollection;
+  all: TCollection;
   view?: View;
 
   constructor(

src/common/index.ts

@@ -5,7 +5,7 @@ interface NOOP {}
 
 export type Debounced = Function & { cancel(): void };
 
-export type SetOptions = Backbone.ModelSetOptions & { avoidStore?: boolean };
+export type SetOptions = Backbone.ModelSetOptions & { avoidStore?: boolean; avoidTransformers?: boolean };
 
 export type AddOptions = Backbone.AddOptions & { temporary?: boolean; action?: string };
 

src/data_sources/index.ts

@@ -0,0 +1,59 @@
+import { ItemManagerModule, ModuleConfig } from '../abstract/Module';
+import { AddOptions, RemoveOptions } from '../common';
+import EditorModel from '../editor/model/Editor';
+import DataSource from './model/DataSource';
+import DataSources from './model/DataSources';
+import { DataSourceProps, DataSourcesEvents } from './types';
+import { Events } from 'backbone';
+
+export default class DataSourceManager extends ItemManagerModule<ModuleConfig, DataSources> {
+  storageKey = '';
+  events = DataSourcesEvents;
+  destroy(): void {}
+
+  constructor(em: EditorModel) {
+    super(em, 'DataSources', new DataSources([], em), DataSourcesEvents);
+    Object.assign(this, Events); // Mixin Backbone.Events
+  }
+
+  /**
+   * Add new data source.
+   * @param {Object} props Data source properties.
+   * @returns {[DataSource]} Added data source.
+   * @example
+   * const ds = dsm.add({
+   *  id: 'my_data_source_id',
+   *  records: [
+   *    { id: 'id1', name: 'value1' },
+   *    { id: 'id2', name: 'value2' }
+   *  ]
+   * });
+   */
+  add(props: DataSourceProps, opts: AddOptions = {}) {
+    const { all } = this;
+    props.id = props.id || this._createId();
+    return all.add(props, opts);
+  }
+
+  /**
+   * Get data source.
+   * @param {String} id Data source id.
+   * @returns {[DataSource]} Data source.
+   * @example
+   * const ds = dsm.get('my_data_source_id');
+   */
+  get(id: string) {
+    return this.all.get(id);
+  }
+
+  /**
+   * Remove data source.
+   * @param {String|[DataSource]} id Id of the data source.
+   * @returns {[DataSource]} Removed data source.
+   * @example
+   * const removed = dsm.remove('DS_ID');
+   */
+  remove(id: string | DataSource, opts?: RemoveOptions) {
+    return this.__remove(id, opts);
+  }
+}

src/data_sources/model/DataRecord.ts

@@ -0,0 +1,94 @@
+import { keys } from 'underscore';
+import { Model, SetOptions } from '../../common';
+import { DataRecordProps, DataSourcesEvents } from '../types';
+import DataRecords from './DataRecords';
+import DataSource from './DataSource';
+import EditorModel from '../../editor/model/Editor';
+import { _StringKey } from 'backbone';
+
+export default class DataRecord<T extends DataRecordProps = DataRecordProps> extends Model<T> {
+  constructor(props: T, opts = {}) {
+    super(props, opts);
+    this.on('change', this.handleChange);
+  }
+
+  get cl() {
+    return this.collection as unknown as DataRecords;
+  }
+
+  get dataSource(): DataSource {
+    return this.cl.dataSource;
+  }
+
+  get em(): EditorModel {
+    return this.dataSource.em;
+  }
+
+  get index(): number {
+    return this.cl.indexOf(this);
+  }
+
+  handleChange() {
+    const changed = this.changedAttributes();
+    keys(changed).forEach(prop => this.triggerChange(prop));
+  }
+
+  /**
+   * Get path of the record
+   * @param {String} prop Property name to include
+   * @returns {String}
+   * @example
+   * const pathRecord = record.getPath();
+   * // eg. 'SOURCE_ID.RECORD_ID'
+   * const pathRecord2 = record.getPath('myProp');
+   * // eg. 'SOURCE_ID.RECORD_ID.myProp'
+   */
+  getPath(prop?: string, opts: { useIndex?: boolean } = {}) {
+    const { dataSource, id, index } = this;
+    const dsId = dataSource.id;
+    const suffix = prop ? `.${prop}` : '';
+    return `${dsId}.${opts.useIndex ? index : id}${suffix}`;
+  }
+
+  getPaths(prop?: string) {
+    return [this.getPath(prop), this.getPath(prop, { useIndex: true })];
+  }
+
+  triggerChange(prop?: string) {
+    const { dataSource, em } = this;
+    const data = { dataSource, dataRecord: this };
+    const paths = this.getPaths(prop);
+    paths.forEach(path => em.trigger(`${DataSourcesEvents.path}:${path}`, { ...data, path }));
+  }
+
+  set<A extends _StringKey<T>>(
+    attributeName: Partial<T> | A,
+    value?: SetOptions | T[A] | undefined,
+    options?: SetOptions | undefined
+  ): this;
+  set(attributeName: unknown, value?: unknown, options?: SetOptions): DataRecord {
+    const onRecordSet = this.dataSource?.transformers?.onRecordSet;
+
+    if (options?.avoidTransformers) {
+      // @ts-ignore
+      super.set(attributeName, value, options);
+      return this;
+    }
+
+    if (onRecordSet) {
+      const newValue = onRecordSet({
+        id: this.id,
+        key: attributeName as string,
+        value,
+      });
+
+      // @ts-ignore
+      super.set(attributeName, newValue, options);
+      return this;
+    } else {
+      // @ts-ignore
+      super.set(attributeName, value, options);
+      return this;
+    }
+  }
+}

src/data_sources/model/DataRecords.ts

@@ -0,0 +1,36 @@
+import { Model } from 'backbone';
+import { AddOptions, Collection } from '../../common';
+import { DataRecordProps } from '../types';
+import DataRecord from './DataRecord';
+import DataSource from './DataSource';
+
+type AddRecordOptions = AddOptions & { avoidTransformers?: boolean };
+
+export default class DataRecords extends Collection<DataRecord> {
+  dataSource: DataSource;
+
+  constructor(models: DataRecord[] | DataRecordProps[], options: { dataSource: DataSource }) {
+    super(models, options);
+    this.dataSource = options.dataSource;
+  }
+
+  add(model: {} | DataRecord<DataRecordProps>, options?: AddRecordOptions): DataRecord<DataRecordProps>;
+  add(models: ({} | DataRecord<DataRecordProps>)[], options?: AddRecordOptions): DataRecord<DataRecordProps>[];
+  add(models: unknown, options?: AddRecordOptions): DataRecord<DataRecordProps> | DataRecord<DataRecordProps>[] {
+    const onRecordAdd = this.dataSource?.transformers?.onRecordAdd;
+
+    if (options?.avoidTransformers) {
+      return super.add(models as DataRecord<DataRecordProps>, options);
+    }
+
+    if (onRecordAdd) {
+      const m = (Array.isArray(models) ? models : [models]).map(model => onRecordAdd({ record: model }));
+
+      return super.add(m, options);
+    } else {
+      return super.add(models as DataRecord<DataRecordProps>, options);
+    }
+  }
+}
+
+DataRecords.prototype.model = DataRecord;

src/data_sources/model/DataSource.ts

@@ -0,0 +1,70 @@
+import { AddOptions, CombinedModelConstructorOptions, Model, RemoveOptions } from '../../common';
+import EditorModel from '../../editor/model/Editor';
+import { DataRecordProps, DataSourceProps, DataSourceTransformers } from '../types';
+import DataRecord from './DataRecord';
+import DataRecords from './DataRecords';
+import DataSources from './DataSources';
+
+interface DataSourceOptions extends CombinedModelConstructorOptions<{ em: EditorModel }, DataSource> {}
+
+export default class DataSource extends Model<DataSourceProps> {
+  transformers: DataSourceTransformers;
+
+  defaults() {
+    return {
+      records: [],
+      transformers: {},
+    };
+  }
+
+  constructor(props: DataSourceProps, opts: DataSourceOptions) {
+    super(props, opts);
+    const { records, transformers } = props;
+    this.transformers = transformers || {};
+
+    if (!(records instanceof DataRecords)) {
+      this.set({ records: new DataRecords(records!, { dataSource: this }) });
+    }
+
+    this.listenTo(this.records, 'add', this.onAdd);
+  }
+
+  get records() {
+    return this.attributes.records as DataRecords;
+  }
+
+  get em() {
+    return (this.collection as unknown as DataSources).em;
+  }
+
+  onAdd(dr: DataRecord) {
+    dr.triggerChange();
+  }
+
+  addRecord(record: DataRecordProps, opts?: AddOptions) {
+    const onRecordAdd = this.transformers.onRecordAdd;
+    if (onRecordAdd) {
+      record = onRecordAdd({ record });
+    }
+
+    return this.records.add(record, opts);
+  }
+
+  getRecord(id: string | number): DataRecord | undefined {
+    const onRecordRead = this.transformers.onRecordRead;
+    const record = this.records.get(id);
+    if (record && onRecordRead) {
+      return onRecordRead({ record });
+    }
+
+    return record;
+  }
+
+  getRecords() {
+    return [...this.records.models];
+  }
+
+  removeRecord(id: string | number, opts?: RemoveOptions): DataRecord | undefined {
+    return this.records.remove(id, opts);
+  }
+}

src/data_sources/model/DataSources.ts

@@ -0,0 +1,18 @@
+import { Collection } from '../../common';
+import EditorModel from '../../editor/model/Editor';
+import { DataSourceProps } from '../types';
+import DataSource from './DataSource';
+
+export default class DataSources extends Collection<DataSource> {
+  em: EditorModel;
+
+  constructor(models: DataSource[] | DataSourceProps[], em: EditorModel) {
+    super(models, em);
+    this.em = em;
+
+    // @ts-ignore We need to inject `em` for pages created on reset from the Storage load
+    this.model = (props: DataSourceProps, opts = {}) => {
+      return new DataSource(props, { ...opts, em });
+    };
+  }
+}

src/data_sources/model/StyleDataVariable.ts

@@ -0,0 +1,42 @@
+import { Model } from '../../common';
+import EditorModel from '../../editor/model/Editor';
+import { get, stringToPath } from '../../utils/mixins';
+
+export default class StyleDataVariable extends Model {
+  em?: EditorModel;
+
+  defaults() {
+    return {
+      type: 'data-variable-css',
+      value: '',
+      path: '',
+    };
+  }
+
+  initialize(attrs: any, options: any) {
+    super.initialize(attrs, options);
+    this.em = options.em;
+    this.listenToDataSource();
+
+    return this;
+  }
+
+  listenToDataSource() {
+    const { path } = this.attributes;
+    const resolvedPath = stringToPath(path).join('.');
+
+    if (this.em) {
+      this.listenTo(this.em.DataSources, `change:${resolvedPath}`, this.onDataSourceChange);
+    }
+  }
+
+  onDataSourceChange() {
+    const { path } = this.attributes;
+    const [dsId, drId, key] = stringToPath(path);
+    const ds = this?.em?.DataSources.get(dsId);
+    const dr = ds && ds.getRecord(drId);
+    const newValue = dr?.get(key);
+
+    this.set({ value: newValue });
+  }
+}