inject lets for destructured reactive declarations - fixes #2396

src/compile/Component.ts

@@ -592,12 +592,12 @@ export default class Component {
 			if (node.body.type !== 'ExpressionStatement') return;
 			if (node.body.expression.type !== 'AssignmentExpression') return;
 
-			const { type, name } = node.body.expression.left;
-
-			if (type === 'Identifier' && !this.var_lookup.has(name) && name[0] !== '$') {
+			extract_names(node.body.expression.left).forEach(name => {
+				if (!this.var_lookup.has(name) && name[0] !== '$') {
 					this.injected_reactive_declaration_vars.add(name);
 				}
 			});
+		});
 
 		let { scope: instance_scope, map, globals } = create_scopes(script.content);
 		this.instance_scope = instance_scope;
@@ -1058,9 +1058,15 @@ export default class Component {
 						}
 
 						if (node.type === 'AssignmentExpression') {
+							if (node.left.type === 'MemberExpression' || node.left.type === 'Identifier') {
 								const identifier = get_object(node.left)
 								assignee_nodes.add(identifier);
 								assignees.add(identifier.name);
+							} else {
+								extract_names(node.left).forEach(name => {
+									assignees.add(name);
+								});
+							}
 						} else if (node.type === 'UpdateExpression') {
 							const identifier = get_object(node.argument);
 							assignees.add(identifier.name);
@@ -1097,9 +1103,9 @@ export default class Component {
 					injected: (
 						node.body.type === 'ExpressionStatement' &&
 						node.body.expression.type === 'AssignmentExpression' &&
-						node.body.expression.left.type === 'Identifier' &&
-						node.body.expression.left.name[0] !== '$' &&
-						this.var_lookup.get(node.body.expression.left.name).injected
+						extract_names(node.body.expression.left).every(name => {
+							return name[0] !== '$' && this.var_lookup.get(name).injected;
+						})
 					)
 				});
 			}

test/runtime/samples/reactive-values-implicit-destructured/_config.js

@@ -0,0 +1,16 @@
+export default {
+	props: {
+		coords: [0, 0]
+	},
+
+	html: `
+		<p>0,0</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.coords = [1, 2];
+		assert.htmlEqual(target.innerHTML, `
+			<p>1,2</p>
+		`);
+	}
+};

test/runtime/samples/reactive-values-implicit-destructured/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let coords;
+
+	$: [x, y] = coords;
+</script>
+
+<p>{x},{y}</p>