From 9c2ca693a5d8a06ba4b0582ac03ce3fefd51dca5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gautier=20Ben=20A=C3=AFm?=
 <48261497+GauBen@users.noreply.github.com>
Date: Wed, 21 Aug 2024 05:02:25 +0200
Subject: [PATCH] fix: ensure await scope shadowing is computed in the correct
 order (#12945)

* fix: ensure await scope shadowing is computed in the correct order

* Create popular-news-happen.md

* removed solo
---
 .changeset/popular-news-happen.md                     |  5 +++++
 .../phases/3-transform/client/visitors/AwaitBlock.js  |  5 ++++-
 .../samples/await-then-shadowed/_config.js            | 10 ++++++++++
 .../samples/await-then-shadowed/main.svelte           | 11 +++++++++++
 4 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/popular-news-happen.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/main.svelte

diff --git a/.changeset/popular-news-happen.md b/.changeset/popular-news-happen.md
new file mode 100644
index 0000000000..c617baa805
--- /dev/null
+++ b/.changeset/popular-news-happen.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure `{#await}` scope shadowing is computed in the correct order
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
index f956a5cf30..67589244cc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
@@ -11,6 +11,9 @@ import { create_derived_block_argument } from '../utils.js';
 export function AwaitBlock(node, context) {
 	context.state.template.push('<!>');
 
+	// Visit {#await <expression>} first to ensure that scopes are in the correct order
+	const expression = b.thunk(/** @type {Expression} */ (context.visit(node.expression)));
+
 	let then_block;
 	let catch_block;
 
@@ -45,7 +48,7 @@ export function AwaitBlock(node, context) {
 			b.call(
 				'$.await',
 				context.state.node,
-				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
+				expression,
 				node.pending
 					? b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.pending)))
 					: b.literal(null),
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/_config.js
new file mode 100644
index 0000000000..08b62d8da8
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<div>Loading...</div>',
+
+	async test({ assert, target }) {
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, '<div>10</div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/main.svelte b/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/main.svelte
new file mode 100644
index 0000000000..bb4bdef5fd
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	const x = Promise.resolve(10);
+</script>
+
+<div>
+	{#await x}
+		Loading...
+	{:then x}
+		{x}
+	{/await}
+</div>