Home / Function/ SvelteElement() — svelte Function Reference

SvelteElement() — svelte Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  c4f05925_802b_7561_caa7_d44e5e7a50fd["SvelteElement()"]
  afdcad58_521a_672c_dc53_627e7bdc4b30["SvelteElement.js"]
  c4f05925_802b_7561_caa7_d44e5e7a50fd -->|defined in| afdcad58_521a_672c_dc53_627e7bdc4b30
  a475d4d0_a1fa_71f2_13d3_ba42155a8763["determine_namespace_for_children()"]
  c4f05925_802b_7561_caa7_d44e5e7a50fd -->|calls| a475d4d0_a1fa_71f2_13d3_ba42155a8763
  17370b4c_df64_f183_35da_1de383ea4963["build_element_attributes()"]
  c4f05925_802b_7561_caa7_d44e5e7a50fd -->|calls| 17370b4c_df64_f183_35da_1de383ea4963
  49bc6956_1326_e1db_837c_bb4db2493060["build_template()"]
  c4f05925_802b_7561_caa7_d44e5e7a50fd -->|calls| 49bc6956_1326_e1db_837c_bb4db2493060
  94797a73_c86f_f8e5_0dbd_d1012c2c1584["render()"]
  c4f05925_802b_7561_caa7_d44e5e7a50fd -->|calls| 94797a73_c86f_f8e5_0dbd_d1012c2c1584
  6487918e_a8f7_315c_caf5_9694fc4edde7["create_child_block()"]
  c4f05925_802b_7561_caa7_d44e5e7a50fd -->|calls| 6487918e_a8f7_315c_caf5_9694fc4edde7
  9cf014c4_f551_2661_0229_f990b01327ac["blockers()"]
  c4f05925_802b_7561_caa7_d44e5e7a50fd -->|calls| 9cf014c4_f551_2661_0229_f990b01327ac
  style c4f05925_802b_7561_caa7_d44e5e7a50fd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js lines 14–89

export function SvelteElement(node, context) {
	let tag = /** @type {Expression} */ (context.visit(node.tag));

	if (dev) {
		// Ensure getters/function calls aren't called multiple times.
		// If we ever start referencing `tag` more than once in prod, move this out of the if block.
		if (tag.type !== 'Identifier') {
			const tag_id = context.state.scope.generate('$$tag');
			context.state.init.push(b.const(tag_id, tag));
			tag = b.id(tag_id);
		}

		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
		if (node.fragment.nodes.length > 0) {
			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', b.thunk(tag))));
		}
	}

	const state = {
		...context.state,
		namespace: determine_namespace_for_children(node, context.state.namespace),
		template: [],
		init: []
	};

	const optimiser = new PromiseOptimiser();

	/** @type {Statement[]} */
	let statements = [];

	build_element_attributes(node, { ...context, state }, optimiser.transform);

	if (dev) {
		const location = locator(node.start);
		statements.push(
			b.stmt(
				b.call(
					'$.push_element',
					b.id('$$renderer'),
					tag,
					b.literal(location.line),
					b.literal(location.column)
				)
			)
		);
	}

	const attributes = b.block([...state.init, ...build_template(state.template)]);
	const children = /** @type {BlockStatement} */ (context.visit(node.fragment, state));

	statements.push(
		...optimiser.render([
			b.stmt(
				b.call(
					'$.element',
					b.id('$$renderer'),
					tag,
					attributes.body.length > 0 && b.thunk(attributes),
					children.body.length > 0 && b.thunk(children)
				)
			)
		])
	);

	if (dev) {
		statements.push(b.stmt(b.call('$.pop_element')));
	}

	context.state.template.push(
		...create_child_block(
			statements,
			node.metadata.expression.blockers(),
			node.metadata.expression.has_await
		)
	);
}

Domain

Subdomains

Frequently Asked Questions

What does SvelteElement() do?
SvelteElement() is a function in the svelte codebase, defined in packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js.
Where is SvelteElement() defined?
SvelteElement() is defined in packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js at line 14.
What does SvelteElement() call?
SvelteElement() calls 6 function(s): blockers, build_element_attributes, build_template, create_child_block, determine_namespace_for_children, render.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free