svelte 5.43.14 → 5.44.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.43.14",
+  "version": "5.44.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -163,6 +163,7 @@
     "aria-query": "^5.3.1",
     "axobject-query": "^4.1.0",
     "clsx": "^2.1.1",
+    "devalue": "^5.5.0",
     "esm-env": "^1.2.1",
     "esrap": "^2.1.0",
     "is-reference": "^3.0.3",

package/src/index-client.js

@@ -249,6 +249,7 @@ export {
 	hasContext,
 	setContext
 } from './internal/client/context.js';
+export { hydratable } from './internal/client/hydratable.js';
 export { hydrate, mount, unmount } from './internal/client/render.js';
 export { tick, untrack, settled } from './internal/client/runtime.js';
 export { createRawSnippet } from './internal/client/dom/blocks/snippet.js';

package/src/index-server.js

@@ -51,4 +51,6 @@ export {
 	setContext
 } from './internal/server/context.js';
 
+export { hydratable } from './internal/server/hydratable.js';
+
 export { createRawSnippet } from './internal/server/blocks/snippet.js';

package/src/internal/client/constants.js

@@ -2,6 +2,15 @@
 export const DERIVED = 1 << 1;
 export const EFFECT = 1 << 2;
 export const RENDER_EFFECT = 1 << 3;
+/**
+ * An effect that does not destroy its child effects when it reruns.
+ * Runs as part of render effects, i.e. not eagerly as part of tree traversal or effect flushing.
+ */
+export const MANAGED_EFFECT = 1 << 24;
+/**
+ * An effect that does not destroy its child effects when it reruns (like MANAGED_EFFECT).
+ * Runs eagerly as part of tree traversal or effect flushing.
+ */
 export const BLOCK_EFFECT = 1 << 4;
 export const BRANCH_EFFECT = 1 << 5;
 export const ROOT_EFFECT = 1 << 6;

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

@@ -2,7 +2,7 @@ import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
 import { eager_effect, render_effect, validate_effect } from '../reactivity/effects.js';
 import { untrack } from '../runtime.js';
-import { get_stack } from './tracing.js';
+import { get_error } from '../../shared/dev.js';
 
 /**
  * @param {() => any[]} get_value
@@ -33,7 +33,7 @@ export function inspect(get_value, inspector, show_stack = false) {
 				inspector(...snap);
 
 				if (!initial) {
-					const stack = get_stack('$inspect(...)');
+					const stack = get_error('$inspect(...)');
 					// eslint-disable-next-line no-console
 
 					if (stack) {

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

@@ -1,7 +1,6 @@
 /** @import { Derived, Reaction, Value } from '#client' */
 import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
-import { define_property } from '../../shared/utils.js';
 import { DERIVED, ASYNC, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { effect_tracking } from '../reactivity/effects.js';
 import { active_reaction, untrack } from '../runtime.js';
@@ -131,62 +130,6 @@ export function trace(label, fn) {
 	}
 }
 
-/**
- * @param {string} label
- * @returns {Error & { stack: string } | null}
- */
-export function get_stack(label) {
-	// @ts-ignore stackTraceLimit doesn't exist everywhere
-	const limit = Error.stackTraceLimit;
-
-	// @ts-ignore
-	Error.stackTraceLimit = Infinity;
-	let error = Error();
-
-	// @ts-ignore
-	Error.stackTraceLimit = limit;
-
-	const stack = error.stack;
-
-	if (!stack) return null;
-
-	const lines = stack.split('\n');
-	const new_lines = ['\n'];
-
-	for (let i = 0; i < lines.length; i++) {
-		const line = lines[i];
-		const posixified = line.replaceAll('\\', '/');
-
-		if (line === 'Error') {
-			continue;
-		}
-
-		if (line.includes('validate_each_keys')) {
-			return null;
-		}
-
-		if (posixified.includes('svelte/src/internal') || posixified.includes('node_modules/.vite')) {
-			continue;
-		}
-
-		new_lines.push(line);
-	}
-
-	if (new_lines.length === 1) {
-		return null;
-	}
-
-	define_property(error, 'stack', {
-		value: new_lines.join('\n')
-	});
-
-	define_property(error, 'name', {
-		value: label
-	});
-
-	return /** @type {Error & { stack: string }} */ (error);
-}
-
 /**
  * @param {Value} source
  * @param {string} label

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

@@ -1,5 +1,5 @@
 /** @import { Effect } from '#client' */
