SWC Support for SolidJS
Reading vitejs's docs, I've came across SWC and I'm wondering if this could be achievable using this:
https://github.com/modderme123/swc-plugin-jsx-dom-expressions
I also stumbled upon a github feed discussion where they stated that SSR and refs are not supported, please let me know 🙏17 Replies
The problem is that DOM expressions are a moving target, so any implementation would either have to utilize the original babel plugin or follow the official version closely. That's also the reason native solid compilation in bun was never finished.
So, currently developers are struggling tracing reactive components inside the DOM to make it work with SWC ?
Hi, the SWC plugin is fairly complete and it can compile both the playground and the main site without issues
I'm not entirely sure about refs support (I haven't tested it yet and haven't worked on that part of the plugin)
And, yeah, neither SSR nor hydration work yet
Here's a config with the plugin set up (it's also got windi in it)
Glad to hear that, thanks for letting me know. tysm 💖
You're welcome :) Feel free to report any issues you encounter
Hey @Tommypop, Is this plugin production ready with SSR support and hydration working ? I'm currently creating a css in js library for solid.js / solidStart using SWC for the jsx transformation in a custom vite plugin and ran into the problem of finding out no support for solid.js
It's definitely not production ready and, afaik, there's no SSR or hydration support yet
I see a good use of this on other bundler that can use SWC, like webpack or RsPack.
I tried to use the same config with RsPack but seems like I am mssing something
I get this error HarmonyLinkingWarning: export 'jsxDEV' (imported as '_jsxDEV') was not found in 'solid-js/jsx-dev-runtime'
I fixed this by setting importSource = "solid-js/h"
but now I have a issue with context
seems like context provider is not working well, I get null trying to get the created context on useContext
That is due to solid-js/h supports react-style JSX transforms, but does not create the reactive effects for props changes, so you need to do them manually.
And context will also not work.
Ok. So a bit incomplete.
But I my option we may need something like this. I had to revert vite to webpack due some production build inconsistencies.
Solid relies to much on vite, but I think we need other tools and ways of work that doesn't demand use vite.
Babel and a Webpack are slow and other build tools are promising better performance.
I think SWC still need to do something to allow write plugins without know Rust, I found the code hard to read.
I think the solution will be something like using porffor to transpile plugin transformers into wasm to run them in a performant way directly from the rust code.
Oxc
The JavaScript Oxidation Compiler
A collection of high-performance JavaScript tools written in Rust
@Alex Lohr maybe a swc plugin on repo that get the jsx tranform plugin (babel) and compiles that to wasm and the swc can use it.
I think swc loads code to a SWC AST and passes that to the transformer to generate the output. because that AST is an object on rust runtime it not that easy to interop with wasm or other language, it may need to some binding to access that AST, but even with access to that AST is not the input the jsx plugin is expecting, Babel has other AST that may not be compatible with the SWC, so is not just the languages.
One would have to map one AST format to another, which is a bother.
provide a babel AST to the babel plugin may do the job.
it may not be hard to convert one AST to the other and rum the babel transformation
but it seems a bit complicated because we have to run the babel on a js runtime from a rust runtime. So maybe parse the SWC AST to json and make js programs to run using node that converts that json SWC AST to Babel and transforms
not sure how is is to run node scripts with node modules from rust, more precisely on a SWC plugin
another way could be plugin that instead of dependency on babel, use an agnostic AST struture that could be used by babel and SWC, or others
the hard dependency on babel make the solid or the jsx compilation hard to re-use by other tools
a re-write of the solid/jsx plugin with JS or TS in away w could load using wasm without babel would make that easier