There’s now an implemented RFC for a generic JSX transform (being able to use the built in JSX transform easier with anything not React). A generic JSX transform will allow us to for example plug in other JSX libs easily like Vue/Preact/Hyperons/Kittens and whatever else that might use JSX.
It’s not to be confused with JSX preserve mode, which is another functionality we eventually want to have where the JSX from ReScript is preserved in the JS output so other JS based tools can process the JSX.
Please have a look at the RFC and give any feedback you might have:
This is now released (as experimental) in
Relevant docs here: JSX | ReScript Language Manual
Nice! I’m gonna test out some Solidjs.
Exactly at the right time
Please report back how it went if you try it.
First things first: It’s working fine!
My first observations:
- I had to implement a
DOM module instead of
- It’s not clear which methods have to be implemented. Some methods have to be implemented in the “root” jsx module and some in the DOM module. Some methos in both.
Well, I could copy all bindings from the docs, but I would like to understand when which method is used. It’s the same in the original react I guess (What is the difference between
jsxs, what is the difference between react and reactDOM bindings, etc.).
What framework are you testing out? I’m trying to get this to work with Solid.js.
A bunch of fixes related to this has landed and will be in the next rc for 11.1. About the docs - yes, a deeper dive into the specifics in the docs would be great, I agree.
Tried solid, but had problems with some optimizing steps of rescript (destructuring of signals break their reactivity). Anyways I didn’t want to include babel or some other additional tools.
Then I played with vobyjs (like solid but without babel). Not finished (yet), but could work quite nice. You can see some small examples here: GitHub - dkirchhof/rescript-voby.
Right now, I’m trying out some own stuff. No external deps, no babel, no nothing.
Don’t know how far my journey will go. If I will finish my own lib, using voby or keep working with react
I’m trying to use email template frameworks in rescript, let’s see how it goes!
For anyone interested in how the generic JSX transform looks in action, ResX (GitHub - zth/res-x: A ReScript framework for building server-driven web sites and applications. Use familiar tech like JSX and the component model from React, combined with simple server driven client side technologies like HTMX. Built on Bun and Vite.) is now integrated fully with the generic JSX transform. It uses a modified version of Hyperons to render JSX to HTML on the server.
- It defines a module
Hjsx which holds all JSX related things that the transform needs.
- It also defined a module
H that binds to the render-jsx-to-string functions.
- You then configure
rescript.json to use
Hjsx as the module, and set up a few relevant
Viola, now you can use
@jsx.component to create JSX components, and use
Hjsx.string|int|array etc to render JSX elements.
Side note: It comes with its own custom DOM props with a few interesting bits of “magic” baked in, like HTMX props driven by variants and a custom mini fw for doing simple declarative DOM updates.