client_component() — svelte Function Reference

Architecture documentation for the client_component() function in transform-client.js from the svelte codebase.

Function javascript Compiler Transformer calls 2 called by 1

Entity Profile

Compiler→ Transformer→ client_component() — svelte Function Reference

Dependency Diagram

graph TD
  662808dd_8096_e53e_2dc5_8a5903c50472["client_component()"]
  7665e008_f37d_b860_a594_f2539a66af4e["transform-client.js"]
  662808dd_8096_e53e_2dc5_8a5903c50472 -->|defined in| 7665e008_f37d_b860_a594_f2539a66af4e
  0accce76_056a_b49e_69ca_069fe7e3e216["transform_component()"]
  0accce76_056a_b49e_69ca_069fe7e3e216 -->|calls| 662808dd_8096_e53e_2dc5_8a5903c50472
  27fded45_bc11_247b_d3fe_94831379f9ed["build_getter()"]
  662808dd_8096_e53e_2dc5_8a5903c50472 -->|calls| 27fded45_bc11_247b_d3fe_94831379f9ed
  1129e6de_ad88_9249_cdc1_424cf9bba55e["render_stylesheet()"]
  662808dd_8096_e53e_2dc5_8a5903c50472 -->|calls| 1129e6de_ad88_9249_cdc1_424cf9bba55e
  style 662808dd_8096_e53e_2dc5_8a5903c50472 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js lines 146–684

export function client_component(analysis, options) {
	/** @type {ComponentClientTransformState} */
	const state = {
		analysis,
		options,
		scope: analysis.module.scope,
		scopes: analysis.module.scopes,
		is_instance: false,
		hoisted: [b.import_all('$', 'svelte/internal/client'), ...analysis.instance_body.hoisted],
		node: /** @type {any} */ (null), // populated by the root node
		legacy_reactive_imports: [],
		legacy_reactive_statements: new Map(),
		metadata: {
			namespace: options.namespace,
			bound_contenteditable: false
		},
		events: new Set(),
		preserve_whitespace: options.preserveWhitespace,
		state_fields: new Map(),
		transform: {},
		in_constructor: false,
		instance_level_snippets: [],
		module_level_snippets: [],
		is_standalone: false,

		// these are set inside the `Fragment` visitor, and cannot be used until then
		init: /** @type {any} */ (null),
		consts: /** @type {any} */ (null),
		snippets: /** @type {any} */ (null),
		let_directives: /** @type {any} */ (null),
		update: /** @type {any} */ (null),
		after_update: /** @type {any} */ (null),
		template: /** @type {any} */ (null),
		memoizer: /** @type {any} */ (null)
	};

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

	const instance_state = {
		...state,
		transform: { ...state.transform },
		scope: analysis.instance.scope,
		scopes: analysis.instance.scopes,
		is_instance: true
	};

	const instance = /** @type {ESTree.Program} */ (
		walk(/** @type {AST.SvelteNode} */ (analysis.instance.ast), instance_state, visitors)
	);

	const template = /** @type {ESTree.Program} */ (
		walk(
			/** @type {AST.SvelteNode} */ (analysis.template.ast),
			{
				...state,
				transform: instance_state.transform,
				scope: analysis.instance.scope,
				scopes: analysis.template.scopes
			},
			visitors
		)
	);

	module.body.unshift(...state.legacy_reactive_imports);

	/** @type {ESTree.Statement[]} */
	const store_setup = [];
	/** @type {ESTree.Statement} */
	let store_init = b.empty;
	/** @type {ESTree.VariableDeclaration[]} */
	const legacy_reactive_declarations = [];

	let needs_store_cleanup = false;

	for (const [name, binding] of analysis.instance.scope.declarations) {
		if (binding.kind === 'legacy_reactive') {
			legacy_reactive_declarations.push(
				b.const(
					name,