From 364f45a08e1ae8c3e9d0839461b8dc0295e9ac65 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 22 Jan 2025 21:05:39 -0500
Subject: [PATCH] key blocks

---
 .../src/compiler/phases/1-parse/state/tag.js  |  5 +-
 .../phases/2-analyze/visitors/KeyBlock.js     |  7 ++-
 .../3-transform/client/visitors/KeyBlock.js   | 31 +++++++++--
 .../svelte/src/compiler/types/template.d.ts   |  5 ++
 .../samples/async-key/_config.js              | 51 +++++++++++++++++++
 .../samples/async-key/main.svelte             | 13 +++++
 6 files changed, 107 insertions(+), 5 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-key/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-key/main.svelte

diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index 0d0176ac85..78820d0fa1 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -326,7 +326,10 @@ function open(parser) {
 			start,
 			end: -1,
 			expression,
-			fragment: create_fragment()
+			fragment: create_fragment(),
+			metadata: {
+				expression: create_expression_metadata()
+			}
 		});
 
 		parser.stack.push(block);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
index 88bb6a98e7..d0dcf8e15c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
@@ -16,5 +16,10 @@ export function KeyBlock(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.visit(node.expression, {
+		...context.state,
+		expression: node.metadata.expression
+	});
+
+	context.visit(node.fragment);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
index a013827f60..6a95a94ddf 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
@@ -13,7 +13,32 @@ export function KeyBlock(node, context) {
 	const key = /** @type {Expression} */ (context.visit(node.expression));
 	const body = /** @type {Expression} */ (context.visit(node.fragment));
 
-	context.state.init.push(
-		b.stmt(b.call('$.key', context.state.node, b.thunk(key), b.arrow([b.id('$$anchor')], body)))
-	);
+	if (node.metadata.expression.is_async) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					b.array([b.thunk(key, true)]),
+					b.arrow(
+						[context.state.node, b.id('$$key')],
+						b.block([
+							b.stmt(
+								b.call(
+									'$.key',
+									context.state.node,
+									b.thunk(b.call('$.get', b.id('$$key'))),
+									b.arrow([b.id('$$anchor')], body)
+								)
+							)
+						])
+					)
+				)
+			)
+		);
+	} else {
+		context.state.init.push(
+			b.stmt(b.call('$.key', context.state.node, b.thunk(key), b.arrow([b.id('$$anchor')], body)))
+		);
+	}
 }
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index f2b2c4629a..c16c161e86 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -434,6 +434,7 @@ export namespace AST {
 		test: Expression;
 		consequent: Fragment;
 		alternate: Fragment | null;
+		/** @internal */
 		metadata: {
 			expression: ExpressionMetadata;
 		};
@@ -457,6 +458,10 @@ export namespace AST {
 		type: 'KeyBlock';
 		expression: Expression;
 		fragment: Fragment;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	export interface SnippetBlock extends BaseNode {
diff --git a/packages/svelte/tests/runtime-runes/samples/async-key/_config.js b/packages/svelte/tests/runtime-runes/samples/async-key/_config.js
new file mode 100644
index 0000000000..5282bbd739
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-key/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { deferred } from '../../../../src/internal/shared/utils.js';
+import { test } from '../../test';
+
+/** @type {ReturnType<typeof deferred>} */
+let d;
+
+export default test({
+	html: `<p>pending</p>`,
+
+	get props() {
+		d = deferred();
+
+		return {
+			promise: d.promise
+		};
+	},
+
+	async test({ assert, target, component }) {
+		d.resolve(1);
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+
+		const h1 = target.querySelector('h1');
+
+		d = deferred();
+		component.promise = d.promise;
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>pending</p>');
+
+		d.resolve(1);
+		await Promise.resolve();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+		assert.equal(target.querySelector('h1'), h1);
+
+		d = deferred();
+		component.promise = d.promise;
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>pending</p>');
+
+		d.resolve(2);
+		await Promise.resolve();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+		assert.notEqual(target.querySelector('h1'), h1);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-key/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-key/main.svelte
new file mode 100644
index 0000000000..7cac0f8542
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-key/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let { promise } = $props();
+</script>
+
+<svelte:boundary>
+	{#key await promise}
+		<h1>hello</h1>
+	{/key}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>