Clearly defined bundler support matrix

[ghost]

Is your feature request related to a problem? Please describe. I've had checking out Svelte/Sapper on my backlog for some time now, and I was finally able to spend some time exploring it, but it's not very clear what combinations of bundlers, plugins, etc. work together or what is officially supported versus community versus no plans to ever support.

For example, the Svelte FAQ [1] links to community plugins [2] for HMR, but if you go to those packages, there is an update / link back to a Svelte issue [3] that appears to have merged some support for HMR directly into Svelte v3. The Sapper webpack template [4] advertises live reloading, but upon pulling it down and running it, while it rebuilds, it doesn't seem to actually reload anything in the browser (you need to manually refresh). I found some older issues mentioning similar problems, but it's really confusing trying to determine what information is stale versus what is current.

[1] https://svelte.dev/faq#how-do-i-do-hmr [2] https://github.com/rixo/svelte-loader-hot [3] https://github.com/sveltejs/svelte/pull/3822 [4] https://github.com/sveltejs/sapper-template-webpack

Describe the solution you'd like Clearly state what is supported and what isn't. Being able to answer simple questions like does Sapper v0 + webpack v4 work or does it support HMR is huge. Does Sapper v0 + webpack v5 work, etc.?

Describe alternatives you've considered I've spent hours reading through docs, FAQs, and a bunch of GitHub issues, but there's no canonical place to see a current state of what works and what doesn't. It doesn't give a lot of confidence when there are template examples using deprecated plugins or things that are clearly not supported anymore.

How important is this feature to you? Honestly, I think Svelte and Sapper look awesome, but without clear docs on what works together and is supported and/or some type of roadmap, I can't use it for any real projects. At this point I've just been throwing things at a wall and hoping stuff works without any confidence it's supposed to work or will continue to work.

Anecdote, there's an issue where someone says Sapper is likely to never support webpack v5. That seems like important information that shouldn't be buried in a GitHub issue. I completely understand these things might still be in discussion or not decided, but at least posting the current state of things somewhere would go a long way.

Additional context I'm exploring some new projects from scratch and was interested in Svelte/Sapper, but initial impressions around docs and trying to find support information has been a struggle to say the least. My direct question that prompted me to go through this journey was trying to find out if Sapper + Svelte v3 + webpack worked / was officially supported, and if it supported HMR directly or if it was still only community supported at this point.

[benmccann]

General Svelte hot reloading solutions won't work for Sapper. Sapper has some amount of reloading built into npm run dev, but today there's not really a way to do more than that. Not a bad idea to add that info to the FAQ

The issue is that when you run sapper run dev it starts a process that generates files your app depends on and that functionality lives outside the bundler (Rollup/webpack/etc.) Sapper then runs the bundler itself, which means Sapper has code to support each bundler. This makes adding HMR frameworks and maintaining each bundler difficult. We're thinking about ways to improve this, but don't have any concrete decisions. I recently sent https://github.com/sveltejs/rfcs/pull/29 to investigate moving some of the Rollup code out of Sapper partially towards this goal because the less building logic that's in Sapper the easier it is to change Sapper in a way that makes these other things easier.

With Webpack, part of the difficulty is that the maintainers mostly use Rollup, which makes it a little harder to maintain. One idea here is to try to really bring down the cost of maintaining support for each bundler so that it's easier and well-documented and making it something that the community could do. That depends on some big changes to the core of how Sapper works though.

For everything I mentioned that's future-looking, there's lots of ideas, so please take it all with a grain of salt and feel free to contribute your own ideas.

[ghost]

@benmccann Thanks for the quick reply!

I definitely understand there are a lot of things in flux. For example, if webpack is dropped or v5 is not officially supported moving into the future for XYZ reasons, that's perfectly logical to me; it's more about having it clearly documented somewhere. You somewhat alluded to one of the actual problems with the mental model I've been trying to build, which is that some things are "kinda" supported with caveats, and certain pieces are more "official" than others, haha; it can make it a bit difficult to wrap one's head around :(

My current high-level understanding is the following (please correct me on anything I get wrong):

The only "official" bundlers for Svelte/Sapper are rollup and webpack (with rollup being the preferred/recommended). Based on your comment, Sapper has custom implementations for some HMR features, but is separate/distinct from say a normal webpack loader or rollup plugin for Svelte.

It looks like you should be able to use rollup v2 or webpack v4 with the latest versions of Svelte and Sapper, but HMR will be hit or miss depending on what features you're looking for / your setup, and there's not necessarily a clear path forward on the HMR story, although there are ongoing discussions on how to improve that experience.

The part I'm still a bit fuzzy on is does that mean Svelte v3 + webpack v4 (not using Sapper) does fully support HMR out of the box, or does that still have some gaps as well / community supported? And are there any docs on things like support for webpack v5?

[benmccann]

Currently, the only "official" bundlers for Svelte/Sapper are rollup and webpack (with rollup being the preferred/recommended).

Yes

Based on your comment, Sapper has custom implementations for some HMR features, but is separate/distinct from say a normal webpack loader or rollup plugin for Svelte.

To be honest I'm not that familiar with HMR what exactly that covers or what Sapper does or doesn't support there. But yes, it is separate/distinct from a normal webpack loader or rollup plugin and you would probably have a hard time using anything that's not built-in already

The part I'm still a bit fuzzy on is does that mean Svelte v3 + webpack v4 (not using Sapper) does fully support HMR out of the box, or does that still have some gaps as well / community supported? And are there any docs on things like support for webpack v5?

No idea on that one. I've never used Svelte without Sapper. I do know that HMR is one of the areas that the other maintainers are most interested in prioritizing, but I'm not really up-to-date on what if anything might be missing. The best summary I know of is here: https://github.com/rixo/svelte-hmr

[ghost]

Awesome, thanks for the information; it helps a lot. :) If I can find some time, I can perhaps try sending a small PR for a docs update. If someone more knowledgeable adds something in the meantime though, the more the merrier.