Hello,
During the ReScript Retreat, we achieved an initial (rough) version of preserving JSX code in the JavaScript output. This is not the final version we plan to ship in v12, and we welcome your feedback to determine its viability and identify any remaining gaps.
Installation
You will need the latest v12 version from the master branch of the compiler. Install it via the pkg.pr URL:
npm i https://pkg.pr.new/rescript-lang/rescript@362a1da
In your rescript.json:
{
"suffix": ".res.jsx",
"jsx": {
"version": 4
},
"bsc-flags": [
"-bs-jsx-preserve"
]
}
The suffix is optional; you can choose to use the .jsx extension or not based on your use case. The -bs-jsx-preserve flag will likely be moved to a dedicated setting under the jsx node.
You need both jsx.version: 4 and -bs-jsx-preserve.
Known Limitations and Open Questions
We are aware of several limitations, and depending on your feedback, we will address them:
- The JSX output is not formatted neatly. Props are displayed on the same line, and children are not indented.
- Currently, all files share the same extension. Changing to
.jsxmight seem unusual if your file doesn’t contain any React components. In large projects, this may be mitigated by using preserve mode only for specific packages in the mono repo. - There may still be some edge-case bugs in the JSX output; please report any you encounter!
React Compiler
I tried this in my own project and can confirm that the React compiler worked as expected.
Solid
This new feature should enable the use of Solid. We haven’t tested this yet, so we would welcome a community sample!