Bindings don't work inside {#each reactiveThing as thing}

[Rich-Harris]

In a case like this...

{#each filtered as todo}
	<label class:done={todo.done}>
		<input type="checkbox" bind:checked={todo.done}>
		{todo.text}
	</label>
{/each}

<p>completed {todos.filter(t => t.done).length} of {todos.length}</p>

...where filtered is derived from todos, toggling an individual input doesn't affect anything else that depends on todos. Demo here.

That's because this code gets generated:

function input_change_handler_1({ todo, each_value, todo_index }) {
	each_value[todo_index].done = this.checked;
	$$invalidate('filtered', filtered);
}

We should instead invalidate the ultimate dependencies of filtered rather than filtered itself:

function input_change_handler_1({ todo, each_value, todo_index }) {
	each_value[todo_index].done = this.checked;
-	$$invalidate('filtered', filtered);
+	$$invalidate('todos', todos);
+	$$invalidate('hideDone', hideDone);
}

(While hideDone doesn't need to be invalidated here, I'm not certain we can reliably determine that statically. Needs more thought.)

[mrobakowski]

Hi, I had a shot at this and managed to get the compiler to generate 3 invalidates - one for each dependency and one for the reactive declaration. Some tests didn't pass if I emitted invalidates only for the dependencies. Here's the commit: mrobakowski@8e470fa

[mrobakowski]

Also, I believe I found another bug while trying to reduce the example https://svelte.dev/repl?version=3.1.0&gist=c4b48ccfb869a6915a3def99b3fbbd2d. With my commit name is properly invalidated, but the text isn't updated (possibly because compiler doesn't consider name as ever written to?).

[Rich-Harris]

Thank you! I adapted your solution in #2694. Reopening this (autoclosed) issue so that we can address the second bug you found — you're right, the compiler thinks name is never assigned to or mutated, so it generates update code like this...

p(changed, ctx) {
  if ((changed.foo) && t5_value !== (t5_value = ctx.foo.name.w)) {
    set_data(t5, t5_value);
  }
}

...which means name can never update.

[Panya]

It was fixed in 3.2.1 and above.

[mrobakowski]

@Panya the original issue was fixed, but https://svelte.dev/repl?version=3.1.0&gist=c4b48ccfb869a6915a3def99b3fbbd2d still doesn't behave like it should.

[Conduitry]

In

<script>
	let name = { w: 'world' };
	$: foo = { name }
</script>

<svelte:body on:click={() => foo.name.w += "!"}/>
<h1>Hello {name.w}!</h1>
<h2>{foo.name.w}</h2>

I really don't think that we should expect the compiler to consider modifications to foo.name to be modifications to name. It might be obvious in this specific case, but in general this won't be something that's possible at compile time. One of our guiding principles for reactivity has been to have simple rules the compiler follows to know what invalidates what, rather than having wildly more complicated rules that cover additional cases, and where it's never clear whether something that's not reactive is a bug or is working as intended.