svelte 5.57.0 → 5.57.2

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

@@ -22,7 +22,6 @@ import {
 import { async_mode_flag } from '../../flags/index.js';
 import { deferred, define_property, includes } from '../../shared/utils.js';
 import {
-	active_effect,
 	active_reaction,
 	get,
 	increment_write_version,
@@ -38,7 +37,6 @@ import { eager_effect, teardown, unlink_effect } from './effects.js';
 import { defer_effect } from './utils.js';
 import { UNINITIALIZED } from '../../../constants.js';
 import { set_signal_status } from './status.js';
-import { legacy_is_updating_store } from './store.js';
 import { invariant } from '../../shared/dev.js';
 import { log_effect_tree } from '../dev/debug.js';
 import { OBSOLETE } from './deriveds.js';
@@ -160,10 +158,17 @@ export class Batch {
 	#deferred = null;
 
 	/**
-	 * The root effects that need to be flushed
+	 * Effects that were scheduled in this batch but not yet 'resolved' into the
+	 * root effects that need to be flushed. Resolving — the upwards traversal that
+	 * marks the path to each effect on the shared effect tree (see #resolve) — is
+	 * deferred until the batch is processed, so that the markers are created and
+	 * consumed within a single traversal. Scheduling into other batches (which can
+	 * happen concurrently, e.g. while a batch is committed) can therefore never
+	 * observe (and be confused by) this batch's markers.
+	 * May contain duplicates — deduplication happens during resolving
 	 * @type {Effect[]}
 	 */
-	#roots = [];
+	#scheduled = [];
 
 	/**
 	 * Effects created while this batch was active.
@@ -273,14 +278,57 @@ export class Batch {
 		this.#unskipped_branches.add(effect);
 	}
 
-	#process() {
-		this.#started = true;
+	/**
+	 * Convert the effects that were scheduled in this batch into the root effects
+	 * that need to be traversed, marking the path to each effect (by clearing the
+	 * `CLEAN` flag on ancestor branches) so that the traversal can find them.
+	 * This happens right before traversal rather than at scheduling time, so that
+	 * the markers left on the (shared) effect tree are created and consumed within
+	 * a single traversal — scheduling into other batches can never observe them
+	 * @returns {Effect[]}
+	 */
+	#resolve() {
+		/** @type {Effect[]} */
+		var roots = [];
 
-		if (flush_count++ > 1000) {
-			this.#unlink();
-			infinite_loop_guard();
+		for (const effect of this.#scheduled) {
+			// skip effects that are destroyed, or that already ran (e.g. because
+			// they were reached by the traversal that preceded a drain iteration,
+			// or because they were scheduled twice)
+			if ((effect.f & DESTROYED) !== 0 || (effect.f & (DIRTY | MAYBE_DIRTY)) === 0) continue;
+
+			var e = effect;
+			var covered = false;
+
+			while (e.parent !== null) {
+				e = e.parent;
+				var flags = e.f;
+
+				if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
+					if ((flags & CLEAN) === 0) {
+						// the path to the root was already marked, meaning the
+						// root was already collected — nothing left to do
+						covered = true;
+						break;
+					}
+
+					e.f ^= CLEAN;
+				}
+			}
+
+			if (!covered) {
+				roots.push(e);
+			}
 		}
 
+		this.#scheduled = [];
+
+		return roots;
+	}
+
+	#process() {
+		this.#started = true;
+
 		if (DEV) {
 			// track all the values that were updated during this flush,
 			// so that they can be reset afterwards
@@ -304,9 +352,6 @@ export class Batch {
 			this.schedule(e);
 		}
 
-		const roots = this.#roots;
-		this.#roots = [];
-
 		this.apply();
 
 		/** @type {Effect[]} */
@@ -321,18 +366,28 @@ export class Batch {
 		 */
 		var updates = (legacy_updates = []);
 
-		for (const root of roots) {
-			try {
-				this.#traverse(root, effects, render_effects);
-			} catch (e) {
-				reset_all(root);
-				// If there's no async work left, this branch is now dead and needs
-				// to be discarded to not become a zombie that is never cleaned up.
-				// See https://github.com/sveltejs/svelte/issues/18221#issuecomment-4497918414
-				// for a (non-minimal) reproduction that demonstrates a case where this is necessary
-				// to not get follow-up false-positives via "batch has scheduled roots" invariant errors.
-				if (!this.#is_deferred()) this.discard();
-				throw e;
+		// Effects can be scheduled during traversal (e.g. because a parent each/await/etc
+		// block updated an internal source, or because an effect invalidated itself)
+		// hence we loop until there are no more scheduled effects.
+		while (this.#scheduled.length > 0) {
+			if (flush_count++ > 1000) {
+				this.#unlink();
+				infinite_loop_guard(); // TODO try to reset_all() here?
+			}
+
+			for (const root of this.#resolve()) {
+				try {
+					this.#traverse(root, effects, render_effects);
+				} catch (e) {
+					reset_all(root);
+					// If there's no async work left, this branch is now dead and needs
+					// to be discarded to not become a zombie that is never cleaned up.
+					// See https://github.com/sveltejs/svelte/issues/18221#issuecomment-4497918414
+					// for a (non-minimal) reproduction that demonstrates a case where this is necessary
+					// to not get follow-up false-positives via "batch has scheduled roots" invariant errors.
+					if (!this.#is_deferred()) this.discard();
+					throw e;
+				}
 			}
 		}
 
@@ -393,7 +448,7 @@ export class Batch {
 
 		var next_batch = /** @type {Batch | null} */ (/** @type {unknown} */ (current_batch));
 
-		if (this.#pending === 0 && (this.#roots.length === 0 || next_batch !== null)) {
+		if (this.#pending === 0 && (this.#scheduled.length === 0 || next_batch !== null)) {
 			this.#unlink();
 
 			// Order matters here - we need to commit and THEN continue flushing new batches, not the other way around,
@@ -408,12 +463,15 @@ export class Batch {
 		}
 
 		// Edge case: During traversal new branches might create effects that run immediately and set state,
-		// causing an effect and therefore a root to be scheduled again. We need to traverse the current batch
+		// causing an effect to be scheduled again. We need to traverse the current batch
 		// once more in that case - most of the time this will just clean up dirty branches.
-		if (this.#roots.length > 0) {
+		if (this.#scheduled.length > 0) {
 			if (next_batch !== null) {
-				const batch = next_batch;
-				batch.#roots.push(...this.#roots.filter((r) => !batch.#roots.includes(r)));
+				for (const e of this.#scheduled) {
+					next_batch.#scheduled.push(e);
+				}
+
+				this.#scheduled = [];
 			} else {
 				next_batch = this;
 			}
@@ -712,7 +770,7 @@ export class Batch {
 				// The microtask queue can contain the batch already scheduled to run right
 				// after this one is finished, so throwing the invariant would be wrong here.
 				if (DEV && !batch.#decrement_queued) {
-					invariant(batch.#roots.length === 0, 'Batch has scheduled roots');
+					invariant(batch.#scheduled.length === 0, 'Batch has scheduled effects');
 				}
 
 				// A batch was unskipped in a later batch -> tell prior batches to unskip it, too
@@ -768,14 +826,12 @@ export class Batch {
 
 				// Only apply and traverse when we know we triggered async work with marking the effects
 				// and know this won't run anyway right afterwards
-				if (batch.#roots.length > 0 && !batch.#decrement_queued) {
+				if (batch.#scheduled.length > 0 && !batch.#decrement_queued) {
 					batch.apply();
 
-					for (var root of batch.#roots) {
+					for (var root of batch.#resolve()) {
 						batch.#traverse(root, [], []);
 					}
-
-					batch.#roots = [];
 				}
 
 				batch.deactivate();
@@ -939,43 +995,7 @@ export class Batch {
 			return;
 		}
 
-		var e = effect;
-
-		while (e.parent !== null) {
-			e = e.parent;
-			var flags = e.f;
-
-			// if the effect is being scheduled because a parent (each/await/etc) block
-			// updated an internal source, or because a branch is being unskipped,
-			// bail out or we'll cause a second flush
-			if (collected_effects !== null && e === active_effect) {
-				if (async_mode_flag) return;
-
-				// in sync mode, render effects run during traversal. in an extreme edge case
-				// — namely that we're setting a value inside a derived read during traversal —
-				// they can be made dirty after they have already been visited, in which
-				// case we shouldn't bail out. we also shouldn't bail out if we're
-				// updating a store inside a `$:`, since this might invalidate
-				// effects that were already visited
-				if (
-					(active_reaction === null || (active_reaction.f & DERIVED) === 0) &&
-					!legacy_is_updating_store
-				) {
-					return;
-				}
-			}
-
-			if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
-				if ((flags & CLEAN) === 0) {
-					// branch is already dirty, bail
-					return;
-				}
-
-				e.f ^= CLEAN;
-			}
-		}
-
-		this.#roots.push(e);
+		this.#scheduled.push(effect);
 	}
 
 	#unlink() {
@@ -1012,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();
 		}
@@ -1036,6 +1056,7 @@ export function flushSync(fn) {
 		}
 	} finally {
 		is_flushing_sync = was_flushing_sync;
+		previous_batch = prev_previous_batch;
 	}
 }
 
@@ -1275,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);
 	});
@@ -1382,6 +1407,8 @@ export function fork(fn) {
 		e.fork_timing();
 	}
 
+	flushSync();
+
 	var batch = Batch.ensure();
 	batch.is_fork = true;
 	batch_values = new Map();
@@ -1389,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/deriveds.js

@@ -9,7 +9,6 @@ import {
 	EFFECT_PRESERVED,
 	STALE_REACTION,
 	ASYNC,
-	WAS_MARKED,
 	DESTROYED,
 	CLEAN,
 	REACTION_RAN,
@@ -365,7 +364,6 @@ export function execute_derived(derived) {
 
 			stack.push(derived);
 
-			derived.f &= ~WAS_MARKED;
 			destroy_derived_effects(derived);
 			value = update_reaction(derived);
 		} finally {
@@ -375,7 +373,6 @@ export function execute_derived(derived) {
 		}
 	} else {
 		try {
-			derived.f &= ~WAS_MARKED;
 			destroy_derived_effects(derived);
 			value = update_reaction(derived);
 		} finally {

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

@@ -25,10 +25,7 @@ import {
 	MAYBE_DIRTY,
 	BLOCK_EFFECT,
 	ROOT_EFFECT,
-	ASYNC,
-	WAS_MARKED,
-	CONNECTED,
-	REACTION_IS_UPDATING
+	ASYNC
 } from '#client/constants';
 import * as e from '../errors.js';
 import { legacy_mode_flag, tracing_mode_flag } from '../../flags/index.js';
@@ -49,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();
 
 /**
@@ -144,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}
@@ -171,9 +168,20 @@ export function set(source, value, should_proxy = false) {
 	return internal_set(source, new_value, legacy_updates);
 }
 
+/**
+ * A set of signals we have already seen while traversing in mark_reactions.
+ * Not always set to balance the common case of sources only having a couple
+ * of (transitive) dependencies (where always creating a Set would be bad for perf)
+ * with the edge case of extremely deep or wide dependency arrays with cycles.
+ * @type {Set<any> | null}
+ */
+var seen = null;
+/** Number of transitive dependencies, see {@link seen} for more info */
+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}
@@ -240,7 +248,10 @@ export function internal_set(source, value, updated_during_traversal = null) {
 
 		// For debugging, in case you want to know which reactions are being scheduled:
 		// log_reactions(source);
+		seen = null;
+		count_deps = 0;
 		mark_reactions(source, DIRTY, updated_during_traversal);
+		seen = null;
 
 		// It's possible that the current reaction might not have up-to-date dependencies
 		// whilst it's actively running. So in the case of ensuring it registers the reaction
@@ -347,6 +358,18 @@ function mark_reactions(signal, status, updated_during_traversal) {
 	var runes = is_runes();
 	var length = reactions.length;
 
+	count_deps += length;
+	// Activate the `seen` Set if we think from the unusually high number of deps that
+	// there might be cycles in the graph, to avoid repeated lookups for reactions
+	// Example: https://github.com/sveltejs/svelte/issues/16658 has a graph with one source
+	// reaching ~10000 distinct deriveds/effects each, resulting in 65 million walks through repeated visits.
+	if (count_deps > 100000 && seen === null) seen = new Set();
+
+	if (seen !== null) {
+		if (seen.has(signal)) return;
+		seen.add(signal);
+	}
+
 	for (var i = 0; i < length; i++) {
 		var reaction = reactions[i];
 		var flags = reaction.f;
@@ -370,18 +393,7 @@ function mark_reactions(signal, status, updated_during_traversal) {
 			var derived = /** @type {Derived} */ (reaction);
 
 			batch_values?.delete(derived);
-
-			if ((flags & WAS_MARKED) === 0) {
-				// Only connected deriveds being executed outside the update cycle can be reliably unmarked right away
-				if (
-					flags & CONNECTED &&
-					(active_effect === null || (active_effect.f & REACTION_IS_UPDATING) === 0)
-				) {
-					reaction.f |= WAS_MARKED;
-				}
-
-				mark_reactions(derived, MAYBE_DIRTY, updated_during_traversal);
-			}
+			mark_reactions(derived, MAYBE_DIRTY, updated_during_traversal);
 		} else if (not_dirty) {
 			var effect = /** @type {Effect} */ (reaction);
 

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

@@ -1,24 +1,7 @@
-/** @import { Derived, Effect, Value } from '#client' */
-import { CLEAN, DERIVED, DIRTY, MAYBE_DIRTY, WAS_MARKED } from '#client/constants';
+/** @import { Effect } from '#client' */
+import { CLEAN, DIRTY, MAYBE_DIRTY } from '#client/constants';
 import { set_signal_status } from './status.js';
 
-/**
- * @param {Value[] | null} deps
- */
-function clear_marked(deps) {
-	if (deps === null) return;
-
-	for (const dep of deps) {
-		if ((dep.f & DERIVED) === 0 || (dep.f & WAS_MARKED) === 0) {
-			continue;
-		}
-
-		dep.f ^= WAS_MARKED;
-
-		clear_marked(/** @type {Derived} */ (dep).deps);
-	}
-}
-
 /**
  * @param {Effect} effect
  * @param {Set<Effect>} dirty_effects
@@ -31,10 +14,6 @@ export function defer_effect(effect, dirty_effects, maybe_dirty_effects) {
 		maybe_dirty_effects.add(effect);
 	}
 
-	// Since we're not executing these effects now, we need to clear any WAS_MARKED flags
-	// so that other batches can correctly reach these effects during their own traversal
-	clear_marked(effect.deps);
-
 	// mark as clean so they get scheduled if they depend on pending async state
 	set_signal_status(effect, CLEAN);
 }

package/src/internal/client/runtime.js

@@ -21,7 +21,6 @@ import {
 	REACTION_IS_UPDATING,
 	STALE_REACTION,
 	ERROR_VALUE,
-	WAS_MARKED,
 	MANAGED_EFFECT,
 	REACTION_RAN
 } from './constants.js';
@@ -61,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 */
@@ -94,13 +88,17 @@ 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;
 
 /** @param {Value} value */
 export function push_reaction_value(value) {
-	if (active_reaction !== null && (!async_mode_flag || (active_reaction.f & DERIVED) !== 0)) {
+	if (
+		active_reaction !== null &&
+		((!async_mode_flag && (active_reaction.f & REACTION_IS_UPDATING) !== 0) ||
+			(active_reaction.f & DERIVED) !== 0)
+	) {
 		(current_sources ??= new Set()).add(value);
 	}
 }
@@ -118,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;
 }
@@ -160,10 +158,6 @@ export function is_dirty(reaction) {
 		return true;
 	}
 
-	if (flags & DERIVED) {
-		reaction.f &= ~WAS_MARKED;
-	}
-
 	if ((flags & MAYBE_DIRTY) !== 0) {
 		var dependencies = /** @type {Value[]} */ (reaction.deps);
 		var length = dependencies.length;
@@ -404,17 +398,14 @@ function remove_reaction(signal, dependency) {
 	) {
 		var derived = /** @type {Derived} */ (dependency);
 
-		// If we are working with a derived that is owned by an effect, then mark it as being
-		// disconnected and remove the mark flag, as it cannot be reliably removed otherwise
 		if ((derived.f & CONNECTED) !== 0) {
 			derived.f ^= CONNECTED;
-			derived.f &= ~WAS_MARKED;
 		}
 
 		// 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);
@@ -466,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;
@@ -502,7 +491,6 @@ export function update_effect(effect) {
 			}
 		}
 	} finally {
-		is_updating_effect = was_updating_effect;
 		active_effect = previous_effect;
 
 		if (DEV) {
@@ -684,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;
 
@@ -732,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/context.js

@@ -1,6 +1,7 @@
 /** @import { SSRContext } from '#server' */
 import { DEV } from 'esm-env';
 import { create_context, get_or_init_context_map } from '../shared/context.js';
+import * as e from './errors.js';
 
 /** @type {SSRContext | null} */
 export var ssr_context = null;
@@ -40,7 +41,13 @@ export function getContext(key) {
  * @returns {T}
  */
 export function setContext(key, context) {
-	get_or_init_context_map(ssr_context, 'setContext').set(key, context);
+	const context_map = get_or_init_context_map(ssr_context, 'setContext');
+
+	if (/** @type {SSRContext} */ (ssr_context).i) {
+		e.set_context_after_init();
+	}
+
+	context_map.set(key, context);
 	return context;
 }
 
@@ -61,7 +68,7 @@ export function getAllContexts() {
  * @param {Function} [fn]
  */
 export function push(fn) {
-	ssr_context = { p: ssr_context, c: null, r: null };
+	ssr_context = { p: ssr_context, c: null, r: null, i: false };
 
 	if (DEV) {
 		ssr_context.function = fn;

package/src/internal/server/index.js

@@ -146,8 +146,10 @@ export function attributes(attrs, css_hash, classes, styles, flags = 0) {
 	const is_html = (flags & ELEMENT_IS_NAMESPACED) === 0;
 	const lowercase = (flags & ELEMENT_PRESERVE_ATTRIBUTE_CASE) === 0;
 	const is_input = (flags & ELEMENT_IS_INPUT) !== 0;
+	const names = Object.keys(attrs);
 
-	for (name of Object.keys(attrs)) {
+	outer: for (let i = 0; i < names.length; i++) {
+		name = names[i];
 		// omit functions, internal svelte properties and invalid attribute names
 		if (typeof attrs[name] === 'function') continue;
 		if (name[0] === '$' && name[1] === '$') continue; // faster than name.startsWith('$$')
@@ -163,8 +165,13 @@ export function attributes(attrs, css_hash, classes, styles, flags = 0) {
 
 		if (is_input) {
 			if (name === 'defaultvalue' || name === 'defaultchecked') {
+				// value/checked takes precedence over defaultValue/defaultChecked
 				name = name === 'defaultvalue' ? 'value' : 'checked';
-				if (attrs[name]) continue;
+				if (name in attrs) continue;
+				// 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;
+				}
 			}
 		}