prop() — svelte Function Reference

Architecture documentation for the prop() function in props.js from the svelte codebase.

Function javascript ClientRuntime Reactivity calls 7 called by 1

Entity Profile

ClientRuntime→ Reactivity→ prop() — svelte Function Reference

Dependency Diagram

graph TD
  665ade04_d03d_9b82_ca8d_aba0158bc3b7["prop()"]
  5094c0e2_0832_85dc_9c83_43e20571b709["props.js"]
  665ade04_d03d_9b82_ca8d_aba0158bc3b7 -->|defined in| 5094c0e2_0832_85dc_9c83_43e20571b709
  986e6f95_919f_827c_489d_ff0c8b9ff69d["legacy_rest_props_handler.set()"]
  986e6f95_919f_827c_489d_ff0c8b9ff69d -->|calls| 665ade04_d03d_9b82_ca8d_aba0158bc3b7
  a814b193_e12a_4037_c3c8_dfd45f3bd0bb["untrack()"]
  665ade04_d03d_9b82_ca8d_aba0158bc3b7 -->|calls| a814b193_e12a_4037_c3c8_dfd45f3bd0bb
  39208392_58c1_7201_b748_aa74d97cadb9["state()"]
  665ade04_d03d_9b82_ca8d_aba0158bc3b7 -->|calls| 39208392_58c1_7201_b748_aa74d97cadb9
  30a9ce87_f086_adc7_ccd8_8a6ffbd469fe["capture_store_binding()"]
  665ade04_d03d_9b82_ca8d_aba0158bc3b7 -->|calls| 30a9ce87_f086_adc7_ccd8_8a6ffbd469fe
  c2185023_20e1_6d21_ea2b_7ca0ea3bf380["props_invalid_value()"]
  665ade04_d03d_9b82_ca8d_aba0158bc3b7 -->|calls| c2185023_20e1_6d21_ea2b_7ca0ea3bf380
  c55b2607_d45b_c327_8826_7bdf245d80f6["proxy()"]
  665ade04_d03d_9b82_ca8d_aba0158bc3b7 -->|calls| c55b2607_d45b_c327_8826_7bdf245d80f6
  a08b6cc5_af73_1be4_d02f_3113cf8a8305["get()"]
  665ade04_d03d_9b82_ca8d_aba0158bc3b7 -->|calls| a08b6cc5_af73_1be4_d02f_3113cf8a8305
  63ee8247_ada4_9f1d_e139_0c1167cd5b1c["set()"]
  665ade04_d03d_9b82_ca8d_aba0158bc3b7 -->|calls| 63ee8247_ada4_9f1d_e139_0c1167cd5b1c
  style 665ade04_d03d_9b82_ca8d_aba0158bc3b7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/reactivity/props.js lines 278–430

export function prop(props, key, flags, fallback) {
	var runes = !legacy_mode_flag || (flags & PROPS_IS_RUNES) !== 0;
	var bindable = (flags & PROPS_IS_BINDABLE) !== 0;
	var lazy = (flags & PROPS_IS_LAZY_INITIAL) !== 0;

	var fallback_value = /** @type {V} */ (fallback);
	var fallback_dirty = true;

	var get_fallback = () => {
		if (fallback_dirty) {
			fallback_dirty = false;

			fallback_value = lazy
				? untrack(/** @type {() => V} */ (fallback))
				: /** @type {V} */ (fallback);
		}

		return fallback_value;
	};

	/** @type {((v: V) => void) | undefined} */
	var setter;

	if (bindable) {
		// Can be the case when someone does `mount(Component, props)` with `let props = $state({...})`
		// or `createClassComponent(Component, props)`
		var is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;

		setter =
			get_descriptor(props, key)?.set ??
			(is_entry_props && key in props ? (v) => (props[key] = v) : undefined);
	}

	var initial_value;
	var is_store_sub = false;

	if (bindable) {
		[initial_value, is_store_sub] = capture_store_binding(() => /** @type {V} */ (props[key]));
	} else {
		initial_value = /** @type {V} */ (props[key]);
	}

	if (initial_value === undefined && fallback !== undefined) {
		initial_value = get_fallback();

		if (setter) {
			if (runes) e.props_invalid_value(key);
			setter(initial_value);
		}
	}

	/** @type {() => V} */
	var getter;

	if (runes) {
		getter = () => {
			var value = /** @type {V} */ (props[key]);
			if (value === undefined) return get_fallback();
			fallback_dirty = true;
			return value;
		};
	} else {
		getter = () => {
			var value = /** @type {V} */ (props[key]);

			if (value !== undefined) {
				// in legacy mode, we don't revert to the fallback value
				// if the prop goes from defined to undefined. The easiest
				// way to model this is to make the fallback undefined
				// as soon as the prop has a value
				fallback_value = /** @type {V} */ (undefined);
			}

			return value === undefined ? fallback_value : value;
		};
	}

	// prop is never written to — we only need a getter
	if (runes && (flags & PROPS_IS_UPDATED) === 0) {
		return getter;
	}