feat: remove `$.unwrap` calls from each block indexes (#12640)

* remove $.unwrap from key functions

* feat: remove `$.unwrap` calls from each block indexes

* tweak

.changeset/dry-hotels-matter.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: remove $.unwrap calls from each block indexes

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

@@ -79,6 +79,11 @@ export function serialize_get_binding(node, state) {
 		return node;
 	}
 
+	if (Object.hasOwn(state.getters, node.name)) {
+		const getter = state.getters[node.name];
+		return typeof getter === 'function' ? getter(node) : getter;
+	}
+
 	if (binding.node.name === '$$props') {
 		// Special case for $$props which only exists in the old world
 		return b.id('$$sanitized_props');
@@ -88,11 +93,6 @@ export function serialize_get_binding(node, state) {
 		return b.call(node);
 	}
 
-	if (Object.hasOwn(state.getters, node.name)) {
-		const getter = state.getters[node.name];
-		return typeof getter === 'function' ? getter(node) : getter;
-	}
-
 	if (binding.kind === 'prop' || binding.kind === 'bindable_prop') {
 		if (is_prop_source(binding, state)) {
 			return b.call(node);

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

@@ -2493,6 +2493,12 @@ export const template_visitors = {
 			getters: { ...context.state.getters }
 		};
 
+		/** The state used when generating the key function, if necessary */
+		const key_state = {
+			...context.state,
+			getters: { ...context.state.getters }
+		};
+
 		/**
 		 * @param {Pattern} expression_for_id
 		 * @returns {Binding['mutation']}
@@ -2550,8 +2556,12 @@ export const template_visitors = {
 		if (node.index) {
 			child_state.getters[node.index] = (id) => {
 				const index_with_loc = with_loc(index, id);
-				return b.call('$.unwrap', index_with_loc);
+				return (flags & EACH_INDEX_REACTIVE) === 0
+					? index_with_loc
+					: b.call('$.get', index_with_loc);
 			};
+
+			key_state.getters[node.index] = b.id(node.index);
 		}
 
 		/** @type {Statement[]} */
@@ -2565,6 +2575,8 @@ export const template_visitors = {
 					true
 				)
 			);
+
+			key_state.getters[node.context.name] = node.context;
 		} else {
 			const unwrapped = getter(binding.node);
 			const paths = extract_paths(node.context);
@@ -2592,23 +2604,20 @@ export const template_visitors = {
 				if (context.state.options.dev) {
 					declarations.push(b.stmt(getter));
 				}
+
+				key_state.getters[name] = path.node;
 			}
 		}
 
 		const block = /** @type {BlockStatement} */ (context.visit(node.body, child_state));
 
-		const key_function = node.key
+		/** @type {Expression} */
-			? b.arrow(
+		let key_function = b.id('$.index');
-					[node.context.type === 'Identifier' ? node.context : b.id('$$item'), index],
+
-					declarations.length > 0
+		if (node.key) {
-						? b.block(
+			const expression = /** @type {Expression} */ (context.visit(node.key, key_state));
-								declarations.concat(
+			key_function = b.arrow([node.context, index], expression);
-									b.return(/** @type {Expression} */ (context.visit(node.key, child_state)))
+		}
-								)
-							)
-						: /** @type {Expression} */ (context.visit(node.key, child_state))
-				)
-			: b.id('$.index');
 
 		if (node.index && each_node_meta.contains_group_binding) {
 			// We needed to create a unique identifier for the index above, but we want to use the