How to add HMR to Rollup with Svelte?

Question

I am using Svelte and Rollup for my application. I used official Svelte template before it was archived.

This template uses rollup-plugin-livereload which reloads whole page on every code change.

I want my code to run without page refreshes. It takes 8 to 10 seconds every time the code changes. Because of this development is super slow.

UPD: And another reason why I use Rollup rather then Vite is because Vite doesn't support gRPC.

Answer 1

I wrote a plugin for exactly this purpose. It works perfectly so far and you can check out the code at rollup-plugin-reloadsite.

Answer 2

This is not a direct answer to your question (How to add HMR to rollup+svelte) but
I suggest you moving from Rollup (which I guess just can't provide you HMR because it's simply a bundler) to Vite using npm init vite and then selecting svelte as suggested in README.md of legacy template which you used. Rollup was created to bundle your files, it's not a development server which you would like to use. You can learn more about vite here: vitejs.dev.

After cloning template using command above you can migrate your codebase to the new tooling environment which should fit requirements you described in your question.

UPD: Today bundler should not be used as development tool due to development speed (especially on low-cost devices). But if you really need HMR in rollup, you can take a look at Nollup. This is the only thing I can suggest you.

I have no idea what RPC thing is, but I can see it's popular, that means you are not alone with your issue. If it can't be used with Vite directly, I am sure you can use it in SvelteKit somehow. I guess when you started development your project SvelteKit was too young, but it's already released as 1.0 today. You can take a look at agrism/grpc-web-svelte, icflorescu/trpc-sveltekit, this reddit post, and so on.. You got my idea.