Example with a major UI framework?

[Antonin Adert]

Hello, first thanks for this, it looks very interesting.
I create this issue because I have no clue how to integrate in one of major frameworks like React, Vue or Svelte ?

Is there someone who have achieved this and could share code snippet to complete documentation?

[Nick Mudge]

Thanks for asking for this. More info and examples for this are needed for sure.

See the example in the documentatoin of how runcss is integrated with Webscript:

// Integrating RunCSS with Webscript
function createElement (type, props, ...children) {
  if (props.class) {
    processClasses(props.class)
  }
  return createDOMElement(type, props, ...children)
}

// Create the builders used to build DOM elements
const { div, img, h2 } = builders(createElement)

React and Vue have the same or similar createElement function and so can be integrated the same way. For example here is react:

// Integrating RunCSS with React
function createElement (type, props, ...children) {
  if (props.class) {
    processClasses(props.class)
  }
  return React.createElement(type, props, ...children)
}

// Create the builders used to build DOM elements
const { div, img, h2 } = builders(createElement)

[Antonin Adert]

Thanks for this, I think React and Vue are covered.
For Svelte: https://svelte.dev/docs
as it is a compiler, it has a different API. I guess what I need is around the bottom of their documentation, but I don't understand how to use it. If it is clear enough for you, would you mind sharing your understanding of how integrating runcss in Svelte?

[Nick Mudge]

@antoninadert I'm not very familiar with Svelte. At the moment I don't know how to integrate with it.

[Antonin Adert]

Thanks for this information. I may ask on the Svelte discord. If I get something I may update here again.
:)

[Luca Fabbian]

Fixed in new rewrite thanks to the watcher API.