fix: handle derived destructured iterators

.changeset/purple-dryers-mate.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle derived destructured iterators

packages/svelte/src/compiler/migrate/index.js

@@ -603,15 +603,15 @@ const instance_script = {
 					);
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
 					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-					// const tmp = state.scope.generate('tmp');
-					// const paths = extract_paths(declarator.id);
+					// const tmp = b.id(state.scope.generate('tmp'));
+					// const paths = extract_paths(declarator.id, tmp);
 					// state.props_pre.push(
-					// 	b.declaration('const', b.id(tmp), visit(declarator.init!) as Expression)
+					// 	b.declaration('const', tmp, visit(declarator.init!) as Expression)
 					// );
 					// for (const path of paths) {
 					// 	const name = (path.node as Identifier).name;
 					// 	const binding = state.scope.get(name)!;
-					// 	const value = path.expression!(b.id(tmp));
+					// 	const value = path.expression;
 					// 	if (binding.kind === 'bindable_prop' || binding.kind === 'rest_prop') {
 					// 		state.props.push({
 					// 			local: name,

packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js

@@ -7,6 +7,7 @@ import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { extract_paths } from '../../../utils/ast.js';
 import { equal } from '../../../utils/assert.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {VariableDeclarator} node
@@ -18,7 +19,7 @@ export function VariableDeclarator(node, context) {
 	if (context.state.analysis.runes) {
 		const init = node.init;
 		const rune = get_rune(init, context.state.scope);
-		const paths = extract_paths(node.id);
+		const { paths } = extract_paths(node.id, b.id('dummy'));
 
 		for (const path of paths) {
 			validate_identifier_name(context.state.scope.get(/** @type {Identifier} */ (path.node).name));

packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js

@@ -234,13 +234,21 @@ export function EachBlock(node, context) {
 	} else if (node.context) {
 		const unwrapped = (flags & EACH_ITEM_REACTIVE) !== 0 ? b.call('$.get', item) : item;
 
-		for (const path of extract_paths(node.context)) {
+		const { inserts, paths } = extract_paths(node.context, unwrapped);
+
+		for (const { id, value } of inserts) {
+			id.name = context.state.scope.generate('$$array');
+			child_state.transform[id.name] = { read: get_value };
+
+			const expression = /** @type {Expression} */ (context.visit(b.thunk(value), child_state));
+			declarations.push(b.var(id, b.call('$.derived', expression)));
+		}
+
+		for (const path of paths) {
 			const name = /** @type {Identifier} */ (path.node).name;
 			const needs_derived = path.has_default_value; // to ensure that default value is only called once
 
-			const fn = b.thunk(
-				/** @type {Expression} */ (context.visit(path.expression?.(unwrapped), child_state))
-			);
+			const fn = b.thunk(/** @type {Expression} */ (context.visit(path.expression, child_state)));
 
 			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
 
@@ -249,7 +257,7 @@ export function EachBlock(node, context) {
 			child_state.transform[name] = {
 				read,
 				assign: (_, value) => {
-					const left = /** @type {Pattern} */ (path.update_expression(unwrapped));
+					const left = /** @type {Pattern} */ (path.update_expression);
 					return b.sequence([b.assignment('=', left, value), ...sequence]);
 				},
 				mutate: (_, mutation) => {

packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js

@@ -43,14 +43,21 @@ export function SnippetBlock(node, context) {
 		let arg_alias = `$$arg${i}`;
 		args.push(b.id(arg_alias));
 
-		const paths = extract_paths(argument);
+		const { inserts, paths } = extract_paths(argument, b.maybe_call(b.id(arg_alias)));
+
+		for (const { id, value } of inserts) {
+			id.name = context.state.scope.generate('$$array');
+			transform[id.name] = { read: get_value };
+
+			declarations.push(
+				b.var(id, b.call('$.derived', /** @type {Expression} */ (context.visit(b.thunk(value)))))
+			);
+		}
 
 		for (const path of paths) {
 			const name = /** @type {Identifier} */ (path.node).name;
 			const needs_derived = path.has_default_value; // to ensure that default value is only called once
-			const fn = b.thunk(
-				/** @type {Expression} */ (context.visit(path.expression?.(b.maybe_call(b.id(arg_alias)))))
-			);
+			const fn = b.thunk(/** @type {Expression} */ (context.visit(path.expression)));
 
 			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
 

packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js

@@ -2,12 +2,13 @@
 /** @import { Binding } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
-import { build_pattern, extract_paths } from '../../../../utils/ast.js';
+import { extract_paths } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import * as assert from '../../../../utils/assert.js';
 import { get_rune } from '../../../scope.js';
 import { get_prop_source, is_prop_source, is_state_source, should_proxy } from '../utils.js';
 import { is_hoisted_function } from '../../utils.js';
+import { get_value } from './shared/declarations.js';
 
 /**
  * @param {VariableDeclaration} node
@@ -116,7 +117,7 @@ export function VariableDeclaration(node, context) {
 			}
 
 			const args = /** @type {CallExpression} */ (init).arguments;
-			const value = args.length > 0 ? /** @type {Expression} */ (context.visit(args[0])) : b.void0;
+			const value = /** @type {Expression} */ (args[0]) ?? b.void0; // TODO do we need the void 0? can we just omit it altogether?
 
 			if (rune === '$state' || rune === '$state.raw') {
 				/**
@@ -137,24 +138,34 @@ export function VariableDeclaration(node, context) {
 				};
 
 				if (declarator.id.type === 'Identifier') {
+					const expression = /** @type {Expression} */ (context.visit(value));
+
 					declarations.push(
-						b.declarator(declarator.id, create_state_declarator(declarator.id, value))
+						b.declarator(declarator.id, create_state_declarator(declarator.id, expression))
 					);
 				} else {
-					const [pattern, replacements] = build_pattern(declarator.id, context.state.scope);
+					const tmp = b.id(context.state.scope.generate('tmp'));
+					const { inserts, paths } = extract_paths(declarator.id, tmp);
+
 					declarations.push(
-						b.declarator(pattern, value),
-						.../** @type {[Identifier, Identifier][]} */ ([...replacements]).map(
-							([original, replacement]) => {
-								const binding = context.state.scope.get(original.name);
-								return b.declarator(
-									original,
-									binding?.kind === 'state' || binding?.kind === 'raw_state'
-										? create_state_declarator(binding.node, replacement)
-										: replacement
-								);
-							}
-						)
+						b.declarator(tmp, value),
+						...inserts.map(({ id, value }) => {
+							id.name = context.state.scope.generate('$$array');
+							context.state.transform[id.name] = { read: get_value };
+
+							const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+							return b.declarator(id, b.call('$.derived', expression));
+						}),
+						...paths.map((path) => {
+							const value = /** @type {Expression} */ (context.visit(path.expression));
+							const binding = context.state.scope.get(/** @type {Identifier} */ (path.node).name);
+							return b.declarator(
+								path.node,
+								binding?.kind === 'state' || binding?.kind === 'raw_state'
+									? create_state_declarator(binding.node, value)
+									: value
+							);
+						})
 					);
 				}
 
@@ -163,44 +174,41 @@ export function VariableDeclaration(node, context) {
 
 			if (rune === '$derived' || rune === '$derived.by') {
 				if (declarator.id.type === 'Identifier') {
-					declarations.push(
-						b.declarator(
-							declarator.id,
-							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
-						)
-					);
+					let expression = /** @type {Expression} */ (context.visit(value));
+					if (rune === '$derived') expression = b.thunk(expression);
+
+					declarations.push(b.declarator(declarator.id, b.call('$.derived', expression)));
 				} else {
-					const [pattern, replacements] = build_pattern(declarator.id, context.state.scope);
 					const init = /** @type {CallExpression} */ (declarator.init);
 
-					/** @type {Identifier} */
-					let id;
 					let rhs = value;
 
-					if (rune === '$derived' && init.arguments[0].type === 'Identifier') {
-						id = init.arguments[0];
-					} else {
-						id = b.id(context.state.scope.generate('$$d'));
+					if (rune !== '$derived' || init.arguments[0].type !== 'Identifier') {
+						const id = b.id(context.state.scope.generate('$$d'));
 						rhs = b.call('$.get', id);
 
-						declarations.push(
-							b.declarator(id, b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value)))
-						);
+						let expression = /** @type {Expression} */ (context.visit(value));
+						if (rune === '$derived') expression = b.thunk(expression);
+
+						declarations.push(b.declarator(id, b.call('$.derived', expression)));
 					}
 
-					for (let i = 0; i < replacements.size; i++) {
-						const [original, replacement] = [...replacements][i];
-						declarations.push(
-							b.declarator(
-								original,
-								b.call(
-									'$.derived',
-									b.arrow([], b.block([b.let(pattern, rhs), b.return(replacement)]))
-								)
-							)
-						);
+					const { inserts, paths } = extract_paths(declarator.id, rhs);
+
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$array');
+						context.state.transform[id.name] = { read: get_value };
+
+						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+						declarations.push(b.declarator(id, b.call('$.derived', expression)));
+					}
+
+					for (const path of paths) {
+						const expression = /** @type {Expression} */ (context.visit(path.expression));
+						declarations.push(b.declarator(path.node, b.call('$.derived', b.thunk(expression))));
 					}
 				}
+
 				continue;
 			}
 		}
@@ -229,20 +237,29 @@ export function VariableDeclaration(node, context) {
 				if (declarator.id.type !== 'Identifier') {
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
 					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-					const tmp = context.state.scope.generate('tmp');
-					const paths = extract_paths(declarator.id);
+					const tmp = b.id(context.state.scope.generate('tmp'));
+					const { inserts, paths } = extract_paths(declarator.id, tmp);
 
 					declarations.push(
 						b.declarator(
-							b.id(tmp),
+							tmp,
 							/** @type {Expression} */ (context.visit(/** @type {Expression} */ (declarator.init)))
 						)
 					);
 
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$array');
+						context.state.transform[id.name] = { read: get_value };
+
+						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+						declarations.push(b.declarator(id, b.call('$.derived', expression)));
+					}
+
 					for (const path of paths) {
 						const name = /** @type {Identifier} */ (path.node).name;
 						const binding = /** @type {Binding} */ (context.state.scope.get(name));
-						const value = path.expression?.(b.id(tmp));
+						const value = /** @type {Expression} */ (context.visit(path.expression));
+
 						declarations.push(
 							b.declarator(
 								path.node,
@@ -276,7 +293,7 @@ export function VariableDeclaration(node, context) {
 			declarations.push(
 				...create_state_declarators(
 					declarator,
-					context.state,
+					context,
 					/** @type {Expression} */ (declarator.init && context.visit(declarator.init))
 				)
 			);
@@ -296,32 +313,41 @@ export function VariableDeclaration(node, context) {
 /**
  * Creates the output for a state declaration in legacy mode.
  * @param {VariableDeclarator} declarator
- * @param {ComponentClientTransformState} scope
+ * @param {ComponentContext} context
  * @param {Expression} value
  */
-function create_state_declarators(declarator, { scope, analysis }, value) {
+function create_state_declarators(declarator, context, value) {
 	if (declarator.id.type === 'Identifier') {
 		return [
 			b.declarator(
 				declarator.id,
-				b.call('$.mutable_source', value, analysis.immutable ? b.true : undefined)
+				b.call('$.mutable_source', value, context.state.analysis.immutable ? b.true : undefined)
 			)
 		];
 	}
 
-	const [pattern, replacements] = build_pattern(declarator.id, scope);
+	const tmp = b.id(context.state.scope.generate('tmp'));
+	const { inserts, paths } = extract_paths(declarator.id, tmp);
+
 	return [
-		b.declarator(pattern, value),
-		.../** @type {[Identifier, Identifier][]} */ ([...replacements]).map(
-			([original, replacement]) => {
-				const binding = scope.get(original.name);
-				return b.declarator(
-					original,
-					binding?.kind === 'state'
-						? b.call('$.mutable_source', replacement, analysis.immutable ? b.true : undefined)
-						: replacement
-				);
-			}
-		)
+		b.declarator(tmp, value),
+		...inserts.map(({ id, value }) => {
+			id.name = context.state.scope.generate('$$array');
+			context.state.transform[id.name] = { read: get_value };
+
+			const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+			return b.declarator(id, b.call('$.derived', expression));
+		}),
+		...paths.map((path) => {
+			const value = /** @type {Expression} */ (context.visit(path.expression));
+			const binding = context.state.scope.get(/** @type {Identifier} */ (path.node).name);
+
+			return b.declarator(
+				path.node,
+				binding?.kind === 'state'
+					? b.call('$.mutable_source', value, context.state.analysis.immutable ? b.true : undefined)
+					: value
+			);
+		})
 	];
 }