svelte 5.56.9 → 5.56.10

package/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.56.9",
+  "version": "5.56.10",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

package/src/compiler/migrate/index.js

@@ -1590,7 +1590,12 @@ function migrate_slot_usage(node, path, state) {
  */
 function extract_type_and_comment(declarator, state, path) {
 	const str = state.str;
-	const parent = path.at(-1);
+	let parent = path.at(-1);
+
+	if (parent?.type === 'Program') {
+		// We don't want comments from the program node
+		parent = undefined;
+	}
 
 	// Try to find jsdoc above the declaration
 	let comment_node = /** @type {Node} */ (parent)?.leadingComments?.at(-1);

package/src/compiler/phases/1-parse/read/style.js

@@ -7,8 +7,11 @@ const REGEX_CLOSING_BRACKET = /[\s\]]/;
 const REGEX_ATTRIBUTE_FLAGS = /[a-zA-Z]+/y; // only `i` and `s` are valid today, but make it future-proof
 const REGEX_COMBINATOR = /(\+|~|>|\|\|)/y;
 const REGEX_PERCENTAGE = /\d+(\.\d+)?%/y;
+// `of` must be preceded by whitespace, otherwise it would be part of the `<an+b>` token
+// (`2nof` is a single dimension token). It does not need to be followed by whitespace,
+// because a `.`, `#`, `[`, `*`, `:` or `&` already ends the `of` identifier — minifiers rely on that
 const REGEX_NTH_OF =
-	/(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))((?=\s*[,)])|\s+of\s+)/y;
+	/(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))((?=\s*[,)])|\s+of(\s+|(?=[.#[*:&])))/y;
 const REGEX_WHITESPACE_OR_COLON = /[\s:]/;
 const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/y;
 const REGEX_VALID_IDENTIFIER_CHAR = /[a-zA-Z0-9_-]/;
@@ -204,15 +207,18 @@ function read_selector(parser, inside_pseudo_class = false) {
 			});
 		} else if (parser.eat('*')) {
 			let name = '*';
+			/** @type {string | undefined} */
+			let namespace;
 
 			if (parser.eat('|')) {
-				// * is the namespace (which we ignore)
-				name = read_identifier(parser);
+				namespace = name;
+				name = parser.eat('*') ? '*' : read_identifier(parser);
 			}
 
 			relative_selector.selectors.push({
 				type: 'TypeSelector',
 				name,
+				...(namespace !== undefined && { namespace }),
 				start,
 				end: parser.index
 			});
@@ -314,15 +320,18 @@ function read_selector(parser, inside_pseudo_class = false) {
 			});
 		} else if (!parser.match_regex(REGEX_COMBINATOR)) {
 			let name = read_identifier(parser);
+			/** @type {string | undefined} */
+			let namespace;
 
 			if (parser.eat('|')) {
-				// we ignore the namespace when trying to find matching element classes
-				name = read_identifier(parser);
+				namespace = name;
+				name = parser.eat('*') ? '*' : read_identifier(parser);
 			}
 
 			relative_selector.selectors.push({
 				type: 'TypeSelector',
 				name,
+				...(namespace !== undefined && { namespace }),
 				start,
 				end: parser.index
 			});
@@ -614,7 +623,8 @@ function read_identifier(parser) {
 		if (char === '\\') {
 			const sequence = parser.match_regex(REGEX_UNICODE_SEQUENCE);
 			if (sequence) {
-				identifier += String.fromCodePoint(parseInt(sequence.slice(1), 16));
+				const character = String.fromCodePoint(parseInt(sequence.slice(1), 16));
+				identifier += character === '\\' ? '\\\\' : character;
 				parser.index += sequence.length;
 			} else {
 				identifier += '\\' + parser.template[parser.index + 1];

package/src/compiler/phases/2-analyze/index.js

@@ -958,7 +958,7 @@ function calculate_blockers(instance, analysis) {
 	 * @param {Set<Binding>} touched
 	 * @param {Set<ESTree.Node>} seen
 	 */
-	const touch = (expression, scope, touched, seen = new Set()) => {
+	const touch = (expression, scope, touched, seen) => {
 		if (seen.has(expression)) return;
 		seen.add(expression);
 
@@ -1015,6 +1015,13 @@ function calculate_blockers(instance, analysis) {
 			}
 		}
 
+		// Share seen nodes across calls so transitive assignments are only visited once.
+		// Keep separate read/write state because the target sets can differ.
+		/** @type {Set<ESTree.Node>} */
+		const writes_seen = new Set();
+		/** @type {Set<ESTree.Node>} */
+		const reads_seen = new Set();
+
 		walk(
 			node,
 			{ scope },
@@ -1044,13 +1051,7 @@ function calculate_blockers(instance, analysis) {
 					const rune = get_rune(node, context.state.scope);
 					if (rune === '$effect') return;
 
-					/** @type {Set<Binding>} */
-					const touched = new Set();
-					touch(node, context.state.scope, touched);
-
-					for (const b of touched) {
-						writes.add(b);
-					}
+					touch(node, context.state.scope, writes, writes_seen);
 				},
 				Identifier(node, context) {
 					const parent = /** @type {ESTree.Node} */ (context.path.at(-1));
@@ -1066,7 +1067,7 @@ function calculate_blockers(instance, analysis) {
 					// might be called immediately, so we have to touch all references within it. Example:
 					// function foo() { return () => blocker; } foo(); // blocker is touched
 					if (node.argument) {
-						touch(node.argument, context.state.scope, reads);
+						touch(node.argument, context.state.scope, reads, reads_seen);
 					}
 				},
 				// don't look inside functions until they are called
@@ -1235,12 +1236,15 @@ function calculate_blockers(instance, analysis) {
 				? /** @type {ESTree.FunctionExpression | ESTree.ArrowFunctionExpression} */ (fn.init)
 				: fn;
 
-		trace_references(
-			init.body,
-			reads_writes,
-			reads_writes,
-			/** @type {Scope} */ (instance.scopes.get(init))
-		);
+		const fn_scope = /** @type {Scope} */ (instance.scopes.get(init));
+
+		if (init.body.type === 'BlockStatement') {
+			trace_references(init.body, reads_writes, reads_writes, fn_scope);
+		} else {
+			// A concise arrow body is an implicit return, so treat it like the
+			// `ReturnStatement` visitor in `trace_references` would.
+			touch(init.body, fn_scope, reads_writes, new Set());
+		}
 
 		const max = [...reads_writes].reduce((max, binding) => {
 			if (binding.blocker) {

package/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js

@@ -1,4 +1,4 @@
-/** @import { AssignmentExpression, AssignmentOperator, Expression, Identifier, Pattern } from 'estree' */
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Identifier, LogicalOperator, Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types.js' */
 import * as b from '#compiler/builders';
@@ -79,8 +79,13 @@ function build_assignment(operator, left, right, context) {
 
 			// special case — assignment to private state field
 			if (left.property.type === 'PrivateIdentifier') {
+				const logical_operator = ['||=', '&&=', '??='].includes(operator)
+					? /** @type {LogicalOperator} */ (operator.slice(0, -1))
+					: null;
 				let value = /** @type {Expression} */ (
-					context.visit(build_assignment_value(operator, left, right))
+					context.visit(
+						logical_operator === null ? build_assignment_value(operator, left, right) : right
+					)
 				);
 
 				const needs_proxy =
@@ -88,7 +93,15 @@ function build_assignment(operator, left, right, context) {
 					is_non_coercive_operator(operator) &&
 					should_proxy(value, context.state.scope);
 
-				return b.call('$.set', left, value, needs_proxy && b.true);
+				const assignment = b.call('$.set', left, value, needs_proxy && b.true);
+
+				return logical_operator === null
+					? assignment
+					: b.logical(
+							logical_operator,
+							/** @type {Expression} */ (context.visit(left)),
+							assignment
+						);
 			}
 		}
 	}

package/src/compiler/phases/3-transform/client/visitors/RegularElement.js

@@ -664,14 +664,25 @@ function build_element_attribute_update(element, node_id, name, value, attribute
  * @param {ComponentContext} context
  */
 function build_custom_element_attribute_update_assignment(node_id, attribute, context) {
-	const { value, has_state } = build_attribute_value(attribute.value, context);
+	const memoizer = new Memoizer();
+	const { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
+		memoizer.add(value, metadata)
+	);
 
 	// don't lowercase name, as we set the element's property, which might be case sensitive
 	const call = b.call('$.set_custom_element_data', node_id, b.literal(attribute.name), value);
 
 	// this is different from other updates — it doesn't get grouped,
 	// because set_custom_element_data may not be idempotent
-	const update = has_state ? b.call('$.template_effect', b.thunk(call)) : call;
+	const update = has_state
+		? b.call(
+				'$.template_effect',
+				b.arrow(memoizer.apply(), call),
+				memoizer.sync_values(),
+				memoizer.async_values(),
+				memoizer.blockers()
+			)
+		: call;
 
 	context.state.init.push(b.stmt(update));
 }

package/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js

@@ -13,7 +13,6 @@ export function UpdateExpression(node, context) {
 
 	if (
 		argument.type === 'MemberExpression' &&
-		argument.object.type === 'ThisExpression' &&
 		argument.property.type === 'PrivateIdentifier' &&
 		context.state.state_fields.has('#' + argument.property.name)
 	) {

package/src/compiler/phases/3-transform/css/index.js

@@ -355,7 +355,11 @@ const visitors = {
 						continue;
 					}
 
-					if (selector.type === 'TypeSelector' && selector.name === '*') {
+					if (
+						selector.type === 'TypeSelector' &&
+						selector.name === '*' &&
+						selector.namespace === undefined
+					) {
 						context.state.code.update(selector.start, selector.end, modifier);
 					} else {
 						context.state.code.appendLeft(selector.end, modifier);

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

@@ -8,6 +8,7 @@ import * as b from '#compiler/builders';
  */
 export function LabeledStatement(node, context) {
 	if (context.state.analysis.runes || context.path.length > 1 || node.label.name !== '$') {
+		context.next();
 		return;
 	}
 

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

@@ -102,9 +102,11 @@ export function VariableDeclaration(node, context) {
 				} else {
 					const call = /** @type {CallExpression} */ (declarator.init);
 
-					let rhs = value;
+					// - cannot be a SpreadElement because refused during analysis
+					// - use args[0] rather than value to avoid visiting twice (above in const value = ... and below in for-ofs)
+					let rhs = /** @type {Expression} */ (call.arguments[0]);
 
-					if (rune !== '$derived' || call.arguments[0].type !== 'Identifier') {
+					if (rune === '$derived.by' || call.arguments[0].type !== 'Identifier') {
 						const id = b.id(context.state.scope.generate('$$d'));
 
 						rhs = b.call(id);

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

@@ -3,7 +3,7 @@
 /** @import { ComponentContext, ComponentServerTransformState } from '../../types.js' */
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import { binding_properties } from '../../../../bindings.js';
-import { create_attribute, ExpressionMetadata, is_custom_element_node } from '../../../../nodes.js';
+import { ExpressionMetadata, is_custom_element_node } from '../../../../nodes.js';
 import { regex_starts_with_newline } from '../../../../patterns.js';
 import * as b from '#compiler/builders';
 import {
@@ -21,6 +21,11 @@ import { escape_html } from '../../../../../../escaping.js';
 
 const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
 
+/**
+ * @typedef {{ type: 'transformed', name: string, expression: Expression }} TransformedAttribute
+ * An attribute whose expression has already been transformed and must not be visited again.
+ */
+
 /**
  * Writes the output to the template output. Some elements may have attributes on them that require the
  * their output to be the child content instead. In this case, an object is returned.
@@ -29,7 +34,7 @@ const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
  * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
  */
 export function build_element_attributes(node, context, transform) {
-	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
+	/** @type {Array<AST.Attribute | AST.SpreadAttribute | TransformedAttribute>} */
 	const attributes = [];
 
 	/** @type {AST.ClassDirective[]} */
@@ -145,42 +150,26 @@ export function build_element_attributes(node, context, transform) {
 						attr.value[0].data === 'checkbox'
 				);
 
-				attributes.push(
-					create_attribute('checked', null, -1, -1, [
-						{
-							type: 'ExpressionTag',
-							start: -1,
-							end: -1,
-							expression: is_checkbox
-								? b.call(
-										b.member(attribute.expression, 'includes'),
-										build_attribute_value(value_attribute.value, context, transform)
-									)
-								: b.binary(
-										'===',
-										attribute.expression,
-										build_attribute_value(value_attribute.value, context, transform)
-									),
-							metadata: {
-								expression: new ExpressionMetadata()
-							}
-						}
-					])
-				);
+				attributes.push({
+					type: 'transformed',
+					name: 'checked',
+					expression: is_checkbox
+						? b.call(
+								b.member(expression, 'includes'),
+								build_attribute_value(value_attribute.value, context, transform)
+							)
+						: b.binary(
+								'===',
+								expression,
+								build_attribute_value(value_attribute.value, context, transform)
+							)
+				});
 			} else {
-				attributes.push(
-					create_attribute(attribute.name, null, -1, -1, [
-						{
-							type: 'ExpressionTag',
-							start: -1,
-							end: -1,
-							expression,
-							metadata: {
-								expression: new ExpressionMetadata()
-							}
-						}
-					])
-				);
+				attributes.push({
+					type: 'transformed',
+					name: get_attribute_name(node, attribute),
+					expression
+				});
 			}
 		} else if (attribute.type === 'SpreadAttribute') {
 			attributes.push(attribute);
@@ -217,7 +206,21 @@ export function build_element_attributes(node, context, transform) {
 	} else {
 		const css_hash = node.metadata.scoped ? context.state.analysis.css.hash : null;
 
-		for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) {
+		for (const attribute of /** @type {Array<AST.Attribute | TransformedAttribute>} */ (
+			attributes
+		)) {
+			if (attribute.type === 'transformed') {
+				context.state.template.push(
+					b.call(
+						'$.attr',
+						b.literal(attribute.name),
+						attribute.expression,
+						is_boolean_attribute(attribute.name) && b.true
+					)
+				);
+				continue;
+			}
+
 			const name = get_attribute_name(node, attribute);
 			const can_use_literal =
 				(name !== 'class' || class_directives.length === 0) &&
@@ -298,14 +301,16 @@ function get_attribute_name(element, attribute) {
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement} element
- * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} attributes
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective | TransformedAttribute>} attributes
  * @param {ComponentContext} context
  * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
  */
 export function build_spread_object(element, attributes, context, transform) {
 	const object = b.object(
 		attributes.map((attribute) => {
-			if (attribute.type === '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);
 				const value = build_attribute_value(
 					attribute.value,
@@ -340,7 +345,7 @@ export function build_spread_object(element, attributes, context, transform) {
 /**
  *
  * @param {AST.RegularElement | AST.SvelteElement} element
- * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | TransformedAttribute>} attributes
  * @param {AST.StyleDirective[]} style_directives
  * @param {AST.ClassDirective[]} class_directives
  * @param {ComponentContext} context
@@ -356,7 +361,7 @@ function build_element_spread_attributes(
 ) {
 	const args = prepare_element_spread(
 		element,
-		/** @type {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} */ (attributes),
+		attributes,
 		style_directives,
 		class_directives,
 		context,
@@ -410,7 +415,7 @@ export function prepare_element_spread_object(element, context, transform) {
 /**
  * Prepare args for $.attributes(...): compute object, css_hash, classes, styles and flags.
  * @param {AST.RegularElement | AST.SvelteElement} element
- * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} attributes
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective | TransformedAttribute>} attributes
  * @param {AST.StyleDirective[]} style_directives
  * @param {AST.ClassDirective[]} class_directives
  * @param {ComponentContext} context

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

@@ -286,7 +286,7 @@ export function build_getter(node, state) {
 	}
 
 	if (binding.kind === 'derived') {
-		return (binding.declaration_kind === 'var' ? b.maybe_call : b.call)(binding.node);
+		return (binding.declaration_kind === 'var' ? b.maybe_call : b.call)(node);
 	}
 
 	return node;

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));
 		}
 	};
 }
@@ -701,7 +767,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('}');