Custom data-attributes in JSX

1

Hi,

Disclaimer: I am new to Rescript world!

At my workplace we are creating a design-system that manipulates the behavior of a component using custom data-attributes that we add to JSX elements.

In the TypeScript/JavaScript world, it looks roughly like this:

const Component = () => <div data-custom-state="true" />

Unfortunately, I’ve tried several different ways to port this to a React component written in Rescript, and unfortunately, each time the compiler has a problem with declared data-attributes.

Without this functionality, I won’t be able to use Rescript at work, and I care a lot about it.

Is there a special syntax for using data-attributes in JSX in Rescript that I don’t know?

Thanks for any help/answers!

1 Like
2

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?

4 Likes
3

Here are some docs for the generic JSX transform: JSX | ReScript Language Manual

One thing to add is that you don’t need to use hyphens to make that work, you can use @as:

type props = {
  ...JsxDOM.domProps,
  @as("data-custom-state") dataCustomState: bool,
}

But other than that, @fham covers it very well. You can of course configure the JSX module at the rescript.json level too so you don’t need to do the file level config. And don’t be afraid of copy pasting and vendoring things, including making modifications to them, from other libs like RescriptReact. It’s a great way to tailor things the way you need for your specific use case.

3 Likes
5

Thank you very much for the information, it helped me a lot!

By the way, when is the planned release of version 11.1?

1 Like
6

Should be in the next couple of days. We are preparing the next main release currently. But do not hesitate to install one of the release candidates and try it now.

Btw.: When you use npm create rescript-app it suggests experimental versions.

image
image396×612 22.2 KB

1 Like