fix destructuring to get multiple stores (#5390)

Author: tanhauhau

CHANGELOG.md

@@ -5,6 +5,7 @@
 * Fix specificity of certain styles involving a child selector ([#4795](https://github.com/sveltejs/svelte/issues/4795))
 * Fix transitions that are parameterised with stores ([#5244](https://github.com/sveltejs/svelte/issues/5244))
 * Fix scoping of styles involving child selector and `*` ([#5370](https://github.com/sveltejs/svelte/issues/5370))
+* Fix destructuring which reassigns stores ([#5388](https://github.com/sveltejs/svelte/issues/5388))
 
 ## 3.25.0
 

src/compiler/compile/Component.ts

@@ -947,12 +947,6 @@ export default class Component {
 							const variable = component.var_lookup.get(name);
 
 							if (variable.export_name && variable.writable) {
-								const insert = variable.subscribable
-									? get_insert(variable)
-									: null;
-
-								parent[key].splice(index + 1, 0, insert);
-
 								declarator.id = {
 									type: 'ObjectPattern',
 									properties: [{
@@ -973,7 +967,9 @@ export default class Component {
 								};
 
 								declarator.init = x`$$props`;
-							} else if (variable.subscribable) {
+							}
+
+							if (variable.subscribable && declarator.init) {
 								const insert = get_insert(variable);
 								parent[key].splice(index + 1, 0, ...insert);
 							}

src/compiler/compile/render_dom/Renderer.ts

@@ -166,12 +166,14 @@ export default class Renderer {
 		return member;
 	}
 
-	invalidate(name: string, value?) {
+	invalidate(name: string, value?, main_execution_context: boolean = false) {
 		const variable = this.component.var_lookup.get(name);
 		const member = this.context_lookup.get(name);
 
 		if (variable && (variable.subscribable && (variable.reassigned || variable.export_name))) {
-			return x`${`$$subscribe_${name}`}($$invalidate(${member.index}, ${value || name}))`;
+			return main_execution_context
+			  ? x`${`$$subscribe_${name}`}(${value || name})`
+			  : x`${`$$subscribe_${name}`}($$invalidate(${member.index}, ${value || name}))`;
 		}
 
 		if (name[0] === '$' && name[1] !== '$') {

src/compiler/compile/render_dom/invalidate.ts

@@ -31,10 +31,9 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 
 	function get_invalidated(variable: Var, node?: Expression) {
 		if (main_execution_context && !variable.subscribable && variable.name[0] !== '$') {
-			return node || x`${variable.name}`;
+			return node;
 		}
-
-		return renderer.invalidate(variable.name);
+		return renderer.invalidate(variable.name, undefined, main_execution_context);
 	}
 
 	if (head) {
@@ -44,12 +43,15 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 			return get_invalidated(head, node);
 		} else {
 			const is_store_value = head.name[0] === '$' && head.name[1] !== '$';
-			const extra_args = tail.map(variable => get_invalidated(variable));
+			const extra_args = tail.map(variable => get_invalidated(variable)).filter(Boolean);
 
 			const pass_value = (
-				extra_args.length > 0 ||
-				(node.type === 'AssignmentExpression' && node.left.type !== 'Identifier') ||
-				(node.type === 'UpdateExpression' && (!node.prefix || node.argument.type !== 'Identifier'))
+				!main_execution_context && 
+				(
+					extra_args.length > 0 ||
+					(node.type === 'AssignmentExpression' && node.left.type !== 'Identifier') ||
+					(node.type === 'UpdateExpression' && (!node.prefix || node.argument.type !== 'Identifier'))
+				)
 			);
 
 			if (pass_value) {
@@ -63,7 +65,9 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 				? x`@set_store_value(${head.name.slice(1)}, ${node}, ${extra_args})`
 				: !main_execution_context
 					? x`$$invalidate(${renderer.context_lookup.get(head.name).index}, ${node}, ${extra_args})`
-					: node;
+					: extra_args.length
+						? [node, ...extra_args]
+						: node;
 
 			if (head.subscribable && head.reassigned) {
 				const subscribe = `$$subscribe_${head.name}`;

test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: `<h1>2 2 xxx 5 6</h1>`
+};

test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let eid = writable(1);
+	let foo;
+	let u;
+	let v;
+	let w;
+	[u, v, w] = [
+		{id: eid = writable(foo = 2), name: 'xxx'},
+		5,
+		writable(6)
+	];
+</script>
+
+<h1>{foo} {$eid} {u.name} {v} {$w}</h1>

test/runtime/samples/reactive-assignment-in-declaration/main.svelte

@@ -1,6 +1,9 @@
 <script>
 	let foo;
 	let bar = (foo = 1);
+	function a() {
+		bar = (foo = 1);
+	}
 </script>
 
 <h1>{foo} {bar}</h1>

test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte

@@ -1,9 +1,14 @@
 <script>
-  let foo1;
-  let foo2;
-  for (let bar = (foo1 = 0); bar < 5; bar += 1) {
-    foo2 = foo1;
-  }
+	let foo1;
+	let foo2;
+	for (let bar = (foo1 = 0); bar < 5; bar += 1) {
+		foo2 = foo1;
+	}
+	function a() {
+		for (let bar = (foo1 = 0); bar < 5; bar += 1) {
+			foo2 = foo1;
+		}
+	}
 </script>
 
 <h1>{foo1} {foo2}</h1>

test/runtime/samples/store-resubscribe-c/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: `31 42`
+};

test/runtime/samples/store-resubscribe-c/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { writable } from 'svelte/store';
+	const context = {
+		store1: writable(31),
+		store2: writable(42)
+	};
+	let store1;
+	let store2;
+	({
+		store1,
+		store2
+	} = context);
+</script>
+
+{$store1}
+{$store2}