fix: transform computed keys in keyed each block destructuring patterns

.changeset/shiny-keys-dance.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: transform computed keys in keyed `{#each}` destructuring patterns

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

@@ -294,7 +294,12 @@ export function EachBlock(node, context) {
 	let key_function = b.id('$.index');
 
 	if (node.metadata.keyed) {
-		const pattern = /** @type {Pattern} */ (node.context); // can only be keyed when a context is provided
+		// the pattern needs to be visited so that expressions inside it (e.g. computed
+		// keys or default values referencing component scope) are transformed correctly.
+		// can only be keyed when a context is provided
+		const pattern = /** @type {Pattern} */ (
+			context.visit(/** @type {Pattern} */ (node.context), key_state)
+		);
 		const expression = /** @type {Expression} */ (
 			context.visit(/** @type {Expression} */ (node.key), key_state)
 		);

packages/svelte/tests/runtime-runes/samples/each-keyed-computed-destructuring-key/Child.svelte

@@ -0,0 +1,7 @@
+<script>
+	let { labelKey, valueKey, options } = $props();
+</script>
+
+{#each options as { [labelKey]: label, [valueKey]: value } (value)}
+	<p>{label}: {value}</p>
+{/each}

packages/svelte/tests/runtime-runes/samples/each-keyed-computed-destructuring-key/_config.js

@@ -0,0 +1,29 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+// https://github.com/sveltejs/svelte/issues/18519
+export default test({
+	html: `
+		<button>reverse</button>
+		<p>1: a1</p>
+		<p>2: a2</p>
+		<p>3: a3</p>
+	`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+		ok(btn);
+
+		flushSync(() => btn.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reverse</button>
+				<p>3: a3</p>
+				<p>2: a2</p>
+				<p>1: a1</p>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/each-keyed-computed-destructuring-key/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Child from './Child.svelte';
+
+	let options = $state([
+		{ a: 1, v: 'a1' },
+		{ a: 2, v: 'a2' },
+		{ a: 3, v: 'a3' }
+	]);
+</script>
+
+<button onclick={() => options.reverse()}>reverse</button>
+<Child {options} labelKey="a" valueKey="v" />