Svelte 5 migration: statements should be reordered

[Rich-Harris]

Describe the bug

in:

<script>
  $: mobile = width < 640;
  let width = 0;
</script>

<svelte:window bind:innerWidth={width} />

<p>{mobile ? 'mobile' : 'desktop'}</p>

out:

<script>
  let mobile = $derived(width < 640);
  let width = $state(0);
</script>

<svelte:window bind:innerWidth={width} />

<p>{mobile ? 'mobile' : 'desktop'}</p>

Note that width is referenced before its declaration. This is allowed in Svelte 4 but not in runes mode.

Reproduction

link

Logs

No response

System Info

next

Severity

annoyance