Svelte 5: Preserve local state during HMR

[bhuynhdev]

Describe the bug

With a brand new SvelteKit project with Svelte 5, I realized that all my states are reset whenever HMR updates

Whenever I change anything in the HTML part of a Svelte file, HMR kicks in and resets all my $state, which makes it very cumbersome to develop a large and complex form

I read that earlier version support directives such as @hmr:keep-all or preserveLocalState, but according to sveltejs/kit#12985, these are outdated and no longer used

So I am unsure what to do now to preserve states between HMR reloads - is this a bug or a feature request?

Reproduction

Reproduction link in SvelteLab: https://www.sveltelab.dev/63iv5zkf3ed2806

Steps to reproduce:

1. Check the checkbox
2. Click the button
3. Change something in the HTML, like adding more text to the paragraph
4. All states get reset - the checkbox gets unchecked, and text resets to initial value 🚩

I understand that SvelteLab may not reflect real-world environments, but I tried it on my laptop inside WSL and the "bug" is still there

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (8) x64 AMD Ryzen 7 8845HS w/ Radeon 780M Graphics
    Memory: 13.97 GB / 14.90 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 23.3.0 - ~/.local/share/mise/installs/node/23/bin/node
    npm: 10.9.0 - ~/.local/share/mise/installs/node/23/bin/npm
    pnpm: 9.14.2 - ~/.local/share/mise/installs/node/23/bin/pnpm
  npmPackages:
    svelte: ^5.1.13 => 5.1.13

Severity

annoyance

[apekros]

Also just ran into this issue with tauri+Svelte 5, would love to have something like the directives or preserveLocalState support

[dominikg]

you can add this code to the end of your script block to manually preserve the checked state

	if (import.meta.hot) {
		if (import.meta.hot.data.checked != null) {
			checked = import.meta.hot.data.checked;
		}
		import.meta.hot.accept();
		import.meta.hot.dispose(() => {
			import.meta.hot.data.checked = checked;
		});
  }

It may be possible to extend the svelte compiler to parse annotations and create this code for you, however it should always be used as a scalpel.

[ngoov]

Are there any plans to add this to the kit configuration? It's a shame that by replacing svelte-hmr and vite's default HMR, SvelteKit does not support this functionality anymore. It's kind of a step backwards IMO.

And adding code at the end of a script block to keep track of all the client state is not feasible...