Change JSX output from React to SolidJs?

Cool. I have just found this after being (mostly for fun) working on this: Kaiko Systems GmbH / rescript / rescript-solidjs · GitLab

I haven’t used SolidJS before, because I use Rescript most of the time. So I had this experiment in my bucket list since it was announced the Rescript v12 would support preserving JSX. I’m gonna try these bindings.

I did find some issues with the reactivity system of Solid and Rescript’s code generation. Using switch accessor() {...} might generate the accessor code outside the JSX:

This snipped:

module ThemeDisplay = {
  @jsx.component
  let make = (~label: string) => {
    let {getTheme} = ThemeContext.useContext()
    <div
      className={switch getTheme() {
      | Light => "cursor-pointer p-4 bg-white border-2 border-gray-300 rounded-lg"
      | Dark => "cursor-pointer p-4 bg-gray-800 border-2 border-gray-600 rounded-lg text-white"
      }}
    >
      <div className="text-sm font-semibold mb-1">
        {SolidJs.string(label)}
      </div>
      <div className="text-lg">
        {SolidJs.string(
          switch getTheme() {
          | Light => "☀️ Light Mode"
          | Dark => "🌙 Dark Mode"
          },
        )}
      </div>
    </div>
  }
}

Produces the code JS for the switch getTheme() outside of the JSX:

function Playground$ThemeDisplay(props) {
  let match = SolidJs.useContext(context);
  let getTheme = match.getTheme;
  let match$1 = getTheme();
  let tmp;
  tmp = match$1 === "light" ? "☀️ Light Mode" : "🌙 Dark Mode";
  let match$2 = getTheme();
  let tmp$1;
  tmp$1 = match$2 === "light" ? "cursor-pointer p-4 bg-white border-2 border-gray-300 rounded-lg" : "cursor-pointer p-4 bg-gray-800 border-2 border-gray-600 rounded-lg text-white";
  return <div ...

And this makes the code non-reactive to changes in the theme. To overcome this I had to use createMemo to make sure the call to the accessor is detected by SolidJS.

Have you noticed this before?