svelte 5.56.9 → 5.57.0

package/src/compiler/print/index.js

@@ -7,6 +7,68 @@ import { is_void } from '../../utils.js';
 /** Threshold for when content should be formatted on separate lines */
 const LINE_BREAK_THRESHOLD = 50;
 
+/** Characters that are valid in a CSS identifier without escaping */
+const REGEX_IDENTIFIER_CHAR = /^[a-zA-Z0-9_-]$/;
+
+/** Hex digits — a backslash followed by one of these is read as a hex escape */
+const REGEX_HEX_DIGIT = /[0-9a-fA-F]/;
+
+/**
+ * Re-escape a CSS identifier name so that it prints as valid CSS.
+ *
+ * `parse` decodes CSS escape sequences when building the AST — `\31` becomes `1`,
+ * `\a` becomes a newline — but keeps single-character escapes such as `\.` and
+ * escaped backslashes intact. When printing we therefore only need to escape the
+ * characters that would be illegal in a bare identifier: a leading digit, `-`
+ * followed by a digit, whitespace and control characters, and anything else that
+ * is not already escaped.
+ * @param {string} name
+ */
+function escape_identifier(name) {
+	let escaped = '';
+	let i = 0;
+
+	while (i < name.length) {
+		const char = name[i];
+
+		if (char === '\\') {
+			const next = name.charAt(i + 1);
+			if (next === '' || REGEX_HEX_DIGIT.test(next)) {
+				// A literal backslash in a name must itself be escaped: `\5c `
+				// re-parses to a backslash, whereas a backslash followed by a hex
+				// digit (or by nothing) would be read back as a hex escape.
+				escaped += '\\5c ';
+				i += 1;
+				continue;
+			}
+
+			// Already escaped — copy the backslash and the escaped character as-is.
+			escaped += '\\' + next;
+			i += 2;
+			continue;
+		}
+
+		const code = /** @type {number} */ (char.codePointAt(0));
+		const is_leading_digit = i === 0 && char >= '0' && char <= '9';
+		const is_leading_hyphen_digit =
+			i === 0 && char === '-' && name.charAt(i + 1) >= '0' && name.charAt(i + 1) <= '9';
+
+		if (
+			is_leading_digit ||
+			is_leading_hyphen_digit ||
+			!(REGEX_IDENTIFIER_CHAR.test(char) || code >= 160)
+		) {
+			escaped += `\\${code.toString(16)} `;
+		} else {
+			escaped += char;
+		}
+
+		i += 1;
+	}
+
+	return escaped;
+}
+
 /**
  * `print` converts a Svelte AST node back into Svelte source code.
  * It is primarily intended for tools that parse and transform components using the compiler’s modern AST representation.
@@ -324,7 +386,7 @@ function css_visitors(comments, js_comments) {
 
 	return {
 		Atrule(node, context) {
-			context.write(`@${node.name}`);
+			context.write(`@${escape_identifier(node.name)}`);
 
 			const prelude_end = node.block?.start ?? node.end;
 			if (node.prelude || has_comment_before(prelude_end)) {
@@ -341,7 +403,7 @@ function css_visitors(comments, js_comments) {
 		},
 
 		AttributeSelector(node, context) {
-			context.write(`[${node.name}`);
+			context.write(`[${escape_identifier(node.name)}`);
 			if (node.matcher) {
 				context.write(node.matcher);
 				context.write(`"${node.value}"`);
@@ -365,7 +427,7 @@ function css_visitors(comments, js_comments) {
 		},
 
 		ClassSelector(node, context) {
-			context.write(`.${node.name}`);
+			context.write(`.${escape_identifier(node.name)}`);
 		},
 
 		ComplexSelector(node, context) {
@@ -379,7 +441,7 @@ function css_visitors(comments, js_comments) {
 		},
 
 		IdSelector(node, context) {
-			context.write(`#${node.name}`);
+			context.write(`#${escape_identifier(node.name)}`);
 		},
 
 		NestingSelector(node, context) {
@@ -395,7 +457,7 @@ function css_visitors(comments, js_comments) {
 		},
 
 		PseudoClassSelector(node, context) {
-			context.write(`:${node.name}`);
+			context.write(`:${escape_identifier(node.name)}`);
 
 			if (node.args) {
 				context.write('(');
@@ -409,7 +471,7 @@ function css_visitors(comments, js_comments) {
 		},
 
 		PseudoElementSelector(node, context) {
-			context.write(`::${node.name}`);
+			context.write(`::${escape_identifier(node.name)}`);
 			if (node.args) {
 				context.write('(');
 				context.visit(node.args);
@@ -458,7 +520,11 @@ function css_visitors(comments, js_comments) {
 		},
 
 		TypeSelector(node, context) {
-			context.write(node.name);
+			if (node.namespace !== undefined) {
+				context.write(node.namespace === '*' ? '*' : escape_identifier(node.namespace));
+				context.write('|');
+			}
+			context.write(node.name === '*' ? node.name : escape_identifier(node.name));
 		}
 	};
 }
@@ -521,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) {
@@ -558,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();
 				}
 
@@ -596,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
@@ -621,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(' ');
 				}
 			}
 		}
@@ -701,7 +772,7 @@ const svelte_visitors = (comments, state) => ({
 		}
 
 		if (node.catch) {
-			context.write(node.value ? 'catch ' : 'catch');
+			context.write(node.error ? 'catch ' : 'catch');
 			if (node.error) context.visit(node.error);
 			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,9 @@ 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} */
 export let component_context = null;
