fix not passing child_ctx for catch block (#5261)

Author: tanhauhau

CHANGELOG.md

@@ -6,6 +6,7 @@
 * In SSR mode, do not automatically declare variables for reactive assignments to member expressions ([#5247](https://github.com/sveltejs/svelte/issues/5247))
 * Include selector in message of `unused-css-selector` warning ([#5252](https://github.com/sveltejs/svelte/issues/5252))
 * Fix using `<Namespaced.Component/>`s in child `{#await}`/`{#each}` contexts ([#5255](https://github.com/sveltejs/svelte/issues/5255))
+* Fix using `<svelte:component>` in `{:catch}` ([#5259](https://github.com/sveltejs/svelte/issues/5259))
 
 ## 3.24.1
 

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

@@ -231,6 +231,15 @@ export default class AwaitBlockWrapper extends Wrapper {
 
 		const dependencies = this.node.expression.dynamic_dependencies();
 
+		let update_child_context;
+		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`
 				${block.renderer.dirty(dependencies)} &&
@@ -247,7 +256,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 
 					} else {
 						const #child_ctx = #ctx.slice();
-						${this.then.value && b`#child_ctx[${this.then.value_index}] = ${info}.resolved;`}
+						${update_child_context}
 						${info}.block.p(#child_ctx, #dirty);
 					}
 				`);
@@ -261,7 +270,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 				block.chunks.update.push(b`
 					{
 						const #child_ctx = #ctx.slice();
-						${this.then.value && b`#child_ctx[${this.then.value_index}] = ${info}.resolved;`}
+						${update_child_context}
 						${info}.block.p(#child_ctx, #dirty);
 					}
 				`);

test/runtime/samples/await-with-update-2/Component.svelte

@@ -0,0 +1,7 @@
+<script>
+  export let count;
+  export let value;
+</script>
+
+<div>count: {count}</div>
+<div>value: {value}</div>

test/runtime/samples/await-with-update-2/_config.js

@@ -0,0 +1,64 @@
+export default {
+	props: {
+		thePromise: new Promise((_) => {}),
+		count: 0,
+	},
+
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve({ value: "success", Component: component.Component }));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Resolved:
+				<div>count: 0</div>
+				<div>value: success</div>
+			</div>
+			`
+		);
+
+		component.count = 5;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Resolved:
+				<div>count: 5</div>
+				<div>value: success</div>
+			</div>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject({ value: "failure", Component: component.Component }));
+		} catch (error) {
+			// ignore
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Rejected:
+				<div>count: 5</div>
+				<div>value: failure</div>
+			</div>
+			`
+		);
+
+		component.count = 10;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Rejected:
+				<div>count: 10</div>
+				<div>value: failure</div>
+			</div>
+			`
+		);
+	},
+};

test/runtime/samples/await-with-update-2/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Component from './Component.svelte';
+	export let thePromise;
+	export let count;
+	export { Component }
+</script>
+
+<div>
+	{#await thePromise}
+		<p>loading...</p>
+	{:then { value: theValue, Component }}
+		Resolved: <svelte:component this={Component} {count} value={theValue} />
+	{:catch { value: theError, Component } }
+		Rejected: <svelte:component this={Component} {count} value={theError} />
+	{/await}
+</div>

test/runtime/samples/await-with-update/Component.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let count;
+</script>
+
+<div>count: {count}</div>

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

@@ -0,0 +1,60 @@
+export default {
+	props: {
+		thePromise: new Promise((_) => {}),
+		count: 0,
+	},
+
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve(component.Component));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Resolved:
+				<div>count: 0</div>
+			</div>
+			`
+		);
+
+		component.count = 5;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Resolved:
+				<div>count: 5</div>
+			</div>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject(component.Component));
+		} catch (error) {
+			// ignore
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Rejected:
+				<div>count: 5</div>
+			</div>
+			`
+		);
+
+		component.count = 10;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Rejected:
+				<div>count: 10</div>
+			</div>
+			`
+		);
+	},
+};

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

@@ -0,0 +1,16 @@
+<script>
+	import Component from './Component.svelte';
+	export let thePromise;
+	export let count;
+	export { Component }
+</script>
+
+<div>
+	{#await thePromise}
+		<p>loading...</p>
+	{:then theValue}
+		Resolved: <svelte:component this={theValue} {count} />
+	{:catch theError}
+		Rejected: <svelte:component this={theError} {count} />
+	{/await}
+</div>