[feat] allow shorthand {#await ... then/catch} (sveltejs#6564)

Author: tanhauhau

src/compiler/parse/state/mustache.ts

@@ -290,16 +290,24 @@ export default function mustache(parser: Parser) {
 
 		const await_block_shorthand = type === 'AwaitBlock' && parser.eat('then');
 		if (await_block_shorthand) {
-			parser.require_whitespace();
-			block.value = read_context(parser);
-			parser.allow_whitespace();
+			if (parser.match_regex(/\s*}/)) {
+				parser.allow_whitespace();
+			} else {
+				parser.require_whitespace();
+				block.value = read_context(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 = read_context(parser);
-			parser.allow_whitespace();
+			if (parser.match_regex(/\s*}/)) {
+				parser.allow_whitespace();
+			} else {
+				parser.require_whitespace();
+				block.error = read_context(parser);
+				parser.allow_whitespace();
+			}
 		}
 
 		parser.eat('}', true);

test/runtime/samples/await-catch-no-expression/_config.js

@@ -0,0 +1,47 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<br />
+		<p>the promise is pending</p>
+	`,
+
+	async test({ assert, component, target }) {
+		fulfil(42);
+
+		await thePromise;
+
+		assert.htmlEqual(target.innerHTML, '<br />');
+
+		let reject;
+
+		thePromise = new Promise((f, r) => {
+			reject = r;
+		});
+
+		component.thePromise = thePromise;
+
+		assert.htmlEqual(target.innerHTML, `
+			<br />
+			<p>the promise is pending</p>
+		`);
+
+		reject(new Error());
+
+		await thePromise.catch(() => {});
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>oh no! Something broke!</p>
+			<br />
+			<p>oh no! Something broke!</p>
+		`);
+	}
+};

test/runtime/samples/await-catch-no-expression/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise catch}
+	<p>oh no! Something broke!</p>
+{/await}
+
+<br />
+
+{#await thePromise}
+	<p>the promise is pending</p>
+{:catch}
+	<p>oh no! Something broke!</p>
+{/await}

test/runtime/samples/await-then-no-expression/_config.js

@@ -0,0 +1,55 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<br>
+		<br>
+		<p>the promise is pending</p>
+	`,
+
+	async test({ assert, component, target }) {
+		fulfil();
+
+		await thePromise;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>the promise is resolved</p>
+			<br>
+			<p>the promise is resolved</p>
+			<br>
+			<p>the promise is resolved</p>
+		`);
+
+		let reject;
+
+		thePromise = new Promise((f, r) => {
+			reject = r;
+		});
+
+		component.thePromise = thePromise;
+
+		assert.htmlEqual(target.innerHTML, `
+			<br>
+			<br>
+			<p>the promise is pending</p>
+		`);
+
+		reject(new Error('something broke'));
+		
+		await thePromise.catch(() => {});
+		
+		assert.htmlEqual(target.innerHTML, `
+			<p>oh no! something broke</p>
+			<br>
+			<br>
+		`);
+	}
+};

test/runtime/samples/await-then-no-expression/main.svelte

@@ -0,0 +1,23 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise then}
+	<p>the promise is resolved</p>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
+
+<br />
+
+{#await thePromise then}
+	<p>the promise is resolved</p>
+{/await}
+
+<br />
+
+{#await thePromise}
+	<p>the promise is pending</p>
+{:then}
+	<p>the promise is resolved</p>
+{/await}