Datasource types (#6300)

packages/core/src/data_sources/index.ts

@@ -42,7 +42,7 @@ import { get, stringToPath } from '../utils/mixins';
 import DataRecord from './model/DataRecord';
 import DataSource from './model/DataSource';
 import DataSources from './model/DataSources';
-import { DataSourcesEvents, DataSourceProps } from './types';
+import { DataSourcesEvents, DataSourceProps, DataRecordProps } from './types';
 import { Events } from 'backbone';
 
 export default class DataSourceManager extends ItemManagerModule<ModuleConfig, DataSources> {
@@ -68,10 +68,11 @@ export default class DataSourceManager extends ItemManagerModule<ModuleConfig, D
    *  ]
    * });
    */
-  add(props: DataSourceProps, opts: AddOptions = {}) {
+  add<DRProps extends DataRecordProps>(props: DataSourceProps<DRProps>, opts: AddOptions = {}): DataSource<DRProps> {
     const { all } = this;
     props.id = props.id || this._createId();
-    return all.add(props, opts);
+
+    return all.add(props, opts) as DataSource<DRProps>;
   }
 
   /**

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

@@ -25,7 +25,7 @@
 
 import { keys } from 'underscore';
 import { Model, SetOptions } from '../../common';
-import { DataRecordProps, DataSourcesEvents } from '../types';
+import { DataRecordProps, DataSourcesEvents, DeepPartialDot } from '../types';
 import DataRecords from './DataRecords';
 import DataSource from './DataSource';
 import EditorModel from '../../editor/model/Editor';
@@ -135,7 +135,7 @@ export default class DataRecord<T extends DataRecordProps = DataRecordProps> ext
    * // Sets 'name' property to 'newValue'
    */
   set<A extends _StringKey<T>>(
-    attributeName: Partial<T> | A,
+    attributeName: DeepPartialDot<T> | A,
     value?: SetOptions | T[A] | undefined,
     options?: SetOptions | undefined,
   ): this;

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

@@ -31,18 +31,15 @@
 
 import { AddOptions, collectionEvents, CombinedModelConstructorOptions, Model, RemoveOptions } from '../../common';
 import EditorModel from '../../editor/model/Editor';
-import { DataSourceProps } from '../types';
-import { DataSourceTransformers, DataSourceType, SingleRecordType } from '../types';
+import { DataSourceTransformers, DataSourceType, DataSourceProps, RecordPropsType, DataRecordProps } 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<
-  DS extends DataSourceType = DataSourceType,
-  DR extends SingleRecordType<DS['records']> = SingleRecordType<DS['records']>,
-> extends Model<DS> {
+export default class DataSource<DRProps extends DataRecordProps = DataRecordProps> extends Model<
+  DataSourceType<DRProps>
+> {
   transformers: DataSourceTransformers;
 
   /**
@@ -56,7 +53,7 @@ export default class DataSource<
     return {
       records: [],
       transformers: {},
-    } as unknown as Partial<DS>;
+    } as unknown as DataSourceType<DRProps>;
   }
 
   /**
@@ -64,23 +61,23 @@ export default class DataSource<
    * It sets up the transformers and initializes the collection of records.
    * If the `records` property is not an instance of `DataRecords`, it will be converted into one.
    *
-   * @param {DataSourceProps} props - Properties to initialize the data source.
+   * @param {DataSourceProps<DRProps>} props - Properties to initialize the data source.
    * @param {DataSourceOptions} opts - Options to initialize the data source.
    * @name constructor
    */
-  constructor(props: DataSourceProps<DS>, opts: DataSourceOptions) {
+  constructor(props: DataSourceProps<DRProps>, opts: DataSourceOptions) {
     super(
       {
         ...props,
         records: [],
-      } as unknown as DS,
+      } as unknown as DataSourceType<DRProps>,
       opts,
     );
     const { records, transformers } = props;
-    this.transformers = transformers || {};
+    this.transformers = transformers || ({} as DataSourceTransformers);
 
     if (!(records instanceof DataRecords)) {
-      this.set({ records: new DataRecords(records!, { dataSource: this }) } as Partial<DS>);
+      this.set({ records: new DataRecords(records!, { dataSource: this }) } as Partial<DataSourceType<DRProps>>);
     }
 
     this.listenTo(this.records, 'add', this.onAdd);
@@ -90,11 +87,11 @@ export default class DataSource<
   /**
    * Retrieves the collection of records associated with this data source.
    *
-   * @returns {DataRecords} The collection of data records.
+   * @returns {DataRecords<DRProps>} The collection of data records.
    * @name records
    */
   get records() {
-    return this.attributes.records as NonNullable<DS['records']>;
+    return this.attributes.records as NonNullable<DataRecords<DRProps>>;
   }
 
   /**
@@ -111,23 +108,23 @@ export default class DataSource<
    * Handles the `add` event for records in the data source.
    * This method triggers a change event on the newly added record.
    *
-   * @param {DataRecord} dr - The data record that was added.
+   * @param {DataRecord<DRProps>} dr - The data record that was added.
    * @private
    * @name onAdd
    */
-  onAdd(dr: DataRecord) {
+  onAdd(dr: DataRecord<DRProps>) {
     dr.triggerChange();
   }
 
   /**
    * Adds a new record to the data source.
    *
-   * @param {DataRecordProps} record - The properties of the record to add.
+   * @param {DRProps} record - The properties of the record to add.
    * @param {AddOptions} [opts] - Options to apply when adding the record.
    * @returns {DataRecord} The added data record.
    * @name addRecord
    */
-  addRecord(record: DR, opts?: AddOptions) {
+  addRecord(record: DRProps, opts?: AddOptions) {
     return this.records.add(record, opts);
   }
 
@@ -135,18 +132,18 @@ export default class DataSource<
    * Retrieves a record from the data source by its ID.
    *
    * @param {string | number} id - The ID of the record to retrieve.
-   * @returns {DataRecord | undefined} The data record, or `undefined` if no record is found with the given ID.
+   * @returns {DataRecord<DRProps> | undefined} The data record, or `undefined` if no record is found with the given ID.
    * @name getRecord
    */
   getRecord(id: string | number) {
-    return this.records.get(id) as DR | undefined;
+    return this.records.get(id) as DataRecord | undefined;
   }
 
   /**
    * Retrieves all records from the data source.
    * Each record is processed with the `getRecord` method to apply any read transformers.
    *
-   * @returns {Array<DataRecord | undefined>} An array of data records.
+   * @returns {Array<DataRecord<DRProps> | undefined>} An array of data records.
    * @name getRecords
    */
   getRecords() {
@@ -158,10 +155,10 @@ export default class DataSource<
    *
    * @param {string | number} id - The ID of the record to remove.
    * @param {RemoveOptions} [opts] - Options to apply when removing the record.
-   * @returns {DataRecord | undefined} The removed data record, or `undefined` if no record is found with the given ID.
+   * @returns {DataRecord<DRProps> | undefined} The removed data record, or `undefined` if no record is found with the given ID.
    * @name removeRecord
    */
-  removeRecord(id: string | number, opts?: RemoveOptions): DataRecord | undefined {
+  removeRecord(id: string | number, opts?: RemoveOptions) {
     const record = this.getRecord(id);
     if (record?.mutable === false && !opts?.dangerously) {
       throw new Error('Cannot remove immutable record');
@@ -173,11 +170,11 @@ export default class DataSource<
   /**
    * Replaces the existing records in the data source with a new set of records.
    *
-   * @param {Array<DataRecordProps>} records - An array of data record properties to set.
+   * @param {Array<DRProps>} records - An array of data record properties to set.
    * @returns {Array<DataRecord>} An array of the added data records.
    * @name setRecords
    */
-  setRecords(records: DR[]) {
+  setRecords(records: DRProps[]) {
     this.records.reset([], { silent: true });
 
     records.forEach((record) => {

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

@@ -1,12 +1,12 @@
 import { Collection } from '../../common';
 import EditorModel from '../../editor/model/Editor';
-import { DataSourceProps } from '../types';
+import { DataRecordProps, DataSourceProps } from '../types';
 import DataSource from './DataSource';
 
 export default class DataSources extends Collection<DataSource> {
   em: EditorModel;
 
-  constructor(models: DataSource[] | DataSourceProps[], em: EditorModel) {
+  constructor(models: DataSource[] | DataSourceProps<DataRecordProps>[], em: EditorModel) {
     super(models, em);
     this.em = em;
 

packages/core/src/data_sources/types.ts

@@ -1,4 +1,4 @@
-import { Collection, ObjectAny } from '../common';
+import { ObjectAny } from '../common';
 import ComponentDataVariable from './model/ComponentDataVariable';
 import DataRecord from './model/DataRecord';
 import DataRecords from './model/DataRecords';
@@ -17,6 +17,8 @@ export interface DataRecordProps extends ObjectAny {
    * Specifies if the record is mutable. Defaults to `true`.
    */
   mutable?: boolean;
+
+  [key: string]: any;
 }
 
 export interface DataVariableListener {
@@ -40,15 +42,13 @@ interface BaseDataSource {
    */
   skipFromStorage?: boolean;
 }
-export interface DataSourceType<DR extends DataRecordProps = DataRecordProps> extends BaseDataSource {
+export interface DataSourceType<DR extends DataRecordProps> extends BaseDataSource {
   records: DataRecords<DR>;
 }
-export interface DataSourceProps<DS extends DataSourceType = DataSourceType> extends BaseDataSource {
-  records?: DataRecords<ExtractRecordType<DS>> | DataRecord<ExtractRecordType<DS>>[] | ExtractRecordType<DS>[];
+export interface DataSourceProps<DR extends DataRecordProps> extends BaseDataSource {
+  records?: DataRecords<DR> | DataRecord<DR>[] | DR[];
 }
-export type ExtractRecordType<T> = T extends { records: DataRecords<infer DR> } ? DR : never;
-export type SingleRecordType<T> = T extends Collection<infer U> ? U : never;
-
+export type RecordPropsType<T> = T extends DataRecord<infer U> ? U : never;
 export interface DataSourceTransformers {
   onRecordSetValue?: (args: { id: string | number; key: string; value: any }) => any;
 }
@@ -93,3 +93,24 @@ export enum DataSourcesEvents {
   all = 'data',
 }
 /**{END_EVENTS}*/
+type DotSeparatedKeys<T> = T extends object
+  ? {
+      [K in keyof T]: K extends string
+        ? T[K] extends object
+          ? `${K}` | `${K}.${DotSeparatedKeys<T[K]>}`
+          : `${K}`
+        : never;
+    }[keyof T]
+  : never;
+
+export type DeepPartialDot<T> = {
+  [P in DotSeparatedKeys<T>]?: P extends `${infer K}.${infer Rest}`
+    ? K extends keyof T
+      ? Rest extends DotSeparatedKeys<T[K]>
+        ? DeepPartialDot<T[K]>[Rest]
+        : never
+      : never
+    : P extends keyof T
+      ? T[P]
+      : never;
+};

packages/core/test/specs/data_sources/index.ts

@@ -6,7 +6,8 @@ import EditorModel from '../../../src/editor/model/Editor';
 describe('DataSourceManager', () => {
   let em: EditorModel;
   let dsm: DataSourceManager;
-  const dsTest: DataSourceProps = {
+  type Record = { id: string; name: string };
+  const dsTest: DataSourceProps<Record> = {
     id: 'ds1',
     records: [
       { id: 'id1', name: 'Name1' },

packages/core/test/specs/data_sources/jsonplaceholder.ts

@@ -6,39 +6,46 @@ import { setupTestEditor } from '../../common';
 import EditorModel from '../../../src/editor/model/Editor';
 import htmlFormat from 'pretty';
 
+type Comment = {
+  postId: number;
+  id: string;
+  name: string;
+  email: string;
+  body: string;
+};
 function getComments() {
   const json = [
     {
       postId: 1,
-      id: 1,
+      id: '1',
       name: 'id labore ex et quam laborum',
       email: 'Eliseo@gardner.biz',
       body: 'laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium',
     },
     {
       postId: 1,
-      id: 2,
+      id: '2',
       name: 'quo vero reiciendis velit similique earum',
       email: 'Jayne_Kuhic@sydney.com',
       body: 'est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et',
     },
     {
       postId: 1,
-      id: 3,
+      id: '3',
       name: 'odio adipisci rerum aut animi',
       email: 'Nikita@garfield.biz',
       body: 'quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione',
     },
     {
       postId: 1,
-      id: 4,
+      id: '4',
       name: 'alias odio sit',
       email: 'Lew@alysha.tv',
       body: 'non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati',
     },
     {
       postId: 1,
-      id: 5,
+      id: '5',
       name: 'vero eaque aliquid doloribus et culpa',
       email: 'Hayden@althea.biz',
       body: 'harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et',
@@ -64,7 +71,7 @@ describe('JsonPlaceholder Usage', () => {
 
   test('should render a list of comments from jsonplaceholder api', async () => {
     const comments = getComments();
-    const dataSource: DataSourceProps = {
+    const dataSource: DataSourceProps<Comment> = {
       id: 'comments',
       records: comments as any,
     };

packages/core/test/specs/data_sources/model/ComponentDataVariable.ts

@@ -19,7 +19,7 @@ describe('ComponentDataVariable', () => {
   });
 
   test('component initializes with data-variable content', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'ds1',
       records: [{ id: 'id1', name: 'Name1' }],
     };
@@ -42,7 +42,7 @@ describe('ComponentDataVariable', () => {
   });
 
   test('component updates on data-variable change', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'ds2',
       records: [{ id: 'id1', name: 'Name1' }],
     };
@@ -87,7 +87,7 @@ describe('ComponentDataVariable', () => {
   });
 
   test('component updates on data source reset', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'ds3',
       records: [{ id: 'id1', name: 'Name1' }],
     };
@@ -114,7 +114,7 @@ describe('ComponentDataVariable', () => {
   });
 
   test('component updates on data source setRecords', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'component-setRecords',
       records: [{ id: 'id1', name: 'init name' }],
     };
@@ -143,7 +143,7 @@ describe('ComponentDataVariable', () => {
   });
 
   test('component updates on record removal', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'ds4',
       records: [{ id: 'id1', name: 'Name1' }],
     };
@@ -172,7 +172,7 @@ describe('ComponentDataVariable', () => {
   });
 
   test('component initializes and updates with data-variable for nested object', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'dsNestedObject',
       records: [
         {
@@ -208,7 +208,7 @@ describe('ComponentDataVariable', () => {
   });
 
   test('component initializes and updates with data-variable for nested object inside an array', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'dsNestedArray',
       records: [
         {
@@ -256,7 +256,7 @@ describe('ComponentDataVariable', () => {
   });
 
   test('component initalizes and updates data on datarecord set object', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'setObject',
       records: [{ id: 'id1', content: 'Hello World', color: 'red' }],
     };

packages/core/test/specs/data_sources/model/StyleDataVariable.ts

@@ -19,7 +19,7 @@ describe('StyleDataVariable', () => {
   });
 
   test('component initializes with data-variable style', () => {
-    const styleDataSource: DataSourceProps = {
+    const styleDataSource = {
       id: 'colors-data',
       records: [{ id: 'id1', color: 'red' }],
     };
@@ -43,7 +43,7 @@ describe('StyleDataVariable', () => {
   });
 
   test('component updates on style change', () => {
-    const styleDataSource: DataSourceProps = {
+    const styleDataSource = {
       id: 'colors-data',
       records: [{ id: 'id1', color: 'red' }],
     };
@@ -73,7 +73,7 @@ describe('StyleDataVariable', () => {
   });
 
   test('component updates to defaultValue on record removal', () => {
-    const styleDataSource: DataSourceProps = {
+    const styleDataSource = {
       id: 'colors-data-removal',
       records: [{ id: 'id1', color: 'red' }],
     };
@@ -121,7 +121,7 @@ describe('StyleDataVariable', () => {
   });
 
   test('component initializes and updates with data-variable style for nested object', () => {
-    const styleDataSource: DataSourceProps = {
+    const styleDataSource = {
       id: 'style-data',
       records: [
         {
@@ -163,7 +163,7 @@ describe('StyleDataVariable', () => {
       const drId = 'red-header';
       const selector = 'h1';
 
-      const addToCollectionDataSource: DataSourceProps = {
+      const addToCollectionDataSource = {
         id: dsId,
         records: [
           {

packages/core/test/specs/data_sources/model/TraitDataVariable.ts

@@ -20,7 +20,7 @@ describe('TraitDataVariable', () => {
 
   describe('text input component', () => {
     test('component initializes data-variable value', () => {
-      const inputDataSource: DataSourceProps = {
+      const inputDataSource = {
         id: 'test-input',
         records: [{ id: 'id1', value: 'test-value' }],
       };
@@ -49,7 +49,7 @@ describe('TraitDataVariable', () => {
     });
 
     test('component initializes data-variable placeholder', () => {
-      const inputDataSource: DataSourceProps = {
+      const inputDataSource = {
         id: 'test-input',
         records: [{ id: 'id1', value: 'test-value' }],
       };
@@ -84,7 +84,7 @@ describe('TraitDataVariable', () => {
     });
 
     test('component updates to defaultValue on record removal', () => {
-      const inputDataSource: DataSourceProps = {
+      const inputDataSource = {
         id: 'test-input-removal',
         records: [{ id: 'id1', value: 'test-value' }],
       };
@@ -119,7 +119,7 @@ describe('TraitDataVariable', () => {
     });
 
     test('component updates with data-variable value', () => {
-      const inputDataSource: DataSourceProps = {
+      const inputDataSource = {
         id: 'test-input',
         records: [{ id: 'id1', value: 'test-value' }],
       };
@@ -155,7 +155,7 @@ describe('TraitDataVariable', () => {
     });
 
     test('component initializes data-variable value for nested object', () => {
-      const inputDataSource: DataSourceProps = {
+      const inputDataSource = {
         id: 'nested-input-data',
         records: [
           {
@@ -193,7 +193,7 @@ describe('TraitDataVariable', () => {
 
   describe('checkbox input component', () => {
     test('component initializes and updates data-variable value', () => {
-      const inputDataSource: DataSourceProps = {
+      const inputDataSource = {
         id: 'test-checkbox-datasource',
         records: [{ id: 'id1', value: 'true' }],
       };
@@ -236,7 +236,7 @@ describe('TraitDataVariable', () => {
 
   describe('image component', () => {
     test('component initializes and updates data-variable value', () => {
-      const inputDataSource: DataSourceProps = {
+      const inputDataSource = {
         id: 'test-image-datasource',
         records: [{ id: 'id1', value: 'url-to-cat-image' }],
       };
@@ -272,7 +272,7 @@ describe('TraitDataVariable', () => {
 
   describe('link component', () => {
     test('component initializes and updates data-variable value', () => {
-      const inputDataSource: DataSourceProps = {
+      const inputDataSource = {
         id: 'test-link-datasource',
         records: [{ id: 'id1', value: 'url-to-cat-image' }],
       };
@@ -309,7 +309,7 @@ describe('TraitDataVariable', () => {
 
   describe('changeProp', () => {
     test('component initializes and updates data-variable value using changeProp', () => {
-      const inputDataSource: DataSourceProps = {
+      const inputDataSource = {
         id: 'test-change-prop-datasource',
         records: [{ id: 'id1', value: 'I love grapes' }],
       };

packages/core/test/specs/data_sources/model/conditional_variables/ComponentConditionalVariable.ts

@@ -83,7 +83,7 @@ describe('ComponentConditionalVariable', () => {
   });
 
   it('should test component variable with data-source', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'ds1',
       records: [
         { id: 'left_id', left: 'Name1' },
@@ -132,7 +132,7 @@ describe('ComponentConditionalVariable', () => {
   });
 
   it('should test a conditional component with a child that is also a conditional component', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'ds1',
       records: [
         { id: 'left_id', left: 'Name1' },

packages/core/test/specs/data_sources/model/conditional_variables/ConditionalStyles.ts

@@ -49,7 +49,7 @@ describe('StyleConditionalVariable', () => {
   });
 
   it('should change style based on data source changes', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'ds1',
       records: [
         { id: 'left_id', left: 'Value1' },

packages/core/test/specs/data_sources/model/conditional_variables/ConditionalTraits.ts

@@ -49,7 +49,7 @@ describe('TraitConditionalVariable', () => {
   });
 
   it('should add a trait with a data-source condition', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'ds1',
       records: [{ id: 'left_id', left: 'Name1' }],
     };
@@ -83,7 +83,7 @@ describe('TraitConditionalVariable', () => {
   });
 
   it('should change trait value with changing data-source value', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'ds1',
       records: [{ id: 'left_id', left: 'Name1' }],
     };
@@ -212,7 +212,7 @@ describe('TraitConditionalVariable', () => {
   });
 
   it('should be property on the component with `changeProp:true`', () => {
-    const dataSource: DataSourceProps = {
+    const dataSource = {
       id: 'ds1',
       records: [{ id: 'left_id', left: 'Name1' }],
     };

packages/core/test/specs/data_sources/model/conditional_variables/DataCondition.ts

@@ -16,7 +16,7 @@ import EditorModel from '../../../../../src/editor/model/Editor';
 describe('DataCondition', () => {
   let em: EditorModel;
   let dsm: DataSourceManager;
-  const dataSource: DataSourceProps = {
+  const dataSource = {
     id: 'USER_STATUS_SOURCE',
     records: [
       { id: 'USER_1', age: 25, status: 'active' },
@@ -243,7 +243,7 @@ describe('DataCondition', () => {
     });
 
     test('should evaluate logical operators with multiple data sources', () => {
-      const dataSource2: DataSourceProps = {
+      const dataSource2 = {
         id: 'SECOND_DATASOURCE_ID',
         records: [{ id: 'RECORD_2', status: 'active', age: 22 }],
       };

packages/core/test/specs/data_sources/mutable.ts

@@ -48,9 +48,10 @@ describe('DataSource Immutability', () => {
   });
 
   test('addRecord creates an immutable record', () => {
+    type RecordType = { id: string; name: string; value: number; mutable: boolean };
     const ds = dsm.add({
       id: 'testDs4',
-      records: [],
+      records: [] as RecordType[],
     });
 
     ds.addRecord({ id: 'id1', name: 'Name1', value: 100, mutable: false });
@@ -63,7 +64,7 @@ describe('DataSource Immutability', () => {
   test('setRecords replaces all records with immutable ones', () => {
     const ds = dsm.add({
       id: 'testDs5',
-      records: [],
+      records: [{ id: 'id1', name: 'Name1', value: 100, mutable: false }],
     });
 
     ds.setRecords([

packages/core/test/specs/data_sources/serialization.ts

@@ -13,7 +13,7 @@ describe('DataSource Serialization', () => {
   let em: EditorModel;
   let dsm: DataSourceManager;
   let cmpRoot: ComponentWrapper;
-  const componentDataSource: DataSourceProps = {
+  const componentDataSource = {
     id: 'component-serialization',
     records: [
       { id: 'id1', content: 'Hello World' },
@@ -21,12 +21,12 @@ describe('DataSource Serialization', () => {
     ],
     skipFromStorage: true,
   };
-  const styleDataSource: DataSourceProps = {
+  const styleDataSource = {
     id: 'colors-data',
     records: [{ id: 'id1', color: 'red' }],
     skipFromStorage: true,
   };
-  const traitDataSource: DataSourceProps = {
+  const traitDataSource = {
     id: 'test-input',
     records: [{ id: 'id1', value: 'test-value' }],
     skipFromStorage: true,

packages/core/test/specs/data_sources/storage.ts

@@ -12,12 +12,13 @@ describe('DataSource Storage', () => {
   let em: EditorModel;
   let dsm: DataSourceManager;
   let cmpRoot: ComponentWrapper;
-  const storedDataSource: DataSourceProps = {
+  type Record = { id: string; content: string };
+  const storedDataSource: DataSourceProps<Record> = {
     id: 'component-storage',
     records: [{ id: 'id1', content: 'Hello World' }],
   };
 
-  const nonStoredDataSource: DataSourceProps = {
+  const nonStoredDataSource: DataSourceProps<Record> = {
     id: 'component-non-storage',
     records: [{ id: 'id1', content: 'Hello World' }],
     skipFromStorage: true,

packages/core/test/specs/data_sources/transformers.ts

@@ -19,7 +19,8 @@ describe('DataSource Transformers', () => {
   });
 
   test('should assert that onRecordSetValue is called when adding a record', () => {
-    const testDataSource: DataSourceProps = {
+    type Record = { id: string; content: string };
+    const testDataSource: DataSourceProps<Record> = {
       id: 'test-data-source',
       records: [],
       transformers: {
@@ -58,7 +59,8 @@ describe('DataSource Transformers', () => {
   });
 
   test('should assert that onRecordSetValue is called when setting a value on a record', () => {
-    const testDataSource: DataSourceProps = {
+    type Record = { id: string; content: string };
+    const testDataSource: DataSourceProps<Record> = {
       id: 'test-data-source',
       records: [],
       transformers: {