Feature/data sources

docs/.vuepress/config.js

@@ -103,6 +103,9 @@ module.exports = {
         ['/api/keymaps', 'Keymaps'],
         ['/api/undo_manager', 'Undo Manager'],
         ['/api/parser', 'Parser'],
+        ['/api/data_source_manager', 'Data Source Manager'],
+        ['/api/datasource', `${subDivider}DataSource`],
+        ['/api/datarecord', `${subDivider}DataRecord`],
       ],
       '/': [
         '',
@@ -126,6 +129,7 @@ module.exports = {
             ['/modules/Storage', 'Storage Manager'],
             ['/modules/Modal', 'Modal'],
             ['/modules/Plugins', 'Plugins'],
+            ['/modules/DataSources', 'Data Sources'],
           ],
         },
         {

docs/api.mjs

@@ -87,6 +87,9 @@ async function generateDocs() {
       ['pages/index.ts', 'pages.md'],
       ['pages/model/Page.ts', 'page.md'],
       ['parser/index.ts', 'parser.md'],
+      ['data_sources/index.ts', 'data_source_manager.md'],
+      ['data_sources/model/DataSource.ts', 'datasource.md'],
+      ['data_sources/model/DataRecord.ts', 'datarecord.md'],
     ].map(async (file) => {
       const filePath = `${srcRoot}/${file[0]}`;
 

docs/api/data_source_manager.md

@@ -0,0 +1,141 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## DataSources
+
+This module manages data sources within the editor.
+You can initialize the module with the editor by passing an instance of `EditorModel`.
+
+```js
+const editor = new EditorModel();
+const dsm = new DataSourceManager(editor);
+```
+
+Once the editor is instantiated, you can use the following API to manage data sources:
+
+```js
+const dsm = editor.DataSources;
+```
+
+*   [add][1] - Add a new data source.
+*   [get][2] - Retrieve a data source by its ID.
+*   [getAll][3] - Retrieve all data sources.
+*   [remove][4] - Remove a data source by its ID.
+*   [clear][5] - Remove all data sources.
+
+Example of adding a data source:
+
+```js
+const ds = dsm.add({
+  id: 'my_data_source_id',
+  records: [
+    { id: 'id1', name: 'value1' },
+    { id: 'id2', name: 'value2' }
+  ]
+});
+```
+
+### Parameters
+
+*   `em` **EditorModel** Editor model.
+
+## add
+
+Add new data source.
+
+### Parameters
+
+*   `props` **[Object][6]** Data source properties.
+*   `opts` **AddOptions**  (optional, default `{}`)
+
+### Examples
+
+```javascript
+const ds = dsm.add({
+ id: 'my_data_source_id',
+ records: [
+   { id: 'id1', name: 'value1' },
+   { id: 'id2', name: 'value2' }
+ ]
+});
+```
+
+Returns **[DataSource]** Added data source.
+
+## get
+
+Get data source.
+
+### Parameters
+
+*   `id` **[String][7]** Data source id.
+
+### Examples
+
+```javascript
+const ds = dsm.get('my_data_source_id');
+```
+
+Returns **[DataSource]** Data source.
+
+## getValue
+
+Get value from data sources by key
+
+### Parameters
+
+*   `key` **[String][7]** Path to value.
+*   `defValue` **any**&#x20;
+
+Returns **any** const value = dsm.getValue('ds\_id.record\_id.propName', 'defaultValue');
+
+## remove
+
+Remove data source.
+
+### Parameters
+
+*   `id` **([String][7] | [DataSource])** Id of the data source.
+*   `opts` **RemoveOptions?**&#x20;
+
+### Examples
+
+```javascript
+const removed = dsm.remove('DS_ID');
+```
+
+Returns **[DataSource]** Removed data source.
+
+## fromPath
+
+Retrieve a data source, data record, and optional property path based on a string path.
+This method parses a string path to identify and retrieve the corresponding data source
+and data record. If a property path is included in the input, it will also be returned.
+The method is useful for accessing nested data within data sources.
+
+### Parameters
+
+*   `path` **[String][7]** The string path in the format 'dataSourceId.recordId.property'.
+
+### Examples
+
+```javascript
+const [dataSource, dataRecord, propPath] = dsm.fromPath('my_data_source_id.record_id.myProp');
+// e.g., [DataSource, DataRecord, 'myProp']
+```
+
+Returns **[DataSource?, DataRecord?, [String][7]?]** An array containing the data source,
+data record, and optional property path.
+
+[1]: #add
+
+[2]: #get
+
+[3]: #getall
+
+[4]: #remove
+
+[5]: #clear
+
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

docs/api/datarecord.md

@@ -0,0 +1,115 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## DataRecord
+
+The `DataRecord` class represents a single record within a data source.
+It extends the base `Model` class and provides additional methods and properties specific to data records.
+Each `DataRecord` is associated with a `DataSource` and can trigger events when its properties change.
+
+### DataRecord API
+
+*   [getPath][1]
+*   [getPaths][2]
+*   [set][3]
+
+### Example of Usage
+
+```js
+const record = new DataRecord({ id: 'record1', name: 'value1' }, { collection: dataRecords });
+const path = record.getPath(); // e.g., 'SOURCE_ID.record1'
+record.set('name', 'newValue');
+```
+
+### Parameters
+
+*   `props` **DataRecordProps** Properties to initialize the data record.
+*   `opts` **[Object][4]** Options for initializing the data record.
+
+## getPath
+
+Get the path of the record.
+The path is a string that represents the location of the record within the data source.
+Optionally, include a property name to create a more specific path.
+
+### Parameters
+
+*   `prop` **[String][5]?** Optional property name to include in the path.
+*   `opts` **[Object][4]?** Options for path generation.
+
+    *   `opts.useIndex` **[Boolean][6]?** Whether to use the index of the record in the path.
+
+### Examples
+
+```javascript
+const pathRecord = record.getPath();
+// e.g., 'SOURCE_ID.record1'
+const pathRecord2 = record.getPath('myProp');
+// e.g., 'SOURCE_ID.record1.myProp'
+```
+
+Returns **[String][5]** The path of the record.
+
+## getPaths
+
+Get both ID-based and index-based paths of the record.
+Returns an array containing the paths using both ID and index.
+
+### Parameters
+
+*   `prop` **[String][5]?** Optional property name to include in the paths.
+
+### Examples
+
+```javascript
+const paths = record.getPaths();
+// e.g., ['SOURCE_ID.record1', 'SOURCE_ID.0']
+```
+
+Returns **[Array][7]<[String][5]>** An array of paths.
+
+## triggerChange
+
+Trigger a change event for the record.
+Optionally, include a property name to trigger a change event for a specific property.
+
+### Parameters
+
+*   `prop` **[String][5]?** Optional property name to trigger a change event for a specific property.
+
+## set
+
+Set a property on the record, optionally using transformers.
+If transformers are defined for the record, they will be applied to the value before setting it.
+
+### Parameters
+
+*   `attributeName` **([String][5] | [Object][4])** The name of the attribute to set, or an object of key-value pairs.
+*   `value` **any?** The value to set for the attribute.
+*   `options` **[Object][4]?** Options to apply when setting the attribute.
+
+    *   `options.avoidTransformers` **[Boolean][6]?** If true, transformers will not be applied.
+
+### Examples
+
+```javascript
+record.set('name', 'newValue');
+// Sets 'name' property to 'newValue'
+```
+
+Returns **[DataRecord][8]** The instance of the DataRecord.
+
+[1]: #getpath
+
+[2]: #getpaths
+
+[3]: #set
+
+[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+
+[8]: #datarecord