Merge branch 'master' into pr/5447

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Svelte changelog
 
+## Unreleased
+
+* Fix destructuring into store values ([#5449](https://github.com/sveltejs/svelte/issues/5449))
+* Fix erroneous `missing-declaration` warning with `use:obj.method` ([#5451](https://github.com/sveltejs/svelte/issues/5451))
+
 ## 3.26.0
 
 * Support `use:obj.method` as actions ([#3935](https://github.com/sveltejs/svelte/issues/3935))

src/compiler/compile/nodes/Action.ts

@@ -11,10 +11,11 @@ export default class Action extends Node {
 	constructor(component: Component, parent, scope, info) {
 		super(component, parent, scope, info);
 
-		component.warn_if_undefined(info.name, info, scope);
+		const object = info.name.split('.')[0];
+		component.warn_if_undefined(object, info, scope);
 
 		this.name = info.name;
-		component.add_reference(info.name.split('.')[0]);
+		component.add_reference(object);
 
 		this.expression = info.expression
 			? new Expression(component, this, scope, info.expression)

src/compiler/compile/render_dom/invalidate.ts

@@ -36,38 +36,41 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 		return renderer.invalidate(variable.name, undefined, main_execution_context);
 	}
 
-	if (head) {
+	if (!head) {
+		return node;
+	}
+
 	component.has_reactive_assignments = true;
 
 	if (node.type === 'AssignmentExpression' && node.operator === '=' && nodes_match(node.left, node.right) && tail.length === 0) {
 		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)).filter(Boolean);
 
+	if (is_store_value) {
+		return x`@set_store_value(${head.name.slice(1)}, ${node}, ${head.name}, ${extra_args})`;
+	}
+	
+	let invalidate;
+	if (!main_execution_context) {
 		const pass_value = (
-				!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) {
 			extra_args.unshift({
 				type: 'Identifier',
 				name: head.name
 			});
 		}
-
-			let invalidate = is_store_value
-				? x`@set_store_value(${head.name.slice(1)}, ${node}, ${head.name})`
-				: !main_execution_context
-					? x`$$invalidate(${renderer.context_lookup.get(head.name).index}, ${node}, ${extra_args})`
-					: extra_args.length
-						? [node, ...extra_args]
-						: node;
+		invalidate = x`$$invalidate(${renderer.context_lookup.get(head.name).index}, ${node}, ${extra_args})`;
+	} else {
+		// skip `$$invalidate` if it is in the main execution context
+		invalidate = extra_args.length ? [node, ...extra_args] : node;
+	}
 
 	if (head.subscribable && head.reassigned) {
 		const subscribe = `$$subscribe_${head.name}`;
@@ -76,7 +79,3 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 
 	return invalidate;
 }
-	}
-
-	return node;
-}

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

@@ -0,0 +1,9 @@
+// destructure to store value
+export default {
+	skip_if_ssr: true, // pending https://github.com/sveltejs/svelte/issues/3582
+	html: `<h1>2 2 xxx 5 6 9 10 2</h1>`,
+	async test({ assert, target, component }) {
+		await component.update();
+		assert.htmlEqual(target.innerHTML, `<h1>11 11 yyy 12 13 14 15 11</h1>`);
+	}
+};

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

@@ -0,0 +1,29 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let eid = writable(1);
+	let foo;
+	const u = writable(2);
+	const v = writable(3);
+	const w = writable(4);
+	const x = writable(5);
+	const y = writable(6);
+	[$u, $v, $w] = [
+		{id: eid = writable(foo = 2), name: 'xxx'},
+		5,
+		6
+	];
+	({ a: $x, b: $y } = { a: 9, b: 10 });
+	$: z = $u.id;
+
+	export function update() {
+		[$u, $v, $w] = [
+			{id: eid = writable(foo = 11), name: 'yyy'},
+			12,
+			13
+		];
+		({ a: $x, b: $y } = { a: 14, b: 15 });
+	}
+</script>
+
+<h1>{foo} {$eid} {$u.name} {$v} {$w} {$x} {$y} {$z}</h1>

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

@@ -1,3 +1,9 @@
+// destructure to store
 export default {
-	html: `<h1>2 2 xxx 5 6</h1>`
+	html: `<h1>2 2 xxx 5 6 9 10 2</h1>`,
+	skip_if_ssr: true,
+	async test({ assert, target, component }) {
+		await component.update();
+		assert.htmlEqual(target.innerHTML, `<h1>11 11 yyy 12 13 14 15 11</h1>`);
+	}
 };

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

@@ -6,11 +6,24 @@
 	let u;
 	let v;
 	let w;
+	let x;
+	let y;
 	[u, v, w] = [
 		{id: eid = writable(foo = 2), name: 'xxx'},
 		5,
 		writable(6)
 	];
+	({ a: x, b: y } = { a: writable(9), b: writable(10) });
+	$: z = u.id;
+
+	export function update() {
+		[u, v, w] = [
+			{id: eid = writable(foo = 11), name: 'yyy'},
+			12,
+			writable(13)
+		];
+		({ a: x, b: y } = { a: writable(14), b: writable(15) });
+	}
 </script>
 
-<h1>{foo} {$eid} {u.name} {v} {$w}</h1>
+<h1>{foo} {$eid} {u.name} {v} {$w} {$x} {$y} {$z}</h1>

test/validator/samples/action-object/input.svelte

@@ -0,0 +1,11 @@
+<script>
+	const obj = {
+		foo : "bar",
+		action(element, { leet }) {
+			element.foo = this.foo + leet;
+		},
+	}
+</script>
+
+<button use:obj.action={{ leet: 1337 }}>action</button>
+<button use:foo.action={{ leet: 1337 }}>action</button>

test/validator/samples/action-object/warnings.json

@@ -0,0 +1,17 @@
+[
+	{
+		"code": "missing-declaration",
+		"end": {
+			"character": 217,
+			"column": 39,
+			"line": 11
+		},
+		"message": "'foo' is not defined",
+		"pos": 186,
+		"start": {
+			"character": 186,
+			"column": 8,
+			"line": 11
+		}
+	}
+]