full page reload every server update, HMR, vite

[vqt123]

Describe the problem

Vite aggressively reloads the entire app every time there's a server change. API change? Reload. +page.server change? Reload.

Trying to test a big form for instance that constantly resets form values every time you save the action feels so bad.

Rich has this issue open https://github.com/vitejs/vite/issues/7887

but the DX right now because of this is so bad that I beg we have a workaround.

Describe the proposed solution

Coerce someone at vite to address https://github.com/vitejs/vite/issues/7887

or gives us a workaround

Alternatives considered

No response

Importance

i cannot use SvelteKit without it

Additional Information

No response

[vqt123]

(Not a valid workaround)

After digging into vite docs and vite forums, i found the vite config options to ignore typescript files

vite.config.ts

export default defineConfig({
    plugins: [sveltekit()],

    server: {
        watch: {
            ignored: ['**.ts']
        }
    }
});

but now there's no way to easily rebuild the server files other than restarting vite

[vqt123]

Ok, found an acceptable workaround thanks to this vite post from about a year ago.

https://github.com/vitejs/vite/issues/6695

Included this in my +layout.svelte (Or any svelte file you wish to not to full page reload on server changes)

+layout.svelte, or +page.svelte

<script>
    if (import.meta.hot) {
        import.meta.hot.on('vite:beforeFullReload', () => {
            throw '(skipping full reload)';
        });
    }
</script>

All server file changes still compile however this prevents your front-end from completely reloading.

[david-plugge]

You could also call invalidateAll to rerun server load functions if that's not already handled by sveltekit

[amr3k]

Thanks so much, this really helped me preserving the form state while developing

[rob-3]

Putting // @hmr:keep-all for whole-component or // @hmr:keep in the script tag from here was good enough for my uses

[achamas-playco]

Just add this to your client-side code:

if (import.meta.hot) {
   import.meta.hot.accept(() => {
      import.meta.hot!.invalidate();
   });
}

It will force a full page reload for every HMR action.