How do I preserve state when hot reloading in a standard SvelteKit dev environment?

I have a pretty standard out of the box Svelte dev environment setup based on these docs in early 2024.

My vite.config.js file currently looks like this:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()]
});

My svelte.config.js file currently looks like this:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

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

export default config;

I see that the svelte-hmr plugin supports preserving state but it's disabled by default. I also know that this plugin is somewhere in my build tooling because it's in package-lock.json as a dependency of vite-plugin-svelte.

I'm totally new to SvelteKit and Vite. I just can't figure out where to set that config flag.

I can add // @hmr:keep-all into the tag in my one and only component right now and it works. I'd prefer to set it globally.

I acknowledge that preserving state has caveats. I'm too used to React dev environments with that kind of setup, and I can't work with SvelteKit without it.

The docs on HMR explain why this was turned off and how to reenable it:

If you want this behaviour for all the state of all your components, you can enable it by setting the preserveLocalState option to true.

// svelte.config.js
export default {
    vitePlugin: {
        hot: {
            preserveLocalState: true,
        },
    },
};