observe() — svelte Function Reference

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

Function javascript ClientRuntime Hydration calls 1 called by 2

Entity Profile

ClientRuntime→ Hydration→ observe() — svelte Function Reference

Dependency Diagram

graph TD
  d86d4126_6146_ecbe_15fd_fa3db2f84672["observe()"]
  7aec7a59_607b_ef2d_909b_d619875d2f84["ResizeObserverSingleton"]
  d86d4126_6146_ecbe_15fd_fa3db2f84672 -->|defined in| 7aec7a59_607b_ef2d_909b_d619875d2f84
  aefa7170_df8d_0eaa_2303_f795592281aa["bind_resize_observer()"]
  aefa7170_df8d_0eaa_2303_f795592281aa -->|calls| d86d4126_6146_ecbe_15fd_fa3db2f84672
  3ac8a64d_6076_ef29_6f61_da1b17358bbe["bind_element_size()"]
  3ac8a64d_6076_ef29_6f61_da1b17358bbe -->|calls| d86d4126_6146_ecbe_15fd_fa3db2f84672
  a08b6cc5_af73_1be4_d02f_3113cf8a8305["get()"]
  d86d4126_6146_ecbe_15fd_fa3db2f84672 -->|calls| a08b6cc5_af73_1be4_d02f_3113cf8a8305
  style d86d4126_6146_ecbe_15fd_fa3db2f84672 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/bindings/size.js lines 30–46

	observe(element, listener) {
		var listeners = this.#listeners.get(element) || new Set();
		listeners.add(listener);

		this.#listeners.set(element, listeners);
		this.#getObserver().observe(element, this.#options);

		return () => {
			var listeners = this.#listeners.get(element);
			listeners.delete(listener);

			if (listeners.size === 0) {
				this.#listeners.delete(element);
				/** @type {ResizeObserver} */ (this.#observer).unobserve(element);
			}
		};
	}