svelte_visitors.Fragment() — svelte Function Reference

Architecture documentation for the svelte_visitors.Fragment() function in index.js from the svelte codebase.

Function javascript Compiler Transformer

Entity Profile

Compiler→ Transformer→ svelte_visitors.Fragment() — svelte Function Reference

Dependency Diagram

graph TD
  5f1f6bdb_56fb_7fed_f26b_c6fc61de6d26["svelte_visitors.Fragment()"]
  f0404eed_e134_3c7c_7b38_1cb13c71f197["index.js"]
  5f1f6bdb_56fb_7fed_f26b_c6fc61de6d26 -->|defined in| f0404eed_e134_3c7c_7b38_1cb13c71f197
  style 5f1f6bdb_56fb_7fed_f26b_c6fc61de6d26 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/print/index.js lines 324–417

	Fragment(node, context) {
		/** @type {AST.SvelteNode[][]} */
		const items = [];

		/** @type {AST.SvelteNode[]} */
		let sequence = [];

		const flush = () => {
			items.push(sequence);
			sequence = [];
		};

		for (let i = 0; i < node.nodes.length; i += 1) {
			let child_node = node.nodes[i];

			const prev = node.nodes[i - 1];
			const next = node.nodes[i + 1];

			if (child_node.type === 'Text') {
				child_node = { ...child_node }; // always clone, so we can safely mutate

				child_node.data = child_node.data.replace(/[^\S]+/g, ' ');

				// trim fragment
				if (i === 0) {
					child_node.data = child_node.data.trimStart();
				}

				if (i === node.nodes.length - 1) {
					child_node.data = child_node.data.trimEnd();
				}

				if (child_node.data === '') {
					continue;
				}

				if (child_node.data.startsWith(' ') && prev && prev.type !== 'ExpressionTag') {
					flush();
					child_node.data = child_node.data.trimStart();
				}

				if (child_node.data !== '') {
					sequence.push({ ...child_node, data: child_node.data });

					if (child_node.data.endsWith(' ') && next && next.type !== 'ExpressionTag') {
						flush();
						child_node.data = child_node.data.trimStart();
					}
				}
			} else {
				sequence.push(child_node);

				if (child_node.type === 'RegularElement') flush();
			}
		}

		flush();

		let multiline = false;
		let width = 0;

		const child_contexts = items
			.filter((x) => x.length > 0)
			.map((sequence) => {
				const child_context = context.new();

				for (const node of sequence) {
					child_context.visit(node);
					multiline ||= child_context.multiline;
				}

				width += child_context.measure();

				return child_context;
			});

		multiline ||= width > LINE_BREAK_THRESHOLD;

		for (let i = 0; i < child_contexts.length; i += 1) {
			const prev = child_contexts[i];
			const next = child_contexts[i + 1];