HMR plans?

[rixo]

Hey guys!

I've been working on a HMR implementation this summer, building upon the one for v2 in svelte-loader (my clone, demo).

It supports svelte-native (demo) and works in Sapper + Webpack (where I've been using it the most).

I've also just added support for Nollup (plugin, demo). (Would love to do Sapper + Nollup.)

I haven't got much feedback yet, but I run a small test suite on it (with Puppeteer) and it seems to support about every feature of Svelte that I know (apart from transitions maybe, haven't really tested them yet). With Nollup, it has delicious error resilience!

What's the catch? It runs on emulated dev hooks that mess a little bit with the private $$ API. But a few more utilities like $capture_state / $inject_state could address this. There's not so much needed. In essence, it's just hooking on components' m and d, and transferring callbacks, bounds, $$slots and context.

So, what do you think? Are you interested in moving this forward?

[rixo]

I've published a fork of rollup-plugin-svelte with added HMR support : rollup-plugin-svelte-hot (and a degit-able app template to get started).

Since it has access to the whole compiler's output (vars in particular), it can bypass current limitations with $capture_state to support preservation of components' local state (same was already done in my fork of svelte-loader). So for now it's my recommended solution for HMR with Rollup (well, Nollup).

For the future: do you think it's preferable to have a bundler plugin dedicated only to HMR support for Svelte components, or a single plugin that does both compile + HMR like the one I've just posted -- and like official svelte-loader has done until now?

[shybyte]

@rixo I just wanna say thank you! Your app template is exactly what I was looking for!

[rixo]

@shybyte Thanks! Nice to hear some feedback :)

So, to answer my own question, I deprecated the HMR only plugin in favor of the integrated rollup-plugin-svelte-hot.

The plugin now features HMR support not only with Nollup, but also with... Rollup itself! Still very very experimental this one though. It uses WIP rollup-plugin-hot.

For people willing to beta test HMR, please give it a shot!

See updated svelte-template-hot for details & example.

[hasparus]

Thanks @rixo, I was looking for this issue :)

[rixo]

Update: I've put the links to all my HMR related projects (plugins, templates) in this readme. If you want to try HMR before official support, your best place to start is there.

If you need help with getting started, you're welcome to drop me a line on Discord or issue (report HMR issues there, not here, since it is not officially supported currently).

[antony]

Closing this as I think we should be documenting this in the community site for now, in order to grow the HMR userbase, with a view to HMR becoming an official part of Svelte (as per the roadmap). Thanks for your hard work @rixo !

[akaibukai]

Hello,
I tried both your webpack and rollup HMR templates and it's amazing!

TBH, one of the main selling point of Svelte being the "speed" concerns (small bundle so fast download, without framework runtime so faster execution, etc..) the HMR feature is a very important part of this feeling IMHO.

I was immediately convinced by Svelte when I first heard of it (and ultimately when I saw Rich's famous Reactivity talk), but until now I didn't have the opportunity to work with..

But I'm currently testing a small app with Svelte and somehow I find the whole process very slow..
For example I'm used to work with many differently sized browser (up to 4), and I often work with tiny steps when working with the aesthetics..

And in the current workflow it takes easily 1 to 2s for the browsers to load upon livereload..
I know that's ultimately in production it would be a different story..

But, you know, programmer happiness etc.. Those are really 2 annoying seconds..
I was thinking to stick with Vue but your plugin and your work mitigate that feeling..

Thank you!

[benmccann]

@antony could you merge sveltejs/integrations#31 then?

[antony]

@benmccann I'm more of a triager than a merger, but I'll try to get it in front of the right people :)

[AlbertMarashi]

@antony shouldn't this become part of svelte's main plugins? HMR is a pretty important feature for devs to improve productivity

[antony]

@DominusVilicus it's not as simple as that. I can assure you that it is work in progress, however.

[ZaDarkSide]

1 year has passed since this issue was first posted, how are we coming along with integrating this into main svelte releases?

[antony]

@ZaDarkSide you can read the RFCs, study rixo's work, and engage with the community to keep track of the HMR progress.

[ZaDarkSide]

Well for me this feature seams to be stuck in development hell, people really need it to be productive...