svelte 5.57.1 → 5.57.2

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

@@ -298,182 +298,202 @@ function set_attributes(
 	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
-		if (!(key in next) && key[0] + key[1] !== '$$') {
-			next[key] = null;
-		}
-	}
-
-	if (next.class) {
-		next.class = clsx(next.class);
-	} else if (css_hash || next[CLASS]) {
-		next.class = null; /* force call to set_class() */
-	}
-
-	if (next[STYLE]) {
-		next.style ??= null; /* force call to set_style() */
-	}
-
-	var setters = get_setters(element);
-
-	if (element.nodeName === INPUT_TAG && 'type' in next && ('value' in next || '__value' in next)) {
-		var type = next.type;
-
-		if (type !== current.type || (type === undefined && element.hasAttribute('type'))) {
-			current.type = type;
-			set_attribute(element, 'type', type, skip_warning);
+	try {
+		for (var key in prev) {
+			// don't null our internal $$onX listeners
+			if (!(key in next) && key[0] + key[1] !== '$$') {
+				next[key] = null;
+			}
 		}
-	}
 
-	// since key is captured we use const
-	for (const key in next) {
-		// let instead of var because referenced in a closure
-		let value = next[key];
-
-		// Up here because we want to do this for the initial value, too, even if it's undefined,
-		// and this wouldn't be reached in case of undefined because of the equality check below
-		if (is_option_element && key === 'value' && value == null) {
-			// The <option> element is a special case because removing the value attribute means
-			// the value is set to the text content of the option element, and setting the value
-			// to null or undefined means the value is set to the string "null" or "undefined".
-			// To align with how we handle this case in non-spread-scenarios, this logic is needed.
-			// There's a super-edge-case bug here that is left in in favor of smaller code size:
-			// Because of the "set missing props to null" logic above, we can't differentiate
-			// between a missing value and an explicitly set value of null or undefined. That means
-			// that once set, the value attribute of an <option> element can't be removed. This is
-			// a very rare edge case, and removing the attribute altogether isn't possible either
-			// for the <option value={undefined}> case, so we're not losing any functionality here.
-			// @ts-ignore
-			element.value = element.__value = '';
-			current[key] = value;
-			continue;
+		if (next.class) {
+			next.class = clsx(next.class);
+		} else if (css_hash || next[CLASS]) {
+			next.class = null; /* force call to set_class() */
 		}
 
-		if (key === 'class') {
-			var is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
-			set_class(element, is_html, value, css_hash, prev?.[CLASS], next[CLASS]);
-			current[key] = value;
-			current[CLASS] = next[CLASS];
-			continue;
+		if (next[STYLE]) {
+			next.style ??= null; /* force call to set_style() */
 		}
 
-		if (key === 'style') {
-			set_style(element, value, prev?.[STYLE], next[STYLE]);
-			current[key] = value;
-			current[STYLE] = next[STYLE];
-			continue;
-		}
+		var setters = get_setters(element);
 
-		var prev_value = current[key];
+		if (
+			element.nodeName === INPUT_TAG &&
+			'type' in next &&
+			('value' in next || '__value' in next)
+		) {
+			var type = next.type;
 
-		// Skip if value is unchanged, unless it's `undefined` and the element still has the attribute
-		if (value === prev_value && !(value === undefined && element.hasAttribute(key))) {
-			continue;
+			if (type !== current.type || (type === undefined && element.hasAttribute('type'))) {
+				current.type = type;
+				set_attribute(element, 'type', type, skip_warning);
+			}
 		}
 
-		current[key] = value;
-
-		var prefix = key[0] + key[1]; // this is faster than key.slice(0, 2)
-		if (prefix === '$$') continue;
+		// since key is captured we use const
+		for (const key in next) {
+			// let instead of var because referenced in a closure
+			let value = next[key];
+
+			// Up here because we want to do this for the initial value, too, even if it's undefined,
+			// and this wouldn't be reached in case of undefined because of the equality check below
+			if (is_option_element && key === 'value' && value == null) {
+				// The <option> element is a special case because removing the value attribute means
+				// the value is set to the text content of the option element, and setting the value
+				// to null or undefined means the value is set to the string "null" or "undefined".
+				// To align with how we handle this case in non-spread-scenarios, this logic is needed.
+				// There's a super-edge-case bug here that is left in in favor of smaller code size:
+				// Because of the "set missing props to null" logic above, we can't differentiate
+				// between a missing value and an explicitly set value of null or undefined. That means
+				// that once set, the value attribute of an <option> element can't be removed. This is
+				// a very rare edge case, and removing the attribute altogether isn't possible either
+				// for the <option value={undefined}> case, so we're not losing any functionality here.
+				// @ts-ignore
+				element.value = element.__value = '';
+				current[key] = value;
+				continue;
+			}
 
-		if (prefix === 'on') {
-			/** @type {{ capture?: true }} */
-			const opts = {};
-			const event_handle_key = '$$' + key;
-			let event_name = key.slice(2);
-			var is_delegated = can_delegate_event(event_name);
+			if (key === 'class') {
+				var is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+				set_class(element, is_html, value, css_hash, prev?.[CLASS], next[CLASS]);
+				current[key] = value;
+				current[CLASS] = next[CLASS];
+				continue;
+			}
 
-			if (is_capture_event(event_name)) {
-				event_name = event_name.slice(0, -7);
-				opts.capture = true;
+			if (key === 'style') {
+				set_style(element, value, prev?.[STYLE], next[STYLE]);
+				current[key] = value;
+				current[STYLE] = next[STYLE];
+				continue;
 			}
 
-			if (!is_delegated && prev_value) {
-				// Listening to same event but different handler -> our handle function below takes care of this
-				// If we were to remove and add listeners in this case, it could happen that the event is "swallowed"
-				// (the browser seems to not know yet that a new one exists now) and doesn't reach the handler
-				// https://github.com/sveltejs/svelte/issues/11903
-				if (value != null) continue;
+			var prev_value = current[key];
 
-				element.removeEventListener(event_name, current[event_handle_key], opts);
-				current[event_handle_key] = null;
+			// Skip if value is unchanged, unless it's `undefined` and the element still has the attribute
+			if (value === prev_value && !(value === undefined && element.hasAttribute(key))) {
+				continue;
 			}
 
-			if (is_delegated) {
-				delegated(event_name, element, value);
-				delegate([event_name]);
-			} else if (value != null) {
-				/**
-				 * @this {any}
-				 * @param {Event} evt
-				 */
-				function handle(evt) {
-					current[key].call(this, evt);
+			current[key] = value;
+
+			var prefix = key[0] + key[1]; // this is faster than key.slice(0, 2)
+			if (prefix === '$$') continue;
+
+			if (prefix === 'on') {
+				/** @type {{ capture?: true }} */
+				const opts = {};
+				const event_handle_key = '$$' + key;
+				let event_name = key.slice(2);
+				var is_delegated = can_delegate_event(event_name);
+
+				if (is_capture_event(event_name)) {
+					event_name = event_name.slice(0, -7);
+					opts.capture = true;
 				}
 
-				current[event_handle_key] = create_event(event_name, element, handle, opts);
-			}
-		} else if (key === 'style') {
-			// avoid using the setter
-			set_attribute(element, key, value);
-		} else if (key === 'autofocus') {
-			autofocus(/** @type {HTMLElement} */ (element), Boolean(value));
-		} else if (!is_custom_element && (key === '__value' || (key === 'value' && value != null))) {
-			// @ts-ignore We're not running this for custom elements because __value is actually
-			// how Lit stores the current value on the element, and messing with that would break things.
-			element.value = element.__value = value;
-		} else if (key === 'selected' && is_option_element) {
-			set_selected(/** @type {HTMLOptionElement} */ (element), value);
-		} else {
-			var name = key;
-			if (!preserve_attribute_case) {
-				name = normalize_attribute(name);
-			}
+				if (!is_delegated && prev_value) {
+					// Listening to same event but different handler -> our handle function below takes care of this
+					// If we were to remove and add listeners in this case, it could happen that the event is "swallowed"
+					// (the browser seems to not know yet that a new one exists now) and doesn't reach the handler
+					// https://github.com/sveltejs/svelte/issues/11903
+					if (value != null) continue;
 
-			var is_default = name === 'defaultValue' || name === 'defaultChecked';
+					element.removeEventListener(event_name, current[event_handle_key], opts);
+					current[event_handle_key] = null;
+				}
 
-			// A select's default value is represented by selected options, not a property.
-			if (is_select_element && name === 'defaultValue') continue;
+				if (is_delegated) {
+					delegated(event_name, element, value);
+					delegate([event_name]);
+				} else if (value != null) {
+					/**
+					 * @this {any}
+					 * @param {Event} evt
+					 */
+					function handle(evt) {
+						current[key].call(this, evt);
+					}
 
-			if (value == null && !is_custom_element && !is_default) {
-				attributes[key] = null;
+					current[event_handle_key] = create_event(event_name, element, handle, opts);
+				}
+			} else if (key === 'style') {
+				// avoid using the setter
+				set_attribute(element, key, value);
+			} else if (key === 'autofocus') {
+				autofocus(/** @type {HTMLElement} */ (element), Boolean(value));
+			} else if (!is_custom_element && (key === '__value' || (key === 'value' && value != null))) {
+				// @ts-ignore We're not running this for custom elements because __value is actually
+				// how Lit stores the current value on the element, and messing with that would break things.
+				element.__value = value;
+				// we don't set the value if it hasn't changed. This supports invalid number inputs like `1e` because
+				// 1. user types 1e
+				// 2. the state is updated reading e.target.value which is ''
+				// 3. the spreaded value is ''
+				// 4. updating input.value would thus, clear the user value
+				if (
+					prev_value == null ||
+					// @ts-ignore
+					element.value !== value ||
+					(value === 0 && element.nodeName === PROGRESS_TAG)
+				) {
+					// @ts-ignore
+					element.value = value;
+				}
+			} else if (key === 'selected' && is_option_element) {
+				set_selected(/** @type {HTMLOptionElement} */ (element), value);
+			} else {
+				var name = key;
+				if (!preserve_attribute_case) {
+					name = normalize_attribute(name);
+				}
 
-				if (name === 'value' || name === 'checked') {
-					// removing value/checked also removes defaultValue/defaultChecked — preserve
-					let input = /** @type {HTMLInputElement} */ (element);
-					const use_default = prev === undefined;
-					if (name === 'value') {
-						let previous = input.defaultValue;
-						input.removeAttribute(name);
-						input.defaultValue = previous;
-						// @ts-ignore
-						input.value = input.__value = use_default ? previous : null;
+				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;
+
+					if (name === 'value' || name === 'checked') {
+						// removing value/checked also removes defaultValue/defaultChecked — preserve
+						let input = /** @type {HTMLInputElement} */ (element);
+						const use_default = prev === undefined;
+						if (name === 'value') {
+							let previous = input.defaultValue;
+							input.removeAttribute(name);
+							input.defaultValue = previous;
+							// @ts-ignore
+							input.value = input.__value = use_default ? previous : null;
+						} else {
+							let previous = input.defaultChecked;
+							input.removeAttribute(name);
+							input.defaultChecked = previous;
+							input.checked = use_default ? previous : false;
+						}
 					} else {
-						let previous = input.defaultChecked;
-						input.removeAttribute(name);
-						input.defaultChecked = previous;
-						input.checked = use_default ? previous : false;
+						element.removeAttribute(key);
 					}
-				} else {
-					element.removeAttribute(key);
+				} else if (
+					is_default ||
+					((is_custom_element || typeof value !== 'string') && setters.has(name))
+				) {
+					// @ts-ignore
+					element[name] = value;
+					// remove it from attributes's cache
+					if (name in attributes) attributes[name] = UNINITIALIZED;
+				} else if (typeof value !== 'function') {
+					set_attribute(element, name, value, skip_warning);
 				}
-			} else if (
-				is_default ||
-				((is_custom_element || typeof value !== 'string') && setters.has(name))
-			) {
-				// @ts-ignore
-				element[name] = value;
-				// remove it from attributes's cache
-				if (name in attributes) attributes[name] = UNINITIALIZED;
-			} else if (typeof value !== 'function') {
-				set_attribute(element, name, value, skip_warning);
 			}
 		}
-	}
-
-	if (is_hydrating_custom_element) {
-		set_hydrating(true);
+	} finally {
+		if (is_hydrating_custom_element) {
+			set_hydrating(true);
+		}
 	}
 
 	return current;

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

@@ -1,4 +1,4 @@
-import { listen } from './shared.js';
+import { listen, without_reactive_context } from './shared.js';
 
 /**
  * @param {(activeElement: Element | null) => void} update
@@ -12,6 +12,7 @@ export function bind_active_element(update) {
 			return;
 		}
 
-		update(document.activeElement);
+		// Removing the focused element fires `focusout` while an effect is running
+		without_reactive_context(() => update(document.activeElement));
 	});
 }

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

@@ -359,9 +359,9 @@ function animate(element, options, counterpart, t2, on_begin, on_finish) {
 				aborted = true;
 				a?.abort();
 			},
-			deactivate: () => a.deactivate(),
-			reset: () => a.reset(),
-			t: () => a.t()
+			deactivate: () => a?.deactivate(),
+			reset: () => a?.reset(),
+			t: () => a?.t() ?? 1 - t2
 		};
 	}
 

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

@@ -1,7 +1,7 @@
 /** @import { Derived, Effect } from '#client' */
 /** @import { Boundary } from './dom/blocks/boundary.js' */
 import { DEV } from 'esm-env';
-import { FILENAME } from '../../constants.js';
+import { FILENAME, HYDRATION_ERROR } from '../../constants.js';
 import { is_firefox } from './dom/operations.js';
 import {
 	ERROR_VALUE,
@@ -52,6 +52,10 @@ export function handle_error(error) {
  * @param {Effect | null} effect
  */
 export function invoke_error_boundary(error, effect) {
+	if (error === HYDRATION_ERROR) {
+		throw error;
+	}
+
 	if (effect !== null && (effect.f & DESTROYED) !== 0) {
 		return;
 	}

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

@@ -103,6 +103,11 @@ export function flatten(blockers, sync, async, fn) {
 
 	if (blocker_promise) {
 		blocker_promise.then(() => {
+			if ((parent.f & DESTROYED) !== 0) {
+				decrement_pending();
+				return;
+			}
+
 			restore();
 			run();
 			unset_context();

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

@@ -1032,15 +1032,15 @@ export class Batch {
  */
 export function flushSync(fn) {
 	var was_flushing_sync = is_flushing_sync;
+	var prev_previous_batch = previous_batch;
+	previous_batch = null;
 	is_flushing_sync = true;
 
 	try {
 		var result;
 
 		if (fn) {
-			if (current_batch !== null && !current_batch.is_fork) {
-				current_batch.flush();
-			}
+			flushSync(); // flush anything pending through the while loop below
 
 			result = fn();
 		}
@@ -1056,6 +1056,7 @@ export function flushSync(fn) {
 		}
 	} finally {
 		is_flushing_sync = was_flushing_sync;
+		previous_batch = prev_previous_batch;
 	}
 }
 
@@ -1295,6 +1296,10 @@ export function eager(fn) {
 	let version = version_map.get(parent) ?? source(0);
 	version_map.set(parent, version);
 
+	if (DEV) {
+		version.label ??= '$state.eager version';
+	}
+
 	teardown(() => {
 		if (parent.f & DESTROYING) version_map.delete(parent);
 	});
@@ -1402,6 +1407,8 @@ export function fork(fn) {
 		e.fork_timing();
 	}
 
+	flushSync();
+
 	var batch = Batch.ensure();
 	batch.is_fork = true;
 	batch_values = new Map();
@@ -1409,7 +1416,8 @@ export function fork(fn) {
 	var committed = false;
 	var settled = batch.settled();
 
-	flushSync(fn);
+	fn();
+	flushSync();
 
 	return {
 		commit: async () => {

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

@@ -46,7 +46,7 @@ import { set_signal_status, update_derived_status } from './status.js';
 /** @type {Set<Effect>} */
 export let eager_effects = new Set();
 
-/** @type {Map<Source, any>} */
+/** @type {Map<Value, any>} */
 export const old_values = new Map();
 
 /**
@@ -141,7 +141,7 @@ export function mutate(source, value) {
 
 /**
  * @template V
- * @param {Source<V>} source
+ * @param {Value<V>} source
  * @param {V} value
  * @param {boolean} [should_proxy]
  * @returns {V}
@@ -181,7 +181,7 @@ var count_deps = 0;
 
 /**
  * @template V
- * @param {Source<V>} source
+ * @param {Value<V>} source
  * @param {V} value
  * @param {Effect[] | null} [updated_during_traversal]
  * @returns {V}

package/src/internal/client/runtime.js

@@ -60,11 +60,6 @@ import { without_reactive_context } from './dom/elements/bindings/shared.js';
 import { set_signal_status, update_derived_status } from './reactivity/status.js';
 import * as w from './warnings.js';
 
-/**
- * True if updating in an effect context that is reactive (i.e. not branch/root effects)
- */
-let is_updating_effect = false;
-
 export let is_destroying_effect = false;
 
 /** @param {boolean} value */
@@ -93,7 +88,7 @@ export function set_active_effect(effect) {
 /**
  * When sources are created within a reaction, reading and writing
  * them within that reaction should not cause a re-run
- * @type {null | Set<Source>}
+ * @type {null | Set<Value>}
  */
 export let current_sources = null;
 
@@ -121,11 +116,11 @@ export let skipped_deps = 0;
 /**
  * Tracks writes that the effect it's executed in doesn't listen to yet,
  * so that the dependency can be added to the effect later on if it then reads it
- * @type {null | Source[]}
+ * @type {null | Value[]}
  */
 export let untracked_writes = null;
 
-/** @param {null | Source[]} value */
+/** @param {null | Value[]} value */
 export function set_untracked_writes(value) {
 	untracked_writes = value;
 }
@@ -410,7 +405,7 @@ function remove_reaction(signal, dependency) {
 		// In a fork it's possible that a derived is executed and gets reactions, then commits, but is
 		// never re-executed. This is possible when the derived is only executed once in the context
 		// of a new branch which happens before fork.commit() runs. In this case, the derived still has
-		// UNINITIALIZED as its value, and then when it's loosing its reactions we need to ensure it stays
+		// UNINITIALIZED as its value, and then when it's losing its reactions we need to ensure it stays
 		// DIRTY so it is reexecuted once someone wants its value again.
 		if (derived.v !== UNINITIALIZED) {
 			update_derived_status(derived);
@@ -462,10 +457,8 @@ export function update_effect(effect) {
 	set_signal_status(effect, CLEAN);
 
 	var previous_effect = active_effect;
-	var was_updating_effect = is_updating_effect;
 
 	active_effect = effect;
-	is_updating_effect = (flags & (BRANCH_EFFECT | ROOT_EFFECT)) === 0; // Branch/root effects are not reactive contexts
 
 	if (DEV) {
 		var previous_component_fn = dev_current_component_function;
@@ -498,7 +491,6 @@ export function update_effect(effect) {
 			}
 		}
 	} finally {
-		is_updating_effect = was_updating_effect;
 		active_effect = previous_effect;
 
 		if (DEV) {
@@ -680,13 +672,12 @@ export function get(signal) {
 			return value;
 		}
 
-		// connect disconnected deriveds if we are reading them inside an effect,
-		// or inside another derived that is already connected
+		// connect disconnected deriveds when reading them inside a connected reaction
 		var should_connect =
 			(derived.f & CONNECTED) === 0 &&
 			!untracking &&
 			active_reaction !== null &&
-			(is_updating_effect || (active_reaction.f & CONNECTED) !== 0);
+			(active_reaction.f & CONNECTED) !== 0;
 
 		var is_new = (derived.f & REACTION_RAN) === 0;
 
@@ -728,7 +719,13 @@ function reconnect(derived) {
 	if (derived.deps === null) return;
 
 	for (const dep of derived.deps) {
-		(dep.reactions ??= []).push(derived);
+		var reactions = dep.reactions;
+
+		if (reactions === null) {
+			dep.reactions = [derived];
+		} else if (!includes.call(reactions, derived)) {
+			reactions.push(derived);
+		}
 
 		if ((dep.f & DERIVED) !== 0 && (dep.f & CONNECTED) === 0) {
 			unfreeze_derived_effects(/** @type {Derived} */ (dep));

package/src/internal/server/index.js

@@ -168,7 +168,7 @@ export function attributes(attrs, css_hash, classes, styles, flags = 0) {
 				// value/checked takes precedence over defaultValue/defaultChecked
 				name = name === 'defaultvalue' ? 'value' : 'checked';
 				if (name in attrs) continue;
-				// We're checking prior entries aswell because "name in attrs" is not enough as the attributes may have different casing
+				// We're checking prior entries as well because "name in attrs" is not enough as the attributes may have different casing
 				for (let j = 0; j < names.length; j++) {
 					if (names[j].toLowerCase() === name) continue outer;
 				}

package/src/reactivity/date.js

@@ -1,4 +1,4 @@
-/** @import { Source } from '#client' */
+/** @import { Derived } from '#client' */
 import { derived } from '../internal/client/index.js';
 import { set, state } from '../internal/client/reactivity/sources.js';
 import { tag } from '../internal/client/dev/tracing.js';
@@ -42,7 +42,7 @@ var inited = false;
 export class SvelteDate extends Date {
 	#time = state(super.getTime());
 
-	/** @type {Map<keyof Date, Source<unknown>>} */
+	/** @type {Map<keyof Date, Derived<unknown>>} */
 	#deriveds = new Map();
 
 	#reaction = active_reaction;

package/src/reactivity/url-search-params.js

@@ -42,7 +42,7 @@ export class SvelteURLSearchParams extends URLSearchParams {
 		if (!this.#url || this.#updating) return;
 		this.#updating = true;
 
-		const search = this.toString();
+		const search = super.toString();
 		this.#url.search = search && `?${search}`;
 
 		this.#updating = false;

package/src/version.js

@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.57.1';
+export const VERSION = '5.57.2';
 export const PUBLIC_VERSION = '5';