KeyBlock() — svelte Function Reference

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

Function javascript Compiler Transformer calls 3

Entity Profile

Compiler→ Transformer→ KeyBlock() — svelte Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

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

	const has_await = node.metadata.expression.has_await;
	const has_blockers = node.metadata.expression.has_blockers();

	const expression = build_expression(context, node.expression, node.metadata.expression);
	const key = b.thunk(has_await ? b.call('$.get', b.id('$$key')) : expression);
	const body = /** @type {Expression} */ (context.visit(node.fragment));

	const statement = add_svelte_meta(
		b.call('$.key', context.state.node, key, b.arrow([b.id('$$anchor')], body)),
		node,
		'key'
	);

	if (has_await || has_blockers) {
		context.state.init.push(
			b.stmt(
				b.call(
					'$.async',
					context.state.node,
					node.metadata.expression.blockers(),
					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
					b.arrow(
						has_await ? [context.state.node, b.id('$$key')] : [context.state.node],
						b.block([statement])
					)
				)
			)
		);
	} else {
		context.state.init.push(statement);
	}
}