handle destructuring assignments in template

src/compile/nodes/shared/Expression.ts

@@ -2,7 +2,7 @@ import Component from '../../Component';
 import { walk } from 'estree-walker';
 import isReference from 'is-reference';
 import flattenReference from '../../../utils/flattenReference';
-import { createScopes, Scope } from '../../../utils/annotateWithScopes';
+import { createScopes, Scope, extractNames } from '../../../utils/annotateWithScopes';
 import { Node } from '../../../interfaces';
 import globalWhitelist from '../../../utils/globalWhitelist';
 import deindent from '../../../utils/deindent';
@@ -247,10 +247,16 @@ export default class Expression {
 
 				if (function_expression) {
 					if (node.type === 'AssignmentExpression') {
-						// TODO handle destructuring assignments
+						const names = node.left.type === 'MemberExpression'
-						const { name } = getObject(node.left);
+							? [getObject(node.left).name]
+							: extractNames(node.left);
+
+						names.forEach(name => {
+							if (!scope.declarations.has(name)) {
 								pending_assignments.add(name);
 							}
+						});
+					}
 				} else {
 					if (node.type === 'AssignmentExpression') {
 						// TODO should this be a warning/error? `<p>{foo = 1}</p>`

test/runtime/samples/instrumentation-script-destructuring/main.html

@@ -1,5 +1,5 @@
 <script>
-	export let x = 0;
+	let x = 0;
 
 	function foo() {
 		({ x } = { x: 1 });

test/runtime/samples/instrumentation-template-destructuring/_config.js

@@ -0,0 +1,29 @@
+export default {
+	html: `
+		<button>foo</button>
+		<button>bar</button>
+
+		<p>x: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+
+			<p>x: 1</p>
+		`);
+
+		await buttons[1].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+
+			<p>x: 2</p>
+		`);
+	}
+};

test/runtime/samples/instrumentation-template-destructuring/main.html

@@ -0,0 +1,8 @@
+<script>
+	let x = 0;
+</script>
+
+<button on:click="{() => ({ x } = { x: 1 })}">foo</button>
+<button on:click="{() => ([x] = [2])}">bar</button>
+
+<p>x: {x}</p>