build_set_style() — svelte Function Reference

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

Function javascript Compiler Transformer calls 5 called by 1

Entity Profile

Compiler→ Transformer→ build_set_style() — svelte Function Reference

Dependency Diagram

graph TD
  9e463b1e_1f97_8c97_f5f2_bccfb0ffe03b["build_set_style()"]
  7880f852_1b7b_9ea3_4e22_732f4a684bbe["element.js"]
  9e463b1e_1f97_8c97_f5f2_bccfb0ffe03b -->|defined in| 7880f852_1b7b_9ea3_4e22_732f4a684bbe
  1e3b81f2_cd53_e5a5_0140_a9af38facf99["RegularElement()"]
  1e3b81f2_cd53_e5a5_0140_a9af38facf99 -->|calls| 9e463b1e_1f97_8c97_f5f2_bccfb0ffe03b
  e31bc2c2_91c1_b9a9_f78a_2832bddce6c5["build_attribute_value()"]
  9e463b1e_1f97_8c97_f5f2_bccfb0ffe03b -->|calls| e31bc2c2_91c1_b9a9_f78a_2832bddce6c5
  5ff7d39f_78e8_c057_8c8e_279f6e72149e["add()"]
  9e463b1e_1f97_8c97_f5f2_bccfb0ffe03b -->|calls| 5ff7d39f_78e8_c057_8c8e_279f6e72149e
  4fce48f1_e9d7_958a_ce38_30799ece4fc7["build_style_directives_object()"]
  9e463b1e_1f97_8c97_f5f2_bccfb0ffe03b -->|calls| 4fce48f1_e9d7_958a_ce38_30799ece4fc7
  3b2a4fcc_2df2_7057_21b4_4cac59b8df61["is_async()"]
  9e463b1e_1f97_8c97_f5f2_bccfb0ffe03b -->|calls| 3b2a4fcc_2df2_7057_21b4_4cac59b8df61
  804afe56_25d1_9f41_dafe_adc75e952134["object()"]
  9e463b1e_1f97_8c97_f5f2_bccfb0ffe03b -->|calls| 804afe56_25d1_9f41_dafe_adc75e952134
  style 9e463b1e_1f97_8c97_f5f2_bccfb0ffe03b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js lines 226–263

export function build_set_style(node_id, attribute, style_directives, context) {
	let { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
		context.state.memoizer.add(value, metadata)
	);

	/** @type {Identifier | undefined} */
	let previous_id;

	/** @type {ObjectExpression | Identifier | undefined} */
	let prev;

	/** @type {Expression | undefined} */
	let next;

	if (style_directives.length) {
		next = build_style_directives_object(style_directives, context);
		has_state ||= style_directives.some(
			(d) => d.metadata.expression.has_state || d.metadata.expression.is_async()
		);

		if (has_state) {
			previous_id = b.id(context.state.scope.generate('styles'));
			context.state.init.push(b.declaration('let', [b.declarator(previous_id)]));
			prev = previous_id;
		} else {
			prev = b.object([]);
		}
	}

	/** @type {Expression} */
	let set_style = b.call('$.set_style', node_id, value, prev, next);

	if (previous_id) {
		set_style = b.assignment('=', previous_id, set_style);
	}

	(has_state ? context.state.update : context.state.init).push(b.stmt(set_style));
}