Different behavior HMR .svelte and .svelte.js

[dm-de]

Describe the bug

There is a difference in the behavior of Hot Module Reloading in Vite.

I'm not sure: is this a bug or not?

For example, if you edit below Component.svelte, it is also possible that App.svelte is reloaded and then you will lose the global state.

Note: examples will not show this behavior in Playground, because it is fully reloaded.
You need to setup simple vite installation with:
npm create vite@latest

Reproduction

EXAMPLE 1:

After editing Component.svelte:
App.svelte is reloaded and state is lost.
User-ID is 0 in Component

console:

GET http://localhost:5173/src/Component.svelte?t=1732219190118
GET http://localhost:5173/src/App.svelte?t=1732219190118

<!-- App.svelte -->
<script module>
  export let global = $state({
    user: {id:0},
  })
</script>

<script>
  import Component from './Component.svelte'
  import {onMount} from 'svelte'

  onMount(() => {
    global.user.id = 1
  })
</script>

<Component />





<!-- Component.svelte -->
<script>
  import {global} from './App.svelte'
  $inspect(global)
</script>

User ID: {global.user.id}

.
.
.

EXAMPLE 2:

After editing Component.svelte:
Only Component.svelte is reloaded and state is not lost.
User-ID is 1 in Component

console:

GET http://localhost:5173/src/Component.svelte?t=1732219722537

//global.svelte.js
export let global = $state({
    user: {id:0},
})





<!-- App.svelte -->
<script>
  import Component from './Component.svelte'
  import {onMount} from 'svelte'
  import {global} from './global.svelte.js'

  onMount(() => {
    global.user.id = 1
  })
</script>

<Component />





<!-- Component.svelte -->
<script>
  import {global} from './global.svelte.js'
  $inspect(global)
</script>

User ID: {global.user.id}

Logs

No response

System Info

Svelte 5.2.7

Severity

annoyance

[trueadm]

I'm not sure this is a bug. If you are using HMR, I would fully expect that if App.svelte reloads then any state within it would also be reset within the module script. Can you put your global state in its own .svelte.ts or .svelte.js module instead and import it in both places?

[dm-de]

I would fully expect that if App.svelte reloads then any state within it would also be reset within the module script.

sure

But why is App.svelte reloading, if I change Component.svelte?

[trueadm]

That's down to how Vite's HMR module invalidation works, it's not controlled by Svelte. However, it's likely because you're referencing an import from that module? If you remove the import, does it sill invalidate App.svelte?

[dm-de]

Note: I edited above example 2.
Here is an mistake.
Filename: global.svelte is changed to global.svelte.js

However, it's likely because you're referencing an import from that module?

Here is example 3 - it is equivalent to example 2, but with Svelte-File.
And it works - so it has nothing to do with .svelte or svelte.js

<!-- App.svelte -->
<script>
  import Component from './Component.svelte'
	import {onMount} from 'svelte'
  import {global} from './Global.svelte'

  onMount(() => {
    global.user.id = 1
	})
</script>

<Component />



<!-- Component.svelte -->
<script>
	import {global} from './Global.svelte'
	$inspect(global)
</script>

User ID: {global.user.id}



<!-- Global.svelte -->
<script module>
	export let global = $state({
	  user: {id:0},
	})
</script>

I found out that editing a child-component forces reloading of parent component(s).
It is possible to get a cascade of updates.

In Example 4 - All 3 components will be reloaded, if you edit Child2.svelte and global state from App.svelte is lost.

<!-- App.svelte -->
<script module>
  export let global = $state({
    user: {id:0},
  })
</script>

<script>
  import Child from './Child.svelte'
  import {onMount} from 'svelte'

  onMount(() => {
    global.user.id = 1
  })
</script>

<Child />



<!-- Child.svelte -->
<script>
	import Child2 from './Child2.svelte'
</script>

<Child2 />



<!-- Child2.svelte -->
<script>
  import {global} from './App.svelte'
  $inspect(global)
</script>

User ID: {global.user.id}

[trueadm]

Why is your Global.svelte a component for? you don't need to use a component to use runes, you can just use a normal .svelte.js` module and export the state from there.

Looking into it, yes child components should invalidate parent components – it makes complete sense. I might be wrong but it's because the modules both reference one another, so Vite marks them both for invalidation.

Just don't put global state in components. Put it in their own modules and things work as expected.

[dominikg]

@rixo implemented partial accept for some of these cases and you might be able to save/restore the state with custom handlers on import.meta.hot , but the easiest way is indeed to not couple your state with a component if it is shared across through imports.

Another way to share state is through context, there it would be retained as well, unless you edit the code that sets the context.

also svelte-hmr had annotations with //@hmr-keep comments that did automate restoring pre-update state, but this is suuuper brittle and i don't think it was ported to svelte5.

[dominikg]

example for custom state restore https://github.com/sveltejs/vite-plugin-svelte/blob/d243a64c908d3f4b0bec346dd0aac6165aa932f0/packages/e2e-tests/hmr/src/stores/hmr-stores.js#L8

[dm-de]

Why is your Global.svelte a component for? you don't need to use a component to use runes, you can just use a normal .svelte.js` module and export the state from there.

Global.svelte is for demonstration only.

Looking into it, yes child components should invalidate parent components – it makes complete sense.

It seems that update cascade happens only, if global state is inside App.svelte.
If I move my global state to global.svelte.js - here is no more such update cascade.

[trueadm]

It seems that update cascade happens only, if global state is inside App.svelte.

I might be wrong but it's because the modules both reference one another, so Vite marks them both for invalidation.

[dm-de]

I might be wrong but it's because the modules both reference one another, so Vite marks them both for invalidation.

It's like a circular reference
But much more complicated than expected.
As you see App do not use Child2 directly!

It is a chain:
App -> Child -> Child2
and Child2 use state from App

Update cascade is then like this:
edit Child2
->reload Child2
->reload App (but why?)
->reload Child (but why?)

Conditions to run update cascade so far:
-Top component with global state
-Deep children component use state from top component

[trueadm]

Yeah this is just how Vite does it. Svelte doesn't have any control over this, so there's not much we can do here other than advise you to move your state into context or a shared module rather than a component.