svelte 5.56.10 → 5.57.0

package/src/internal/client/dom/elements/attributes.js

@@ -26,7 +26,12 @@ import { set_class } from './class.js';
 import { set_style } from './style.js';
 import { ATTACHMENT_KEY, NAMESPACE_HTML, UNINITIALIZED } from '../../../../constants.js';
 import { branch, destroy_effect, effect, managed } from '../../reactivity/effects.js';
-import { init_select, select_option } from './bindings/select.js';
+import {
+	init_select,
+	select_option,
+	set_default_select_value,
+	set_selected
+} from './bindings/select.js';
 import { flatten } from '../../reactivity/async.js';
 
 export const CLASS = Symbol('class');
@@ -122,25 +127,6 @@ export function set_checked(element, checked) {
 	element.checked = checked;
 }
 
-/**
- * Sets the `selected` attribute on an `option` element.
- * Not set through the property because that doesn't reflect to the DOM,
- * which means it wouldn't be taken into account when a form is reset.
- * @param {HTMLOptionElement} element
- * @param {boolean} selected
- */
-export function set_selected(element, selected) {
-	if (selected) {
-		// The selected option could've changed via user selection, and
-		// setting the value without this check would set it back.
-		if (!element.hasAttribute('selected')) {
-			element.setAttribute('selected', '');
-		}
-	} else {
-		element.removeAttribute('selected');
-	}
-}
-
 /**
  * Applies the default checked property without influencing the current checked property.
  * @param {HTMLInputElement} element
@@ -201,7 +187,7 @@ export function set_attribute(element, attribute, value, skip_warning) {
 
 	if (value == null) {
 		element.removeAttribute(attribute);
-	} else if (typeof value !== 'string' && get_setters(element).includes(attribute)) {
+	} else if (typeof value !== 'string' && get_setters(element).has(attribute)) {
 		// @ts-ignore
 		element[attribute] = value;
 	} else {
@@ -252,7 +238,7 @@ export function set_custom_element_data(node, prop, value) {
 			// customElements may not be available in browser extension contexts
 			!customElements ||
 			customElements.get(node.getAttribute('is') || node.nodeName.toLowerCase())
-				? get_setters(node).includes(prop)
+				? get_setters(node).has(prop)
 				: value && typeof value === 'object')
 		) {
 			// @ts-expect-error
@@ -291,11 +277,8 @@ function set_attributes(
 	skip_warning = false
 ) {
 	if (hydrating && should_remove_defaults && element.nodeName === INPUT_TAG) {
-		var input = /** @type {HTMLInputElement} */ (element);
-		var attribute = input.type === 'checkbox' ? 'defaultChecked' : 'defaultValue';
-
-		if (!(attribute in next)) {
-			remove_input_defaults(input);
+		if (!('defaultValue' in next || 'defaultChecked' in next)) {
+			remove_input_defaults(/** @type {HTMLInputElement} */ (element));
 		}
 	}
 
