First, sorry that this post is so disorganized, I did not find enough energy to make a better post architecture.
I definitely would like Svelte to be usable with Deno, so I tried several methods in order for it to work in the past weeks. I’m close to it, but for now it’s not perfect. If you know an easier method, please tell me!
I first tried on this branch to raw-include node.js dependencies and allow building the entire Svelte stack with Deno.
I made a lot of tests and I think these tests were a lot of time lost for nothing.
It took me a while before I realized that this method was impossible: Svelte is tightly coupled to its dependencies (
acorn, and many others), so moving the entire ecosystem to Deno is not even thinkable, at least not today.
After a while, I tried compiling Svelte’s compiler as an ESM, and it was actually quite easy.
If you wonder about ESM, CJS, AMD, UMD and all these strange acronyms, I suggest you check out this blog post which explains it very well. To sum it up quickly here, we want ESM, because it’s the best standard, but Node.js is based on CJS.
Svelte is built with Rollup, one of the JS bundlers that exist in the Node.js world (alongside with Webpack, the most known one). It already has a nice and clear building configuration, even for people like me that have never heard about Rollup before looking at Svelte’s source code.
I find Rollup to be very interesting, maybe even easier to try than Webpack, but experts might give me some arguments to contradict me, I don’t know, I’m no expert on this side of the dark JS world.
As Svelte already builds its
runtime to ESM as well as CJS</cabbr>, we just need to build the
compiler to ESM in order to use it.
That’s why I created a small PR to add this: https://github.com/sveltejs/svelte/pull/4972
I also created a small proof of concept Project to try out my ideas.
This actually worked very well!
Until… I ran the server.
The code generated with Svelte’s compiler is not fully working.
Well… I’m not the only one. The
svelte/internal component is necessary, and the compiler considers that it’s available to the generated code. Which is not the case.
If you want to use it, you must include
svelte/internal somewhere and make it available.
For the SSR version of the generated code, it’s working because I added a dirty fix:
/* /!\ Dirty fix */ const JS_SSR = compiledSsr.js.code.replace( '"../svelte/internal"', '"../svelte/internal/index.mjs"' );
This fix takes the
svelte/internal import statement and replaces it with
With this change, it works!
At least, the server.
For frontend-side rendering, I still need to find the issue with the compilation process, but maybe I’ll find something at some point.