Custom data-attributes in JSX

The upcoming ReScript version 11.1.0 is for you! It will ship both with a generic JSX transform which includes among other things the possibility to extend the attributes of lowercase JSX tags and also finally allows hyphens in tag names. Although that already worked before with a special escape syntax:

let component = () => <div \"data-custom-state"=true />

I created a small example to show how it is now possible to extend JSX attributes:

module MyOverrides = {
  module Elements = {
    // Extend the available lowercase JSX props here.
    type props = {
      ...JsxDOM.domProps,
      \"data-custom-state": bool,
    }

    @module("react")
    external jsx: (string, props) => Jsx.element = "jsx"
  }
}

@@jsxConfig({module_: "MyOverrides"})

let component = () => <div \"data-custom-state"=true />

[Playground]

What is put in the jsxConfig annotation here is usually done in rescript.json where you can add the name of a special file/module like the MyOverrides one above to make it available in your whole codebase. It’s incomplete though, since I don’t know myself what is missing to make it fully work with React for instance, but maybe the creator of that feature (@zth) can explain further?