Svelte: Implement minimal effort compromise to support Deno/ ESM

[lucidNTR]

Is your feature request related to a problem? Please describe.
Deno is slowly gaining traction and we see some requests to support svelte development from deno. However it was decided that maintaining a "native" ESM release next to the nodejs one would be too much work for the svelte team in the current setup.

Describe the solution you'd like
I propose a minimal effort compromise to allow supporting ESM/ deno based workflows by officially referring to available bridge software (snowpack and/or unpkg.com) and just maintaining the minimally needed changes in the svelte codebase that are necessary to run in such a setup without manual patching.

Describe alternatives you've considered

4807:

"[...] removing the snowpack [eg. be available for deno in the pika registry] requirement would be more work to get right [...] It would require either package.json to support multiple module entry points, which it currently does not, or for us to find a way to export the compiler into the main module entry point without making esm importing browsers to import the compiler when not needing it. [...]

How important is this feature to you?
It would be most important to new developers that try out svelte + deno and all run into the same issues. If we minimally support this and also add a few sentences of documentation we could save each of these developers work and possibly duplicate issues or support requests on discord.

Implementation Details
There are currently two possibilities to do this

a) by using snowpack

• [ ] add a compiler option to include a ".js" or ".mjs" file ending so the import in the esm compiled output will be
  ..} from "svelte/internal.(m)js";
  (as the probing for file extensions and handling of index.js files is nodejs specific)
  this could also be solved in a preprocessor step, but i think it is better to officially add the file ending when using the compiler with esm output
• [ ] add a section to the svelte readme or the api docs or to the https://github.com/sveltejs/integrations repo how to use svelte with snowpack and deno, i would also create an example starter template and add my example deno/svelte build script

b) by using unpkg.com
this method is also compatible with a, the only downside is that it requires one more change to the svelte codebase compared to a) This additional change already has a PR here:
https://github.com/sveltejs/svelte/pull/4972

• [ ] changes from a
• [ ] add the compiler esm output to the nodejs package
• [ ] add documentation in the appropriate place how to use unpkg.com to import the esm compiler

[antony]

@lucidNTR with regards to sveltejs/integrations - tutorials / recipes / cookbooks tends to go on https://github.com/svelte-society/recipes-mvp

[lucidNTR]

@antony cool, did not know that repo.
because it is a lot of text for a ticket, the summary what is needed to create a first PR:

• decision if import file endings should be done in a preprocessor, svelte compiler option or changed standard output for the "esm" option
• decide if merging https://github.com/sveltejs/svelte/pull/4972 is acceptable overhead for the svelte maintainers or not

[benmccann]

@lucidNTR here are some other tickets where people are looking at Snowpack support in case it's helpful to you to find more collaborators on this: https://github.com/sveltejs/svelte/issues/4898 https://github.com/sveltejs/sapper/issues/1204

[lucidNTR]

@benmccann good point, thanks! i should clarify that i am not talking about general snowpack support for sapper/svelte, where snowpack acts as a rollup wrapper to do bundling and provide a dev server. This ticket here is only about the very small scope to use the "snowpack install" command to provide a deno compatible entry point. The actual implementation work required here is by design very minimal and i am happy to do it...

[Pierstoval]

The actual work is mostly to be able to use a proper "bundler" with Deno. There is already the deno bundle command to generate a single JS output file, but this isn't really what rollup or webpack (or snowpack) do.

Looking at making Rollup compatible with Deno sounds like a first-class issue to me (since Rollup seems the default proposed solution to bundle a Svelte/Sapper app).

[diamondburned]

Can there be a way to use a custom bundler for this? It would be great if people could use esbuild.

[Pierstoval]

Now that #4972 is merged, Svelte can be imported as ESM module, so we could use it as-is and start boostraping a Svelte project with deno 👍

[Taha-Firoz]

Now that #4972 is merged, Svelte can be imported as ESM module, so we could use it as-is and start boostraping a Svelte project with deno 👍

Can you please upload a mock-up of how it would be achieved. I hardly understand how sveltes build system works with Node and Rollup

[Pierstoval]

Can you please upload a mock-up of how it would be achieved. I hardly understand how sveltes build system works with Node and Rollup

I first need to find time to work on that 😉

[softgripper]

I'm looking forward to this.

Native typescript in deno is a godsend, and if I can easily get svelte running in the mix that would be great.

Right now, package.json and the tsc stuff is really annoying - requiring error prone bootstrap files.. If deno and svelte just worked out of the box, I'd be very happy 👍

[kirawi]

Is this not yet fully working? I haven't tried it yet, but I don't see a confirmation of it working at all so far.

[peopledrivemecrazy]

Is this not yet fully working? I haven't tried it yet, but I don't see a confirmation of it working at all so far.

A while back there was a PR #5605 you may have hints over there, Good luck.

[DougAnderson444]

@lucidNTR Now that #4972 is merged, have you been able to get this working without manual intervention?
Care to share an example / steps for those new to snowpack?

[DougAnderson444]

Anyone else else looking for this solution, it's being built here:

https://github.com/denofn/svelte/tree/master/example

@kirawi @softgripper @Pierstoval @lucidNTR

[lucidNTR]

@DougAnderson444 Hi sorry for the late reply, i can confirm that
import { compile } from 'https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=raw/compiler.mjs'

in Deno imports without any errors and is able to compile all the svelte files i tried! I am still testing the resolution sub imports especially the missing file ending issue in the ticket