svelte 5.43.15 → 5.44.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.43.15",
+  "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/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/errors.js

@@ -230,18 +230,18 @@ export function effect_update_depth_exceeded() {
 }
 
 /**
- * Cannot use `fork(...)` unless the `experimental.async` compiler option is `true`
+ * Cannot use `flushSync` inside an effect
  * @returns {never}
  */
-export function experimental_async_fork() {
+export function flush_sync_in_effect() {
 	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`);
+		const error = new Error(`flush_sync_in_effect\nCannot use \`flushSync\` inside an effect\nhttps://svelte.dev/e/flush_sync_in_effect`);
 
 		error.name = 'Svelte error';
 
 		throw error;
 	} else {
-		throw new Error(`https://svelte.dev/e/experimental_async_fork`);
+		throw new Error(`https://svelte.dev/e/flush_sync_in_effect`);
 	}
 }
 
@@ -293,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

@@ -945,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) {

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;

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

package/src/internal/client/runtime.js

@@ -33,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,
@@ -554,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);
 		// 	}
@@ -573,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);

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

package/src/internal/server/hydratable.js

@@ -0,0 +1,136 @@
+/** @import { HydratableLookupEntry } from '#server' */
+import { async_mode_flag } from '../flags/index.js';
+import { get_render_context } from './render-context.js';
+import * as e from './errors.js';
+import * as devalue from 'devalue';
+import { get_stack } from '../shared/dev.js';
+import { DEV } from 'esm-env';
+import { get_user_code_location } from './dev.js';
+
+/**
+ * @template T
+ * @param {string} key
+ * @param {() => T} fn
+ * @returns {T}
+ */
+export function hydratable(key, fn) {
+	if (!async_mode_flag) {
+		e.experimental_async_required('hydratable');
+	}
+
+	const { hydratable } = get_render_context();
+
+	let entry = hydratable.lookup.get(key);
+
+	if (entry !== undefined) {
+		if (DEV) {
+			const comparison = compare(key, entry, encode(key, fn()));
+			comparison.catch(() => {});
+			hydratable.comparisons.push(comparison);
+		}
+
+		return /** @type {T} */ (entry.value);
+	}
+
+	const value = fn();
+
+	entry = encode(key, value, hydratable.unresolved_promises);
+	hydratable.lookup.set(key, entry);
+
+	return value;
+}
+
+/**
+ * @param {string} key
+ * @param {any} value
+ * @param {Map<Promise<any>, string>} [unresolved]
+ */
+function encode(key, value, unresolved) {
+	/** @type {HydratableLookupEntry} */
+	const entry = { value, serialized: '' };
+
+	if (DEV) {
+		entry.stack = get_user_code_location();
+	}
+
+	let uid = 1;
+
+	entry.serialized = devalue.uneval(entry.value, (value, uneval) => {
+		if (value instanceof Promise) {
+			const p = value
+				.then((v) => `r(${uneval(v)})`)
+				.catch((devalue_error) =>
+					e.hydratable_serialization_failed(
+						key,
+						serialization_stack(entry.stack, devalue_error?.stack)
+					)
+				);
+
+			// prevent unhandled rejections from crashing the server
+			p.catch(() => {});
+
+			// track which promises are still resolving when render is complete
+			unresolved?.set(p, key);
+			p.finally(() => unresolved?.delete(p));
+
+			// we serialize promises as `"${i}"`, because it's impossible for that string
+			// to occur 'naturally' (since the quote marks would have to be escaped)
+			const placeholder = `"${uid++}"`;
+
+			(entry.promises ??= []).push(
+				p.then((s) => {
+					entry.serialized = entry.serialized.replace(placeholder, s);
+				})
+			);
+
+			return placeholder;
+		}
+	});
+
+	return entry;
+}
+
+/**
+ * @param {string} key
+ * @param {HydratableLookupEntry} a
+ * @param {HydratableLookupEntry} b
+ */
+async function compare(key, a, b) {
+	// note: these need to be loops (as opposed to Promise.all) because
+	// additional promises can get pushed to them while we're awaiting
+	// an earlier one
+	for (const p of a?.promises ?? []) {
+		await p;
+	}
+
+	for (const p of b?.promises ?? []) {
+		await p;
+	}
+
+	if (a.serialized !== b.serialized) {
+		const a_stack = /** @type {string} */ (a.stack);
+		const b_stack = /** @type {string} */ (b.stack);
+
+		const stack =
+			a_stack === b_stack
+				? `Occurred at:\n${a_stack}`
+				: `First occurrence at:\n${a_stack}\n\nSecond occurrence at:\n${b_stack}`;
+
+		e.hydratable_clobbering(key, stack);
+	}
+}
+
+/**
+ * @param {string | undefined} root_stack
+ * @param {string | undefined} uneval_stack
+ */
+function serialization_stack(root_stack, uneval_stack) {
+	let out = '';
+	if (root_stack) {
+		out += root_stack + '\n';
+	}
+	if (uneval_stack) {
+		out += 'Caused by:\n' + uneval_stack + '\n';
+	}
+	return out || '<missing stack trace>';
+}

package/src/internal/server/render-context.js

@@ -0,0 +1,74 @@
+// @ts-ignore -- we don't include node types in the production build
+/** @import { AsyncLocalStorage } from 'node:async_hooks' */
+/** @import { RenderContext } from '#server' */
+
+import { deferred } from '../shared/utils.js';
+import * as e from './errors.js';
+
+/** @type {Promise<void> | null} */
+let current_render = null;
+
+/** @type {RenderContext | null} */
+let context = null;
+
+/** @returns {RenderContext} */
+export function get_render_context() {
+	const store = context ?? als?.getStore();
+
+	if (!store) {
+		e.server_context_required();
+	}
+
+	return store;
+}
+
+/**
+ * @template T
+ * @param {() => Promise<T>} fn
+ * @returns {Promise<T>}
+ */
+export async function with_render_context(fn) {
+	context = {
+		hydratable: {
+			lookup: new Map(),
+			comparisons: [],
+			unresolved_promises: new Map()
+		}
+	};
+
+	if (in_webcontainer()) {
+		const { promise, resolve } = deferred();
+		const previous_render = current_render;
+		current_render = promise;
+		await previous_render;
+		return fn().finally(resolve);
+	}
+
+	try {
+		if (als === null) {
+			e.async_local_storage_unavailable();
+		}
+		return als.run(context, fn);
+	} finally {
+		context = null;
+	}
+}
+
+/** @type {AsyncLocalStorage<RenderContext | null> | null} */
+let als = null;
+
+export async function init_render_context() {
+	if (als !== null) return;
+	try {
+		// @ts-ignore -- we don't include node types in the production build
+		const { AsyncLocalStorage } = await import('node:async_hooks');
+		als = new AsyncLocalStorage();
+	} catch {}
+}
+
+// this has to be a function because rollup won't treeshake it if it's a constant
+function in_webcontainer() {
+	// @ts-ignore -- this will fail when we run typecheck because we exclude node types
+	// eslint-disable-next-line n/prefer-global/process
+	return !!globalThis.process?.versions?.webcontainer;
+}