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

Author: GauBen

.changeset/popular-news-happen.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure `{#await}` scope shadowing is computed in the correct order

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),

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>');
+	}
+});

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>