@@ -70,31 +72,25 @@ 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 no parent component called `set`.
+ * `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() {
-	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)
+	);
 }
 
 /**
- * Retrieves the context that belongs to the closest parent component with the specified `key`.
+ * Retrieves the context set with the specified `key` in the current component or any of its
+ * ancestors. If multiple components set the same key, the value from the closest one is returned.
+ * A `setContext` call in the current component is only visible to `getContext` calls that run after it.
  * Must be called during component initialisation.
  *
  * [`createContext`](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative.
@@ -104,15 +100,15 @@ 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(component_context, 'getContext');
 	const result = /** @type {T} */ (context_map.get(key));
 	return result;
 }
 
 /**
  * Associates an arbitrary `context` object with the current component and the specified `key`
- * and returns that object. The context is then available to children of the component
- * (including slotted content) with `getContext`.
+ * and returns that object. The context is then available to the component itself and all of its
+ * descendants (including slotted content) with `getContext`.
  *
  * Like lifecycle functions, this must be called during component initialisation.
  *
@@ -124,7 +120,7 @@ export function getContext(key) {
  * @returns {T}
  */
 export function setContext(key, context) {
-	const context_map = get_or_init_context_map('setContext');
+	const context_map = get_or_init_context_map(component_context, 'setContext');
 
 	if (async_mode_flag) {
 		var flags = /** @type {Effect} */ (active_effect).f;
@@ -144,27 +140,27 @@ export function setContext(key, context) {
 }
 
 /**
- * Checks whether a given `key` has been set in the context of a parent component.
- * Must be called during component initialisation.
+ * Checks whether a given `key` has been set in the context of the current component or any of
+ * its ancestors. Must be called during component initialisation.
  *
  * @param {any} key
  * @returns {boolean}
  */
 export function hasContext(key) {
-	const context_map = get_or_init_context_map('hasContext');
+	const context_map = get_or_init_context_map(component_context, 'hasContext');
 	return context_map.has(key);
 }
 
 /**
- * Retrieves the whole context map that belongs to the closest parent component.
- * Must be called during component initialisation. Useful, for example, if you
- * programmatically create a component and want to pass the existing context to it.
+ * Retrieves the whole context map that belongs to the current component, including entries
+ * inherited from its ancestors. Must be called during component initialisation. Useful, for
+ * example, if you programmatically create a component and want to pass the existing context to it.
  *
  * @template {Map<any, any>} [T=Map<any, any>]
  * @returns {T}
  */
 export function getAllContexts() {
-	const context_map = get_or_init_context_map('getAllContexts');
+	const context_map = get_or_init_context_map(component_context, 'getAllContexts');
 	return /** @type {T} */ (context_map);
 }
 
@@ -222,38 +218,19 @@ export function pop(component) {
 		dev_current_component_function = component_context?.function ?? null;
 	}
 
-	return component ?? /** @type {T} */ ({});
-}
-
-/** @returns {boolean} */
-export function is_runes() {
-	return !legacy_mode_flag || (component_context !== null && component_context.l === null);
+	return mark_as_component(component);
 }
 
 /**
- * @param {string} name
- * @returns {Map<unknown, unknown>}
+ * 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
  */
-function get_or_init_context_map(name) {
-	if (component_context === null) {
-		e.lifecycle_outside_component(name);
-	}
-
-	return (component_context.c ??= new Map(get_parent_context(component_context) || undefined));
+export function mark_as_component(component = {}) {
+	define_property(component, COMPONENT_SYMBOL, { value: true });
+	return component;
 }
 
-/**
- * @param {ComponentContext} component_context
- * @returns {Map<unknown, unknown> | null}
- */
-function get_parent_context(component_context) {
-	let parent = component_context.p;
-	while (parent !== null) {
-		const context_map = parent.c;
-		if (context_map !== null) {
-			return context_map;
-		}
-		parent = parent.p;
-	}
-	return null;
+/** @returns {boolean} */
+export function is_runes() {
+	return !legacy_mode_flag || (component_context !== null && component_context.l === null);
 }

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;