add await catch shorthand (#4490)

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Support dimension bindings in cross-origin environments ([#2147](https://github.com/sveltejs/svelte/issues/2147))
 * Try using `globalThis` rather than `globals` for the benefit of non-Node servers and web workers ([#3561](https://github.com/sveltejs/svelte/issues/3561), [#4545](https://github.com/sveltejs/svelte/issues/4545))
+* Support `{#await ... catch ...}` syntax shorthand ([#3623](https://github.com/sveltejs/svelte/issues/3623))
 * Fix attaching of JS debugging comments to HTML comments ([#4565](https://github.com/sveltejs/svelte/issues/4565))
 
 ## 3.20.1

src/compiler/parse/state/mustache.ts

@@ -309,6 +309,13 @@ export default function mustache(parser: Parser) {
 			parser.allow_whitespace();
 		}
 
+		const await_block_catch_shorthand = !await_block_shorthand && type === 'AwaitBlock' && parser.eat('catch');
+		if (await_block_catch_shorthand) {
+			parser.require_whitespace();
+			block.error = parser.read_destructure_pattern();
+			parser.allow_whitespace();
+		}
+
 		parser.eat('}', true);
 
 		parser.current().children.push(block);
@@ -319,6 +326,9 @@ export default function mustache(parser: Parser) {
 			if (await_block_shorthand) {
 				block.then.skip = false;
 				child_block = block.then;
+			} else if (await_block_catch_shorthand) {
+				block.catch.skip = false;
+				child_block = block.catch;
 			} else {
 				block.pending.skip = false;
 				child_block = block.pending;

test/runtime/samples/await-catch-shorthand/_config.js

@@ -0,0 +1,41 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: ``,
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, ``);
+
+				let reject;
+
+				thePromise = new Promise((f, r) => {
+					reject = r;
+				});
+
+				component.thePromise = thePromise;
+
+				assert.htmlEqual(target.innerHTML, ``);
+
+				reject(new Error('something broke'));
+
+				return thePromise.catch(() => {});
+			})
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>oh no! something broke</p>
+				`);
+			});
+	}
+};

test/runtime/samples/await-catch-shorthand/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}

test/validator/samples/await-shorthand-no-then/input.svelte

@@ -0,0 +1,7 @@
+<script>
+	let promise;
+</script>
+
+{#await promise catch error}
+	<p>Error: {error}</p>
+{/await}

test/validator/samples/await-shorthand-no-then/warnings.json

@@ -0,0 +1 @@
+[]