How to Use Dynamic Property Values (Props - Attributes) of DataSources in HTML Fragments

[LIlGG]

I noticed in #6351 that components can now be set using dynamic property values from DataSources. Great job! This feature is very practical.

I have a set of templates that are written in HTML and will eventually be converted into Components. Therefore, I hope to use dynamic property values from DataSources in the templates so that these property values can be dynamically replaced when generating Components.

I have made some attempts and am currently able to successfully use dynamic property values in the text node, but I am unsure how to write the code to replace the property values (such as props and attributes).

The code for replacing dynamic property values in the text node is as follows:

<div
  data-gjs-type="data-variable"
  data-gjs-default="default"
  data-gjs-path="datasource.text.content"
/>

How can I replace the property values? Thank you! Also, if there is a better way, please let me know.

Additionally, if there are multiple instances of the current component on the page, when modifying the value of ⁠datasource.text.content, all component values will be changed. Is it possible to modify the value of only one specific component without affecting the others?

Or is there something wrong with my usage? I simply want to extract the originally hard-coded text and attributes into dynamic ones.

[LIlGG]

By the way, I am using TSX files, so I would prefer the following definition style. I wonder if this can be achieved?

For text node:

<h3
  data-gjs-type="text"
  data-gjs-content={{
    type: 'data-variable',
    default: 'default',
    path: 'datasource.id.content',
  }}
>

For attribute:

<img
  data-gjs-type="text"
  src={{
    type: 'data-variable',
    default: 'default',
    path: 'datasource.id2.src',
  }}
/>

For props:

<h3
  data-gjs-type="text"
  data-gjs-prop={{
    type: 'data-variable',
    default: 'default',
    path: 'datasource.id3.someValue',
  }}
/>

[LIlGG]

The issue has been resolved. It is necessary to convert the TSX object into a JSON string format, as shown below:

<h3
  data-gjs-type="text"
  data-gjs-prop={JSON.stringify({
    type: 'data-variable',
    default: 'default',
    path: 'datasource.id3.someValue',
  })}
/>