Using Rescript with Preact?

Is it possible to write bindings for Preact to work with Rescript? Since the React bindings are a library and not built into the language it seems like this would be doable.

I’m new to Rescript, so let me anyone would like more details about my question.

This is not possible because the ReScript compiler hasn’t option for customizing jsx factory yet.

A possible option for now is to use preact compat.

Technically it’s possible if you map your Preact bindings to the React namespace and don’t include rescript-react in your deps. :raising_hand_man:

Not sure how ergonomic it will be on the long run though, and it’s probably confusing having React instead of Preact.

Just got interested in rescript.

I would definitely love to have support for preact to reduce my bundle size and improving performance. In the vast majority of cases I can use it as a drop in replacement, and even when using react itself preact signals are almost always a better abstraction than react hooks and contexts.

I’m using Rescript + Preact at work and we did the alias thing for react->preact. I just followed preact’s guide to aliasing on their documentation

Seems to have worked with no other differences on the Rescript side, though haven’t tried signals yet. Reducers are too easy in rescript

and it’s probably confusing having React instead of Preact.

// bindings/Preact.res
include React

:stuck_out_tongue:

6 Likes

Okay, what do you do to make it alias in Rescripts build system? Is there some config file where you tell it to grab Preact instead of react ? I’m looking at the interop between rescript and javascript build systems right now.

It depends on which build system you’re using, the preact docs have a specific section with the different methods.

Aliasing React to Preact | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM. (preactjs.com)

Yes, I am familiar with that, thank you. I am asking about the rescript side of things. Assume Vite/Webpack if it makes the question specific enough.

Does setting up aliases in webpack make rescript just automatically import the aliased library? Does rescript integrate easily with webpack? Or is that the wrong question to ask because rescript happens to cover something without involving the build system? Etc etc

The point of setting up aliases is that it should ‘just work’ without any other effort. So it may be worth your while to just try it out and report your findings.

1 Like

I haven’t tried it with webpack, but I have used rescript + preact with vite as the build system using the aliases as described in the preact docs. It was just a toy project, not production, but it seemed to work fine.

3 Likes

FYI this is now possible since v11.1:

I have a project I’m working on using Preact, Deno, and Fresh. it’s pretty easy to set up.

1 Like

Would you be able to share a pre-configured deno-preact-fresh-rescript application starter on github?

1 Like

It’s on my list! I’ll post here once I can get something cleaned up.

I pushed up some Fresh bindings to NPM and converted the starter Fresh app to ReScript: GitHub - jderochervlk/rescript-fresh-example: An example application using @jvlk/rescript-fresh

I’m going to keep working on it, but I wanted to share what I have so far.

3 Likes