order_reactive_statements() — svelte Function Reference

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

Function javascript Compiler Transformer calls 3 called by 1

Entity Profile

Compiler→ Transformer→ order_reactive_statements() — svelte Function Reference

Dependency Diagram

graph TD
  40d21ab4_2485_8cf0_6b2b_9513cc687b32["order_reactive_statements()"]
  4aa8a188_84d4_0274_ed83_cac0ab1d3572["index.js"]
  40d21ab4_2485_8cf0_6b2b_9513cc687b32 -->|defined in| 4aa8a188_84d4_0274_ed83_cac0ab1d3572
  78a6ba9a_5003_f569_a638_76e4f1977809["analyze_component()"]
  78a6ba9a_5003_f569_a638_76e4f1977809 -->|calls| 40d21ab4_2485_8cf0_6b2b_9513cc687b32
  627dc2f8_4dbc_5bb1_8f54_cee503e17098["get()"]
  40d21ab4_2485_8cf0_6b2b_9513cc687b32 -->|calls| 627dc2f8_4dbc_5bb1_8f54_cee503e17098
  d733cb1e_c294_8865_008a_cc79d441b336["check_graph_for_cycles()"]
  40d21ab4_2485_8cf0_6b2b_9513cc687b32 -->|calls| d733cb1e_c294_8865_008a_cc79d441b336
  43b3df72_3da6_3703_cfe7_bebba2780890["reactive_declaration_cycle()"]
  40d21ab4_2485_8cf0_6b2b_9513cc687b32 -->|calls| 43b3df72_3da6_3703_cfe7_bebba2780890
  style 40d21ab4_2485_8cf0_6b2b_9513cc687b32 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/2-analyze/index.js lines 1222–1283

function order_reactive_statements(unsorted_reactive_declarations) {
	/** @typedef {[import('estree').LabeledStatement, ReactiveStatement]} Tuple */

	/** @type {Map<string, Array<Tuple>>} */
	const lookup = new Map();

	for (const [node, declaration] of unsorted_reactive_declarations) {
		for (const binding of declaration.assignments) {
			const statements = lookup.get(binding.node.name) ?? [];
			statements.push([node, declaration]);
			lookup.set(binding.node.name, statements);
		}
	}

	/** @type {Array<[string, string]>} */
	const edges = [];

	for (const [, { assignments, dependencies }] of unsorted_reactive_declarations) {
		for (const assignment of assignments) {
			for (const dependency of dependencies) {
				if (!assignments.has(dependency)) {
					edges.push([assignment.node.name, dependency.node.name]);
				}
			}
		}
	}

	const cycle = check_graph_for_cycles(edges);
	if (cycle?.length) {
		const declaration = /** @type {Tuple[]} */ (lookup.get(cycle[0]))[0];
		e.reactive_declaration_cycle(declaration[0], cycle.join(' → '));
	}

	// We use a map and take advantage of the fact that the spec says insertion order is preserved when iterating
	/** @type {Map<import('estree').LabeledStatement, ReactiveStatement>} */
	const reactive_declarations = new Map();

	/**
	 *
	 * @param {import('estree').LabeledStatement} node
	 * @param {ReactiveStatement} declaration
	 * @returns
	 */
	const add_declaration = (node, declaration) => {
		if ([...reactive_declarations.values()].includes(declaration)) return;

		for (const binding of declaration.dependencies) {
			if (declaration.assignments.has(binding)) continue;
			for (const [node, earlier] of lookup.get(binding.node.name) ?? []) {
				add_declaration(node, earlier);
			}
		}

		reactive_declarations.set(node, declaration);
	};

	for (const [node, declaration] of unsorted_reactive_declarations) {
		add_declaration(node, declaration);
	}

	return reactive_declarations;
}