svelte 5.41.4 → 5.42.0

package/src/internal/client/dev/tracing.js

@@ -179,8 +179,7 @@ export function get_stack(label) {
 	});
 
 	define_property(error, 'name', {
-		// 'Error' suffix is required for stack traces to be rendered properly
-		value: `${label}Error`
+		value: label
 	});
 
 	return /** @type {Error & { stack: string }} */ (error);

package/src/internal/client/dom/blocks/branches.js

@@ -1,5 +1,4 @@
 /** @import { Effect, TemplateNode } from '#client' */
-import { is_runes } from '../../context.js';
 import { Batch, current_batch } from '../../reactivity/batch.js';
 import {
 	branch,
@@ -8,7 +7,6 @@ import {
 	pause_effect,
 	resume_effect
 } from '../../reactivity/effects.js';
-import { set_should_intro, should_intro } from '../../render.js';
 import { hydrate_node, hydrating } from '../hydration.js';
 import { create_text, should_defer_append } from '../operations.js';
 
@@ -126,6 +124,22 @@ export class BranchManager {
 		}
 	};
 
+	/**
+	 * @param {Batch} batch
+	 */
+	#discard = (batch) => {
+		this.#batches.delete(batch);
+
+		const keys = Array.from(this.#batches.values());
+
+		for (const [k, branch] of this.#offscreen) {
+			if (!keys.includes(k)) {
+				destroy_effect(branch.effect);
+				this.#offscreen.delete(k);
+			}
+		}
+	};
+
 	/**
 	 *
 	 * @param {any} key
@@ -173,7 +187,8 @@ export class BranchManager {
 				}
 			}
 
-			batch.add_callback(this.#commit);
+			batch.oncommit(this.#commit);
+			batch.ondiscard(this.#discard);
 		} else {
 			if (hydrating) {
 				this.anchor = hydrate_node;

package/src/internal/client/dom/blocks/each.js

@@ -310,7 +310,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 					}
 				}
 
-				batch.add_callback(commit);
+				batch.oncommit(commit);
 			} else {
 				commit();
 			}

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

@@ -7,7 +7,7 @@ import { add_form_reset_listener, autofocus } from './misc.js';
 import * as w from '../../warnings.js';
 import { LOADING_ATTR_SYMBOL } from '#client/constants';
 import { queue_micro_task } from '../task.js';
-import { is_capture_event, is_delegated, normalize_attribute } from '../../../../utils.js';
+import { is_capture_event, can_delegate_event, normalize_attribute } from '../../../../utils.js';
 import {
 	active_effect,
 	active_reaction,
@@ -378,7 +378,7 @@ function set_attributes(
 			const opts = {};
 			const event_handle_key = '$$' + key;
 			let event_name = key.slice(2);
-			var delegated = is_delegated(event_name);
+			var delegated = can_delegate_event(event_name);
 
 			if (is_capture_event(event_name)) {
 				event_name = event_name.slice(0, -7);

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

@@ -1,5 +1,5 @@
 import { teardown } from '../../reactivity/effects.js';
-import { define_property, is_array } from '../../../shared/utils.js';
+import { define_property } from '../../../shared/utils.js';
 import { hydrating } from '../hydration.js';
 import { queue_micro_task } from '../task.js';
 import { FILENAME } from '../../../../constants.js';
@@ -258,12 +258,7 @@ export function handle_event_propagation(event) {
 						// -> the target could not have been disabled because it emits the event in the first place
 						event.target === current_target)
 				) {
-					if (is_array(delegated)) {
-						var [fn, ...data] = delegated;
-						fn.apply(current_target, [event, ...data]);
-					} else {
-						delegated.call(current_target, event);
-					}
+					delegated.call(current_target, event);
 				}
 			} catch (error) {
 				if (throw_error) {

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

@@ -29,7 +29,7 @@ export function handle_error(error) {
 		// if the error occurred while creating this subtree, we let it
 		// bubble up until it hits a boundary that can handle it
 		if ((effect.f & BOUNDARY_EFFECT) === 0) {
-			if (!effect.parent && error instanceof Error) {
+			if (DEV && !effect.parent && error instanceof Error) {
 				apply_adjustments(error);
 			}
 
@@ -61,7 +61,7 @@ export function invoke_error_boundary(error, effect) {
 		effect = effect.parent;
 	}
 
-	if (error instanceof Error) {
+	if (DEV && error instanceof Error) {
 		apply_adjustments(error);
 	}
 

package/src/internal/client/errors.js

@@ -229,6 +229,22 @@ export function effect_update_depth_exceeded() {
 	}
 }
 
+/**
+ * Cannot use `fork(...)` unless the `experimental.async` compiler option is `true`
+ * @returns {never}
+ */
+export function experimental_async_fork() {
+	if (DEV) {
+		const error = new Error(`experimental_async_fork\nCannot use \`fork(...)\` unless the \`experimental.async\` compiler option is \`true\`\nhttps://svelte.dev/e/experimental_async_fork`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/experimental_async_fork`);
+	}
+}
+
 /**
  * Cannot use `flushSync` inside an effect
  * @returns {never}
@@ -245,6 +261,38 @@ export function flush_sync_in_effect() {
 	}
 }
 
+/**
+ * Cannot commit a fork that was already committed or discarded
+ * @returns {never}
+ */
+export function fork_discarded() {
+	if (DEV) {
+		const error = new Error(`fork_discarded\nCannot commit a fork that was already committed or discarded\nhttps://svelte.dev/e/fork_discarded`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/fork_discarded`);
+	}
+}
+
+/**
+ * Cannot create a fork inside an effect or when state changes are pending
+ * @returns {never}
+ */
+export function fork_timing() {
+	if (DEV) {
+		const error = new Error(`fork_timing\nCannot create a fork inside an effect or when state changes are pending\nhttps://svelte.dev/e/fork_timing`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/fork_timing`);
+	}
+}
+
 /**
  * `getAbortSignal()` can only be called inside an effect or derived
  * @returns {never}

package/src/internal/client/proxy.js

@@ -19,8 +19,8 @@ import {
 	state as source,
 	set,
 	increment,
-	flush_inspect_effects,
-	set_inspect_effects_deferred
+	flush_eager_effects,
+	set_eager_effects_deferred
 } from './reactivity/sources.js';
 import { PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { UNINITIALIZED } from '../../constants.js';
@@ -53,7 +53,7 @@ export function proxy(value) {
 	var is_proxied_array = is_array(value);
 	var version = source(0);
 
-	var stack = DEV && tracing_mode_flag ? get_stack('CreatedAt') : null;
+	var stack = DEV && tracing_mode_flag ? get_stack('created at') : null;
 	var parent_version = update_version;
 
 	/**
@@ -421,9 +421,9 @@ function inspectable_array(array) {
 			 * @param {any[]} args
 			 */
 			return function (...args) {
-				set_inspect_effects_deferred();
+				set_eager_effects_deferred();
 				var result = value.apply(this, args);
-				flush_inspect_effects();
+				flush_eager_effects();
 				return result;
 			};
 		}

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

@@ -1,3 +1,4 @@
+/** @import { Fork } from 'svelte' */
 /** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
 import {
 	BLOCK_EFFECT,
@@ -12,25 +13,35 @@ import {
 	ROOT_EFFECT,
 	MAYBE_DIRTY,
 	DERIVED,
-	BOUNDARY_EFFECT
+	BOUNDARY_EFFECT,
+	EAGER_EFFECT
 } from '#client/constants';
 import { async_mode_flag } from '../../flags/index.js';
 import { deferred, define_property } from '../../shared/utils.js';
 import {
 	active_effect,
 	get,
+	increment_write_version,
 	is_dirty,
 	is_updating_effect,
 	set_is_updating_effect,
 	set_signal_status,
+	tick,
 	update_effect
 } from '../runtime.js';
 import * as e from '../errors.js';
 import { flush_tasks, queue_micro_task } from '../dom/task.js';
 import { DEV } from 'esm-env';
 import { invoke_error_boundary } from '../error-handling.js';
-import { old_values, source, update } from './sources.js';
-import { inspect_effect, unlink_effect } from './effects.js';
+import {
+	flush_eager_effects,
+	eager_effects,
+	old_values,
+	set_eager_effects,
+	source,
+	update
+} from './sources.js';
+import { eager_effect, unlink_effect } from './effects.js';
 
 /**
  * @typedef {{
@@ -90,14 +101,20 @@ export class Batch {
 	 * They keys of this map are identical to `this.#current`
 	 * @type {Map<Source, any>}
 	 */
-	#previous = new Map();
+	previous = new Map();
 
 	/**
 	 * When the batch is committed (and the DOM is updated), we need to remove old branches
 	 * and append new ones by calling the functions added inside (if/each/key/etc) blocks
 	 * @type {Set<() => void>}
 	 */
-	#callbacks = new Set();
+	#commit_callbacks = new Set();
+
+	/**
+	 * If a fork is discarded, we need to destroy any effects that are no longer needed
+	 * @type {Set<(batch: Batch) => void>}
+	 */
+	#discard_callbacks = new Set();
 
 	/**
 	 * The number of async effects that are currently in flight
@@ -135,6 +152,8 @@ export class Batch {
 	 */
 	skipped_effects = new Set();
 
+	is_fork = false;
+
 	/**
 	 *
 	 * @param {Effect[]} root_effects
@@ -159,15 +178,15 @@ export class Batch {
 			this.#traverse_effect_tree(root, target);
 		}
 
-		this.#resolve();
+		if (!this.is_fork) {
+			this.#resolve();
+		}
 
-		if (this.#blocking_pending > 0) {
+		if (this.#blocking_pending > 0 || this.is_fork) {
 			this.#defer_effects(target.effects);
 			this.#defer_effects(target.render_effects);
 			this.#defer_effects(target.block_effects);
 		} else {
-			// TODO append/detach blocks here, not in #commit
-
 			// If sources are written to, then work needs to happen in a separate batch, else prior sources would be mixed with
 			// newly updated sources, which could lead to infinite loops when effects run over and over again.
 			previous_batch = this;
@@ -271,8 +290,8 @@ export class Batch {
 	 * @param {any} value
 	 */
 	capture(source, value) {
-		if (!this.#previous.has(source)) {
-			this.#previous.set(source, value);
+		if (!this.previous.has(source)) {
+			this.previous.set(source, value);
 		}
 
 		this.current.set(source, source.v);
@@ -289,16 +308,17 @@ export class Batch {
 	}
 
 	flush() {
+		this.activate();
+
 		if (queued_root_effects.length > 0) {
-			this.activate();
 			flush_effects();
 
 			if (current_batch !== null && current_batch !== this) {
 				// this can happen if a new batch was created during `flush_effects()`
 				return;
 			}
-		} else {
-			this.#resolve();
+		} else if (this.#pending === 0) {
+			this.process([]); // TODO this feels awkward
 		}
 
 		this.deactivate();
@@ -314,11 +334,16 @@ export class Batch {
 		}
 	}
 
+	discard() {
+		for (const fn of this.#discard_callbacks) fn(this);
+		this.#discard_callbacks.clear();
+	}
+
 	#resolve() {
 		if (this.#blocking_pending === 0) {
 			// append/remove branches
-			for (const fn of this.#callbacks) fn();
-			this.#callbacks.clear();
+			for (const fn of this.#commit_callbacks) fn();
+			this.#commit_callbacks.clear();
 		}
 
 		if (this.#pending === 0) {
@@ -332,7 +357,7 @@ export class Batch {
 		// committed state, unless the batch in question has a more
 		// recent value for a given source
 		if (batches.size > 1) {
-			this.#previous.clear();
+			this.previous.clear();
 
 			var previous_batch_values = batch_values;
 			var is_earlier = true;
@@ -428,6 +453,10 @@ export class Batch {
 		this.#pending -= 1;
 		if (blocking) this.#blocking_pending -= 1;
 
+		this.revive();
+	}
+
+	revive() {
 		for (const e of this.#dirty_effects) {
 			set_signal_status(e, DIRTY);
 			schedule_effect(e);
@@ -445,8 +474,13 @@ export class Batch {
 	}
 
 	/** @param {() => void} fn */
-	add_callback(fn) {
-		this.#callbacks.add(fn);
+	oncommit(fn) {
+		this.#commit_callbacks.add(fn);
+	}
+
+	/** @param {(batch: Batch) => void} fn */
+	ondiscard(fn) {
+		this.#discard_callbacks.add(fn);
 	}
 
 	settled() {
@@ -489,7 +523,7 @@ export class Batch {
 		for (const batch of batches) {
 			if (batch === this) continue;
 
-			for (const [source, previous] of batch.#previous) {
+			for (const [source, previous] of batch.previous) {
 				if (!batch_values.has(source)) {
 					batch_values.set(source, previous);
 				}
@@ -717,6 +751,28 @@ function mark_effects(value, sources, marked, checked) {
 	}
 }
 
+/**
+ * When committing a fork, we need to trigger eager effects so that
+ * any `$state.eager(...)` expressions update immediately. This
+ * function allows us to discover them
+ * @param {Value} value
+ * @param {Set<Effect>} effects
+ */
+function mark_eager_effects(value, effects) {
+	if (value.reactions === null) return;
+
+	for (const reaction of value.reactions) {
+		const flags = reaction.f;
+
+		if ((flags & DERIVED) !== 0) {
+			mark_eager_effects(/** @type {Derived} */ (reaction), effects);
+		} else if ((flags & EAGER_EFFECT) !== 0) {
+			set_signal_status(reaction, DIRTY);
+			effects.add(/** @type {Effect} */ (reaction));
+		}
+	}
+}
+
 /**
  * @param {Reaction} reaction
  * @param {Source[]} sources
@@ -798,9 +854,9 @@ export function eager(fn) {
 
 	get(version);
 
-	inspect_effect(() => {
+	eager_effect(() => {
 		if (initial) {
-			// the first time this runs, we create an inspect effect
+			// the first time this runs, we create an eager effect
 			// that will run eagerly whenever the expression changes
 			var previous_batch_values = batch_values;
 
@@ -829,6 +885,88 @@ export function eager(fn) {
 	return value;
 }
 
+/**
+ * Creates a 'fork', in which state changes are evaluated but not applied to the DOM.
+ * This is useful for speculatively loading data (for example) when you suspect that
+ * the user is about to take some action.
+ *
+ * Frameworks like SvelteKit can use this to preload data when the user touches or
+ * hovers over a link, making any subsequent navigation feel instantaneous.
+ *
+ * The `fn` parameter is a synchronous function that modifies some state. The
+ * state changes will be reverted after the fork is initialised, then reapplied
+ * if and when the fork is eventually committed.
+ *
+ * When it becomes clear that a fork will _not_ be committed (e.g. because the
+ * user navigated elsewhere), it must be discarded to avoid leaking memory.
+ *
+ * @param {() => void} fn
+ * @returns {Fork}
+ * @since 5.42
+ */
+export function fork(fn) {
+	if (!async_mode_flag) {
+		e.experimental_async_fork();
+	}
+
+	if (current_batch !== null) {
+		e.fork_timing();
+	}
+
+	const batch = Batch.ensure();
+	batch.is_fork = true;
+
+	const settled = batch.settled();
+
+	flushSync(fn);
+
+	// revert state changes
+	for (const [source, value] of batch.previous) {
+		source.v = value;
+	}
+
+	return {
+		commit: async () => {
+			if (!batches.has(batch)) {
+				e.fork_discarded();
+			}
+
+			batch.is_fork = false;
+
+			// apply changes
+			for (const [source, value] of batch.current) {
+				source.v = value;
+			}
+
+			// trigger any `$state.eager(...)` expressions with the new state.
+			// eager effects don't get scheduled like other effects, so we
+			// can't just encounter them during traversal, we need to
+			// proactively flush them
+			// TODO maybe there's a better implementation?
+			flushSync(() => {
+				/** @type {Set<Effect>} */
+				const eager_effects = new Set();
+
+				for (const source of batch.current.keys()) {
+					mark_eager_effects(source, eager_effects);
+				}
+
+				set_eager_effects(eager_effects);
+				flush_eager_effects();
+			});
+
+			batch.revive();
+			await settled;
+		},
+		discard: () => {
+			if (batches.has(batch)) {
+				batches.delete(batch);
+				batch.discard();
+			}
+		}
+	};
+}
+
 /**
  * Forcibly remove all current batches, to prevent cross-talk between tests
  */

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

@@ -28,7 +28,7 @@ import { equals, safe_equals } from './equality.js';
 import * as e from '../errors.js';
 import * as w from '../warnings.js';
 import { async_effect, destroy_effect, teardown } from './effects.js';
-import { inspect_effects, internal_set, set_inspect_effects, source } from './sources.js';
+import { eager_effects, internal_set, set_eager_effects, source } from './sources.js';
 import { get_stack } from '../dev/tracing.js';
 import { async_mode_flag, tracing_mode_flag } from '../../flags/index.js';
 import { Boundary } from '../dom/blocks/boundary.js';
@@ -86,7 +86,7 @@ export function derived(fn) {
 	};
 
 	if (DEV && tracing_mode_flag) {
-		signal.created = get_stack('CreatedAt');
+		signal.created = get_stack('created at');
 	}
 
 	return signal;
@@ -318,8 +318,8 @@ export function execute_derived(derived) {
 	set_active_effect(get_derived_parent_effect(derived));
 
 	if (DEV) {
-		let prev_inspect_effects = inspect_effects;
-		set_inspect_effects(new Set());
+		let prev_eager_effects = eager_effects;
+		set_eager_effects(new Set());
 		try {
 			if (stack.includes(derived)) {
 				e.derived_references_self();
@@ -332,7 +332,7 @@ export function execute_derived(derived) {
 			value = update_reaction(derived);
 		} finally {
 			set_active_effect(prev_active_effect);
-			set_inspect_effects(prev_inspect_effects);
+			set_eager_effects(prev_eager_effects);
 			stack.pop();
 		}
 	} else {

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

@@ -27,7 +27,7 @@ import {
 	DERIVED,
 	UNOWNED,
 	CLEAN,
-	INSPECT_EFFECT,
+	EAGER_EFFECT,
 	HEAD_EFFECT,
 	MAYBE_DIRTY,
 	EFFECT_PRESERVED,
@@ -88,7 +88,7 @@ function create_effect(type, fn, sync, push = true) {
 
 	if (DEV) {
 		// Ensure the parent is never an inspect effect
-		while (parent !== null && (parent.f & INSPECT_EFFECT) !== 0) {
+		while (parent !== null && (parent.f & EAGER_EFFECT) !== 0) {
 			parent = parent.parent;
 		}
 	}
@@ -245,8 +245,8 @@ export function user_pre_effect(fn) {
 }
 
 /** @param {() => void | (() => void)} fn */
-export function inspect_effect(fn) {
-	return create_effect(INSPECT_EFFECT, fn, true);
+export function eager_effect(fn) {
+	return create_effect(EAGER_EFFECT, fn, true);
 }
 
 /**