From a534c66d5b6aab4a8473a1a014277d40ae39a467 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Tue, 11 Dec 2018 21:11:41 -0500
Subject: [PATCH] handle destructuring assignments in template

---
 src/compile/nodes/shared/Expression.ts        | 14 ++++++---
 .../main.html                                 |  2 +-
 .../_config.js                                | 29 +++++++++++++++++++
 .../main.html                                 |  8 +++++
 4 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 test/runtime/samples/instrumentation-template-destructuring/_config.js
 create mode 100644 test/runtime/samples/instrumentation-template-destructuring/main.html

diff --git a/src/compile/nodes/shared/Expression.ts b/src/compile/nodes/shared/Expression.ts
index dbe5f9bd7f..2e11e8dd18 100644
--- a/src/compile/nodes/shared/Expression.ts
+++ b/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,9 +247,15 @@ export default class Expression {
 
 				if (function_expression) {
 					if (node.type === 'AssignmentExpression') {
-						// TODO handle destructuring assignments
-						const { name } = getObject(node.left);
-						pending_assignments.add(name);
+						const names = node.left.type === 'MemberExpression'
+							? [getObject(node.left).name]
+							: extractNames(node.left);
+
+						names.forEach(name => {
+							if (!scope.declarations.has(name)) {
+								pending_assignments.add(name);
+							}
+						});
 					}
 				} else {
 					if (node.type === 'AssignmentExpression') {
diff --git a/test/runtime/samples/instrumentation-script-destructuring/main.html b/test/runtime/samples/instrumentation-script-destructuring/main.html
index 6da761a96a..9c96ffe621 100644
--- a/test/runtime/samples/instrumentation-script-destructuring/main.html
+++ b/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 });
diff --git a/test/runtime/samples/instrumentation-template-destructuring/_config.js b/test/runtime/samples/instrumentation-template-destructuring/_config.js
new file mode 100644
index 0000000000..a0b2de9e77
--- /dev/null
+++ b/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>
+		`);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/instrumentation-template-destructuring/main.html b/test/runtime/samples/instrumentation-template-destructuring/main.html
new file mode 100644
index 0000000000..65ad5792b2
--- /dev/null
+++ b/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>
\ No newline at end of file