Question regarding the support of Flow lang or ReasonML/ReScript

[gaku-sei]

I really love this framework and plan to use it for some middle sized project, but using TypeScript is a bit of a letdown to me 😞

Is there any (planned) support for Flow lang or ReasonML (official or unofficial)?

It feels like ReasonML could be supported somehow but I wonder how some features, like currying, would work with the Solid "transpiler" 😕

[ryansolid]

Well it's only the JSX that is transpiled. And it is a very custom compilation. One that I suspect would not be supported by ReasonML, but I'm not 100% on that. The way it works cannot be reduced into simple function calls and I morph not just the elements but the attributes as well.

That being said I do have support for HyperScript. It doesn't leverage most of the benefits of the JSX compiler but it does have the advantage here of boiling down to a simple h function. So from that perspective there could be a version where you manually wrap your expressions and the integration could generally be the same as library like Preact. Although the HyperScript is less mature and doesn't support SSR yet etc and is just for the browser.

I have no knowledge of ReasonML and not being able to leverage the custom transforms definitely would dampen my personal enthusiasm. But it definitely isn't off the table. I'm not aware of anyone working on this as of yet. For someone who knows ReasonML I think a simple integration would not be too difficult and I'd be willing to help answer any questions to help make it posssible.

[gaku-sei]

Thank you very much @ryansolid

Well it's only the JSX that is transpiled.

That's very good to know, if only the jsx code is transpiled, it means compiling OCaml/ReasonML to JS and preserving the jsx could work. I might give it a try soon. I think I read somewhere it was doable, but I couldn't find the documentation (yet).

I will give it a try as soon as possible, and try to report here if I can make it work somehow 😄

[d4h0]

Something like Solid or Svelte for ReasonML would be fantastic! :)

@gaku-sei: as far as I remember, you just can embed JavaScript into Reason. But I'm not sure if Reason would allow JSX there. Even if it does, however, JSX isn't valid JavaScript, so you'd have to compile the output from Reason to JavaScript (so basically, there would three compile phases with Solid, which probably isn't great).

The easiest approach probably would be to just put Solid code into a separate .js file and import things from Reason.

@ryansolid: You should have look at ReasonML/OCaml. I think it's a fantastic language (in many ways better than TypeScript). I would be astonished if you don't like ReasonML/OCaml, to be honest.

[gaku-sei]

@d4h0

The easiest approach probably would be to just put Solid code into a separate .js file and import things from Reason.
This seems to be indeed the easiest approach so far 😕

After trying a bit yesterday, i could make this Gist and it partly works: https://gist.github.com/gaku-sei/8e1d157682379d2bafc4b6dc4e080091

So far, here are some things I noticed:

