Merge pull request sveltejs#2307 from sveltejs/sveltejsgh-2305

invalidate correctly inside event handlers

Author: Rich-Harris

src/compile/nodes/shared/Expression.ts

@@ -364,7 +364,18 @@ export default class Expression {
 					let body = code.slice(node.body.start, node.body.end).trim();
 					if (node.body.type !== 'BlockStatement') {
 						if (pending_assignments.size > 0) {
-							const insert = Array.from(pending_assignments).map(name => component.invalidate(name)).join('; ');
+							const dependencies = new Set();
+							pending_assignments.forEach(name => {
+								if (template_scope.names.has(name)) {
+									template_scope.dependencies_for_name.get(name).forEach(dependency => {
+										dependencies.add(dependency);
+									});
+								} else {
+									dependencies.add(name);
+								}
+							});
+
+							const insert = Array.from(dependencies).map(name => component.invalidate(name)).join('; ');
 							pending_assignments = new Set();
 
 							component.has_reactive_assignments = true;

test/runtime/samples/event-handler-each-context-invalidation/_config.js

@@ -0,0 +1,35 @@
+export default {
+	html: `
+		<button>off</button>
+		<button>on</button>
+		<button>off</button>
+		<p>on: 1</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>on</button>
+			<button>on</button>
+			<button>off</button>
+			<p>on: 2</p>
+		`);
+
+		await buttons[2].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>on</button>
+			<button>on</button>
+			<button>on</button>
+			<p>on: 3</p>
+		`);
+
+		assert.deepEqual(component.switches, [
+			{ on: true },
+			{ on: true },
+			{ on: true }
+		]);
+	}
+};

test/runtime/samples/event-handler-each-context-invalidation/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	export let switches = [
+		{ on: false },
+		{ on: true },
+		{ on: false }
+	];
+</script>
+
+{#each switches as s}
+	<button on:click="{() => s.on = !s.on}">
+		{s.on ? 'on' : 'off'}
+	</button>
+{/each}
+
+<p>on: {switches.filter(s => !!s.on).length}</p>