svelte 5.56.9 → 5.57.0

package/src/internal/server/context.js

@@ -1,6 +1,6 @@
 /** @import { SSRContext } from '#server' */
 import { DEV } from 'esm-env';
-import * as e from './errors.js';
+import { create_context, get_or_init_context_map } from '../shared/context.js';
 
 /** @type {SSRContext | null} */
 export var ssr_context = null;
@@ -12,22 +12,13 @@ export function set_ssr_context(v) {
 
 /**
  * @template T
- * @returns {[() => T, (context: T) => T]}
+ * @returns {[() => T, (context: T) => T, () => boolean]}
  * @since 5.40.0
  */
 export function createContext() {
-	const key = {};
-
-	return [
-		() => {
-			if (!hasContext(key)) {
-				e.missing_context();
-			}
-
-			return getContext(key);
-		},
-		(context) => setContext(key, context)
-	];
+	return /** @type {[() => T, (context: T) => T, () => boolean]} */ (
+		create_context(getContext, setContext, hasContext)
+	);
 }
 
 /**
@@ -36,7 +27,7 @@ export function createContext() {
  * @returns {T}
  */
 export function getContext(key) {
-	const context_map = get_or_init_context_map('getContext');
+	const context_map = get_or_init_context_map(ssr_context, 'getContext');
 	const result = /** @type {T} */ (context_map.get(key));
 
 	return result;
@@ -49,7 +40,7 @@ export function getContext(key) {
  * @returns {T}
  */
 export function setContext(key, context) {
-	get_or_init_context_map('setContext').set(key, context);
+	get_or_init_context_map(ssr_context, 'setContext').set(key, context);
 	return context;
 }
 
@@ -58,24 +49,12 @@ export function setContext(key, context) {
  * @returns {boolean}
  */
 export function hasContext(key) {
-	return get_or_init_context_map('hasContext').has(key);
+	return get_or_init_context_map(ssr_context, 'hasContext').has(key);
 }
 
 /** @returns {Map<any, any>} */
 export function getAllContexts() {
-	return get_or_init_context_map('getAllContexts');
-}
-
-/**
- * @param {string} name
- * @returns {Map<unknown, unknown>}
- */
-function get_or_init_context_map(name) {
-	if (ssr_context === null) {
-		e.lifecycle_outside_component(name);
-	}
-
-	return (ssr_context.c ??= new Map(get_parent_context(ssr_context) || undefined));
+	return get_or_init_context_map(ssr_context, 'getAllContexts');
 }
 
 /**
@@ -94,24 +73,6 @@ export function pop() {
 	ssr_context = /** @type {SSRContext} */ (ssr_context).p;
 }
 
-/**
- * @param {SSRContext} ssr_context
- * @returns {Map<unknown, unknown> | null}
- */
-function get_parent_context(ssr_context) {
-	let parent = ssr_context.p;
-
-	while (parent !== null) {
-		const context_map = parent.c;
-		if (context_map !== null) {
-			return context_map;
-		}
-		parent = parent.p;
-	}
-
-	return null;
-}
-
 /**
  * Wraps an `await` expression in such a way that the component context that was
  * active before the expression evaluated can be reapplied afterwards —

package/src/internal/server/index.js

@@ -1,5 +1,5 @@
 /** @import { ComponentType, SvelteComponent, Component } from 'svelte' */
-/** @import { Csp, RenderOutput } from '#server' */
+/** @import { Csp, RenderOutput } from '../../server/public.js' */
 /** @import { Store } from '#shared' */
 export { FILENAME, HMR } from '../../constants.js';
 import { attr, clsx, to_class, to_style } from '../shared/attributes.js';

package/src/internal/server/renderer.js

@@ -1,8 +1,9 @@
 /** @import { Component } from 'svelte' */
-/** @import { Csp, HydratableContext, RenderOutput, SSRContext, SyncRenderOutput, Sha256Source } from './types.js' */
+/** @import { HydratableContext, SSRContext } from './types.js' */
+/** @import { Csp, RenderOutput, SyncRenderOutput, Sha256Source } from '../../server/public.js' */
 /** @import { MaybePromise } from '#shared' */
 import { async_mode_flag } from '../flags/index.js';
-import { abort } from './abort-signal.js';
+import { STALE_REACTION } from '../client/constants.js';
 import { pop, push, set_ssr_context, ssr_context } from './context.js';
 import * as e from './errors.js';
 import * as w from './warnings.js';
@@ -12,7 +13,7 @@ import { attributes } from './index.js';
 import { get_render_context, with_render_context, init_render_context } from './render-context.js';
 import { sha256 } from './crypto.js';
 import * as devalue from 'devalue';
-import { has_own_property, noop } from '../shared/utils.js';
+import { has_own_property, is_array, noop } from '../shared/utils.js';
 import { escape_html } from '../../escaping.js';
 
 /** @typedef {'head' | 'body'} RendererType */
@@ -88,7 +89,7 @@ export class Renderer {
 	 * State that is local to the branch it is declared in.
 	 * It will be shallow-copied to all children.
 	 *
-	 * @type {{ select_value: string | undefined }}
+	 * @type {{ select_value: any, multiple: boolean }}
 	 */
 	local;
 
@@ -100,7 +101,7 @@ export class Renderer {
 		this.#parent = parent;
 
 		this.global = global;
-		this.local = parent ? { ...parent.local } : { select_value: undefined };
+		this.local = parent ? { ...parent.local } : { select_value: undefined, multiple: false };
 		this.type = parent ? parent.type : 'body';
 	}
 
@@ -179,7 +180,7 @@ export class Renderer {
 		// prevent unhandled rejections, and attach the promise to the renderer instance
 		// so that rejections correctly cause rendering to fail
 		promise.catch(noop);
-		this.promise = promise;
+		this.promise = this.global.track(promise);
 
 		return promises;
 	}
@@ -224,7 +225,7 @@ export class Renderer {
 				e.await_invalid();
 			}
 
-			child.promise = result;
+			child.promise = child.global.track(result);
 		}
 
 		return child;
@@ -272,7 +273,7 @@ export class Renderer {
 					e.await_invalid();
 				}
 				result.catch(noop);
-				child.promise = result;
+				child.promise = child.global.track(result);
 			}
 		} catch (error) {
 			// synchronous errors are handled here, async errors will be handled in #collect_content_async
@@ -292,12 +293,14 @@ export class Renderer {
 					e.await_invalid();
 				}
 
-				child.promise = /** @type {Promise<unknown>} */ (result).then((transformed) => {
-					set_ssr_context(parent_context);
-					child.#out.push(Renderer.#serialize_failed_boundary(transformed));
-					failed_snippet(child, transformed, noop);
-					child.#out.push(BLOCK_CLOSE);
-				});
+				child.promise = child.global.track(
+					/** @type {Promise<unknown>} */ (result).then((transformed) => {
+						set_ssr_context(parent_context);
+						child.#out.push(Renderer.#serialize_failed_boundary(transformed));
+						failed_snippet(child, transformed, noop);
+						child.#out.push(BLOCK_CLOSE);
+					})
+				);
 				child.promise.catch(noop);
 			} else {
 				child.#out.push(Renderer.#serialize_failed_boundary(result));
@@ -316,8 +319,11 @@ export class Renderer {
 	 */
 	component(fn, component_fn) {
 		push(component_fn);
-		const child = this.child(fn);
-		child.#is_component_body = true;
+		// mark before running so `onDestroy` callbacks are still collected if `fn` throws
+		this.child((renderer) => {
+			renderer.#is_component_body = true;
+			return fn(renderer);
+		});
 		pop();
 	}
 
@@ -332,11 +338,13 @@ export class Renderer {
 	 * @returns {void}
 	 */
 	select(attrs, fn, css_hash, classes, styles, flags, is_rich) {
-		const { value, ...select_attrs } = attrs;
+		const { value, defaultValue, ...select_attrs } = attrs;
+		if (select_attrs.multiple === '') select_attrs.multiple = true;
 
 		this.push(`<select${attributes(select_attrs, css_hash, classes, styles, flags)}>`);
 		this.child((renderer) => {
-			renderer.local.select_value = value;
+			renderer.local.select_value = value === undefined ? defaultValue : value;
+			renderer.local.multiple = !!select_attrs.multiple;
 			fn(renderer);
 		});
 		this.push(`${is_rich ? '<!>' : ''}</select>`);
@@ -364,7 +372,15 @@ export class Renderer {
 				value = attrs.value;
 			}
 
-			if (value === this.local.select_value) {
+			var select_value = this.local.select_value;
+
+			if (
+				// Super edge-case, but theoretically someone could use arrays with non-multiple selects,
+				// so we gotta check for the multiple attribute presence, too.
+				this.local.multiple && is_array(select_value)
+					? select_value.includes(value)
+					: value === select_value
+			) {
 				renderer.#out.push(' selected=""');
 			}
 
@@ -451,6 +467,7 @@ export class Renderer {
 	 */
 	copy() {
 		const copy = new Renderer(this.global, this.#parent);
+		copy.type = this.type;
 		copy.#out = this.#out.map((item) => (item instanceof Renderer ? item.copy() : item));
 		copy.promise = this.promise;
 		return copy;
@@ -624,6 +641,49 @@ export class Renderer {
 		}
 	}
 
+	/**
+	 * Runs every `onDestroy` callback in this renderer tree. On a failed render,
+	 * cleanup errors are suppressed so they do not mask the render error.
+	 * @param {boolean} suppress_errors
+	 */
+	#run_on_destroy(suppress_errors) {
+		let first_error;
+		let has_error = false;
+
+		for (const cleanup of this.#collect_on_destroy()) {
+			try {
+				cleanup();
+			} catch (error) {
+				if (!suppress_errors && !has_error) {
+					first_error = error;
+					has_error = true;
+				}
+			}
+		}
+
+		if (has_error) throw first_error;
+	}
+
+	/**
+	 * @param {'sync' | 'async'} mode
+	 * @param {{ idPrefix?: string; csp?: Csp; transformError?: (error: unknown) => unknown }} options
+	 * @returns {Renderer}
+	 */
+	static #create(mode, options) {
+		if (options.idPrefix?.includes('--')) {
+			e.invalid_id_prefix();
+		}
+
+		return new Renderer(
+			new SSRState(
+				mode,
+				options.idPrefix ? options.idPrefix + '-' : '',
+				options.csp,
+				options.transformError
+			)
+		);
+	}
+
 	/**
 	 * Render a component. Throws if any of the children are performing asynchronous work.
 	 *
@@ -634,13 +694,27 @@ export class Renderer {
 	 */
 	static #render(component, options) {
 		var previous_context = ssr_context;
+		const renderer = Renderer.#create('sync', options);
+		/** @type {AccumulatedContent | undefined} */
+		let result;
+		let render_error;
+		let failed = false;
+
 		try {
-			const renderer = Renderer.#open_render('sync', component, options);
+			try {
+				Renderer.#open_render(renderer, component, options);
+				result = Renderer.#close_render(renderer.#collect_content(), renderer);
+			} catch (error) {
+				render_error = error;
+				failed = true;
+			}
 
-			const content = renderer.#collect_content();
-			return Renderer.#close_render(content, renderer);
+			renderer.#run_on_destroy(failed);
+			if (failed) throw render_error;
+
+			return /** @type {AccumulatedContent} */ (result);
 		} finally {
-			abort();
+			renderer.global.abort();
 			set_ssr_context(previous_context);
 		}
 	}
@@ -655,18 +729,35 @@ export class Renderer {
 	 */
 	static async #render_async(component, options) {
 		const previous_context = ssr_context;
+		const renderer = Renderer.#create('async', options);
+		/** @type {(AccumulatedContent & { hashes: { script: Sha256Source[] } }) | undefined} */
+		let result;
+		let render_error;
+		let failed = false;
 
 		try {
-			const renderer = Renderer.#open_render('async', component, options);
-			const content = await renderer.#collect_content_async();
-			const hydratables = await renderer.#collect_hydratables();
-			if (hydratables !== null) {
-				content.head = hydratables + content.head;
+			try {
+				Renderer.#open_render(renderer, component, options);
+				const content = await renderer.#collect_content_async();
+				const hydratables = await renderer.#collect_hydratables();
+				if (hydratables !== null) {
+					content.head = hydratables + content.head;
+				}
+				result = Renderer.#close_render(content, renderer);
+			} catch (error) {
+				render_error = error;
+				failed = true;
+				renderer.global.abort();
+				await renderer.global.settle();
 			}
-			return Renderer.#close_render(content, renderer);
+
+			renderer.#run_on_destroy(failed);
+			if (failed) throw render_error;
+
+			return /** @type {AccumulatedContent & { hashes: { script: Sha256Source[] } }} */ (result);
 		} finally {
 			set_ssr_context(previous_context);
-			abort();
+			renderer.global.abort();
 		}
 	}
 
@@ -758,28 +849,15 @@ export class Renderer {
 
 	/**
 	 * @template {Record<string, any>} Props
-	 * @param {'sync' | 'async'} mode
+	 * @param {Renderer} renderer
 	 * @param {import('svelte').Component<Props>} component
 	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string; csp?: Csp; transformError?: (error: unknown) => unknown }} options
-	 * @returns {Renderer}
+	 * @returns {void}
 	 */
-	static #open_render(mode, component, options) {
-		if (options.idPrefix?.includes('--')) {
-			e.invalid_id_prefix();
-		}
-
+	static #open_render(renderer, component, options) {
 		var previous_context = ssr_context;
 
 		try {
-			const renderer = new Renderer(
-				new SSRState(
-					mode,
-					options.idPrefix ? options.idPrefix + '-' : '',
-					options.csp,
-					options.transformError
-				)
-			);
-
 			/** @type {SSRContext} */
 			const context = { p: null, c: options.context ?? null, r: renderer };
 			set_ssr_context(context);
@@ -788,8 +866,6 @@ export class Renderer {
 			// @ts-expect-error
 			component(renderer, options.props ?? {});
 			renderer.push(BLOCK_CLOSE);
-
-			return renderer;
 		} finally {
 			set_ssr_context(previous_context);
 		}
@@ -801,10 +877,6 @@ export class Renderer {
 	 * @returns {AccumulatedContent & { hashes: { script: Sha256Source[] } }}
 	 */
 	static #close_render(content, renderer) {
-		for (const cleanup of renderer.#collect_on_destroy()) {
-			cleanup();
-		}
-
 		let head = content.head + renderer.global.get_title();
 		let body = content.body;
 
@@ -888,6 +960,14 @@ export class SSRState {
 	/** @readonly @type {Set<{ hash: string; code: string }>} */
 	css = new Set();
 
+	/** @type {Set<Promise<unknown>>} */
+	#pending = new Set();
+
+	/** @type {AbortController | null} */
+	#controller = null;
+
+	#aborted = false;
+
 	/**
 	 * `transformError` passed to `render`. Called when an error boundary catches an error.
 	 * Throws by default if unset in `render`.
@@ -918,6 +998,38 @@ export class SSRState {
 		this.uid = () => `${id_prefix}s${uid++}`;
 	}
 
+	/**
+	 * @template T
+	 * @param {Promise<T>} promise
+	 * @returns {Promise<T>}
+	 */
+	track(promise) {
+		this.#pending.add(promise);
+		promise.then(
+			() => this.#pending.delete(promise),
+			() => this.#pending.delete(promise)
+		);
+		return promise;
+	}
+
+	async settle() {
+		while (this.#pending.size > 0) {
+			await Promise.allSettled([...this.#pending]);
+		}
+	}
+
+	abort() {
+		if (this.#aborted) return;
+		this.#aborted = true;
+		this.#controller?.abort(STALE_REACTION);
+	}
+
+	get_abort_signal() {
+		const controller = (this.#controller ??= new AbortController());
+		if (this.#aborted) controller.abort(STALE_REACTION);
+		return controller.signal;
+	}
+
 	get_title() {
 		return this.#title.value;
 	}

package/src/internal/shared/attributes.js

@@ -27,7 +27,8 @@ export function attr(name, value, is_boolean = false) {
 	if (name === 'hidden' && value !== 'until-found') {
 		is_boolean = true;
 	}
-	if (value == null || (!value && is_boolean)) return '';
+	// `''` is a present boolean attribute, as it is in markup and on the client
+	if (value == null || (is_boolean && !value && value !== '')) return '';
 	const normalized =
 		(has_own_property.call(replacements, name) && replacements[name].get(value)) || value;
 	const assignment = is_boolean ? `=""` : `="${escape_html(normalized, true)}"`;
@@ -142,8 +143,9 @@ export function to_style(value, styles) {
 		}
 
 		if (value) {
+			// strip comments; surrounding whitespace is handled by the trims below (which is much faster than doing it through regex)
 			value = String(value)
-				.replaceAll(/\s*\/\*.*?\*\/\s*/g, '')
+				.replaceAll(/\/\*.*?\*\//g, '')
 				.trim();
 
 			/** @type {boolean | '"' | "'"} */

package/src/internal/shared/clone.js

@@ -105,6 +105,8 @@ function clone(value, cloned, path, paths, original = null, no_tojson = false) {
 		}
 
 		if (value instanceof Date) {
+			// Ensure SvelteDate snapshots are tracked
+			value.getTime();
 			return /** @type {Snapshot<T>} */ (structuredClone(value));
 		}
 

package/src/internal/shared/context.js

@@ -0,0 +1,53 @@
+import { lifecycle_outside_component, missing_context } from './errors.js';
+
+/**
+ * @template T
+ * @param {(key: object) => T} get_context
+ * @param {(key: object, context: T) => T} set_context
+ * @param {(key: object) => boolean} has_context
+ * @returns {[() => T, (context: T) => T, () => boolean]}
+ */
+export function create_context(get_context, set_context, has_context) {
+	const key = {};
+
+	return [
+		() => {
+			if (!has_context(key)) {
+				missing_context();
+			}
+
+			return get_context(key);
+		},
+		(context) => set_context(key, context),
+		() => has_context(key)
+	];
+}
+
+/**
+ * @typedef {{ p: Context | null, c: Map<unknown, unknown> | null }} Context
+ */
+
+/**
+ * @param {Context} context
+ * @returns {Map<unknown, unknown> | null}
+ */
+function get_parent_context(context) {
+	let parent = context.p;
+	while (parent !== null && parent.c === null) {
+		parent = parent.p;
+	}
+	return parent?.c ?? null;
+}
+
+/**
+ * @param {Context | null} context
+ * @param {string} name
+ * @returns {Map<unknown, unknown>}
+ */
+export function get_or_init_context_map(context, name) {
+	if (context === null) {
+		lifecycle_outside_component(name);
+	}
+
+	return (context.c ??= new Map(get_parent_context(context) || undefined));
+}

package/src/internal/shared/errors.js

@@ -86,12 +86,12 @@ export function lifecycle_outside_component(name) {
 }
 
 /**
- * Context was not set in a parent component
+ * Context was not set in the current component or any of its ancestors
  * @returns {never}
  */
 export function missing_context() {
 	if (DEV) {
-		const error = new Error(`missing_context\nContext was not set in a parent component\nhttps://svelte.dev/e/missing_context`);
+		const error = new Error(`missing_context\nContext was not set in the current component or any of its ancestors\nhttps://svelte.dev/e/missing_context`);
 
 		error.name = 'Svelte error';
 

package/src/legacy/legacy-server.js

@@ -1,5 +1,5 @@
 /** @import { SvelteComponent } from '../index.js' */
-/** @import { Csp } from '#server' */
+/** @import { Csp } from '../server/public.js' */
 import { asClassComponent as as_class_component, createClassComponent } from './legacy-client.js';
 import { render } from '../internal/server/index.js';
 import { async_mode_flag } from '../internal/flags/index.js';

package/src/reactivity/map.js

@@ -153,6 +153,28 @@ export class SvelteMap extends Map {
 		return super.get(key);
 	}
 
+	/**
+	 * @param {K} key
+	 * @param {V} value
+	 * */
+	getOrInsert(key, value) {
+		if (!super.has(key)) {
+			this.set(key, value);
+		}
+		return /** @type {V} */ (this.get(key));
+	}
+
+	/**
+	 * @param {K} key
+	 * @param {(key: K) => V} callbackFn
+	 */
+	getOrInsertComputed(key, callbackFn) {
+		if (!super.has(key)) {
+			this.set(key, callbackFn(key));
+		}
+		return /** @type {V} */ (this.get(key));
+	}
+
 	/**
 	 * @param {K} key
 	 * @param {V} value

package/src/reactivity/url.js

@@ -163,6 +163,8 @@ export class SvelteURL extends URL {
 	set protocol(value) {
 		super.protocol = value;
 		set(this.#protocol, super.protocol);
+		// changing the protocol can clear the port when it matches the new scheme's default
+		set(this.#port, super.port);
 	}
 
 	get search() {

package/src/transition/index.js

@@ -28,6 +28,17 @@ function split_css_unit(value) {
 	return split ? [parseFloat(split[1]), split[2] || 'px'] : [/** @type {number} */ (value), 'px'];
 }
 
+/**
+ * Omits unresolved dimensions rather than passing invalid values to Web Animations.
+ *
+ * @param {string} property
+ * @param {number} value
+ * @param {number} t
+ */
+function css_dimension(property, value, t) {
+	return Number.isNaN(value) ? '' : `${property}: ${t * value}px;`;
+}
+
 /**
  * Animates a `blur` filter alongside an element's opacity.
  *
@@ -138,13 +149,13 @@ export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axi
 		css: (t) =>
 			'overflow: hidden;' +
 			`opacity: ${Math.min(t * 20, 1) * opacity};` +
-			`${primary_property}: ${t * primary_property_value}px;` +
-			`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
-			`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
-			`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
-			`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
-			`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
-			`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;` +
+			css_dimension(primary_property, primary_property_value, t) +
+			css_dimension(`padding-${secondary_properties[0]}`, padding_start_value, t) +
+			css_dimension(`padding-${secondary_properties[1]}`, padding_end_value, t) +
+			css_dimension(`margin-${secondary_properties[0]}`, margin_start_value, t) +
+			css_dimension(`margin-${secondary_properties[1]}`, margin_end_value, t) +
+			css_dimension(`border-${secondary_properties[0]}-width`, border_width_start_value, t) +
+			css_dimension(`border-${secondary_properties[1]}-width`, border_width_end_value, t) +
 			`min-${primary_property}: 0`
 	};
 }

package/src/version.js

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