if blocks

Author: Rich-Harris

packages/svelte/src/compiler/phases/1-parse/state/tag.js

@@ -60,7 +60,10 @@ function open(parser) {
 			end: -1,
 			test: read_expression(parser),
 			consequent: create_fragment(),
-			alternate: null
+			alternate: null,
+			metadata: {
+				expression: create_expression_metadata()
+			}
 		});
 
 		parser.allow_whitespace();
@@ -441,7 +444,10 @@ function next(parser) {
 				elseif: true,
 				test: expression,
 				consequent: create_fragment(),
-				alternate: null
+				alternate: null,
+				metadata: {
+					expression: create_expression_metadata()
+				}
 			});
 
 			parser.stack.push(child);

packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js

@@ -17,5 +17,11 @@ export function IfBlock(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.visit(node.test, {
+		...context.state,
+		expression: node.metadata.expression
+	});
+
+	context.visit(node.consequent);
+	if (node.alternate) context.visit(node.alternate);
 }

packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js

@@ -24,14 +24,19 @@ export function IfBlock(node, context) {
 		statements.push(b.var(b.id(alternate_id), b.arrow([b.id('$$anchor')], alternate)));
 	}
 
+	const { is_async } = node.metadata.expression;
+
+	const expression = /** @type {Expression} */ (context.visit(node.test));
+	const test = is_async ? b.call('$.get', b.id('$$condition')) : expression;
+
 	/** @type {Expression[]} */
 	const args = [
 		context.state.node,
 		b.arrow(
 			[b.id('$$render')],
 			b.block([
 				b.if(
-					/** @type {Expression} */ (context.visit(node.test)),
+					test,
 					b.stmt(b.call(b.id('$$render'), b.id(consequent_id))),
 					alternate_id
 						? b.stmt(
@@ -74,5 +79,18 @@ export function IfBlock(node, context) {
 
 	statements.push(b.stmt(b.call('$.if', ...args)));
 
-	context.state.init.push(b.block(statements));
+	if (is_async) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					b.array([b.thunk(expression, true)]),
+					b.arrow([context.state.node, b.id('$$condition')], b.block(statements))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(b.block(statements));
+	}
 }

packages/svelte/src/compiler/types/template.d.ts

@@ -434,6 +434,9 @@ export namespace AST {
 		test: Expression;
 		consequent: Fragment;
 		alternate: Fragment | null;
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	/** An `{#await ...}` block */

packages/svelte/tests/runtime-runes/samples/async-if/_config.js

@@ -0,0 +1,37 @@
+import { tick } from 'svelte';
+import { deferred } from '../../../../src/internal/shared/utils.js';
+import { test } from '../../test';
+
+/** @type {ReturnType<typeof deferred>} */
+let d;
+
+export default test({
+	html: `<p>pending</p>`,
+
+	get props() {
+		d = deferred();
+
+		return {
+			promise: d.promise
+		};
+	},
+
+	async test({ assert, target, component }) {
+		d.resolve(true);
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<h1>yes</h1>');
+
+		d = deferred();
+		component.promise = d.promise;
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>pending</p>');
+
+		d.resolve(false);
+		await Promise.resolve();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<h1>no</h1>');
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-if/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	let { promise } = $props();
+</script>
+
+<svelte:boundary>
+	{#if await promise}
+		<h1>yes</h1>
+	{:else}
+		<h1>no</h1>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>