• We must use the uncurried function syntax
• It seems JSX cannot be preserved when compiling down to JS (I opened this issue: Preserve JSX in output rescript-lang/rescript-compiler#4783)
• But we can use hyperscript (provided we write a ppx for it ^^)
• The rest seems to be work ok, since as @ryansolid noticed, the Solid compiler doesn't transform anything else.

[ryansolid]

Well that's good. HyperScript means you need to wrap expressions in functions yourself but otherwise should work. This is pretty exciting. There is definitely some interest here, I've just do not have experience with ReasonML. I have some HyperScript examples.. There is a TodoList example in the examples section. See it here: https://codesandbox.io/s/0vmjlmq94v

[kee-oth]

I commented in that related ReScript issue (rescript-lang/rescript-compiler#4783) but just wanted to voice my interest for this in the Solid community as well. I'd love to be able to use Solid + ReScript in my projects 👍

[mosheduminer]

As mentioned in the issue in the rescript compiler, we can manage to "reverse-compile" strictly formed hyperscript to JSX, which can then be compiled by Solid. So if we want ReScript support, we need to
1 create type bindings for Solid APIs,
2 write a PPX to customize compilation from the intermediate JSX representation into SolidJS hyperscript functions.

I have little experience with Reason/ReScript, and none with PPXs, so there is no way I can do this without help. Otherwise I would probably have done this already.

[kee-oth]

Gotcha. Thanks for the reply. I have no experience with PPXs either so I unfortunately am not of much help with that at the moment. I'll look into the topic though and see what comes of it 👌

[woeps]

I wanted to try solid for some time now and since I'm using rescript on a daily basis I tried to build upon @gaku-sei 's previous efforts.
I put up a working proof of concept here: https://github.com/woeps/solidjs-rescript
Turns out, he was pretty near to an initial solution. 😄

A lot more work needs to be done to tune the api and cover the most important parts of solid's api surface with bindings. But it's a start.

If anyone has some idea or criticism to share regarding my approach for bindings, please feel free to create a separate issue in the bindings repo.

[mosheduminer]

Nice! I'm watching this.

I still want to make a PPX though 😅. It would just need to compile to hyperscript calls, then we can use a babel plugin (I have the code for it lying around somewhere) to turn it into JSX for solid's compiler to optimize + wrap expressions. We could probably also add https://github.com/orenelbaum/babel-plugin-solid-undestructure to the babel pipeline so we can still use punning in ReScript JSX.

I'll get around to it someday 😅.

[Fattafatta]

I was interested in a ReScript setup with solid for some time now. These last few days I found some time to try to get it to work. My goal was to make solid-bindings for ReScript that do not require a PPX but would still allow me to use JSX.
Thanks to @woeps work it was already clear that it would work with HyperScript. So my goal was to make the ReScript compiler produce HyperScript code instead of react code.

@ryyppy from the Rescript team wrote a comment here that intrigued me:

You can always implement your own React module with your own definition of createElement, createVariadicElement etc.

But later he also said:

Since Solid is way different, this doesn’t work obviously.

But i decided to give it a go anyway and luckily it worked!

The solution was to create a npm module alias, that would completely replace the react bindings from rescript-react. The mentioned functions createElement and createElementVariadic were bound to a very small JS function that actually produces HyperScript.
The core functionality is actually only very few lines of code. The only challenge was to make it work with fragments too.

Creating the necessary bindings was also straight forward for the most part. Some extra work is required to make the generated output reactive (soldis' HyperScript requires to wrap all reactive props and children in a function call).
And of course many solid functions are polymorphic, so some translating was necessary to make it compatible with ReScript.

The biggest challenge was to bind the <For>, <Show>, ... components. Since the are JSX they were obviously not made to work with HyperScript code. I basically hat to rewrite those functions myself in ReScript.

Overall I'm super happy with the result. I created a few test apps (one example is also included in the repo) and it worked pretty well.

The library is still experimental. I could not test all functionality yet and also I still have to figure out a good way to write tests in ReScript, but here you are: https://github.com/Fattafatta/rescript-solidjs

As always, any ideas, feedback or criticism is very welcome. This is only the second time that I wrote ReScript bindings and solid is quite complex.

[mosheduminer]

Have you considered transpiling hyperscript to JSX? That way you won't need to wrap reactive expressions. I saw someone did that here https://www.reddit.com/r/solidjs/comments/v0kt0c/first_time_using_solid_with_rescript/. I'm not aware of a repo though.

I'm interested in trying out your library sometime in the future! The limitation of using only react has been holding me back.

[Fattafatta]

I also stumbled upon this post and was intrigued. I found the original repo used in the video, but it did not work for me.

The reason is that ReScript uses multiple functions instead of one (e.g. React.createElement, ReactDOMRe.createDOMElementVariadic, ...). Also the library did not support Fragments generated by ReScript (they are named ReasonReact.Fragment).

Since this is my first time writing a babel transform, it took me a while to figure it out. But in the end it worked great!

Here is the new library I created: babel-plugin-rescript-react-to-jsx. Descriptions on how to use it are in the repo. Any feedback ist very welcome. This stuff is quite new to me.

I also updated rescript-solidjs to use this approach instead.

[mosheduminer]

@Fattafatta that's great! Hopefully I'll have time to check it out sometime 😀.

[unoexperto]

@gaku-sei @d4h0 @woeps Have you guys made it work? :)

[woeps]

I haven't really tried anything further, since the results were for me: "it works to some extent, but it is not ideal by far". If I would need to use Solid, I'd stick to js/typescript for the moment.

In the rescript repo, there is an explanation, what is missing on rescript's side to be compatible with solid and other frameworks relying on custom jsx transforms: rescript-lang/rescript-compiler#6197 (comment)

There were also some recent activities leading me to speculate, the rescript team may work on this is the near future.