IfBlock() — svelte Function Reference

Architecture documentation for the IfBlock() function in IfBlock.js from the svelte codebase.

Function javascript Compiler Transformer calls 3

Entity Profile

Compiler→ Transformer→ IfBlock() — svelte Function Reference

Dependency Diagram

graph TD
  be5b2cec_4124_43eb_dc20_ad924f727b6d["IfBlock()"]
  8adf4cb0_b818_cd31_913b_0cd69a5da391["IfBlock.js"]
  be5b2cec_4124_43eb_dc20_ad924f727b6d -->|defined in| 8adf4cb0_b818_cd31_913b_0cd69a5da391
  66243dec_e2be_a66d_3992_3ea42cf964b5["build_expression()"]
  be5b2cec_4124_43eb_dc20_ad924f727b6d -->|calls| 66243dec_e2be_a66d_3992_3ea42cf964b5
  575bfb79_8777_5076_eda3_be015882482a["add_svelte_meta()"]
  be5b2cec_4124_43eb_dc20_ad924f727b6d -->|calls| 575bfb79_8777_5076_eda3_be015882482a
  c8d80c9d_ab6c_13c0_c85e_a9b120f82f45["blockers()"]
  be5b2cec_4124_43eb_dc20_ad924f727b6d -->|calls| c8d80c9d_ab6c_13c0_c85e_a9b120f82f45
  style be5b2cec_4124_43eb_dc20_ad924f727b6d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js lines 11–131

export function IfBlock(node, context) {
	context.state.template.push_comment();

	/** @type {Statement[]} */
	const statements = [];

	const has_await = node.metadata.expression.has_await;
	const has_blockers = node.metadata.expression.has_blockers();
	const expression = build_expression(context, node.test, node.metadata.expression);

	// Build the if/else-if/else chain
	let index = 0;
	/** @type {IfStatement | undefined} */
	let first_if;
	/** @type {IfStatement | undefined} */
	let last_if;
	/** @type {AST.IfBlock | undefined} */
	let last_alt;

	for (const branch of [node, ...(node.metadata.flattened ?? [])]) {
		const consequent = /** @type {BlockStatement} */ (context.visit(branch.consequent));
		const consequent_id = b.id(context.state.scope.generate('consequent'));
		statements.push(b.var(consequent_id, b.arrow([b.id('$$anchor')], consequent)));

		// Build the test expression for this branch
		/** @type {Expression} */
		let test;

		if (branch.metadata.expression.has_await) {
			// Top-level condition with await: already resolved by $.async wrapper
			test = b.call('$.get', b.id('$$condition'));
		} else {
			const expression = build_expression(context, branch.test, branch.metadata.expression);

			if (branch.metadata.expression.has_call) {
				const derived_id = b.id(context.state.scope.generate('d'));
				statements.push(b.var(derived_id, b.call('$.derived', b.arrow([], expression))));
				test = b.call('$.get', derived_id);
			} else {
				test = expression;
			}
		}

		const render_call = b.stmt(b.call('$$render', consequent_id, index > 0 && b.literal(index)));
		const new_if = b.if(test, render_call);

		if (last_if) {
			last_if.alternate = new_if;
		} else {
			first_if = new_if;
		}

		last_alt = branch;
		last_if = new_if;
		index++;
	}

	// Handle final alternate (else branch, remaining async chain, or nothing)
	if (last_if && last_alt?.alternate) {
		const alternate = /** @type {BlockStatement} */ (context.visit(last_alt.alternate));
		const alternate_id = b.id(context.state.scope.generate('alternate'));
		statements.push(b.var(alternate_id, b.arrow([b.id('$$anchor')], alternate)));

		last_if.alternate = b.stmt(b.call('$$render', alternate_id, b.literal(false)));
	}

	// Build $.if() arguments
	/** @type {Expression[]} */
	const args = [
		context.state.node,
		b.arrow([b.id('$$render')], first_if ? b.block([first_if]) : b.block([]))
	];

	if (node.elseif) {
		// We treat this...
		//
		//   {#if x}
		//     ...
		//   {:else}
		//     {#if y}
		//       <div transition:foo>...</div>