fix: ensure await block scope transforms are isolated (#13622)

.changeset/tough-pans-boil.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure await block scope transforms are isolated

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

@@ -18,27 +18,34 @@ export function AwaitBlock(node, context) {
 	let catch_block;
 
 	if (node.then) {
-		const argument = node.value && create_derived_block_argument(node.value, context);
+		const then_context = {
+			...context,
+			state: { ...context.state, transform: { ...context.state.transform } }
+		};
+		const argument = node.value && create_derived_block_argument(node.value, then_context);
 
 		/** @type {Pattern[]} */
 		const args = [b.id('$$anchor')];
 		if (argument) args.push(argument.id);
 
 		const declarations = argument?.declarations ?? [];
-		const block = /** @type {BlockStatement} */ (context.visit(node.then));
+		const block = /** @type {BlockStatement} */ (then_context.visit(node.then, then_context.state));
 
 		then_block = b.arrow(args, b.block([...declarations, ...block.body]));
 	}
 
 	if (node.catch) {
-		const argument = node.error && create_derived_block_argument(node.error, context);
+		const catch_context = { ...context, state: { ...context.state } };
+		const argument = node.error && create_derived_block_argument(node.error, catch_context);
 
 		/** @type {Pattern[]} */
 		const args = [b.id('$$anchor')];
 		if (argument) args.push(argument.id);
 
 		const declarations = argument?.declarations ?? [];
-		const block = /** @type {BlockStatement} */ (context.visit(node.catch));
+		const block = /** @type {BlockStatement} */ (
+			catch_context.visit(node.catch, catch_context.state)
+		);
 
 		catch_block = b.arrow(args, b.block([...declarations, ...block.body]));
 	}

packages/svelte/tests/migrate/samples/self-closing-elements/output.svelte

@@ -2,4 +2,4 @@
 <div title="preserve"></div>
 <input type="text" />
 <hr />
-<f:table></f:table>
+<f:table></f:table>

packages/svelte/tests/migrate/samples/svelte-self-name-conflict/output.svelte

@@ -19,4 +19,4 @@
 		child
 	</Output_1>
 	<Output_1></Output_1>
-{/if}
+{/if}

packages/svelte/tests/migrate/samples/svelte-self/output.svelte

@@ -18,4 +18,4 @@
 		child
 	</Output>
 	<Output></Output>
-{/if}
+{/if}

packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js

@@ -0,0 +1,36 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+function increment(_, counter) {
+	counter.count += 1;
+}
+
+var root = $.template(`<button> </button> <!> `, 1);
+
+export default function Await_block_scope($$anchor) {
+	let counter = $.proxy({ count: 0 });
+	const promise = $.derived(() => Promise.resolve(counter));
+	var fragment = root();
+	var button = $.first_child(fragment);
+
+	button.__click = [increment, counter];
+
+	var text = $.child(button);
+
+	$.reset(button);
+
+	var node = $.sibling(button, 2);
+
+	$.await(node, () => $.get(promise), null, ($$anchor, counter) => {});
+
+	var text_1 = $.sibling(node);
+
+	$.template_effect(() => {
+		$.set_text(text, `clicks: ${counter.count ?? ""}`);
+		$.set_text(text_1, ` ${counter.count ?? ""}`);
+	});
+
+	$.append($$anchor, fragment);
+}
+
+$.delegate(["click"]);

packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js

@@ -0,0 +1,14 @@
+import * as $ from "svelte/internal/server";
+
+export default function Await_block_scope($$payload) {
+	let counter = { count: 0 };
+	const promise = Promise.resolve(counter);
+
+	function increment() {
+		counter.count += 1;
+	}
+
+	$$payload.out += `<button>clicks: ${$.escape(counter.count)}</button> <!---->`;
+	$.await(promise, () => {}, (counter) => {}, () => {});
+	$$payload.out += `<!----> ${$.escape(counter.count)}`;
+}

packages/svelte/tests/snapshot/samples/await-block-scope/index.svelte

@@ -0,0 +1,16 @@
+<script>
+	let counter = $state({ count: 0 });
+	const promise = $derived(Promise.resolve(counter))
+
+	function increment() {
+		counter.count += 1;
+	}
+</script>
+
+<button onclick={increment}>
+	clicks: {counter.count}
+</button>
+
+{#await promise then counter}{/await}
+
+{counter.count}