svelte-preprocess-preserve-hot-reload-state

Preprocessor for SvelteKit and Svelte 5 to preserve state on hot reload updates. That is, if you define some state with $state, then when you make updates and your app refreshes, the state should be preserved so that you're in the same place you were in before.

To use, include this package as a preprocessor in your svelte.config.js. See https://svelte.dev/docs/kit/configuration and https://svelte.dev/docs/kit/integrations for more information about Svelte config and preprocessors.

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { sveltePreserveHotReloadState } from 'svelte-preprocess-preserve-hot-reload-state';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [
        vitePreprocess(),
        sveltePreserveHotReloadState(),
    ],
    ...
}

How it works

Preproccesors work by transforming the markup, script, and style components of your .svelte files before building. There is some information on SvelteKit's website (https://svelte.dev/docs/kit/integrations) but it's not clear how to actually build your own and I found https://stevekinney.com/writing/svelte-markdown-preprocessor as a very good practical guide to doing so.

The preprocessor will extract state defined with $state from your files and inject this code at the end of the files that will do the preservation of state:

let foo = $state(...);
if (import.meta.hot) {
    if (import.meta.hot.data.foo != null) {
        foo = import.meta.hot.data.foo;
    }
    import.meta.hot.accept();
    import.meta.hot.dispose(() => {
        import.meta.hot.data.foo = foo;
    });
}

Thanks to the participants of https://github.com/sveltejs/svelte/issues/14434 for this fix that can be extended to a preprocessor!