Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

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

$
0
0

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.


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>