Svelte 5 changes the update order of `$:` and `{#key}` in Svelte 4 Components

[LorisSigrist]

Describe the bug

From what I gather Svelte 5 is supposed to be able to handle Svelte 4 components without changes.

There is a subtle difference between how the versions handle a {#key} block whose key is a derived variable (using $:).

In Svelte 4 it will wait to rerender the {#key} block until all $: updates have finished. In Svelte 5 it will immediately rerender the {#key} once the key is changed.

Example:

<script>
  let count = 0;

  $: derivedKey = count % 2 === 0;
  $: someOtherWork(count) //will run before #key rerenders in Svelte 4, but after in Svelte 5
</script>

<button on:click={()=>count += 1}>Change</button>

{#key derivedKey}
   <stuff />
{/key}

Reproduction

Svelte 5 REPL

Svelte 4 REPL

You will see that the two counts get out of sync in Svelte 5, but stay in sync in Svelte 4

Logs

No response

System Info

System:
    OS: macOS 14.3.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 3.27 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - /opt/homebrew/bin/node
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.15.3 - /opt/homebrew/bin/pnpm
  Browsers:
    Safari: 17.3.1
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.64

Severity

blocking an upgrade