solid-js

Is it possible to use Solid.JS with simple JSX compiler?

React.JS Components are plain JS, JSX is just a syntactical sugar that while "compiled" (by babel or tsx), are not really a compilation, but a very simple, 1 to 1 transformation:

<div>hi {count}</div> => jsx("div", { children: ["hi ", count]});

I wonder if it's possible to use Solid.JS the same way? As far as I know it uses complicated compiler to make things faster.

But is it required or optional? If you don't need to make things faster, could you just compile Solid.JS component with simple tsc or babel compiler? With no hidden magic or alterations behind the scene?

Solution

  • You can use Solid.js in buildless mode which has two options:

    1. Template literals
    2. h/createElement function like JSX.

    In JSX mode, there are some changes you'll need to make to your code compared to the default JSX compiler, like wrapping expressions in functions to make them reactive and more. All the differences are documented here.