Component() — svelte Function Reference

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

Function javascript Compiler Transformer calls 1

Entity Profile

Compiler→ Transformer→ Component() — svelte Function Reference

Dependency Diagram

graph TD
  c091e9f5_16ea_045f_b570_48d9e86c74a4["Component()"]
  4d5d0596_8489_f0a8_d0ad_a3d9a89ca7ed["Component.js"]
  c091e9f5_16ea_045f_b570_48d9e86c74a4 -->|defined in| 4d5d0596_8489_f0a8_d0ad_a3d9a89ca7ed
  c2e078e7_8b02_06d2_5983_59b1af376889["visit_component()"]
  c091e9f5_16ea_045f_b570_48d9e86c74a4 -->|calls| c2e078e7_8b02_06d2_5983_59b1af376889
  style c091e9f5_16ea_045f_b570_48d9e86c74a4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/2-analyze/visitors/Component.js lines 9–26

export function Component(node, context) {
	const binding = context.state.scope.get(
		node.name.includes('.') ? node.name.slice(0, node.name.indexOf('.')) : node.name
	);

	node.metadata.dynamic =
		context.state.analysis.runes && // Svelte 4 required you to use svelte:component to switch components
		binding !== null &&
		(binding.kind !== 'normal' || node.name.includes('.'));

	if (binding) {
		node.metadata.expression.has_state = node.metadata.dynamic;
		node.metadata.expression.dependencies.add(binding);
		node.metadata.expression.references.add(binding);
	}

	visit_component(node, context);
}