DataSources module

[artf]

The goal of this new module is to allow loading generic data (eg. from API, DB, etc.) and designing the layout with them.

Some ideas:

const dataColl: DataSource = editor.DataSources.add({
    id: 'collection-id',
    label: 'Products',
    category: 'My product category',
    uniqueColumn: 'id',
    schema: {
      id: { type: 'string' },
      name: { type: 'string', order: 1 },
      age: { type: 'number' },
      available: { type: 'boolean' },
      avatar: { type: 'url-image' },
      author: { type: 'ref', ref: 'collection-authors', by: 'id' },
      categories: { type: 'refs', ref: 'collection-categories', by: 'id' },
    },
    records: [
      { id: 1, name: 'test', age: 22, author: '123', categories: [1,2,3] }
    ]
  })

  const dataSource = editor.DataSources.get('collection-id') as DataSource;
  dataSource.setRecords([{ id: 'id123', .... }]);
  dataSource.removeRecord('id123');
  dataSource.addRecord({ id: 'id123', .... });
  const dataRecord = datsSource.getRecord('id123') as DataRecord;
  dataRecord.set({ age: '30' });

  dataSource.getRecordValue('collection-id.id123.age');
  dataSource.setRecordValue('collection-id.id123.age', 35);

Started already something here: https://github.com/GrapesJS/grapesjs/tree/feature/data-sources

[lexoyo]

Great feature
It would be convenient to use graphql or openapi types to create the schema automatically

[artf]

Yeah here is more about having already the data.

I haven't thought yet about providing the proper API for the DataSourceFetcher but I think here it would be nice to have something you're suggesting (probably as a plugin), where you provide something like an OpenAPI file and a plugin is able to generate all the collections and proper data fetchers for you.

[lexoyo]

Awesome 👍
Did you get a chance to look at how Silex datasource plugin works?
We do WordPress front ends with it and no-code devs took it in hand easily

[lexoyo]

It retrieves graphql types and let the user create expressions with it
https://docs.silex.me/en/user/cms

[lexoyo]

I volunteer to contribute to such a plugin or the feature itself
Let me know where I can get started or if it is not expected or too early

[artf]

I'll try to check your work soon, thank you Alex 🙇‍♂️
I'd probably need to spend a bit more time defining the public API but I think you can start checking the branch I started here with the first related component (ComponentDataVariable)