svelte 5.56.10 → 5.57.0

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=""');
 			}
 
@@ -625,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.
 	 *
@@ -635,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);
 		}
 	}
@@ -656,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();
 		}
 	}
 
@@ -759,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);
@@ -789,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);
 		}
@@ -802,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;
 
@@ -889,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`.
@@ -919,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)}"`;

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

@@ -5,7 +5,7 @@ import { lifecycle_outside_component, missing_context } from './errors.js';
  * @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]}
+ * @returns {[() => T, (context: T) => T, () => boolean]}
  */
 export function create_context(get_context, set_context, has_context) {
 	const key = {};
@@ -18,7 +18,8 @@ export function create_context(get_context, set_context, has_context) {
 
 			return get_context(key);
 		},
-		(context) => set_context(key, context)
+		(context) => set_context(key, context),
+		() => has_context(key)
 	];
 }
 

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.10';
+export const VERSION = '5.57.0';
 export const PUBLIC_VERSION = '5';