bind_property() — svelte Function Reference

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

Function javascript ClientRuntime Hydration calls 2

Entity Profile

ClientRuntime→ Hydration→ bind_property() — svelte Function Reference

Dependency Diagram

graph TD
  2431e85a_bb39_d3e3_7c5a_639f6fee2dfc["bind_property()"]
  c3b70c5c_4392_04e8_77c1_3cef97110727["universal.js"]
  2431e85a_bb39_d3e3_7c5a_639f6fee2dfc -->|defined in| c3b70c5c_4392_04e8_77c1_3cef97110727
  7494b934_a3b8_689e_91b6_8435e26461c5["render_effect()"]
  2431e85a_bb39_d3e3_7c5a_639f6fee2dfc -->|calls| 7494b934_a3b8_689e_91b6_8435e26461c5
  20340432_01a2_6741_abf4_60ccab51cdb3["teardown()"]
  2431e85a_bb39_d3e3_7c5a_639f6fee2dfc -->|calls| 20340432_01a2_6741_abf4_60ccab51cdb3
  style 2431e85a_bb39_d3e3_7c5a_639f6fee2dfc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/bindings/universal.js lines 41–64

export function bind_property(property, event_name, element, set, get) {
	var handler = () => {
		// @ts-ignore
		set(element[property]);
	};

	element.addEventListener(event_name, handler);

	if (get) {
		render_effect(() => {
			// @ts-ignore
			element[property] = get();
		});
	} else {
		handler();
	}

	// @ts-ignore
	if (element === document.body || element === window || element === document) {
		teardown(() => {
			element.removeEventListener(event_name, handler);
		});
	}
}