Repository navigation
HMR plans? #3632
Description
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?
Activity
rixo commentedon Oct 8, 2019
I've published a fork of
rollup-plugin-sveltewith 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 (
varsin particular), it can bypass current limitations with$capture_stateto support preservation of components' local state (same was already done in my fork ofsvelte-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-loaderhas done until now?shybyte commentedon Oct 12, 2019
@rixo I just wanna say thank you! Your app template is exactly what I was looking for!
rixo commentedon Oct 25, 2019
@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 commentedon Oct 26, 2019
Thanks @rixo, I was looking for this issue :)
rixo commentedon Dec 20, 2019
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 commentedon Apr 9, 2020
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 commentedon Apr 29, 2020
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 commentedon May 11, 2020
@antony could you merge sveltejs/integrations#31 then?
antony commentedon May 11, 2020
@benmccann I'm more of a triager than a merger, but I'll try to get it in front of the right people :)
AlbertMarashi commentedon May 11, 2020
@antony shouldn't this become part of svelte's main plugins? HMR is a pretty important feature for devs to improve productivity
antony commentedon May 11, 2020
@DominusVilicus it's not as simple as that. I can assure you that it is work in progress, however.
ZaDarkSide commentedon Sep 25, 2020
1 year has passed since this issue was first posted, how are we coming along with integrating this into main svelte releases?
antony commentedon Sep 25, 2020
@ZaDarkSide you can read the RFCs, study rixo's work, and engage with the community to keep track of the HMR progress.
ZaDarkSide commentedon Sep 27, 2020
Well for me this feature seams to be stuck in development hell, people really need it to be productive...