Fix {#await} block scope when updating (#6219)

src/compiler/compile/render_dom/wrappers/AwaitBlock.ts

@@ -232,14 +232,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 
 		const dependencies = this.node.expression.dynamic_dependencies();
 
-		let update_child_context;
+		const update_await_block_branch = b`@update_await_block_branch(${info}, #ctx, #dirty)`;
-		if (this.then.value && this.catch.value) {
-			update_child_context = b`#child_ctx[${this.then.value_index}] = #child_ctx[${this.catch.value_index}] = ${info}.resolved;`;
-		} else if (this.then.value) {
-			update_child_context = b`#child_ctx[${this.then.value_index}] = ${info}.resolved;`;
-		} else if (this.catch.value) {
-			update_child_context = b`#child_ctx[${this.catch.value_index}] = ${info}.resolved;`;
-		}
 
 		if (dependencies.length > 0) {
 			const condition = x`
@@ -256,9 +249,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 					if (${condition}) {
 
 					} else {
-						const #child_ctx = #ctx.slice();
+						${update_await_block_branch}
-						${update_child_context}
-						${info}.block.p(#child_ctx, #dirty);
 					}
 				`);
 			} else {
@@ -269,11 +260,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 		} else {
 			if (this.pending.block.has_update_method) {
 				block.chunks.update.push(b`
-					{
+					${update_await_block_branch}
-						const #child_ctx = #ctx.slice();
-						${update_child_context}
-						${info}.block.p(#child_ctx, #dirty);
-					}
 				`);
 			}
 		}

src/runtime/internal/await_block.ts

@@ -83,3 +83,17 @@ export function handle_promise(promise, info) {
 		info.resolved = promise;
 	}
 }
+
+export function update_await_block_branch(info, ctx, dirty) {
+	const child_ctx = ctx.slice();
+	const { resolved } = info;
+
+	if (info.current === info.then) {
+		child_ctx[info.value] = resolved;
+	}
+	if (info.current === info.catch) {
+		child_ctx[info.error] = resolved;
+	}
+
+	info.block.p(child_ctx, dirty);
+}

test/runtime/samples/await-with-update-catch-scope/_config.js

@@ -0,0 +1,51 @@
+export default {
+	props: {
+		thePromise: new Promise((_) => {})
+	},
+
+	html: `
+		<div>error: undefined</div>
+	`,
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve('abc'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				error: undefined
+				After Resolve: undefined
+			</div>
+			`
+		);
+
+		component.error = 'external error occurred';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				error: ${component.error}
+				After Resolve: ${component.error}
+			</div>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject('failure'));
+		} catch (error) {
+			// ignore
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				error: ${component.error}
+				Rejected: failure
+			</div>
+			`
+		);
+	}
+};

test/runtime/samples/await-with-update-catch-scope/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	export let thePromise;
+	export let error;
+</script>
+
+<div>
+	error: {error}
+	{#await thePromise then _}
+		After Resolve: {error}
+	{:catch error}
+		Rejected: {error}
+	{/await}
+</div>