svelte 5.56.9 → 5.57.0

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;
 	}
 

package/src/internal/client/reactivity/async.js

@@ -8,7 +8,6 @@ import {
 	set_component_context,
 	set_dev_stack
 } from '../context.js';
-import { Boundary } from '../dom/blocks/boundary.js';
 import { invoke_error_boundary } from '../error-handling.js';
 import {
 	active_effect,
@@ -25,7 +24,6 @@ import {
 	set_reactivity_loss_tracker
 } from './deriveds.js';
 import { aborted } from './effects.js';
-import { queue_micro_task } from '../dom/task.js';
 
 /**
  * @param {Blocker[]} blockers
@@ -156,6 +154,9 @@ export function capture() {
 	};
 }
 
+/** `true` between a `save` thunk restoring a context and the end of that synchronous segment */
+var restored = false;
+
 /**
  * Wraps an `await` expression in such a way that the effect context that was
  * active before the expression evaluated can be reapplied afterwards —
@@ -166,15 +167,32 @@ export function capture() {
  */
 export async function save(promise) {
 	var restore = capture();
+	// the context restored by an earlier `save` in this expression must not
+	// outlive the synchronous segment that is about to end at this `await`
+	unsave();
 	var value = await promise;
 
 	return () => {
 		restore();
-		queue_micro_task(unset_context);
+		restored = true;
 		return value;
 	};
 }
 
+/**
+ * Unset the context if a `save` thunk restored it in the current synchronous segment,
+ * so that a foreign microtask can never run inside a restored reaction context.
+ * Called at every suspension point, and at the end of async expression bodies —
+ * `async () => (await $.save(a))().b` becomes `async () => { try { return (await $.save(a))().b; } finally { $.unsave(); } }`
+ * @template T
+ * @param {T} [value]
+ * @returns {T}
+ */
+export function unsave(value) {
+	if (restored) unset_context();
+	return /** @type {T} */ (value);
+}
+
 /**
  * Reset `current_async_effect` after the `promise` resolves, so
  * that we can emit `await_reactivity_loss` warnings
@@ -183,6 +201,7 @@ export async function save(promise) {
  * @returns {Promise<() => T>}
  */
 export async function track_reactivity_loss(promise) {
+	unsave();
 	var previous_reactivity_loss_tracker = reactivity_loss_tracker;
 	// Ensure that unrelated reads after an async operation is kicked off don't cause false positives
 	queueMicrotask(() => {
@@ -269,6 +288,7 @@ export async function* for_await_track_reactivity_loss(iterable) {
 }
 
 export function unset_context(deactivate_batch = true) {
+	restored = false;
 	set_active_effect(null);
 	set_active_reaction(null);
 	set_component_context(null);

package/src/internal/client/reactivity/batch.js

@@ -420,6 +420,7 @@ export class Batch {
 		}
 
 		if (next_batch !== null) {
+			old_values.clear();
 			next_batch.#process();
 		}
 	}

package/src/internal/client/reactivity/effects.js

@@ -34,8 +34,10 @@ import {
 	ASYNC,
 	CONNECTED,
 	MANAGED_EFFECT,
-	DESTROYING
+	DESTROYING,
+	PAUSED
 } from '#client/constants';
+import { invoke_error_boundary } from '../error-handling.js';
 import * as e from '../errors.js';
 import { DEV } from 'esm-env';
 import { define_property } from '../../shared/utils.js';
@@ -449,6 +451,11 @@ export function execute_effect_teardown(effect) {
 		set_active_reaction(null);
 		try {
 			teardown.call(null);
+		} catch (error) {
+			// Route teardown errors through the boundary system so that a live
+			// ancestor <svelte:boundary> can handle them. Boundaries that are
+			// themselves mid-teardown are skipped by invoke_error_boundary.
+			invoke_error_boundary(error, effect.parent);
 		} finally {
 			set_is_destroying_effect(previously_destroying_effect);
 			set_active_reaction(previous_reaction);
@@ -610,6 +617,7 @@ export function pause_effect(effect, callback, destroy = true) {
 	/** @type {TransitionManager[]} */
 	var transitions = [];
 
+	effect.f |= PAUSED;
 	pause_children(effect, transitions, true);
 
 	var fn = () => {
@@ -677,6 +685,7 @@ function pause_children(effect, transitions, local) {
  * @param {Effect} effect
  */
 export function resume_effect(effect) {
+	effect.f &= ~PAUSED;
 	resume_children(effect, true);
 }
 
@@ -685,6 +694,10 @@ export function resume_effect(effect) {
  * @param {boolean} local
  */
 function resume_children(effect, local) {
+	// this subtree was paused for its own reasons (e.g. a block whose condition
+	// is still false) — its controller will resume or destroy it
+	if ((effect.f & PAUSED) !== 0) return;
+
 	if ((effect.f & INERT) === 0) return;
 	effect.f ^= INERT;
 

package/src/internal/client/reactivity/sources.js

@@ -180,7 +180,13 @@ export function set(source, value, should_proxy = false) {
  */
 export function internal_set(source, value, updated_during_traversal = null) {
 	if (!source.equals(value)) {
-		old_values.set(source, is_destroying_effect ? value : source.v);
+		if (is_destroying_effect) {
+			old_values.set(source, value);
+		} else if (!old_values.has(source)) {
+			// only record the value from before the first write in this flush, otherwise a
+			// teardown would see the value from before whichever write happened to be last
+			old_values.set(source, source.v);
+		}
 
 		var batch = Batch.ensure();
 		batch.capture(source, value);

package/src/internal/client/render.js

@@ -10,7 +10,7 @@ import {
 } from './dom/operations.js';
 import { HYDRATION_END, HYDRATION_ERROR, HYDRATION_START } from '../../constants.js';
 import { active_effect } from './runtime.js';
-import { push, pop, component_context } from './context.js';
+import { push, pop, component_context, mark_as_component } from './context.js';
 import { component_root } from './reactivity/effects.js';
 import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from './dom/hydration.js';
 import { array_from } from '../shared/utils.js';
@@ -23,7 +23,7 @@ import * as w from './warnings.js';
 import * as e from './errors.js';
 import { assign_nodes } from './dom/template.js';
 import { is_passive_event } from '../../utils.js';
-import { COMMENT_NODE, STATE_SYMBOL, TEXT_CACHE } from './constants.js';
+import { COMMENT_NODE, TEXT_CACHE } from './constants.js';
 import { boundary } from './dom/blocks/boundary.js';
 
 /**
@@ -193,7 +193,7 @@ function _mount(
 
 				should_intro = intro;
 				// @ts-expect-error the public typings are not what the actual function looks like
-				component = Component(anchor_node, props) || {};
+				component = Component(anchor_node, props) || mark_as_component();
 				should_intro = true;
 
 				if (hydrating) {
@@ -323,11 +323,7 @@ export function unmount(component, options) {
 	}
 
 	if (DEV) {
-		if (STATE_SYMBOL in component) {
-			w.state_proxy_unmount();
-		} else {
-			w.lifecycle_double_unmount();
-		}
+		w.lifecycle_double_unmount();
 	}
 
 	return Promise.resolve();

package/src/internal/client/runtime.js

@@ -133,7 +133,7 @@ export function set_untracked_writes(value) {
  **/
 export let write_version = 1;
 
-/** @type {number} Used to version each read of a source of derived to avoid duplicating depedencies inside a reaction */
+/** @type {number} Used to version each read of a source of derived to avoid duplicating dependencies inside a reaction */
 let read_version = 0;
 
 export let update_version = read_version;
@@ -258,37 +258,7 @@ export function update_reaction(reaction) {
 		var fn = /** @type {Function} */ (reaction.fn);
 		var result = fn();
 		reaction.f |= REACTION_RAN;
-		var deps = reaction.deps;
-
-		// Don't remove reactions during fork;
-		// they must remain for when fork is discarded
-		var is_fork = current_batch?.is_fork;
-
-		if (new_deps !== null) {
-			var i;
-
-			if (!is_fork) {
-				remove_reactions(reaction, skipped_deps);
-			}
-
-			if (deps !== null && skipped_deps > 0) {
-				deps.length = skipped_deps + new_deps.length;
-				for (i = 0; i < new_deps.length; i++) {
-					deps[skipped_deps + i] = new_deps[i];
-				}
-			} else {
-				reaction.deps = deps = new_deps;
-			}
-
-			if (effect_tracking() && (reaction.f & CONNECTED) !== 0) {
-				for (i = skipped_deps; i < deps.length; i++) {
-					(deps[i].reactions ??= []).push(reaction);
-				}
-			}
-		} else if (!is_fork && deps !== null && skipped_deps < deps.length) {
-			remove_reactions(reaction, skipped_deps);
-			deps.length = skipped_deps;
-		}
+		var deps = update_dependencies(reaction);
 
 		// If we're inside an effect and we have untracked writes, then we need to
 		// ensure that if any of those untracked writes result in re-invalidation
@@ -300,7 +270,7 @@ export function update_reaction(reaction) {
 			deps !== null &&
 			(reaction.f & (DERIVED | MAYBE_DIRTY | DIRTY)) === 0
 		) {
-			for (i = 0; i < /** @type {Source[]} */ (untracked_writes).length; i++) {
+			for (var i = 0; i < /** @type {Source[]} */ (untracked_writes).length; i++) {
 				schedule_possible_effect_self_invalidation(
 					untracked_writes[i],
 					/** @type {Effect} */ (reaction)
@@ -344,6 +314,9 @@ export function update_reaction(reaction) {
 
 		return result;
 	} catch (error) {
+		// still commit the deps read before the throw, otherwise deriveds connected by this run keep no reader and the reaction never re-runs when they change
+		update_dependencies(reaction);
+
 		return handle_error(error);
 	} finally {
 		reaction.f ^= REACTION_IS_UPDATING;
@@ -358,6 +331,45 @@ export function update_reaction(reaction) {
 	}
 }
 
+/**
+ * @param {Reaction} reaction
+ */
+function update_dependencies(reaction) {
+	var deps = reaction.deps;
+
+	// Don't remove reactions during fork;
+	// they must remain for when fork is discarded
+	var is_fork = current_batch?.is_fork;
+
+	if (new_deps !== null) {
+		var i;
+
+		if (!is_fork) {
+			remove_reactions(reaction, skipped_deps);
+		}
+
+		if (deps !== null && skipped_deps > 0) {
+			deps.length = skipped_deps + new_deps.length;
+			for (i = 0; i < new_deps.length; i++) {
+				deps[skipped_deps + i] = new_deps[i];
+			}
+		} else {
+			reaction.deps = deps = new_deps;
+		}
+
+		if (effect_tracking() && (reaction.f & CONNECTED) !== 0) {
+			for (i = skipped_deps; i < deps.length; i++) {
+				(deps[i].reactions ??= []).push(reaction);
+			}
+		}
+	} else if (!is_fork && deps !== null && skipped_deps < deps.length) {
+		remove_reactions(reaction, skipped_deps);
+		deps.length = skipped_deps;
+	}
+
+	return deps;
+}
+
 /**
  * @template V
  * @param {Reaction} signal

package/src/internal/client/warnings.js

@@ -247,17 +247,6 @@ export function state_proxy_equality_mismatch(operator) {
 	}
 }
 
-/**
- * Tried to unmount a state proxy, rather than a component
- */
-export function state_proxy_unmount() {
-	if (DEV) {
-		console.warn(`%c[svelte] state_proxy_unmount\n%cTried to unmount a state proxy, rather than a component\nhttps://svelte.dev/e/state_proxy_unmount`, bold, normal);
-	} else {
-		console.warn(`https://svelte.dev/e/state_proxy_unmount`);
-	}
-}
-
 /**
  * A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called
  */

package/src/internal/server/abort-signal.js

@@ -1,13 +1,12 @@
-import { STALE_REACTION } from '#client/constants';
+import { ssr_context } from './context.js';
 
-/** @type {AbortController | null} */
-let controller = null;
+export function getAbortSignal() {
+	let context = ssr_context;
 
-export function abort() {
-	controller?.abort(STALE_REACTION);
-	controller = null;
-}
+	while (context !== null) {
+		if (context.r !== null) return context.r.global.get_abort_signal();
+		context = context.p;
+	}
 
-export function getAbortSignal() {
-	return (controller ??= new AbortController()).signal;
+	return new AbortController().signal;
 }