Dynamic Value Namespace for Components

[LIlGG]

I am using dynamic values in the project and hope to extract all the dynamic values needed in the block, such as text. After that, I can simply modify this value to dynamically change the component instances created based on this block. For example, using the following approach:

{
  content: `<div class="el-X" data-gjs-content="{type:data-variable,path:datasource.id1.content}">
  </div>`;
}

This allows my Block to set the initial value through dynamic values.

However, I need to create multiple Component instances using this Block. At this point, if I change the value of ⁠datasource.id1.content, all Component instances created through this Block will change. Is it possible for each Component instance to have an independent dynamic value namespace? For example, ⁠datasource.componentId.id1.content or another method?

Additionally, I have a question: I can set the props of a component/block using data-gjs-xxx, but I cannot set the attrs. Is there another way to set attrs? For example, the following setting for props is effective:

{
  content: `<div class="el-X" data-gjs-src="{type:data-variable,path:datasource.id1.src}">
  </div>`;
}

But the following setting for attrs is ineffective:

{
  content: `<div class="el-X" src="{type:data-variable,path:datasource.id1.attrs}">
  </div>`;
}

[artf]

At this point, if I change the value of ⁠datasource.id1.content, all Component instances created through this Block will change. Is it possible for each Component instance to have an independent dynamic value namespace?

So, you don't need the data source to be connected?! Do you just need its value on block creation?

FYI DataSources module is still in active development, so the API could change

[LIlGG]

So, you don't need the data source to be connected?! Do you just need its value on block creation?

Yes, it is true that there is no need to connect to a data source; my project is a pure front-end project. The purpose of using data sources is that I have some blocks, and I want to save the text from them using data sources, allowing for dynamic modifications of their content during runtime using AI or other methods without involving changes to the blocks themselves.

I am not sure if I am using data sources correctly.

FYI DataSources module is still in active development, so the API could change

Thank you for the reminder. If the API changes, I will make adjustments accordingly. Data sources have indeed helped me a lot, and I appreciate all your hard work once again.

[artf]

Yeah, I think you don't need data sources directly in the components, but you can dynamically get their values in the blocks.

editor.Blocks.add('block-id', {
  label: '...',
  content: () => `<div>Content from DataSources: ${editor.DataSources.getValue('datasource.id1.src')}</div>`
});