SlotElement() — svelte Function Reference

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

Function javascript Compiler Migrator calls 2

Entity Profile

Compiler→ Migrator→ SlotElement() — svelte Function Reference

Dependency Diagram

graph TD
  d7c7f204_5254_3a3b_a07e_d464c68d1804["SlotElement()"]
  5f048234_ca03_bcdd_3172_c5bd61b7654a["SlotElement.js"]
  d7c7f204_5254_3a3b_a07e_d464c68d1804 -->|defined in| 5f048234_ca03_bcdd_3172_c5bd61b7654a
  9692c2d4_ebab_93ed_8431_6b0fd23a8b78["build_attribute_value()"]
  d7c7f204_5254_3a3b_a07e_d464c68d1804 -->|calls| 9692c2d4_ebab_93ed_8431_6b0fd23a8b78
  078b45b3_2d63_8e92_19a0_cf787f53072e["render_block()"]
  d7c7f204_5254_3a3b_a07e_d464c68d1804 -->|calls| 078b45b3_2d63_8e92_19a0_cf787f53072e
  style d7c7f204_5254_3a3b_a07e_d464c68d1804 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js lines 16–68

export function SlotElement(node, context) {
	/** @type {Property[]} */
	const props = [];

	/** @type {Expression[]} */
	const spreads = [];

	const optimiser = new PromiseOptimiser();

	let name = b.literal('default');

	for (const attribute of node.attributes) {
		if (attribute.type === 'SpreadAttribute') {
			let expression = /** @type {Expression} */ (context.visit(attribute));
			spreads.push(optimiser.transform(expression, attribute.metadata.expression));
		} else if (attribute.type === 'Attribute') {
			const value = build_attribute_value(
				attribute.value,
				context,
				optimiser.transform,
				false,
				true
			);

			if (attribute.name === 'name') {
				name = /** @type {Literal} */ (value);
			} else if (attribute.name !== 'slot') {
				props.push(b.init(attribute.name, value));
			}
		}
	}

	const props_expression =
		spreads.length === 0
			? b.object(props)
			: b.call('$.spread_props', b.array([b.object(props), ...spreads]));

	const fallback =
		node.fragment.nodes.length === 0
			? b.null
			: b.thunk(/** @type {BlockStatement} */ (context.visit(node.fragment)));

	const slot = b.call(
		'$.slot',
		b.id('$$renderer'),
		b.id('$$props'),
		name,
		props_expression,
		fallback
	);

	context.state.template.push(block_open, ...optimiser.render_block([b.stmt(slot)]), block_close);
}