raise error when user tries to modify an array's item with primitive values from inside an each block

[opensas]

Describe the bug

When trying to modify the item of an array from inside an each block, not only the modification won't be reflected, but also the underlying array won't respond to reactive commands anymore.

Logs
Please include browser console and server logs around the time this bug occurred.

To Reproduce

In the following code, the second #each block works ok, and the dom is correctly updated to reflect list changes. That is, it is ok to modify an array's item, even if it's a primitive value, accessing thru array[index].

But the first #each will not work, because primitive values are passed by value and not by reference. The problem is that no only it doesn't work, but it breaks reactivity on the array.

<script>
	let list = [1, 2, 3];
	const changeList = (index) => list[index] *=2
	$: console.log('list', list)
</script>
 
changing item directly from inside the each block: <br />
{#each list as item}
  <button on:click={() => item *= 2 }>{ item }</button>
{/each}
<br /><br />
changing list[index] from inside the each block using index:  <br />
{#each list as item, index}
  <button on:click={() => list[index] *= 2 }>{ item }</button>
{/each}

repl available here

Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that Svelte is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster.

Expected behavior

The compiler should issue an error (or perhaps a warning). Not only it doesn't work as expected but it also breaks reactivity. Assigning primitive items from an #each block should nor be permitted at all.

Severity

Just annoying.

Additional context

I stumbled upon this by reading sveltes recipes on each block

[dimfeld]

The break in reactivity may be the same thing as #4574.

[Conduitry]

This is fixed in 3.23.1 - https://svelte.dev/repl/bc170b644f554eb29374138167dea4f0?version=3.23.1 - though not by making this an error, but by making this translate into a mutation of the array.

[opensas]

Excellet job indeed! Now that I understand why it won't work in the first place, this looks like black magic.
I'll create an issue to fix the recipe

[frederikhors]

@Conduitry I'm trying to understand how to create an Invoice-like form with Svelte 3.

I asked there and the amazing @sw-yx pointed me here.

REPL: https://svelte.dev/repl/7aca36569aea49bba38e5fb8b1b0835b?version=3.24.1

I think I can use bind:value={rows[id].qty} but it seems still hacky to me.

Is there a way to use something like: bind:value={row.qty} and still correctly update rows array?