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.)
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
filteredis derived fromtodos, toggling an individual input doesn't affect anything else that depends ontodos. Demo here.That's because this code gets generated:
We should instead invalidate the ultimate dependencies of
filteredrather thanfiltereditself: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
hideDonedoesn't need to be invalidated here, I'm not certain we can reliably determine that statically. Needs more thought.)