component() — svelte Function Reference

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

Function javascript ClientRuntime LegacyBridge calls 3

Entity Profile

ClientRuntime→ LegacyBridge→ component() — svelte Function Reference

Dependency Diagram

graph TD
  3c2cd3fa_01cb_7754_d947_c844c5968e02["component()"]
  beb52c0c_aac9_0902_72a9_1450944244cf["svelte-component.js"]
  3c2cd3fa_01cb_7754_d947_c844c5968e02 -->|defined in| beb52c0c_aac9_0902_72a9_1450944244cf
  b31601aa_35ce_7827_5394_99fb97fa27d2["hydrate_next()"]
  3c2cd3fa_01cb_7754_d947_c844c5968e02 -->|calls| b31601aa_35ce_7827_5394_99fb97fa27d2
  1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b["block()"]
  3c2cd3fa_01cb_7754_d947_c844c5968e02 -->|calls| 1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b
  8783b6d3_ff2d_7032_cf54_f6a71da85e37["ensure()"]
  3c2cd3fa_01cb_7754_d947_c844c5968e02 -->|calls| 8783b6d3_ff2d_7032_cf54_f6a71da85e37
  style 3c2cd3fa_01cb_7754_d947_c844c5968e02 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/blocks/svelte-component.js lines 15–26

export function component(node, get_component, render_fn) {
	if (hydrating) {
		hydrate_next();
	}

	var branches = new BranchManager(node);

	block(() => {
		var component = get_component() ?? null;
		branches.ensure(component, component && ((target) => render_fn(target, component)));
	}, EFFECT_TRANSPARENT);
}