[Feature request] dash in jsx

[amiralies]

Although i'm not sure if it's possible but It would be nice to have dash support in jsx elements and jsx props: Use cases:

elements:

<amp-img></amp-img> // amp web components

props:

<div data-testid="foo" /> // data-* props

[bloodyowl]

I guess that doable for elements, but the current way attributes are defined in ReasonReact would prevent custom props from being used as-is

[IwanKaramazow]

I'm not 100% sure if this is a good idea. It would definitely add yet another concept to jsx and is pretty inconsistent with punning:

// You can't do this
let data-testid = "foo"
<div data-testid />

data-* attributes aren't that common, would it be worth introducing extra rules?

[amiralies]

I think they should be supported at some point.

[bloodyowl]

@amiralies In the meantime for data attributes, you can do the following:

React.cloneElement(<div />, {"data-testid": "foo"})

[johnridesabike]

This would be possible with escaped prop names, right? <div \"data-testid"="foo" />

Although this still wouldn't compile because the React div element doesn't have data-testid in its signature. That may be a separate issue.

[ryyppy]

This will most likely be solved in a future react-ppx update. Goal is to allow easy definition of data and aria attributes, and generally change the way how dom elements are being type checked.

[hoichi]

This would be possible with escaped prop names, right? <div \"data-testid"="foo" />

Fwiw, it's equally doable for the tags: <\"my-tag" />

[thomaszdxsn]

any update this?

[stale[bot]]

The rescript-lang/syntax repo is obsolete and will be archived soon. If this issue is still relevant, please reopen in the compiler repo (https://github.com/rescript-lang/rescript-compiler) or comment here to ask for it to be moved. Thank you for your contributions.