`bind:` in a loop breaks the reference

[macmillen]

Describe the bug

I posted this issue already on sveltekit-superforms but it seems to be a Svelte 5 issue. ciscoheat/sveltekit-superforms#509

Apparently in Svelte 5 there is a reactivity problem when you use bind: with a list item in a loop it breaks reference.

• What I'm wondering about is that while the $form store is updating correctly and reactively the form param inside the onUpdate callback is not up to date

• This issue seems to only occur in Svelte 5, that's why it seems to me like a bug

<form use:enhance method="post">
	{#each $form.priceRules ?? [] as priceRule}
		<!-- this doesn't work (only when updating another form field afterwards: -->
		<PriceSelection bind:selectedItem={priceRule.priceCategory} />

		<!-- this works: -->
		<!-- <PriceSelection bind:selectedItem={$form.priceRules[0].priceCategory} /> -->
	{/each}

	<button type="submit">submit</button>
</form>

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-svjrzfhz?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    svelte: ^5.0.0 => 5.9.0

Severity

blocking an upgrade

[kaechele]

I think this works as intended. svelte-check tells you:

Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. array[i] = value instead of entry = value)

svelte(each_item_invalid_assignment)

Possibly related: #13592

[dummdidumm]

Pretty sure we can fix this. This is a legacy mode component, and we need to detect that the each block uses a store and invalidate that instead of using the "invalidate inner signals" approach.

Runes mode is a different thing - in that case using the binding as $forms[0].x is the correct approach.

[macmillen]

This would help a lot with our Svelte 5 upgrade because it would be a huge effort to change the bindings in the whole codebase. With a fix we could instead do it step by step.