Revisit JSX syntax

[nojaf]

Proposal: Bring ReScript JSX Closer to the JavaScript JSX Spec

Currently, ReScript JSX differs from JavaScript’s JSX in a few key ways (docs).
I propose moving ReScript JSX closer to the official JSX spec in a future release.

Example

// Current
let foo = <p>{React.string("Hello")}</p>

// Proposed
let foo = <p>Hello</p>

Right now, Hello is treated as a React.element rather than as JSXText.
This means plain text inside JSX must be wrapped in React.string(...), unlike in JavaScript JSX.

Suggested Path Forward

Step 1: Formatter update

The formatter could automatically insert braces for identifiers used as children, making the output more consistent.

// Original
let foo = <p>children</p>

// After format 
// (notice how there's no space before the opening curly brace and after the closing one)
let foo = <p>{children}</p>

Step 2: Parser update

Next, the parser could be extended to handle JSXText as valid child input—bringing ReScript JSX semantics in line with the JSX spec.

[!NOTE]
This change will only affect syntax and won't change the type of JSX children. Inside curly braces you'll still need React.string:

<div>
 {switch count {
 | 1 => "once"
 | n => `Int.toString(n) times`
 }->React.string}
</div>

This could also affect custom components where children are not typed as JSX element and that are often used with literals, eg before:

<Counter>6</Counter>

after:

<Counter>{6}</Counter>

This is still an early-stage idea, so feedback is welcome. Don't hesitate to chime in if you think your codebase would be affected by this change.
Please use 👍 / 👎 / 👀 to indicate your opinion.
This is just a signal, not a binding vote.

[fhammerschmidt]

As long as we don't get rid of argument punning I am all for it.

[nojaf]

you'll still need React.string:

Would be interesting to explore is we can avoid that restriction as well. If we can automatically coerce during type-checking that be neat as well. Not sure how challenging this would be.