@@ -313,6 +296,7 @@ function set_attributes(
 
 	var current = prev || {};
 	var is_option_element = element.nodeName === OPTION_TAG;
+	var is_select_element = element.nodeName === SELECT_TAG;
 
 	for (var key in prev) {
 		// don't null our internal $$onX listeners
@@ -449,6 +433,9 @@ function set_attributes(
 
 			var is_default = name === 'defaultValue' || name === 'defaultChecked';
 
+			// A select's default value is represented by selected options, not a property.
+			if (is_select_element && name === 'defaultValue') continue;
+
 			if (value == null && !is_custom_element && !is_default) {
 				attributes[key] = null;
 
@@ -473,7 +460,7 @@ function set_attributes(
 				}
 			} else if (
 				is_default ||
-				(setters.includes(name) && (is_custom_element || typeof value !== 'string'))
+				((is_custom_element || typeof value !== 'string') && setters.has(name))
 			) {
 				// @ts-ignore
 				element[name] = value;
@@ -534,8 +521,16 @@ export function attribute_effect(
 				skip_warning
 			);
 
-			if (inited && is_select && 'value' in next) {
-				select_option(/** @type {HTMLSelectElement} */ (element), next.value);
+			if (inited && is_select) {
+				var select = /** @type {HTMLSelectElement} */ (element);
+
+				if ('defaultValue' in next) {
+					set_default_select_value(select, next.defaultValue);
+				}
+
+				if ('value' in next) {
+					select_option(select, next.value);
+				}
 			}
 
 			for (let symbol of Object.getOwnPropertySymbols(effects)) {
@@ -560,7 +555,13 @@ export function attribute_effect(
 			var select = /** @type {HTMLSelectElement} */ (element);
 
 			effect(() => {
-				select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value, true);
+				var attrs = /** @type {Record<string | symbol, any>} */ (prev);
+
+				if ('defaultValue' in attrs) {
+					set_default_select_value(select, attrs.defaultValue);
+				}
+
+				select_option(select, attrs.value, true);
 				init_select(select);
 			});
 		}
@@ -582,7 +583,7 @@ function get_attributes(element) {
 	);
 }
 
-/** @type {Map<string, string[]>} */
+/** @type {Map<string, Set<string>>} */
 var setters_cache = new Map();
 
 /** @param {Element} element */
@@ -590,7 +591,7 @@ function get_setters(element) {
 	var cache_key = element.getAttribute('is') || element.nodeName;
 	var setters = setters_cache.get(cache_key);
 	if (setters) return setters;
-	setters_cache.set(cache_key, (setters = []));
+	setters_cache.set(cache_key, (setters = new Set()));
 
 	var descriptors;
 	var proto = element; // In the case of custom elements there might be setters on the instance
@@ -609,7 +610,7 @@ function get_setters(element) {
 				key !== 'textContent' &&
 				key !== 'innerText'
 			) {
-				setters.push(key);
+				setters.add(key);
 			}
 		}
 

package/src/internal/client/dom/elements/bindings/select.js

@@ -6,6 +6,71 @@ import * as w from '../../../warnings.js';
 import { Batch, current_batch, previous_batch } from '../../../reactivity/batch.js';
 import { async_mode_flag } from '../../../../flags/index.js';
 
+/**
+ * Sets the `selected` attribute on an option so form reset can restore it.
+ * @param {HTMLOptionElement} option
+ * @param {boolean} selected
+ */
+export function set_selected(option, selected) {
+	if (selected) {
+		if (!option.hasAttribute('selected')) option.setAttribute('selected', '');
+	} else {
+		option.removeAttribute('selected');
+	}
+}
+
+/**
+ * Sets the options a form reset should restore. The first call selects
+ * them if nothing has set a value, later calls leave the current selection alone.
+ * @param {HTMLSelectElement} select
+ * @param {any} value
+ */
+export function set_default_select_value(select, value) {
+	var mounting = !('__defaultValue' in select);
+	// @ts-expect-error
+	if (!mounting && select.__defaultValue === value) return;
+	// @ts-expect-error
+	select.__defaultValue = value;
+	apply_default_select_value(select, !mounting || '__value' in select);
+}
+
+/**
+ * Marks the options matching `__defaultValue` as selected. Without `preserve`
+ * a newly matching option gets selected, as an inserted `<option selected>` would.
+ * @param {HTMLSelectElement} select
+ * @param {boolean} preserve
+ */
+function apply_default_select_value(select, preserve) {
+	// @ts-expect-error
+	var value = select.__defaultValue;
+	var multiple = select.multiple;
+	var values = multiple ? value ?? [] : null;
+
+	if (multiple && !is_array(values)) return;
+
+	var index = select.selectedIndex;
+	var selected = preserve && multiple ? new Set(select.selectedOptions) : null;
+
+	for (var option of select.options) {
+		var option_value = get_option_value(option);
+		set_selected(
+			option,
+			multiple ? /** @type {any[]} */ (values).includes(option_value) : is(option_value, value)
+		);
+	}
+
+	if (!preserve) return;
+
+	if (selected !== null) {
+		for (option of select.options) {
+			var was_selected = selected.has(option);
+			if (option.selected !== was_selected) option.selected = was_selected;
+		}
+	} else if (select.selectedIndex !== index) {
+		select.selectedIndex = index;
+	}
+}
+
 /**
  * Selects the correct option(s) (depending on whether this is a multiple select)
  * @template V
@@ -47,17 +112,25 @@ export function select_option(select, value, mounting = false) {
 }
 
 /**
- * Selects the correct option(s) if `value` is given,
- * and then sets up a mutation observer to sync the
- * current selection to the dom when it changes. Such
- * changes could for example occur when options are
- * inside an `#each` block.
+ * Sets up a mutation observer to sync the current selection
+ * and default to the dom when the options change, for example
+ * when they are inside an `#each` block. Called once per `<select>`,
+ * by the compiled output or by `attribute_effect` for spreads.
  * @param {HTMLSelectElement} select
  */
 export function init_select(select) {
-	var observer = new MutationObserver(() => {
+	var observer = new MutationObserver((entries) => {
+		// Mutations related to `<selectedcontent>` can never affect the option list.
+		// Reacting to them could revert a user-initiated selection change, because the
+		// records are delivered as soon as any listener returns (e.g. a delegated `input`
+		// handler), which can happen before the `change` handler has updated `__value`
+		if (entries.every(is_selectedcontent_mutation)) return;
+
+		if ('__defaultValue' in select) {
+			apply_default_select_value(select, false);
+		}
+
 		if ('__value' in select) {
-			// @ts-ignore
 			select_option(select, select.__value);
 		}
 		// Deliberately don't update the potential binding value,
@@ -151,8 +224,6 @@ export function bind_select_value(select, get, set = get) {
 		select.__value = value;
 		mounting = false;
 	});
-
-	init_select(select);
 }
 
 /** @param {HTMLOptionElement} option */
@@ -164,3 +235,22 @@ function get_option_value(option) {
 		return option.value;
 	}
 }
+
+/**
+ * Returns `true` if the mutation stems from the browser mirroring the selected
+ * option's content into `<selectedcontent>`, or from us replacing the
+ * `<selectedcontent>` element with a clone of itself
+ * @param {MutationRecord} entry
+ */
+function is_selectedcontent_mutation(entry) {
+	if (/** @type {Element} */ (entry.target).closest('selectedcontent') !== null) {
+		return true;
+	}
+
+	if (entry.type === 'childList') {
+		var nodes = [...entry.addedNodes, ...entry.removedNodes];
+		return nodes.length > 0 && nodes.every((node) => node.nodeName === 'SELECTEDCONTENT');
+	}
+
+	return false;
+}

package/src/internal/client/dom/elements/bindings/this.js

@@ -1,6 +1,6 @@
 /** @import { ComponentContext, Effect } from '#client' */
 import { DESTROYING, STATE_SYMBOL } from '#client/constants';
-import { component_context } from '../../../context.js';
+import { component_context, mark_as_component } from '../../../context.js';
 import { effect, render_effect } from '../../../reactivity/effects.js';
 import { active_effect, untrack } from '../../../runtime.js';
 
@@ -23,7 +23,12 @@ function is_bound_this(bound_value, element_or_component) {
  * 										returns all the parts of the each block context that are used in the expression
  * @returns {void}
  */
-export function bind_this(element_or_component = {}, update, get_value, get_parts) {
+export function bind_this(
+	element_or_component = mark_as_component(),
+	update,
+	get_value,
+	get_parts
+) {
 	var component_effect = /** @type {ComponentContext} */ (component_context).r;
 	var parent = /** @type {Effect} */ (active_effect);
 

package/src/internal/client/dom/elements/transitions.js

@@ -337,6 +337,7 @@ export function transition(flags, element, get_fn, get_params) {
  */
 function animate(element, options, counterpart, t2, on_begin, on_finish) {
 	var is_intro = t2 === 1;
+	var aborted = false;
 
 	if (is_function(options)) {
 		// In the case of a deferred transition (such as `crossfade`), `option` will be
@@ -344,7 +345,6 @@ function animate(element, options, counterpart, t2, on_begin, on_finish) {
 		// once the DOM has been updated...
 		/** @type {Animation} */
 		var a;
-		var aborted = false;
 
 		queue_micro_task(() => {
 			if (aborted) return;
@@ -381,99 +381,112 @@ function animate(element, options, counterpart, t2, on_begin, on_finish) {
 
 	const { delay = 0, css, tick, easing = linear } = options;
 
-	var keyframes = [];
+	/** @type {globalThis.Animation} */
+	var animation;
 
-	if (is_intro && counterpart === undefined) {
-		if (tick) {
-			tick(0, 1); // TODO put in nested effect, to avoid interleaved reads/writes?
-		}
+	var get_t = () => 1 - t2;
 
-		if (css) {
-			var styles = css_to_keyframe(css(0, 1));
-			keyframes.push(styles, styles);
-		}
-	}
+	// wait a microtask before applying the initial styles and creating the dummy animation,
+	// so that transitions created in the same batch (e.g. on nested elements) all measure
+	// the DOM first (#18421). this still happens before the next paint, so the element
+	// won't be rendered without styles applied (#14732)
+	queue_micro_task(() => {
+		if (aborted) return;
 
-	var get_t = () => 1 - t2;
+		var keyframes = [];
 
-	// create a dummy animation that lasts as long as the delay (but with whatever devtools
-	// multiplier is in effect). in the common case that it is `0`, we keep it anyway so that
-	// the CSS keyframes aren't created until the DOM is updated
-	//
-	// fill forwards to prevent the element from rendering without styles applied
-	// see https://github.com/sveltejs/svelte/issues/14732
-	var animation = element.animate(keyframes, { duration: delay, fill: 'forwards' });
+		if (is_intro && counterpart === undefined) {
+			if (tick) {
+				tick(0, 1); // TODO put in nested effect, to avoid interleaved reads/writes?
+			}
 
-	animation.onfinish = () => {
-		// remove dummy animation from the stack to prevent conflict with main animation
-		animation.cancel();
+			if (css) {
+				var styles = css_to_keyframe(css(0, 1));
+				keyframes.push(styles, styles);
+			}
+		}
 
-		on_begin();
+		// create a dummy animation that lasts as long as the delay (but with whatever devtools
+		// multiplier is in effect). in the common case that it is `0`, we keep it anyway so that
+		// the CSS keyframes aren't created until the DOM is updated
+		//
+		// fill forwards to prevent the element from rendering without styles applied
+		// see https://github.com/sveltejs/svelte/issues/14732
+		animation = element.animate(keyframes, { duration: delay, fill: 'forwards' });
 
-		// for bidirectional transitions, we start from the current position,
-		// rather than doing a full intro/outro
-		var t1 = counterpart?.t() ?? 1 - t2;
-		counterpart?.abort();
+		animation.onfinish = () => {
+			// remove dummy animation from the stack to prevent conflict with main animation
+			animation.cancel();
 
-		var delta = t2 - t1;
-		var duration = /** @type {number} */ (options.duration) * Math.abs(delta);
-		var keyframes = [];
+			on_begin();
 
-		if (duration > 0) {
-			/**
-			 * Whether or not the CSS includes `overflow: hidden`, in which case we need to
-			 * add it as an inline style to work around a Safari <18 bug
-			 * TODO 6.0 remove this, if possible
-			 */
-			var needs_overflow_hidden = false;
+			// for bidirectional transitions, we start from the current position,
+			// rather than doing a full intro/outro
+			var t1 = counterpart?.t() ?? 1 - t2;
+			counterpart?.abort();
 
-			if (css) {
-				var n = Math.ceil(duration / (1000 / 60)); // `n` must be an integer, or we risk missing the `t2` value
+			var delta = t2 - t1;
+			var duration = /** @type {number} */ (options.duration) * Math.abs(delta);
+			var keyframes = [];
+
+			if (duration > 0) {
+				/**
+				 * Whether or not the CSS includes `overflow: hidden`, in which case we need to
+				 * add it as an inline style to work around a Safari <18 bug
+				 * TODO 6.0 remove this, if possible
+				 */
+				var needs_overflow_hidden = false;
 
-				for (var i = 0; i <= n; i += 1) {
-					var t = t1 + delta * easing(i / n);
-					var styles = css_to_keyframe(css(t, 1 - t));
-					keyframes.push(styles);
+				if (css) {
+					var n = Math.ceil(duration / (1000 / 60)); // `n` must be an integer, or we risk missing the `t2` value
 
-					needs_overflow_hidden ||= styles.overflow === 'hidden';
+					for (var i = 0; i <= n; i += 1) {
+						var t = t1 + delta * easing(i / n);
+						var styles = css_to_keyframe(css(t, 1 - t));
+						keyframes.push(styles);
+
+						needs_overflow_hidden ||= styles.overflow === 'hidden';
+					}
 				}
-			}
 
-			if (needs_overflow_hidden) {
-				/** @type {HTMLElement} */ (element).style.overflow = 'hidden';
-			}
+				if (needs_overflow_hidden) {
+					/** @type {HTMLElement} */ (element).style.overflow = 'hidden';
+				}
 
-			get_t = () => {
-				var time = /** @type {number} */ (
-					/** @type {globalThis.Animation} */ (animation).currentTime
-				);
+				get_t = () => {
+					var time = /** @type {number} */ (
+						/** @type {globalThis.Animation} */ (animation).currentTime
+					);
 
-				return t1 + delta * easing(time / duration);
-			};
+					return t1 + delta * easing(time / duration);
+				};
 
-			if (tick) {
-				loop(() => {
-					if (animation.playState !== 'running') return false;
+				if (tick) {
+					loop(() => {
+						if (animation.playState !== 'running') return false;
 
-					var t = get_t();
-					tick(t, 1 - t);
+						var t = get_t();
+						tick(t, 1 - t);
 
-					return true;
-				});
+						return true;
+					});
+				}
 			}
-		}
 
-		animation = element.animate(keyframes, { duration, fill: 'forwards' });
+			animation = element.animate(keyframes, { duration, fill: 'forwards' });
 
-		animation.onfinish = () => {
-			get_t = () => t2;
-			tick?.(t2, 1 - t2);
-			on_finish();
+			animation.onfinish = () => {
+				get_t = () => t2;
+				tick?.(t2, 1 - t2);
+				on_finish();
+			};
 		};
-	};
+	});
 
 	return {
 		abort: () => {
+			aborted = true;
+
 			if (animation) {
 				animation.cancel();
 				// This prevents memory leaks in Chromium

package/src/internal/client/dom/operations.js

@@ -1,5 +1,5 @@
 /** @import { Effect, TemplateNode } from '#client' */
-import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
+import { hydrate_node, hydrating, reset, set_hydrate_node } from './hydration.js';
 import { DEV } from 'esm-env';
 import { init_array_prototype_warnings } from '../dev/equality.js';
 import { get_descriptor, is_extensible } from '../../shared/utils.js';
@@ -165,6 +165,26 @@ export function first_child(node, is_text = false) {
 	return hydrate_node;
 }
 
+/**
+ * `child`, for the very common case of an element with exactly one child. Resetting the
+ * hydration cursor is part of the same step, so the compiler doesn't have to emit a
+ * separate `reset` call for every `<p>{text}</p>` in an app.
+ * Don't mark this as side-effect-free, hydration needs to walk all nodes
+ * @param {TemplateNode} node
+ * @param {boolean} [is_text]
+ * @returns {TemplateNode | null}
+ */
+export function only_child(node, is_text = false) {
+	if (!hydrating) {
+		return get_first_child(node);
+	}
+
+	var first = child(node, is_text);
+	reset(node);
+
+	return first;
+}
+
 /**
  * Don't mark this as side-effect-free, hydration needs to walk all nodes
  * @param {TemplateNode} node

package/src/internal/client/error-handling.js

@@ -3,7 +3,14 @@
 import { DEV } from 'esm-env';
 import { FILENAME } from '../../constants.js';
 import { is_firefox } from './dom/operations.js';
-import { ERROR_VALUE, BOUNDARY_EFFECT, REACTION_RAN, EFFECT, DESTROYED } from './constants.js';
+import {
+	ERROR_VALUE,
+	BOUNDARY_EFFECT,
+	REACTION_RAN,
+	EFFECT,
+	DESTROYED,
+	DESTROYING
+} from './constants.js';
 import { define_property, get_descriptor } from '../shared/utils.js';
 import { active_effect, active_reaction } from './runtime.js';
 
@@ -50,7 +57,8 @@ export function invoke_error_boundary(error, effect) {
 	}
 
 	while (effect !== null) {
-		if ((effect.f & BOUNDARY_EFFECT) !== 0) {
+		// Skip boundaries that are destroyed/destroying and cannot meaningfully handle the error.
+		if ((effect.f & BOUNDARY_EFFECT) !== 0 && (effect.f & (DESTROYED | DESTROYING)) === 0) {
 			if ((effect.f & REACTION_RAN) === 0) {
 				// we are still creating the boundary effect
 				throw error;

package/src/internal/client/index.js

@@ -33,7 +33,6 @@ export {
 	set_xlink_attribute,
 	set_value,
 	set_checked,
-	set_selected,
 	set_default_checked,
 	set_default_value,
 	CLASS,
@@ -62,7 +61,13 @@ export {
 } from './dom/elements/bindings/media.js';
 export { bind_online } from './dom/elements/bindings/navigator.js';
 export { bind_prop } from './dom/elements/bindings/props.js';
-export { bind_select_value, init_select, select_option } from './dom/elements/bindings/select.js';
+export {
+	bind_select_value,
+	init_select,
+	select_option,
+	set_selected,
+	set_default_select_value
+} from './dom/elements/bindings/select.js';
 export { bind_element_size, bind_resize_observer } from './dom/elements/bindings/size.js';
 export { bind_this } from './dom/elements/bindings/this.js';
 export {
@@ -103,6 +108,7 @@ export {
 	run,
 	save,
 	track_reactivity_loss,
+	unsave,
 	run_after_blockers,
 	wait
 } from './reactivity/async.js';
@@ -163,6 +169,7 @@ export { proxy } from './proxy.js';
 export { create_custom_element } from './dom/elements/custom-element.js';
 export {
 	child,
+	only_child,
 	first_child,
 	sibling,
 	$window as window,

package/src/internal/client/proxy.js

@@ -22,7 +22,7 @@ import {
 	flush_eager_effects,
 	set_eager_effects_deferred
 } from './reactivity/sources.js';
-import { PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
+import { COMPONENT_SYMBOL, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
 import { tag } from './dev/tracing.js';
@@ -38,8 +38,13 @@ const regex_is_valid_identifier = /^[a-zA-Z_$][a-zA-Z_$0-9]*$/;
  * @returns {T}
  */
 export function proxy(value) {
-	// if non-proxyable, or is already a proxy, return `value`
-	if (typeof value !== 'object' || value === null || STATE_SYMBOL in value) {
+	// if non-proxyable, a component instance, or already a proxy, return `value`
+	if (
+		typeof value !== 'object' ||
+		value === null ||
+		STATE_SYMBOL in value ||
+		COMPONENT_SYMBOL in value
+	) {
 		return value;
 	}