svelte 5.56.10 → 5.57.0

package/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js

@@ -1,4 +1,4 @@
-/** @import { BlockStatement } from 'estree' */
+/** @import { BlockStatement, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
@@ -84,6 +84,9 @@ export function SvelteBoundary(node, context) {
 	}
 
 	const props = b.object([]);
+	/** @type {Statement[]} */
+	const init = [];
+
 	if (failed_attribute && !failed_snippet) {
 		const failed_callee = build_attribute_value(
 			failed_attribute.value,
@@ -95,13 +98,15 @@ export function SvelteBoundary(node, context) {
 
 		props.properties.push(b.init('failed', failed_callee));
 	} else if (failed_snippet) {
-		context.visit(failed_snippet, context.state);
+		context.visit(failed_snippet, { ...context.state, init });
 		props.properties.push(b.init('failed', failed_snippet.expression));
 	}
 
-	context.state.template.push(
-		b.stmt(b.call('$$renderer.boundary', props, b.arrow([b.id('$$renderer')], children_body)))
+	const boundary = b.stmt(
+		b.call('$$renderer.boundary', props, b.arrow([b.id('$$renderer')], children_body))
 	);
+
+	context.state.template.push(init.length > 0 ? b.block([...init, boundary]) : boundary);
 }
 
 /**

package/src/compiler/phases/3-transform/server/visitors/shared/element.js

@@ -306,12 +306,14 @@ function get_attribute_name(element, attribute) {
  * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
  */
 export function build_spread_object(element, attributes, context, transform) {
+	const is_select = element.type === 'RegularElement' && element.name === 'select';
 	const object = b.object(
 		attributes.map((attribute) => {
 			if (attribute.type === 'transformed') {
 				return b.prop('init', b.key(attribute.name), attribute.expression);
 			} else if (attribute.type === 'Attribute') {
-				const name = get_attribute_name(element, attribute);
+				let name = get_attribute_name(element, attribute);
+				if (is_select && name === 'defaultvalue') name = 'defaultValue';
 				const value = build_attribute_value(
 					attribute.value,
 					context,
@@ -322,10 +324,9 @@ export function build_spread_object(element, attributes, context, transform) {
 				return b.prop('init', b.key(name), value);
 			} else if (attribute.type === 'BindDirective') {
 				const name = get_attribute_name(element, attribute);
+				const expression = /** @type {Expression} */ (context.visit(attribute.expression));
 				const value =
-					attribute.expression.type === 'SequenceExpression'
-						? b.call(attribute.expression.expressions[0])
-						: /** @type {Expression} */ (context.visit(attribute.expression));
+					expression.type === 'SequenceExpression' ? b.call(expression.expressions[0]) : expression;
 
 				return b.prop('init', b.key(name), value);
 			}

package/src/compiler/phases/3-transform/server/visitors/shared/utils.js

@@ -180,6 +180,36 @@ export function build_template(template) {
 	return statements;
 }
 
+/**
+ * Prepends a hydration marker (e.g. `<!--[0-->`) to a branch. The branch has already been
+ * turned into statements by `build_template`, so if it happens to start with a static
+ * `$$renderer.push(...)` we fold the marker into that call rather than emitting a second one.
+ * @param {BlockStatement} block
+ * @param {string} marker
+ */
+export function prepend_block_marker(block, marker) {
+	const first = block.body[0];
+
+	if (
+		first?.type === 'ExpressionStatement' &&
+		first.expression.type === 'CallExpression' &&
+		first.expression.callee.type === 'Identifier' &&
+		first.expression.callee.name === '$$renderer.push' &&
+		first.expression.arguments.length === 1 &&
+		first.expression.arguments[0].type === 'TemplateLiteral'
+	) {
+		const quasi = first.expression.arguments[0].quasis[0];
+
+		// markers never contain characters that need escaping in a template literal
+		quasi.value.cooked = marker + quasi.value.cooked;
+		quasi.value.raw = marker + quasi.value.raw;
+
+		return;
+	}
+
+	block.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), b.literal(marker))));
+}
+
 /**
  *
  * @param {AST.Attribute['value']} value

package/src/compiler/phases/bindings.js

@@ -23,7 +23,9 @@ export const binding_properties = {
 		event: 'durationchange',
 		omit_in_ssr: true
 	},
-	focused: {},
+	focused: {
+		omit_in_ssr: true // no corresponding HTML attribute
+	},
 	paused: {
 		valid_elements: ['audio', 'video'],
 		omit_in_ssr: true,

package/src/compiler/phases/nodes.js

@@ -77,6 +77,9 @@ export class ExpressionMetadata {
 	/** True if the expression contains `await` */
 	has_await = false;
 
+	/** True if an `await` restores the reaction context afterwards, so the thunk must end it */
+	has_pickled_await = false;
+
 	/** True if the expression includes a member expression */
 	has_member_expression = false;
 
@@ -142,6 +145,7 @@ export class ExpressionMetadata {
 		this.has_state ||= source.has_state;
 		this.has_call ||= source.has_call;
 		this.has_await ||= source.has_await;
+		this.has_pickled_await ||= source.has_pickled_await;
 		this.has_member_expression ||= source.has_member_expression;
 		this.has_assignment ||= source.has_assignment;
 		this.#blockers = null; // so that blockers are recalculated

package/src/compiler/print/index.js

@@ -587,15 +587,19 @@ const svelte_visitors = (comments, state) => ({
 			last?.type === 'Text' &&
 			/\s$/.test(last.data);
 
-		/** @type {AST.SvelteNode[][]} */
+		/** @type {{ nodes: AST.SvelteNode[]; leading_whitespace: boolean }[]} */
 		const items = [];
 
 		/** @type {AST.SvelteNode[]} */
 		let sequence = [];
+		let leading_whitespace = false;
 
 		const flush = () => {
-			items.push(sequence);
-			sequence = [];
+			if (sequence.length > 0) {
+				items.push({ nodes: sequence, leading_whitespace });
+				sequence = [];
+				leading_whitespace = false;
+			}
 		};
 
 		for (let i = 0; i < node.nodes.length; i += 1) {
@@ -624,6 +628,7 @@ const svelte_visitors = (comments, state) => ({
 
 				if (child_node.data.startsWith(' ') && prev && prev.type !== 'ExpressionTag') {
 					flush();
+					leading_whitespace = true;
 					child_node.data = child_node.data.trimStart();
 				}
 
@@ -662,20 +667,18 @@ const svelte_visitors = (comments, state) => ({
 		let multiline = false;
 		let width = 0;
 
-		const child_contexts = items
-			.filter((x) => x.length > 0)
-			.map((sequence) => {
-				const child_context = context.new();
+		const child_contexts = items.map(({ nodes, leading_whitespace }) => {
+			const child_context = context.new();
 
-				for (const node of sequence) {
-					child_context.visit(node);
-					multiline ||= child_context.multiline;
-				}
+			for (const node of nodes) {
+				child_context.visit(node);
+				multiline ||= child_context.multiline;
+			}
 
-				width += child_context.measure();
+			width += child_context.measure() + (leading_whitespace ? 1 : 0);
 
-				return child_context;
-			});
+			return { context: child_context, leading_whitespace };
+		});
 
 		multiline ||= width > LINE_BREAK_THRESHOLD;
 		// Normally context.newline() also makes context.multiline true, but the below loop only
@@ -687,14 +690,16 @@ const svelte_visitors = (comments, state) => ({
 			const prev = child_contexts[i];
 			const next = child_contexts[i + 1];
 
-			context.append(prev);
+			context.append(prev.context);
 
 			if (next) {
-				if (prev.multiline || next.multiline) {
+				if (prev.context.multiline || next.context.multiline) {
 					context.margin();
 					context.newline();
 				} else if (multiline) {
 					context.newline();
+				} else if (next.leading_whitespace) {
+					context.write(' ');
 				}
 			}
 		}

package/src/easing/index.js

@@ -4,6 +4,8 @@ Distributed under MIT License https://github.com/mattdesl/eases/blob/master/LICE
 */
 
 /**
+ * Returns value as is.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -12,6 +14,8 @@ export function linear(t) {
 }
 
 /**
+ * Rebound effect on start and end of value range.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -22,6 +26,8 @@ export function backInOut(t) {
 }
 
 /**
+ * Rebound effect on start.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -31,6 +37,8 @@ export function backIn(t) {
 }
 
 /**
+ * Rebound effect on end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -40,6 +48,8 @@ export function backOut(t) {
 }
 
 /**
+ * Bounce effect on end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -61,6 +71,8 @@ export function bounceOut(t) {
 }
 
 /**
+ * Bounce effect on start and end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -69,6 +81,8 @@ export function bounceInOut(t) {
 }
 
 /**
+ * Bounce effect on start.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -77,6 +91,8 @@ export function bounceIn(t) {
 }
 
 /**
+ * Circular effect, accelerate on start, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -86,6 +102,8 @@ export function circInOut(t) {
 }
 
 /**
+ * Circular effect, accelerate on start.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -94,6 +112,8 @@ export function circIn(t) {
 }
 
 /**
+ * Circular effect, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -102,6 +122,8 @@ export function circOut(t) {
 }
 
 /**
+ * Cubic scaling, accelerate on start, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -110,6 +132,8 @@ export function cubicInOut(t) {
 }
 
 /**
+ * Cubic scaling, accelerate on start
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -118,6 +142,8 @@ export function cubicIn(t) {
 }
 
 /**
+ * Cubic scaling, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -127,6 +153,8 @@ export function cubicOut(t) {
 }
 
 /**
+ * Elastic effect on start and end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -140,6 +168,8 @@ export function elasticInOut(t) {
 }
 
 /**
+ * Elastic effect on start.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -148,6 +178,8 @@ export function elasticIn(t) {
 }
 
 /**
+ * Elastic effect on end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -156,6 +188,8 @@ export function elasticOut(t) {
 }
 
 /**
+ * Exponential effect on start and end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -168,6 +202,8 @@ export function expoInOut(t) {
 }
 
 /**
+ * Exponential effect on start.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -176,6 +212,8 @@ export function expoIn(t) {
 }
 
 /**
+ * Exponential effect on end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -184,6 +222,8 @@ export function expoOut(t) {
 }
 
 /**
+ * Quadratic scaling, accelerate on start, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -195,6 +235,8 @@ export function quadInOut(t) {
 }
 
 /**
+ * Quadratic scaling, accelerate on start.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -203,6 +245,8 @@ export function quadIn(t) {
 }
 
 /**
+ * Quadratic scaling, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -211,6 +255,8 @@ export function quadOut(t) {
 }
 
 /**
+ * Quartic scaling, accelerate on start, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -219,6 +265,8 @@ export function quartInOut(t) {
 }
 
 /**
+ * Quartic scaling, accelerate on start.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -227,6 +275,8 @@ export function quartIn(t) {
 }
 
 /**
+ * Quartic scaling, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -235,6 +285,8 @@ export function quartOut(t) {
 }
 
 /**
+ * Quintic scaling, accelerate on start, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -244,6 +296,8 @@ export function quintInOut(t) {
 }
 
 /**
+ * Quintic scaling, accelerate on start.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -252,6 +306,8 @@ export function quintIn(t) {
 }
 
 /**
+ * Quintic scaling, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -260,6 +316,8 @@ export function quintOut(t) {
 }
 
 /**
+ * Sinusoidal effect, accelerate on start, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -268,6 +326,8 @@ export function sineInOut(t) {
 }
 
 /**
+ * Sinusoidal effect, accelerate on start.
+ *
  * @param {number} t
  * @returns {number}
  */
@@ -278,6 +338,8 @@ export function sineIn(t) {
 }
 
 /**
+ * Sinusoidal effect, decelerate towards end.
+ *
  * @param {number} t
  * @returns {number}
  */

package/src/internal/client/constants.js

@@ -15,6 +15,13 @@ export const BLOCK_EFFECT = 1 << 4;
 export const BRANCH_EFFECT = 1 << 5;
 export const ROOT_EFFECT = 1 << 6;
 export const BOUNDARY_EFFECT = 1 << 7;
+/**
+ * Set on the effect that `pause_effect` was called on, i.e. the root of a paused subtree,
+ * as opposed to its descendants which are merely `INERT`. This allows `resume_effect` on
+ * an ancestor to skip subtrees that were paused for their own reasons (such as a block
+ * whose condition is still false) rather than resurrecting them
+ */
+export const PAUSED = 1 << 8;
 /**
  * Indicates that a reaction is connected to an effect root — either it is an effect,
  * or it is a derived that is depended on by at least one effect. If a derived has
@@ -60,6 +67,8 @@ export const ASYNC = 1 << 22;
 export const ERROR_VALUE = 1 << 23;
 
 export const STATE_SYMBOL = Symbol('$state');
+/** Marks component export objects, so that `proxy(...)` leaves them untouched */
+export const COMPONENT_SYMBOL = Symbol('component');
 export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
 export const PROXY_PATH_SYMBOL = Symbol('proxy path');

package/src/internal/client/context.js

@@ -5,7 +5,8 @@ import { active_effect, active_reaction } from './runtime.js';
 import { create_user_effect } from './reactivity/effects.js';
 import { async_mode_flag, legacy_mode_flag } from '../flags/index.js';
 import { FILENAME } from '../../constants.js';
-import { BRANCH_EFFECT } from './constants.js';
+import { BRANCH_EFFECT, COMPONENT_SYMBOL } from './constants.js';
+import { define_property } from '../shared/utils.js';
 import { create_context, get_or_init_context_map } from '../shared/context.js';
 
 /** @type {ComponentContext | null} */
@@ -71,17 +72,17 @@ export function set_dev_current_component_function(fn) {
 }
 
 /**
- * Returns a `[get, set]` pair of functions for working with context in a type-safe way.
+ * Returns a `[get, set, has]` triplet of functions for working with context in a type-safe way.
  *
  * `get` will throw an error if `set` has not yet been called in the current component or any of
  * its ancestors.
  *
  * @template T
- * @returns {[() => T, (context: T) => T]}
+ * @returns {[() => T, (context: T) => T, () => boolean]}
  * @since 5.40.0
  */
 export function createContext() {
-	return /** @type {[() => T, (context: T) => T]} */ (
+	return /** @type {[() => T, (context: T) => T, () => boolean]} */ (
 		create_context(getContext, setContext, hasContext)
 	);
 }
@@ -217,7 +218,16 @@ export function pop(component) {
 		dev_current_component_function = component_context?.function ?? null;
 	}
 
-	return component ?? /** @type {T} */ ({});
+	return mark_as_component(component);
+}
+
+/**
+ * Add a symbol to the object (or create one if undefined) to mark it as a component so it isn't proxified.
+ * @param {any} component
+ */
+export function mark_as_component(component = {}) {
+	define_property(component, COMPONENT_SYMBOL, { value: true });
+	return component;
 }
 
 /** @returns {boolean} */

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

@@ -57,10 +57,21 @@ export function hmr(fn) {
 				if (ran) set_should_intro(true);
 			});
 
-			// Forward the nodes from the inner effect to the outer active effect which would
-			// get them if the HMR wrapper wasn't there. Do this inside the block not outside
-			// so that HMR updates to the component will also update the nodes on the active effect.
-			/** @type {Effect} */ (active_effect).nodes = effect.nodes;
+			// Forward the start/end DOM nodes from the inner effect to the outer active effect
+			// which would get them if the HMR wrapper wasn't there. Do this inside the block not
+			// outside so that HMR updates to the component will also update the nodes on the
+			// active effect. We copy only start/end, not the full nodes object, so that
+			// pause_children does not collect transitions from both effects and fire outroend twice.
+			var inner_nodes = effect.nodes;
+			if (inner_nodes) {
+				var ae = /** @type {Effect} */ (active_effect);
+				if (ae.nodes) {
+					ae.nodes.start = inner_nodes.start;
+					ae.nodes.end = inner_nodes.end;
+				} else {
+					ae.nodes = { start: inner_nodes.start, end: inner_nodes.end, a: null, t: null };
+				}
+			}
 		}, EFFECT_TRANSPARENT);
 
 		ran = true;

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

@@ -1,14 +1,8 @@
 /** @import { Effect, Source, TemplateNode, } from '#client' */
-import {
-	BOUNDARY_EFFECT,
-	DIRTY,
-	EFFECT_PRESERVED,
-	EFFECT_TRANSPARENT,
-	MAYBE_DIRTY
-} from '#client/constants';
+import { BOUNDARY_EFFECT, EFFECT_PRESERVED, EFFECT_TRANSPARENT } from '#client/constants';
 import { HYDRATION_START_ELSE, HYDRATION_START_FAILED } from '../../../../constants.js';
 import { component_context, set_component_context } from '../../context.js';
-import { handle_error, invoke_error_boundary } from '../../error-handling.js';
+import { invoke_error_boundary } from '../../error-handling.js';
 import {
 	block,
 	branch,
@@ -271,13 +265,31 @@ export class Boundary {
 		queue_micro_task(() => {
 			var fragment = (this.#offscreen_fragment = document.createDocumentFragment());
 			var anchor = create_text();
+			var handled = false;
 
 			fragment.append(anchor);
 
 			this.#main_effect = this.#run(() => {
-				return branch(() => this.#children(anchor));
+				try {
+					return branch(() => this.#children(anchor));
+				} catch (error) {
+					try {
+						this.error(error);
+						handled = true;
+					} catch (error) {
+						invoke_error_boundary(error, this.#effect.parent);
+					}
+
+					return null;
+				}
 			});
 
+			if (this.#main_effect === null) {
+				this.#offscreen_fragment = null;
+				if (handled) this.#resolve(/** @type {Batch} */ (current_batch));
+				return;
+			}
+
 			if (this.#pending_count === 0) {
 				this.#anchor.before(fragment);
 				this.#offscreen_fragment = null;
@@ -362,9 +374,6 @@ export class Boundary {
 		try {
 			Batch.ensure();
 			return fn();
-		} catch (e) {
-			handle_error(e);
-			return null;
 		} finally {
 			set_active_effect(previous_effect);
 			set_active_reaction(previous_reaction);

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

@@ -1,4 +1,6 @@
 import { hydrate_next, hydrating } from '../hydration.js';
+import { create_element, create_text } from '../operations.js';
+import { append } from '../template.js';
 
 /**
  * @param {Comment} anchor
@@ -12,6 +14,23 @@ export function slot(anchor, $$props, name, slot_props, fallback_fn) {
 		hydrate_next();
 	}
 
+	// Custom element slots are native DOM slots.
+	// Use the stored reference because the shadow root may be closed.
+	if ($$props.$$host?.$$shadowRoot) {
+		const element = create_element('slot');
+		if (name !== 'default') element.name = name;
+
+		append(anchor, element);
+
+		if (fallback_fn !== null) {
+			const fallback_anchor = create_text();
+			element.append(fallback_anchor);
+			fallback_fn(fallback_anchor);
+		}
+
+		return;
+	}
+
 	var slot_fn = $$props.$$slots?.[name];
 	// Interop: Can use snippets to fill slots
 	var is_interop = false;

package/src/internal/client/dom/blocks/svelte-head.js

@@ -52,6 +52,14 @@ export function head(hash, render_fn) {
 		block(() => {
 			var e = branch(() => render_fn(anchor));
 			e.f |= HEAD_EFFECT;
+
+			if (!hydrating) {
+				if (e.nodes === null) {
+					e.nodes = { start: anchor, end: anchor, a: null, t: null };
+				} else {
+					e.nodes.end = anchor;
+				}
+			}
 		});
 	} finally {
 		if (was_hydrating) {