init_select() — svelte Function Reference

Architecture documentation for the init_select() function in select.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 2 called by 2

Entity Profile

ClientRuntime→ Hydration→ init_select() — svelte Function Reference

Dependency Diagram

graph TD
  69a43253_5c15_5f06_b28b_0c8b251c8edd["init_select()"]
  dbe1ea86_6e94_eeeb_a2d1_1db78ca967bc["select.js"]
  69a43253_5c15_5f06_b28b_0c8b251c8edd -->|defined in| dbe1ea86_6e94_eeeb_a2d1_1db78ca967bc
  9a87a496_4e7d_9214_8bba_7bb2e3e47939["attribute_effect()"]
  9a87a496_4e7d_9214_8bba_7bb2e3e47939 -->|calls| 69a43253_5c15_5f06_b28b_0c8b251c8edd
  c085d4db_2942_3c89_a472_21c20593b124["bind_select_value()"]
  c085d4db_2942_3c89_a472_21c20593b124 -->|calls| 69a43253_5c15_5f06_b28b_0c8b251c8edd
  35049132_3e86_afd7_a475_924b092a0c2b["select_option()"]
  69a43253_5c15_5f06_b28b_0c8b251c8edd -->|calls| 35049132_3e86_afd7_a475_924b092a0c2b
  20340432_01a2_6741_abf4_60ccab51cdb3["teardown()"]
  69a43253_5c15_5f06_b28b_0c8b251c8edd -->|calls| 20340432_01a2_6741_abf4_60ccab51cdb3
  style 69a43253_5c15_5f06_b28b_0c8b251c8edd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/bindings/select.js lines 56–78

export function init_select(select) {
	var observer = new MutationObserver(() => {
		// @ts-ignore
		select_option(select, select.__value);
		// Deliberately don't update the potential binding value,
		// the model should be preserved unless explicitly changed
	});

	observer.observe(select, {
		// Listen to option element changes
		childList: true,
		subtree: true, // because of <optgroup>
		// Listen to option element value attribute changes
		// (doesn't get notified of select value changes,
		// because that property is not reflected as an attribute)
		attributes: true,
		attributeFilter: ['value']
	});

	teardown(() => {
		observer.disconnect();
	});
}