Solid JSX Transform

Is there no lightweight way to transpile Solid JSX? With react or preact I can do a very nice on-the-fly transpilation for my application's JSX with just a 200kb js file that I can call to transform them. And for doing real builds, esbuild has it built in for react and preact. It seems like there isn't a very easy way to use Solid JSX if I am not using Node or if I wanted to. I could do a standard JSX transform to hyperscript but I would rather not do that as it would be sacrificing a lot. My work is fairly restrictive and I would love to be using Solid with JSX. So if anyone knows a lightweight way to do it both for build time and to do JSX string to JS string so I can transpile JSX files "in the browser" like react/preact. Or any way I could build this myself without taking an insane amount of time.
2 Replies
Tommypop
Tommypop2w ago
The Solid playground does in-browser compilation of JSX here (with some extra code for handling imports of other files). It uses babel so isn't particularly lightweight though
GitHub
solid-playground/packages/solid-repl/repl/compiler.ts at 83776959ef...
Quickly discover what the solid compiler will generate from your JSX template - solidjs/solid-playground
ryansolid
ryansolid2w ago
Yeah you can technically use babel standalone in the browser. The challenge is that other tooling has the generic transform built in. Things like TS etc.. that being said React has changed and optimized their transform since then so that isn't even the best way of doing it. This is the product of tooling building React's old transform into themselves otherwise they'd need to do the same thing. Convenient for React users but hard to expect that elsewhere. Solid's transform is very different to React and Preact.

Did you find this page helpful?