-import { block, branch, effect, destroy_effect } from '../../reactivity/effects.js';
+import { branch, effect, destroy_effect, managed } from '../../reactivity/effects.js';
 
 // TODO in 6.0 or 7.0, when we remove legacy mode, we can simplify this by
 // getting rid of the block/branch stuff and just letting the effect rip.
@@ -16,7 +16,7 @@ export function attach(node, get_fn) {
 	/** @type {Effect | null} */
 	var e;
 
-	block(() => {
+	managed(() => {
 		if (fn !== (fn = get_fn())) {
 			if (e) {
 				destroy_effect(e);

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

@@ -20,7 +20,7 @@ import { clsx } from '../../../shared/attributes.js';
 import { set_class } from './class.js';
 import { set_style } from './style.js';
 import { ATTACHMENT_KEY, NAMESPACE_HTML, UNINITIALIZED } from '../../../../constants.js';
-import { block, branch, destroy_effect, effect } from '../../reactivity/effects.js';
+import { branch, destroy_effect, effect, managed } from '../../reactivity/effects.js';
 import { init_select, select_option } from './bindings/select.js';
 import { flatten } from '../../reactivity/async.js';
 
@@ -508,7 +508,7 @@ export function attribute_effect(
 		var is_select = element.nodeName === 'SELECT';
 		var inited = false;
 
-		block(() => {
+		managed(() => {
 			var next = fn(...values.map(get));
 			/** @type {Record<string | symbol, any>} */
 			var current = set_attributes(

package/src/internal/client/errors.js

@@ -229,22 +229,6 @@ 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}
@@ -309,6 +293,23 @@ export function get_abort_signal_outside_reaction() {
 	}
 }
 
+/**
+ * Expected to find a hydratable with key `%key%` during hydration, but did not.
+ * @param {string} key
+ * @returns {never}
+ */
+export function hydratable_missing_but_required(key) {
+	if (DEV) {
+		const error = new Error(`hydratable_missing_but_required\nExpected to find a hydratable with key \`${key}\` during hydration, but did not.\nhttps://svelte.dev/e/hydratable_missing_but_required`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/hydratable_missing_but_required`);
+	}
+}
+
 /**
  * Failed to hydrate the application
  * @returns {never}

package/src/internal/client/hydratable.js

@@ -0,0 +1,33 @@
+import { async_mode_flag } from '../flags/index.js';
+import { hydrating } from './dom/hydration.js';
+import * as w from './warnings.js';
+import * as e from './errors.js';
+import { DEV } from 'esm-env';
+
+/**
+ * @template T
+ * @param {string} key
+ * @param {() => T} fn
+ * @returns {T}
+ */
+export function hydratable(key, fn) {
+	if (!async_mode_flag) {
+		e.experimental_async_required('hydratable');
+	}
+
+	if (hydrating) {
+		const store = window.__svelte?.h;
+
+		if (store?.has(key)) {
+			return /** @type {T} */ (store.get(key));
+		}
+
+		if (DEV) {
+			e.hydratable_missing_but_required(key);
+		} else {
+			w.hydratable_missing_but_expected(key);
+		}
+	}
+
+	return fn();
+}

package/src/internal/client/proxy.js

@@ -25,7 +25,8 @@ import {
 import { PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
-import { get_stack, tag } from './dev/tracing.js';
+import { tag } from './dev/tracing.js';
+import { get_error } from '../shared/dev.js';
 import { tracing_mode_flag } from '../flags/index.js';
 
 // TODO move all regexes into shared module?
@@ -53,7 +54,7 @@ export function proxy(value) {
 	var is_proxied_array = is_array(value);
 	var version = source(0);
 
-	var stack = DEV && tracing_mode_flag ? get_stack('created at') : null;
+	var stack = DEV && tracing_mode_flag ? get_error('created at') : null;
 	var parent_version = update_version;
 
 	/**

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

@@ -17,7 +17,8 @@ import {
 	EAGER_EFFECT,
 	HEAD_EFFECT,
 	ERROR_VALUE,
-	WAS_MARKED
+	WAS_MARKED,
+	MANAGED_EFFECT
 } from '#client/constants';
 import { async_mode_flag } from '../../flags/index.js';
 import { deferred, define_property } from '../../shared/utils.js';
@@ -234,7 +235,7 @@ export class Batch {
 					effect.f ^= CLEAN;
 				} else if ((flags & EFFECT) !== 0) {
 					target.effects.push(effect);
-				} else if (async_mode_flag && (flags & RENDER_EFFECT) !== 0) {
+				} else if (async_mode_flag && (flags & (RENDER_EFFECT | MANAGED_EFFECT)) !== 0) {
 					target.render_effects.push(effect);
 				} else if (is_dirty(effect)) {
 					if ((effect.f & BLOCK_EFFECT) !== 0) target.block_effects.push(effect);
@@ -562,11 +563,6 @@ export class Batch {
  * @returns {T}
  */
 export function flushSync(fn) {
-	if (async_mode_flag && active_effect !== null) {
-		// We disallow this because it creates super-hard to reason about stack trace and because it's generally a bad idea
-		e.flush_sync_in_effect();
-	}
-
 	var was_flushing_sync = is_flushing_sync;
 	is_flushing_sync = true;
 
@@ -779,7 +775,7 @@ function mark_effects(value, sources, marked, checked) {
 				mark_effects(/** @type {Derived} */ (reaction), sources, marked, checked);
 			} else if (
 				(flags & (ASYNC | BLOCK_EFFECT)) !== 0 &&
-				(flags & DIRTY) === 0 && // we may have scheduled this one already
+				(flags & DIRTY) === 0 &&
 				depends_on(reaction, sources, checked)
 			) {
 				set_signal_status(reaction, DIRTY);
@@ -949,7 +945,7 @@ export function eager(fn) {
  */
 export function fork(fn) {
 	if (!async_mode_flag) {
-		e.experimental_async_fork();
+		e.experimental_async_required('fork');
 	}
 
 	if (current_batch !== null) {
@@ -958,12 +954,15 @@ export function fork(fn) {
 
 	var batch = Batch.ensure();
 	batch.is_fork = true;
+	batch_values = new Map();
 
 	var committed = false;
 	var settled = batch.settled();
 
 	flushSync(fn);
 
+	batch_values = null;
+
 	// revert state changes
 	for (var [source, value] of batch.previous) {
 		source.v = value;

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

@@ -29,7 +29,7 @@ import * as e from '../errors.js';
 import * as w from '../warnings.js';
 import { async_effect, destroy_effect, effect_tracking, teardown } from './effects.js';
 import { eager_effects, internal_set, set_eager_effects, source } from './sources.js';
-import { get_stack } from '../dev/tracing.js';
+import { get_error } from '../../shared/dev.js';
 import { async_mode_flag, tracing_mode_flag } from '../../flags/index.js';
 import { Boundary } from '../dom/blocks/boundary.js';
 import { component_context } from '../context.js';
@@ -84,7 +84,7 @@ export function derived(fn) {
 	};
 
 	if (DEV && tracing_mode_flag) {
-		signal.created = get_stack('created at');
+		signal.created = get_error('created at');
 	}
 
 	return signal;
@@ -378,7 +378,7 @@ export function update_derived(derived) {
 	if (batch_values !== null) {
 		// only cache the value if we're in a tracking context, otherwise we won't
 		// clear the cache in `mark_reactions` when dependencies are updated
-		if (effect_tracking()) {
+		if (effect_tracking() || current_batch?.is_fork) {
 			batch_values.set(derived, value);
 		}
 	} else {

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

@@ -33,7 +33,8 @@ import {
 	STALE_REACTION,
 	USER_EFFECT,
 	ASYNC,
-	CONNECTED
+	CONNECTED,
+	MANAGED_EFFECT
 } from '#client/constants';
 import * as e from '../errors.js';
 import { DEV } from 'esm-env';
@@ -401,6 +402,18 @@ export function block(fn, flags = 0) {
 	return effect;
 }
 
+/**
+ * @param {(() => void)} fn
+ * @param {number} flags
+ */
+export function managed(fn, flags = 0) {
+	var effect = create_effect(MANAGED_EFFECT | flags, fn, true);
+	if (DEV) {
+		effect.dev_stack = dev_stack;
+	}
+	return effect;
+}
+
 /**
  * @param {(() => void)} fn
  */

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

@@ -34,7 +34,8 @@ import {
 } from '#client/constants';
 import * as e from '../errors.js';
 import { legacy_mode_flag, tracing_mode_flag } from '../../flags/index.js';
-import { get_stack, tag_proxy } from '../dev/tracing.js';
+import { tag_proxy } from '../dev/tracing.js';
+import { get_error } from '../../shared/dev.js';
 import { component_context, is_runes } from '../context.js';
 import { Batch, batch_values, eager_block_effects, schedule_effect } from './batch.js';
 import { proxy } from '../proxy.js';
@@ -78,7 +79,7 @@ export function source(v, stack) {
 	};
 
 	if (DEV && tracing_mode_flag) {
-		signal.created = stack ?? get_stack('created at');
+		signal.created = stack ?? get_error('created at');
 		signal.updated = null;
 		signal.set_during_effect = false;
 		signal.trace = null;
@@ -196,7 +197,7 @@ export function internal_set(source, value) {
 				source.updated.set('', { error: /** @type {any} */ (null), count });
 
 				if (tracing_mode_flag || count > 5) {
-					const error = get_stack('updated at');
+					const error = get_error('updated at');
 
 					if (error !== null) {
 						let entry = source.updated.get(error.stack);
@@ -363,10 +364,8 @@ function mark_reactions(signal, status) {
 				mark_reactions(derived, MAYBE_DIRTY);
 			}
 		} else if (not_dirty) {
-			if ((flags & BLOCK_EFFECT) !== 0) {
-				if (eager_block_effects !== null) {
-					eager_block_effects.add(/** @type {Effect} */ (reaction));
-				}
+			if ((flags & BLOCK_EFFECT) !== 0 && eager_block_effects !== null) {
+				eager_block_effects.add(/** @type {Effect} */ (reaction));
 			}
 
 			schedule_effect(/** @type {Effect} */ (reaction));

package/src/internal/client/runtime.js

@@ -21,7 +21,8 @@ import {
 	REACTION_IS_UPDATING,
 	STALE_REACTION,
 	ERROR_VALUE,
-	WAS_MARKED
+	WAS_MARKED,
+	MANAGED_EFFECT
 } from './constants.js';
 import { old_values } from './reactivity/sources.js';
 import {
@@ -32,7 +33,8 @@ import {
 	update_derived
 } from './reactivity/deriveds.js';
 import { async_mode_flag, tracing_mode_flag } from '../flags/index.js';
-import { tracing_expressions, get_stack } from './dev/tracing.js';
+import { tracing_expressions } from './dev/tracing.js';
+import { get_error } from '../shared/dev.js';
 import {
 	component_context,
 	dev_current_component_function,
@@ -43,7 +45,13 @@ import {
 	set_dev_stack
 } from './context.js';
 import * as w from './warnings.js';
-import { Batch, batch_values, flushSync, schedule_effect } from './reactivity/batch.js';
+import {
+	Batch,
+	batch_values,
+	current_batch,
+	flushSync,
+	schedule_effect
+} from './reactivity/batch.js';
 import { handle_error } from './error-handling.js';
 import { UNINITIALIZED } from '../../constants.js';
 import { captured_signals } from './legacy.js';
@@ -421,7 +429,7 @@ export function update_effect(effect) {
 	}
 
 	try {
-		if ((flags & BLOCK_EFFECT) !== 0) {
+		if ((flags & (BLOCK_EFFECT | MANAGED_EFFECT)) !== 0) {
 			destroy_block_effect_children(effect);
 		} else {
 			destroy_effect_children(effect);
@@ -547,7 +555,7 @@ export function get(signal) {
 		// 	if (!tracking && !untracking && !was_read) {
 		// 		w.await_reactivity_loss(/** @type {string} */ (signal.label));
 
-		// 		var trace = get_stack('traced at');
+		// 		var trace = get_error('traced at');
 		// 		// eslint-disable-next-line no-console
 		// 		if (trace) console.warn(trace);
 		// 	}
@@ -566,7 +574,7 @@ export function get(signal) {
 			if (signal.trace) {
 				signal.trace();
 			} else {
-				var trace = get_stack('traced at');
+				var trace = get_error('traced at');
 
 				if (trace) {
 					var entry = tracing_expressions.entries.get(signal);
@@ -611,7 +619,10 @@ export function get(signal) {
 
 			return value;
 		}
-	} else if (is_derived && !batch_values?.has(signal)) {
+	} else if (
+		is_derived &&
+		(!batch_values?.has(signal) || (current_batch?.is_fork && !effect_tracking()))
+	) {
 		derived = /** @type {Derived} */ (signal);
 
 		if (is_dirty(derived)) {

package/src/internal/client/warnings.js

@@ -87,6 +87,18 @@ export function event_handler_invalid(handler, suggestion) {
 	}
 }
 
+/**
+ * Expected to find a hydratable with key `%key%` during hydration, but did not.
+ * @param {string} key
+ */
+export function hydratable_missing_but_expected(key) {
+	if (DEV) {
+		console.warn(`%c[svelte] hydratable_missing_but_expected\n%cExpected to find a hydratable with key \`${key}\` during hydration, but did not.\nhttps://svelte.dev/e/hydratable_missing_but_expected`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/hydratable_missing_but_expected`);
+	}
+}
+
 /**
  * The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
  * @param {string} attribute

package/src/internal/server/dev.js

@@ -4,6 +4,7 @@ import {
 	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
 } from '../../html-tree-validation.js';
+import { get_stack } from '../shared/dev.js';
 import { set_ssr_context, ssr_context } from './context.js';
 import * as e from './errors.js';
 import { Renderer } from './renderer.js';
@@ -98,3 +99,12 @@ export function validate_snippet_args(renderer) {
 		e.invalid_snippet_arguments();
 	}
 }
+
+export function get_user_code_location() {
+	const stack = get_stack();
+
+	return stack
+		.filter((line) => line.trim().startsWith('at '))
+		.map((line) => line.replace(/\((.*):\d+:\d+\)$/, (_, file) => `(${file})`))
+		.join('\n');
+}

package/src/internal/server/errors.js

@@ -2,6 +2,18 @@
 
 export *  from '../shared/errors.js';
 
+/**
+ * The node API `AsyncLocalStorage` is not available, but is required to use async server rendering.
+ * @returns {never}
+ */
+export function async_local_storage_unavailable() {
+	const error = new Error(`async_local_storage_unavailable\nThe node API \`AsyncLocalStorage\` is not available, but is required to use async server rendering.\nhttps://svelte.dev/e/async_local_storage_unavailable`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
 /**
  * Encountered asynchronous work while rendering synchronously.
  * @returns {never}
@@ -26,6 +38,48 @@ export function html_deprecated() {
 	throw error;
 }
 
+/**
+ * Attempted to set `hydratable` with key `%key%` twice with different values.
+ * 
+ * %stack%
+ * @param {string} key
+ * @param {string} stack
+ * @returns {never}
+ */
+export function hydratable_clobbering(key, stack) {
+	const error = new Error(`hydratable_clobbering\nAttempted to set \`hydratable\` with key \`${key}\` twice with different values.
+
+${stack}\nhttps://svelte.dev/e/hydratable_clobbering`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
+/**
+ * Failed to serialize `hydratable` data for key `%key%`.
+ * 
+ * `hydratable` can serialize anything [`uneval` from `devalue`](https://npmjs.com/package/uneval) can, plus Promises.
+ * 
+ * Cause:
+ * %stack%
+ * @param {string} key
+ * @param {string} stack
+ * @returns {never}
+ */
+export function hydratable_serialization_failed(key, stack) {
+	const error = new Error(`hydratable_serialization_failed\nFailed to serialize \`hydratable\` data for key \`${key}\`.
+
+\`hydratable\` can serialize anything [\`uneval\` from \`devalue\`](https://npmjs.com/package/uneval) can, plus Promises.
+
+Cause:
+${stack}\nhttps://svelte.dev/e/hydratable_serialization_failed`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
 /**
  * `%name%(...)` is not available on the server
  * @param {string} name
@@ -36,5 +90,17 @@ export function lifecycle_function_unavailable(name) {
 
 	error.name = 'Svelte error';
 
+	throw error;
+}
+
+/**
+ * Could not resolve `render` context.
+ * @returns {never}
+ */
+export function server_context_required() {
+	const error = new Error(`server_context_required\nCould not resolve \`render\` context.\nhttps://svelte.dev/e/server_context_required`);
+
+	error.name = 'Svelte error';
+
 	throw error;
 }