diff --git a/CHANGELOG.md b/CHANGELOG.md index 05a4b12fa3..bface6c86d 100644 --- a/CHANGELOG.md +++ b/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 ``s in child `{#await}`/`{#each}` contexts ([#5255](https://github.com/sveltejs/svelte/issues/5255)) +* Fix using `` in `{:catch}` ([#5259](https://github.com/sveltejs/svelte/issues/5259)) ## 3.24.1 diff --git a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts index ceb898bf79..495f1b3157 100644 --- a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts +++ b/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); } `); diff --git a/test/runtime/samples/await-with-update-2/Component.svelte b/test/runtime/samples/await-with-update-2/Component.svelte new file mode 100644 index 0000000000..1301db3f99 --- /dev/null +++ b/test/runtime/samples/await-with-update-2/Component.svelte @@ -0,0 +1,7 @@ + + +
count: {count}
+
value: {value}
\ No newline at end of file diff --git a/test/runtime/samples/await-with-update-2/_config.js b/test/runtime/samples/await-with-update-2/_config.js new file mode 100644 index 0000000000..7584381eeb --- /dev/null +++ b/test/runtime/samples/await-with-update-2/_config.js @@ -0,0 +1,64 @@ +export default { + props: { + thePromise: new Promise((_) => {}), + count: 0, + }, + + html: ` +

loading...

+ `, + + async test({ assert, component, target }) { + await (component.thePromise = Promise.resolve({ value: "success", Component: component.Component })); + + assert.htmlEqual( + target.innerHTML, + ` +
Resolved: +
count: 0
+
value: success
+
+ ` + ); + + component.count = 5; + + assert.htmlEqual( + target.innerHTML, + ` +
Resolved: +
count: 5
+
value: success
+
+ ` + ); + + try { + await (component.thePromise = Promise.reject({ value: "failure", Component: component.Component })); + } catch (error) { + // ignore + } + + assert.htmlEqual( + target.innerHTML, + ` +
Rejected: +
count: 5
+
value: failure
+
+ ` + ); + + component.count = 10; + + assert.htmlEqual( + target.innerHTML, + ` +
Rejected: +
count: 10
+
value: failure
+
+ ` + ); + }, +}; diff --git a/test/runtime/samples/await-with-update-2/main.svelte b/test/runtime/samples/await-with-update-2/main.svelte new file mode 100644 index 0000000000..b29c875f92 --- /dev/null +++ b/test/runtime/samples/await-with-update-2/main.svelte @@ -0,0 +1,16 @@ + + +
+ {#await thePromise} +

loading...

+ {:then { value: theValue, Component }} + Resolved: + {:catch { value: theError, Component } } + Rejected: + {/await} +
\ No newline at end of file diff --git a/test/runtime/samples/await-with-update/Component.svelte b/test/runtime/samples/await-with-update/Component.svelte new file mode 100644 index 0000000000..5f13c80e65 --- /dev/null +++ b/test/runtime/samples/await-with-update/Component.svelte @@ -0,0 +1,5 @@ + + +
count: {count}
\ No newline at end of file diff --git a/test/runtime/samples/await-with-update/_config.js b/test/runtime/samples/await-with-update/_config.js new file mode 100644 index 0000000000..31de26ddba --- /dev/null +++ b/test/runtime/samples/await-with-update/_config.js @@ -0,0 +1,60 @@ +export default { + props: { + thePromise: new Promise((_) => {}), + count: 0, + }, + + html: ` +

loading...

+ `, + + async test({ assert, component, target }) { + await (component.thePromise = Promise.resolve(component.Component)); + + assert.htmlEqual( + target.innerHTML, + ` +
Resolved: +
count: 0
+
+ ` + ); + + component.count = 5; + + assert.htmlEqual( + target.innerHTML, + ` +
Resolved: +
count: 5
+
+ ` + ); + + try { + await (component.thePromise = Promise.reject(component.Component)); + } catch (error) { + // ignore + } + + assert.htmlEqual( + target.innerHTML, + ` +
Rejected: +
count: 5
+
+ ` + ); + + component.count = 10; + + assert.htmlEqual( + target.innerHTML, + ` +
Rejected: +
count: 10
+
+ ` + ); + }, +}; diff --git a/test/runtime/samples/await-with-update/main.svelte b/test/runtime/samples/await-with-update/main.svelte new file mode 100644 index 0000000000..51c5b76a21 --- /dev/null +++ b/test/runtime/samples/await-with-update/main.svelte @@ -0,0 +1,16 @@ + + +
+ {#await thePromise} +

loading...

+ {:then theValue} + Resolved: + {:catch theError} + Rejected: + {/await} +
\ No newline at end of file