Using solid with esbuild

[winston0410]

The compiling speed for esbuild is awesome. It supports JSX initially, but the compiled code is using a JSX factory, which is different with how solid would handle JSX.

Is it possible to add support for esbuild, so that we can bundle with it instead of babel for the speed benefit?

[ryansolid]

Not unless we get AST level plugin manipulation. And to my knowledge Evan has no intention of adding that feature. He views his library more as a fast bundler(webpack, parcel, rollup) with some convenient features rather than a replacement for Babel's custom transpilation capabilities. SWC is closer to that intention. Other libraries basically just run their own compiler as a separate process which is basically like running Babel with ESBuild. Unfortunately, that slows things down to only about twice as fast as other bundlers. So even with ESBuild adding plugins (WIP last I checked), it is unlikely it will provide an ability to be a replacement for Babel.

And we've also been examining the output, and Rollup produces better bundles still. So the benefit is a lot less to use ESBuild here. Obviously a hand made parser/compiler could be more performant than Babel, but would take writing a parser/compiler. Whereas Babel basically has all the nice features and is pretty easy, and honestly big part of how I've been able to move so fast without re-inventing the wheel.

[amoutonbrady]

Hey there @winston0410.

I was the one conducting the experiments with integrating solid-js into esbuild pipeline in our effort the find the best starters for new users. As a bundler (and general JS tooling) fanatic myself, I did try and the only way to do that is like Ryan's said, to include babel within the plugin system which slows things down.

The plugin system has been published officially a couple of weeks ago and is considered stable I think. I went ahead and published an esbuild plugin to integrate solid's JSX compilation into ESBuild.

You can find the instructions over here: https://github.com/amoutonbrady/esbuild-plugin-solid.

Basically, the gist of it is (solid-js & esbuild being peer-dependencies):

const { build } = require('esbuild');
const { solidPlugin } = require('esbuild-plugin-solid');

build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
  plugins: [solidPlugin()],
}).catch(() => process.exit(1))

Hope this can help you out!

note: As Ryan rightfully mentioned, the final size of the bundle is a bit higher than with what you'd have with rollup but on par with parcel & webpack.

[ryansolid]

Considering this one answered. Closing.

[sintaxi]

Hey, I know esbuild support is not a big priority for solidjs - and Vite is a very capable web server - but I think having an approach to using solid with esbuild would hugely beneficial.

I develop Harp Web Server which is a lightweight server with automatic pre-compiling for .sass, .md, .ejs and .jsx (via esbuild) etc. I would love for harp to "just work" with solidjs. Harp and Solid have philosophical alignment (both lightweight & simple) so I want to get them working together. That is all.

Keep up the good work!

-Brock

[Brendan-csel]

We use esbuild directly (not through vite). It does need babel for the babel-preset-solid transform though - but still very fast! Also esbuild-plugin-solid.