instrument destructuring assignments

src/compile/render-dom/index.ts

@@ -8,6 +8,7 @@ import { walk } from 'estree-walker';
 import stringifyProps from '../../utils/stringifyProps';
 import addToSet from '../../utils/addToSet';
 import getObject from '../../utils/getObject';
+import { extractNames } from '../../utils/annotateWithScopes';
 
 export default function dom(
 	component: Component,
@@ -168,12 +169,16 @@ export default function dom(
 				}
 
 				if (node.type === 'AssignmentExpression') {
-					const { name } = getObject(node.left);
-
-					if (scope.findOwner(name) === component.instance_scope) {
-						pending_assignments.add(name);
-						component.has_reactive_assignments = true;
-					}
+					const names = node.left.type === 'MemberExpression'
+						? [getObject(node.left).name]
+						: extractNames(node.left);
+
+					names.forEach(name => {
+						if (scope.findOwner(name) === component.instance_scope) {
+							pending_assignments.add(name);
+							component.has_reactive_assignments = true;
+						}
+					});
 				}
 
 				if (pending_assignments.size > 0) {

test/runtime/samples/instrumentation-script-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-script-destructuring/main.html

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