SvelteBoundary() — svelte Function Reference

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

Function javascript Compiler Transformer

Entity Profile

Compiler→ Transformer→ SvelteBoundary() — svelte Function Reference

Dependency Diagram

graph TD
  d3951b5a_2fba_6994_baaa_44bc79b5ba6b["SvelteBoundary()"]
  4b2dc6b5_eb70_5a84_22a0_c06f14719b60["SvelteBoundary.js"]
  d3951b5a_2fba_6994_baaa_44bc79b5ba6b -->|defined in| 4b2dc6b5_eb70_5a84_22a0_c06f14719b60
  style d3951b5a_2fba_6994_baaa_44bc79b5ba6b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

export function SvelteBoundary(node, context) {
	const props = b.object([]);

	for (const attribute of node.attributes) {
		if (attribute.type !== 'Attribute' || attribute.value === true) {
			// these can't exist, because they would have caused validation
			// to fail, but typescript doesn't know that
			continue;
		}

		const chunk = Array.isArray(attribute.value)
			? /** @type {AST.ExpressionTag} */ (attribute.value[0])
			: attribute.value;

		const expression = /** @type {Expression} */ (context.visit(chunk.expression, context.state));

		if (chunk.metadata.expression.has_state) {
			props.properties.push(b.get(attribute.name, [b.return(expression)]));
		} else {
			props.properties.push(b.init(attribute.name, expression));
		}
	}

	const nodes = [];

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

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

	let has_const = false;

	// const tags need to live inside the boundary, but might also be referenced in hoisted snippets.
	// to resolve this we cheat: we duplicate const tags inside snippets
	// We'll revert this behavior in the future, it was a mistake to allow this (Component snippets also don't do this).
	for (const child of node.fragment.nodes) {
		if (child.type === 'ConstTag') {
			has_const = true;
			if (!context.state.options.experimental.async) {
				context.visit(child, {
					...context.state,
					consts: const_tags,
					scope: context.state.scopes.get(node.fragment) ?? context.state.scope
				});
			}
		}
	}

	for (const child of node.fragment.nodes) {
		if (child.type === 'ConstTag') {
			if (context.state.options.experimental.async) {
				nodes.push(child);
			}
			continue;
		}

		if (child.type === 'SnippetBlock') {
			if (
				context.state.options.experimental.async &&
				has_const &&
				!['failed', 'pending'].includes(child.expression.name)
			) {
				// we can't hoist snippets as they may reference const tags, so we just keep them in the fragment
				nodes.push(child);
			} else {
				/** @type {Statement[]} */
				const statements = [];

				context.visit(child, { ...context.state, snippets: statements });

				const snippet = /** @type {VariableDeclaration} */ (statements[0]);

				const snippet_fn = dev
					? // @ts-expect-error we know this shape is correct
						snippet.declarations[0].init.arguments[1]
					: snippet.declarations[0].init;

				if (!context.state.options.experimental.async) {
					snippet_fn.body.body.unshift(
						...const_tags.filter((node) => node.type === 'VariableDeclaration')