server_component() — svelte Function Reference

Architecture documentation for the server_component() function in transform-server.js from the svelte codebase.

Function javascript Compiler Transformer calls 4 called by 1

Entity Profile

Compiler→ Transformer→ server_component() — svelte Function Reference

Dependency Diagram

graph TD
  b507285b_8f11_234a_936c_682b2ac1e15b["server_component()"]
  86cf8685_38fa_3a1c_9b81_21c452968289["transform-server.js"]
  b507285b_8f11_234a_936c_682b2ac1e15b -->|defined in| 86cf8685_38fa_3a1c_9b81_21c452968289
  0accce76_056a_b49e_69ca_069fe7e3e216["transform_component()"]
  0accce76_056a_b49e_69ca_069fe7e3e216 -->|calls| b507285b_8f11_234a_936c_682b2ac1e15b
  c12e0147_3f27_cf17_5878_e54ffdc328d5["extract_identifiers()"]
  b507285b_8f11_234a_936c_682b2ac1e15b -->|calls| c12e0147_3f27_cf17_5878_e54ffdc328d5
  627dc2f8_4dbc_5bb1_8f54_cee503e17098["get()"]
  b507285b_8f11_234a_936c_682b2ac1e15b -->|calls| 627dc2f8_4dbc_5bb1_8f54_cee503e17098
  804afe56_25d1_9f41_dafe_adc75e952134["object()"]
  b507285b_8f11_234a_936c_682b2ac1e15b -->|calls| 804afe56_25d1_9f41_dafe_adc75e952134
  1129e6de_ad88_9249_cdc1_424cf9bba55e["render_stylesheet()"]
  b507285b_8f11_234a_936c_682b2ac1e15b -->|calls| 1129e6de_ad88_9249_cdc1_424cf9bba55e
  style b507285b_8f11_234a_936c_682b2ac1e15b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js lines 92–397

export function server_component(analysis, options) {
	/** @type {ComponentServerTransformState} */
	const state = {
		analysis,
		options,
		scope: analysis.module.scope,
		scopes: analysis.module.scopes,
		hoisted: [b.import_all('$', 'svelte/internal/server'), ...analysis.instance_body.hoisted],
		legacy_reactive_statements: new Map(),
		// these are set inside the `Fragment` visitor, and cannot be used until then
		init: /** @type {any} */ (null),
		template: /** @type {any} */ (null),
		namespace: options.namespace,
		preserve_whitespace: options.preserveWhitespace,
		state_fields: new Map(),
		is_standalone: false,
		is_instance: false
	};

	const module = /** @type {ESTree.Program} */ (
		walk(/** @type {AST.SvelteNode} */ (analysis.module.ast), state, global_visitors)
	);

	const instance = /** @type {ESTree.Program} */ (
		walk(
			/** @type {AST.SvelteNode} */ (analysis.instance.ast),
			{ ...state, scopes: analysis.instance.scopes, is_instance: true },
			{
				...global_visitors,
				ImportDeclaration(node) {
					state.hoisted.push(node);
					return b.empty;
				},
				ExportNamedDeclaration(node, context) {
					if (node.declaration) {
						return context.visit(node.declaration);
					}

					return b.empty;
				}
			}
		)
	);

	const template = /** @type {ESTree.Program} */ (
		walk(
			/** @type {AST.SvelteNode} */ (analysis.template.ast),
			{ ...state, scopes: analysis.template.scopes },
			// @ts-expect-error don't know, don't care
			{ ...global_visitors, ...template_visitors }
		)
	);

	/** @type {ESTree.VariableDeclarator[]} */
	const legacy_reactive_declarations = [];

	for (const [node] of analysis.reactive_statements) {
		const statement = [...state.legacy_reactive_statements].find(([n]) => n === node);
		if (statement === undefined) {
			throw new Error('Could not find reactive statement');
		}

		if (
			node.body.type === 'ExpressionStatement' &&
			node.body.expression.type === 'AssignmentExpression'
		) {
			for (const id of extract_identifiers(node.body.expression.left)) {
				const binding = analysis.instance.scope.get(id.name);
				if (binding?.kind === 'legacy_reactive') {
					legacy_reactive_declarations.push(b.declarator(id));
				}
			}
		}

		instance.body.push(statement[1]);
	}

	if (legacy_reactive_declarations.length > 0) {
		instance.body.unshift({
			type: 'VariableDeclaration',
			kind: 'let',