svelte Architecture Docs
Home / Function/ build_attribute_effect() — svelte Function Reference

build_attribute_effect() — svelte Function Reference

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

Function javascript Compiler Transformer calls 11 called by 2

Entity Profile

Dependency Diagram

graph TD
  ef858948_a3b7_f31d_ad40_16743e642d00["build_attribute_effect()"]
  7880f852_1b7b_9ea3_4e22_732f4a684bbe["element.js"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|defined in| 7880f852_1b7b_9ea3_4e22_732f4a684bbe
  1e3b81f2_cd53_e5a5_0140_a9af38facf99["RegularElement()"]
  1e3b81f2_cd53_e5a5_0140_a9af38facf99 -->|calls| ef858948_a3b7_f31d_ad40_16743e642d00
  2bb483c4_1076_90c3_46bb_acc4dec02b3b["SvelteElement()"]
  2bb483c4_1076_90c3_46bb_acc4dec02b3b -->|calls| ef858948_a3b7_f31d_ad40_16743e642d00
  e31bc2c2_91c1_b9a9_f78a_2832bddce6c5["build_attribute_value()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| e31bc2c2_91c1_b9a9_f78a_2832bddce6c5
  5ff7d39f_78e8_c057_8c8e_279f6e72149e["add()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| 5ff7d39f_78e8_c057_8c8e_279f6e72149e
  e9a2c29e_d0ca_ab9f_b86f_f22ff802db91["is_event_attribute()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| e9a2c29e_d0ca_ab9f_b86f_f22ff802db91
  524a9152_ab34_9e69_70d1_b4f6c414a673["build_class_directives_object()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| 524a9152_ab34_9e69_70d1_b4f6c414a673
  4fce48f1_e9d7_958a_ce38_30799ece4fc7["build_style_directives_object()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| 4fce48f1_e9d7_958a_ce38_30799ece4fc7
  10046df1_7862_0e3a_2d28_14faf64ff123["apply()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| 10046df1_7862_0e3a_2d28_14faf64ff123
  804afe56_25d1_9f41_dafe_adc75e952134["object()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| 804afe56_25d1_9f41_dafe_adc75e952134
  6f7809e4_1338_fe87_a5b2_2bb5d1626fdf["sync_values()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| 6f7809e4_1338_fe87_a5b2_2bb5d1626fdf
  3c8a9b45_1c84_b995_7438_57a8885c67ba["async_values()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| 3c8a9b45_1c84_b995_7438_57a8885c67ba
  7a7783f8_ffa6_0cc3_61b0_031882649535["is_ignored()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| 7a7783f8_ffa6_0cc3_61b0_031882649535
  c8d80c9d_ab6c_13c0_c85e_a9b120f82f45["blockers()"]
  ef858948_a3b7_f31d_ad40_16743e642d00 -->|calls| c8d80c9d_ab6c_13c0_c85e_a9b120f82f45
  style ef858948_a3b7_f31d_ad40_16743e642d00 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

export function build_attribute_effect(
	attributes,
	class_directives,
	style_directives,
	context,
	element,
	element_id,
	should_remove_defaults = false
) {
	/** @type {ObjectExpression['properties']} */
	const values = [];

	const memoizer = new Memoizer();

	for (const attribute of attributes) {
		if (attribute.type === 'Attribute') {
			const { value } = build_attribute_value(attribute.value, context, (value, metadata) =>
				memoizer.add(value, metadata)
			);

			if (
				is_event_attribute(attribute) &&
				(value.type === 'ArrowFunctionExpression' || value.type === 'FunctionExpression')
			) {
				// Give the event handler a stable ID so it isn't removed and readded on every update
				const id = context.state.scope.generate('event_handler');
				context.state.init.push(b.var(id, value));
				values.push(b.init(attribute.name, b.id(id)));
			} else {
				values.push(b.init(attribute.name, value));
			}
		} else {
			let value = /** @type {Expression} */ (context.visit(attribute));

			value = memoizer.add(value, attribute.metadata.expression);

			values.push(b.spread(value));
		}
	}

	if (class_directives.length) {
		values.push(
			b.prop(
				'init',
				b.array([b.id('$.CLASS')]),
				build_class_directives_object(class_directives, context, memoizer)
			)
		);
	}

	if (style_directives.length) {
		values.push(
			b.prop(
				'init',
				b.array([b.id('$.STYLE')]),
				build_style_directives_object(style_directives, context, memoizer)
			)
		);
	}

	const ids = memoizer.apply();

	context.state.init.push(
		b.stmt(
			b.call(
				'$.attribute_effect',
				element_id,
				b.arrow(ids, b.object(values)),
				memoizer.sync_values(),
				memoizer.async_values(),
				memoizer.blockers(),
				element.metadata.scoped &&
					context.state.analysis.css.hash !== '' &&
					b.literal(context.state.analysis.css.hash),
				should_remove_defaults && b.true,
				is_ignored(element, 'hydration_attribute_changed') && b.true
			)
		)
	);
}

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does build_attribute_effect() do?
build_attribute_effect() is a function in the svelte codebase, defined in packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js.
Where is build_attribute_effect() defined?
build_attribute_effect() is defined in packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js at line 22.
What does build_attribute_effect() call?
build_attribute_effect() calls 11 function(s): add, apply, async_values, blockers, build_attribute_value, build_class_directives_object, build_style_directives_object, is_event_attribute, and 3 more.
What calls build_attribute_effect()?
build_attribute_effect() is called by 2 function(s): RegularElement, SvelteElement.

Analyze Your Own Codebase

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

Try Supermodel Free