HtmlTag() — svelte Function Reference

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

Function javascript Compiler Transformer calls 3

Entity Profile

Compiler→ Transformer→ HtmlTag() — svelte Function Reference

Dependency Diagram

graph TD
  5a06e8b3_7491_1847_a1ca_ee1217d2f726["HtmlTag()"]
  3e79f9e1_7f70_480a_576e_b70c54bd2638["HtmlTag.js"]
  5a06e8b3_7491_1847_a1ca_ee1217d2f726 -->|defined in| 3e79f9e1_7f70_480a_576e_b70c54bd2638
  66243dec_e2be_a66d_3992_3ea42cf964b5["build_expression()"]
  5a06e8b3_7491_1847_a1ca_ee1217d2f726 -->|calls| 66243dec_e2be_a66d_3992_3ea42cf964b5
  7a7783f8_ffa6_0cc3_61b0_031882649535["is_ignored()"]
  5a06e8b3_7491_1847_a1ca_ee1217d2f726 -->|calls| 7a7783f8_ffa6_0cc3_61b0_031882649535
  c8d80c9d_ab6c_13c0_c85e_a9b120f82f45["blockers()"]
  5a06e8b3_7491_1847_a1ca_ee1217d2f726 -->|calls| c8d80c9d_ab6c_13c0_c85e_a9b120f82f45
  style 5a06e8b3_7491_1847_a1ca_ee1217d2f726 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js lines 11–53

export function HtmlTag(node, context) {
	context.state.template.push_comment();

	const has_await = node.metadata.expression.has_await;
	const has_blockers = node.metadata.expression.has_blockers();

	const expression = build_expression(context, node.expression, node.metadata.expression);
	const html = has_await ? b.call('$.get', b.id('$$html')) : expression;

	const is_svg = context.state.metadata.namespace === 'svg';
	const is_mathml = context.state.metadata.namespace === 'mathml';

	const statement = b.stmt(
		b.call(
			'$.html',
			context.state.node,
			b.thunk(html),
			is_svg && b.true,
			is_mathml && b.true,
			is_ignored(node, 'hydration_html_changed') && b.true
		)
	);

	// push into init, so that bindings run afterwards, which might trigger another run and override hydration
	if (has_await || has_blockers) {
		context.state.init.push(
			b.stmt(
				b.call(
					'$.async',
					context.state.node,
					node.metadata.expression.blockers(),
					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
					b.arrow(
						has_await ? [context.state.node, b.id('$$html')] : [context.state.node],
						b.block([statement])
					)
				)
			)
		);
	} else {
		context.state.init.push(statement);
	}
}