fix: snapshot destructured values in #each blocks to prevent mutation issues

Fixes #17227

When using destructuring in #each blocks (e.g., {#each gen() as [item]}),
if the generator mutates the yielded object, all items would end up with
the same final value because they all reference the same object.

This fix adds snapshotting for destructured patterns in each blocks,
ensuring that each iteration gets a snapshot of the value at the time
it was yielded, matching the behavior of a standard for...of loop.

- Add snapshot_each_value, snapshot_array, and snapshot_object utilities
- Apply snapshotting in both client and server EachBlock visitors
- Add test case to prevent regression

Author: AyushCoder9

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

@@ -29,7 +29,7 @@ export function EachBlock(node, context) {
 		scope: /** @type {Scope} */ (context.state.scope.parent)
 	};
 
-	const collection = build_expression(
+	let collection = build_expression(
 		{
 			...context,
 			state: parent_scope_state
@@ -38,6 +38,17 @@ export function EachBlock(node, context) {
 		node.metadata.expression
 	);
 
+	const destructured_pattern = get_destructured_pattern(node.context);
+
+	if (destructured_pattern) {
+		const mapper =
+			destructured_pattern.type === 'ArrayPattern'
+				? create_array_snapshot_mapper(destructured_pattern)
+				: create_object_snapshot_mapper();
+
+		collection = b.call('$.snapshot_each_value', collection, mapper);
+	}
+
 	if (!each_node_meta.is_controlled) {
 		context.state.template.push_comment();
 	}
@@ -365,3 +376,34 @@ export function EachBlock(node, context) {
 function collect_parent_each_blocks(context) {
 	return /** @type {AST.EachBlock[]} */ (context.path.filter((node) => node.type === 'EachBlock'));
 }
+
+/**
+ * @param {import('estree').Pattern | null | undefined} pattern
+ * @returns {import('estree').ArrayPattern | import('estree').ObjectPattern | null}
+ */
+function get_destructured_pattern(pattern) {
+	if (!pattern) return null;
+	if (pattern.type === 'ArrayPattern' || pattern.type === 'ObjectPattern') {
+		return pattern;
+	}
+
+	return null;
+}
+
+/**
+ * @param {import('estree').ArrayPattern} pattern
+ */
+function create_array_snapshot_mapper(pattern) {
+	const value = b.id('$$value');
+	const has_rest = pattern.elements.some((element) => element?.type === 'RestElement');
+
+	return b.arrow(
+		[value],
+		b.call('$.snapshot_array', value, b.literal(pattern.elements.length), has_rest ? b.true : b.false)
+	);
+}
+
+function create_object_snapshot_mapper() {
+	const value = b.id('$$value');
+	return b.arrow([value], b.call('$.snapshot_object', value));
+}

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

@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Expression, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, Pattern, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
@@ -12,7 +12,17 @@ export function EachBlock(node, context) {
 	const state = context.state;
 
 	const each_node_meta = node.metadata;
-	const collection = /** @type {Expression} */ (context.visit(node.expression));
+	let collection = /** @type {Expression} */ (context.visit(node.expression));
+	const destructured_pattern = get_destructured_pattern(node.context);
+
+	if (destructured_pattern) {
+		const mapper =
+			destructured_pattern.type === 'ArrayPattern'
+				? create_array_snapshot_mapper(destructured_pattern)
+				: create_object_snapshot_mapper();
+
+		collection = b.call('$.snapshot_each_value', collection, mapper);
+	}
 	const index =
 		each_node_meta.contains_group_binding || !node.index ? each_node_meta.index : b.id(node.index);
 
@@ -78,3 +88,34 @@ export function EachBlock(node, context) {
 		state.template.push(...block.body, block_close);
 	}
 }
+
+/**
+ * @param {Pattern | null} pattern
+ * @returns {import('estree').ArrayPattern | import('estree').ObjectPattern | null}
+ */
+function get_destructured_pattern(pattern) {
+	if (!pattern) return null;
+	if (pattern.type === 'ArrayPattern' || pattern.type === 'ObjectPattern') {
+		return pattern;
+	}
+
+	return null;
+}
+
+/**
+ * @param {import('estree').ArrayPattern} pattern
+ */
+function create_array_snapshot_mapper(pattern) {
+	const value = b.id('$$value');
+	const has_rest = pattern.elements.some((element) => element?.type === 'RestElement');
+
+	return b.arrow(
+		[value],
+		b.call('$.snapshot_array', value, b.literal(pattern.elements.length), has_rest ? b.true : b.false)
+	);
+}
+
+function create_object_snapshot_mapper() {
+	const value = b.id('$$value');
+	return b.arrow([value], b.call('$.snapshot_object', value));
+}

packages/svelte/src/internal/client/index.js

@@ -170,7 +170,7 @@ export {
 } from './dom/operations.js';
 export { attr, clsx } from '../shared/attributes.js';
 export { snapshot } from '../shared/clone.js';
-export { noop, fallback, to_array } from '../shared/utils.js';
+export { noop, fallback, to_array, snapshot_array, snapshot_each_value, snapshot_object } from '../shared/utils.js';
 export {
 	invalid_default_snippet,
 	validate_dynamic_element_tag,

packages/svelte/src/internal/server/index.js

@@ -454,7 +454,7 @@ export { push_element, pop_element, validate_snippet_args } from './dev.js';
 
 export { snapshot } from '../shared/clone.js';
 
-export { fallback, to_array } from '../shared/utils.js';
+export { fallback, to_array, snapshot_array, snapshot_each_value, snapshot_object } from '../shared/utils.js';
 
 export {
 	invalid_default_snippet,

packages/svelte/src/internal/shared/utils.js

@@ -116,3 +116,37 @@ export function to_array(value, n) {
 
 	return array;
 }
+
+/**
+ * Snapshot items produced by an iterator so that destructured values reflect
+ * what was yielded before the iterator mutates the value again.
+ * @template T
+ * @param {ArrayLike<T> | Iterable<T> | null | undefined} collection
+ * @param {(value: T) => T} mapper
+ * @returns {Array<T>}
+ */
+export function snapshot_each_value(collection, mapper) {
+	if (collection == null) {
+		return [];
+	}
+
+	return is_array(collection) ? collection : array_from(collection, mapper);
+}
+
+/**
+ * @param {any} value
+ * @param {number} length
+ * @param {boolean} has_rest
+ * @returns {any[]}
+ */
+export function snapshot_array(value, length, has_rest) {
+	const array = to_array(value, has_rest ? undefined : length);
+	return array.slice();
+}
+
+/**
+ * @param {any} value
+ */
+export function snapshot_object(value) {
+	return value == null || typeof value !== 'object' ? value : { ...value };
+}

packages/svelte/tests/runtime-runes/samples/each-destructure-generator/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>0</p>
+		<p>1</p>
+		<p>2</p>
+		<p>3</p>
+		<p>4</p>
+	`
+});
+

packages/svelte/tests/runtime-runes/samples/each-destructure-generator/main.svelte

@@ -0,0 +1,17 @@
+<svelte:options runes />
+
+<script>
+	function* gen() {
+		const arr = [0];
+
+		for (let i = 0; i < 5; i += 1) {
+			arr[0] = i;
+			yield arr;
+		}
+	}
+</script>
+
+{#each gen() as [item]}
+	<p>{item}</p>
+{/each}
+