set_class() — svelte Function Reference

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

Function javascript ClientRuntime LegacyBridge calls 1 called by 1

Entity Profile

ClientRuntime→ LegacyBridge→ set_class() — svelte Function Reference

Dependency Diagram

graph TD
  f6ad037c_58b5_d12c_2b22_fa60302bf35f["set_class()"]
  686ca949_4d11_24e5_89bf_2c8c02e51cde["class.js"]
  f6ad037c_58b5_d12c_2b22_fa60302bf35f -->|defined in| 686ca949_4d11_24e5_89bf_2c8c02e51cde
  4c70ef10_16f1_40f4_1d51_8a7169bd1dba["set_attributes()"]
  4c70ef10_16f1_40f4_1d51_8a7169bd1dba -->|calls| f6ad037c_58b5_d12c_2b22_fa60302bf35f
  efa24e01_f8d7_2cf4_7e7e_aadd84b2197e["to_class()"]
  f6ad037c_58b5_d12c_2b22_fa60302bf35f -->|calls| efa24e01_f8d7_2cf4_7e7e_aadd84b2197e
  style f6ad037c_58b5_d12c_2b22_fa60302bf35f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/class.js lines 13–51

export function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
	// @ts-expect-error need to add __className to patched prototype
	var prev = dom.__className;

	if (
		hydrating ||
		prev !== value ||
		prev === undefined // for edge case of `class={undefined}`
	) {
		var next_class_name = to_class(value, hash, next_classes);

		if (!hydrating || next_class_name !== dom.getAttribute('class')) {
			// Removing the attribute when the value is only an empty string causes
			// performance issues vs simply making the className an empty string. So
			// we should only remove the class if the value is nullish
			// and there no hash/directives :
			if (next_class_name == null) {
				dom.removeAttribute('class');
			} else if (is_html) {
				dom.className = next_class_name;
			} else {
				dom.setAttribute('class', next_class_name);
			}
		}

		// @ts-expect-error need to add __className to patched prototype
		dom.__className = value;
	} else if (next_classes && prev_classes !== next_classes) {
		for (var key in next_classes) {
			var is_present = !!next_classes[key];

			if (prev_classes == null || is_present !== !!prev_classes[key]) {
				dom.classList.toggle(key, is_present);
			}
		}
	}

	return next_classes;
}