I got deno's fresh to work with a rescript react component

1

Repo: https://github.com/dangdennis/fresh-rescript-example
Live: https://dangdennis-fresh-rescript.deno.dev/

I wanted to prove that we can use https://fresh.deno.dev/ with rescript’s jsx and rescript-react. Turns out you can? I hastily put this together but overall it involves a few tweaks to instruct Deno to alias and use the preact modules in place of react:

  1. tsconfig.json needs some path alias
      "paths": {
        "react": ["https://esm.sh/preact@10.8.1"],
        "react-dom": ["https://esm.sh/preact@10.8.1"]
      }
  1. Override react in import_map.json 
{
  "imports": {
    ...
    "react": "https://esm.sh/preact@10.8.1",
    ...
  }
}

To author a react (actually preact) component, start at src/button.res. See that I’ve written a src/button.res, imported its output from lib/es6/src/button.js into islands/Button.tsx. I haven’t explored ways to reduce some of these extra steps, but at least it’s acceptable.

The ideal solution would be the use of a new ppx @preact.component or a way to enhance the react ppx to use a different jsx transform (solidjs, preact, etc).

Additional steps I can take are to see how much of the current typescript can be replaced by rescript. Doesn’t seem too bad. Requires bindings to fresh, and since there’s no build step aside from rescript, I don’t foresee any real blockers as it’s all just esmodules.

3 Likes
2

That’s awesome, great work! I think there’s a little bit of ongoing work with the JSX PPX to open up for making it more general/less tied to React specifically.

1 Like