ReScript JSX isn't tied to ReactJS?

1

The docs at JSX | ReScript Language Manual say Rescript isn’t tied to ReactJS but this seems a little at odds with the examples that all omit React function calls. What is the current state - can we easily specify our our JSX factory? And is this only achievable by a hack such as aliasing the react namespace to a very very limited subset that are React API compatible such as Preact. I understand that a lot of cool framework has a compilation step so I’m aware of difficult in using such here, but it is possible to let have my own JSX factory?

Any examples of anyone doing this without the React alias to Preact hack

2

As of this instant you’ll need to do the React hack. There’s a RFC for extending the JSX transform to support a generic mode: [RFC] Generic JSX transform · Issue #6408 · rescript-lang/rescript-compiler · GitHub and that RFC is pretty much ready and just a matter of someone starting the implementation.

As for the hack, I recently set up a similar thing in a project I’m working on, where I use a fork of hyperons to render JSX to a plain HTML string on the server. Here’s an example of how you can setup it up:

What doesn’t work yet in the hack above is fragments <> </> but that should just be a matter of fixing. You’ll also need to use @react.component even though you’re technically not using React, and autocomplete for all domProps doesn’t work yet (but most do). These things will be much smoother when we have a generic JSX transform.

2 Likes
3

Thanks zth,

I suspected this, I think the documentation is very misleading here “ReScript JSX isn’t tied to ReactJS” should read “ReScript JSX, as of today, is essentially tied to ReactJS”. I don’t think the React hack can ever be counted as first class, certainly doesn’t correlate with the impression the docs give.

I look forward to watching the RFC and implementation develop, great work@

4

How is it going with the RFC?
Playing around with different libraries and checking out if I can replace react completely at some point.

Just finished a demo case for voby. I can build the application and everything works but the config is quite confusing (https://github.com/dkirchhof/rescript-voby/blob/main/demo/package.json).

I need @rescript/react because something is asking for ReactDOM (actually I don’t know why).
I have to alias voby.
I have to add rescript-voby (for the bindings).

{
  [...]
  "dependencies": {
    "@rescript/core": "^0.5.0",
    "@rescript/react": "^0.11.0",
    "react": "npm:voby",
    "rescript-voby": "../"
  }
}
1 Like
5

Voby would make an excellent test/demo/incubation candidate for this RFC. The absence of a babel transform step removes the need and complexity of having to support a JSX preserve mode and in my opinion would significantly simplify initial implementation.

F# community have fell painfully attempting to implement a JSX preserve mode for Solid, to the point where all props must be known at compile time - must be a list literal, it’s basically unusable for anything other than a ticking clock. I’m not sure if Rescript will hit the same painful limitations, although they have pulled off custom JSX factory support all the way back in Fable 3 from what I can see.

dkirchhof, with the workaround are you seeing tree shaking of all the unneeded react bits?

6

In the bundle there is nothing left from original react or react-dom. Just the aliased voby stuff and its dependencies :slight_smile: