svelte 5.55.1 → 5.55.3

package/elements.d.ts

@@ -952,9 +952,9 @@ export interface HTMLDetailsAttributes extends HTMLAttributes<HTMLDetailsElement
 
 	'bind:open'?: boolean | undefined | null;
 
-	'on:toggle'?: EventHandler<Event, HTMLDetailsElement> | undefined | null;
-	ontoggle?: EventHandler<Event, HTMLDetailsElement> | undefined | null;
-	ontogglecapture?: EventHandler<Event, HTMLDetailsElement> | undefined | null;
+	'on:toggle'?: ToggleEventHandler<HTMLDetailsElement> | undefined | null;
+	ontoggle?: ToggleEventHandler<HTMLDetailsElement> | undefined | null;
+	ontogglecapture?: ToggleEventHandler<HTMLDetailsElement> | undefined | null;
 }
 
 export interface HTMLDelAttributes extends HTMLAttributes<HTMLModElement> {

package/package.json

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

package/src/compiler/phases/1-parse/acorn.js

@@ -1,10 +1,13 @@
 /** @import { Comment, Program } from 'estree' */
 /** @import { AST } from '#compiler' */
+/** @import { Parser } from './index.js' */
 import * as acorn from 'acorn';
 import { walk } from 'zimmerframe';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
+import * as e from '../../errors.js';
 
-const ParserWithTS = acorn.Parser.extend(tsPlugin());
+const JSParser = acorn.Parser;
+const TSParser = JSParser.extend(tsPlugin());
 
 /**
  * @typedef {Comment & {
@@ -20,15 +23,15 @@ const ParserWithTS = acorn.Parser.extend(tsPlugin());
  * @param {boolean} [is_script]
  */
 export function parse(source, comments, typescript, is_script) {
-	const parser = typescript ? ParserWithTS : acorn.Parser;
+	const acorn = typescript ? TSParser : JSParser;
 
 	const { onComment, add_comments } = get_comment_handlers(
 		source,
 		/** @type {CommentWithLocation[]} */ (comments)
 	);
 
-	// @ts-ignore
-	const parse_statement = parser.prototype.parseStatement;
+	// @ts-expect-error
+	const parse_statement = acorn.prototype.parseStatement;
 
 	// If we're dealing with a <script> then it might contain an export
 	// for something that doesn't exist directly inside but is inside the
@@ -36,7 +39,7 @@ export function parse(source, comments, typescript, is_script) {
 	// an error in these cases
 	if (is_script) {
 		// @ts-ignore
-		parser.prototype.parseStatement = function (...args) {
+		acorn.prototype.parseStatement = function (...args) {
 			const v = parse_statement.call(this, ...args);
 			// @ts-ignore
 			this.undefinedExports = {};
@@ -44,53 +47,77 @@ export function parse(source, comments, typescript, is_script) {
 		};
 	}
 
-	let ast;
-
 	try {
-		ast = parser.parse(source, {
+		const ast = acorn.parse(source, {
 			onComment,
 			sourceType: 'module',
 			ecmaVersion: 16,
 			locations: true
 		});
+
+		add_comments(ast);
+
+		return /** @type {Program} */ (ast);
+	} catch (err) {
+		// TODO the `return` in necessary for TS<7 due to a bug; otherwise
+		// the `finally` block is regarded as unreachable
+		return handle_parse_error(err);
 	} finally {
 		if (is_script) {
-			// @ts-ignore
-			parser.prototype.parseStatement = parse_statement;
+			// @ts-expect-error
+			acorn.prototype.parseStatement = parse_statement;
 		}
 	}
-
-	add_comments(ast);
-
-	return /** @type {Program} */ (ast);
 }
 
 /**
+ * @param {Parser} parser
  * @param {string} source
- * @param {Comment[]} comments
- * @param {boolean} typescript
  * @param {number} index
  * @returns {acorn.Expression & { leadingComments?: CommentWithLocation[]; trailingComments?: CommentWithLocation[]; }}
  */
-export function parse_expression_at(source, comments, typescript, index) {
-	const parser = typescript ? ParserWithTS : acorn.Parser;
+export function parse_expression_at(parser, source, index) {
+	const acorn = parser.ts ? TSParser : JSParser;
 
-	const { onComment, add_comments } = get_comment_handlers(
-		source,
-		/** @type {CommentWithLocation[]} */ (comments),
-		index
-	);
+	const { onComment, add_comments } = get_comment_handlers(source, parser.root.comments, index);
 
-	const ast = parser.parseExpressionAt(source, index, {
-		onComment,
-		sourceType: 'module',
-		ecmaVersion: 16,
-		locations: true
-	});
+	try {
+		const ast = acorn.parseExpressionAt(source, index, {
+			onComment,
+			sourceType: 'module',
+			ecmaVersion: 16,
+			locations: true,
+			preserveParens: true
+		});
+
+		add_comments(ast);
+
+		return ast;
+	} catch (e) {
+		handle_parse_error(e);
+	}
+}
+
+const regex_position_indicator = / \(\d+:\d+\)$/;
 
-	add_comments(ast);
+/**
+ * @param {any} err
+ * @returns {never}
+ */
+function handle_parse_error(err) {
+	e.js_parse_error(err.pos, err.message.replace(regex_position_indicator, ''));
+}
 
-	return ast;
+/**
+ * @param {acorn.Expression} node
+ * @returns {acorn.Expression}
+ */
+export function remove_parens(node) {
+	return walk(node, null, {
+		ParenthesizedExpression(node, context) {
+			return context.visit(node.expression);
+		}
+	});
 }
 
 /**

package/src/compiler/phases/1-parse/index.js

@@ -11,8 +11,6 @@ import { is_reserved } from '../../../utils.js';
 import { disallow_children } from '../2-analyze/visitors/shared/special-element.js';
 import * as state from '../../state.js';
 
-const regex_position_indicator = / \(\d+:\d+\)$/;
-
 /** @param {number} cc */
 function is_whitespace(cc) {
 	// fast path for common whitespace
@@ -175,14 +173,6 @@ export class Parser {
 		return this.stack[this.stack.length - 1];
 	}
 
-	/**
-	 * @param {any} err
-	 * @returns {never}
-	 */
-	acorn_error(err) {
-		e.js_parse_error(err.pos, err.message.replace(regex_position_indicator, ''));
-	}
-
 	/**
 	 * @param {string} str
 	 * @param {boolean} required

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

@@ -1,7 +1,7 @@
 /** @import { Pattern } from 'estree' */
 /** @import { Parser } from '../index.js' */
 import { match_bracket } from '../utils/bracket.js';
-import { parse_expression_at } from '../acorn.js';
+import { parse_expression_at, remove_parens } from '../acorn.js';
 import { regex_not_newline_characters } from '../../patterns.js';
 import * as e from '../../../errors.js';
 
@@ -35,38 +35,32 @@ export default function read_pattern(parser) {
 
 	const pattern_string = parser.template.slice(start, i);
 
-	try {
-		// the length of the `space_with_newline` has to be start - 1
-		// because we added a `(` in front of the pattern_string,
-		// which shifted the entire string to right by 1
-		// so we offset it by removing 1 character in the `space_with_newline`
-		// to achieve that, we remove the 1st space encountered,
-		// so it will not affect the `column` of the node
-		let space_with_newline = parser.template
-			.slice(0, start)
-			.replace(regex_not_newline_characters, ' ');
-		const first_space = space_with_newline.indexOf(' ');
-		space_with_newline =
-			space_with_newline.slice(0, first_space) + space_with_newline.slice(first_space + 1);
-
-		const expression = /** @type {any} */ (
-			parse_expression_at(
-				`${space_with_newline}(${pattern_string} = 1)`,
-				parser.root.comments,
-				parser.ts,
-				start - 1
-			)
-		).left;
-
-		expression.typeAnnotation = read_type_annotation(parser);
-		if (expression.typeAnnotation) {
-			expression.end = expression.typeAnnotation.end;
-		}
-
-		return expression;
-	} catch (error) {
-		parser.acorn_error(error);
+	// the length of the `space_with_newline` has to be start - 1
+	// because we added a `(` in front of the pattern_string,
+	// which shifted the entire string to right by 1
+	// so we offset it by removing 1 character in the `space_with_newline`
+	// to achieve that, we remove the 1st space encountered,
+	// so it will not affect the `column` of the node
+	let space_with_newline = parser.template
+		.slice(0, start)
+		.replace(regex_not_newline_characters, ' ');
+	const first_space = space_with_newline.indexOf(' ');
+	space_with_newline =
+		space_with_newline.slice(0, first_space) + space_with_newline.slice(first_space + 1);
+
+	/** @type {any} */
+	let expression = remove_parens(
+		parse_expression_at(parser, `${space_with_newline}(${pattern_string} = 1)`, start - 1)
+	);
+
+	expression = expression.left;
+
+	expression.typeAnnotation = read_type_annotation(parser);
+	if (expression.typeAnnotation) {
+		expression.end = expression.typeAnnotation.end;
 	}
+
+	return expression;
 }
 
 /**
@@ -92,13 +86,13 @@ function read_type_annotation(parser) {
 		// parameters as part of a sequence expression instead, and will then error on optional
 		// parameters (`?:`). Therefore replace that sequence with something that will not error.
 		parser.template.slice(parser.index).replace(/\?\s*:/g, ':');
-	let expression = parse_expression_at(template, parser.root.comments, parser.ts, a);
+	let expression = remove_parens(parse_expression_at(parser, template, a));
 
 	// `foo: bar = baz` gets mangled — fix it
 	if (expression.type === 'AssignmentExpression') {
 		let b = expression.right.start;
 		while (template[b] !== '=') b -= 1;
-		expression = parse_expression_at(template.slice(0, b), parser.root.comments, parser.ts, a);
+		expression = remove_parens(parse_expression_at(parser, template.slice(0, b), a));
 	}
 
 	// `array as item: string, index` becomes `string, index`, which is mistaken as a sequence expression - fix that

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

@@ -1,6 +1,6 @@
 /** @import { Expression } from 'estree' */
 /** @import { Parser } from '../index.js' */
-import { parse_expression_at } from '../acorn.js';
+import { parse_expression_at, remove_parens } from '../acorn.js';
 import { regex_whitespace } from '../../patterns.js';
 import * as e from '../../../errors.js';
 import { find_matching_bracket } from '../utils/bracket.js';
@@ -34,50 +34,16 @@ export function get_loose_identifier(parser, opening_token) {
  */
 export default function read_expression(parser, opening_token, disallow_loose) {
 	try {
-		let comment_index = parser.root.comments.length;
-
-		const node = parse_expression_at(
-			parser.template,
-			parser.root.comments,
-			parser.ts,
-			parser.index
-		);
-
-		let num_parens = 0;
-
-		let i = parser.root.comments.length;
-		while (i-- > comment_index) {
-			const comment = parser.root.comments[i];
-			if (comment.end < node.start) {
-				parser.index = comment.end;
-				break;
-			}
-		}
-
-		for (let i = parser.index; i < /** @type {number} */ (node.start); i += 1) {
-			if (parser.template[i] === '(') num_parens += 1;
-		}
+		const node = parse_expression_at(parser, parser.template, parser.index);
 
 		let index = /** @type {number} */ (node.end);
 
 		const last_comment = parser.root.comments.at(-1);
 		if (last_comment && last_comment.end > index) index = last_comment.end;
 
-		while (num_parens > 0) {
-			const char = parser.template[index];
-
-			if (char === ')') {
-				num_parens -= 1;
-			} else if (!regex_whitespace.test(char)) {
-				e.expected_token(index, ')');
-			}
-
-			index += 1;
-		}
-
 		parser.index = index;
 
-		return /** @type {Expression} */ (node);
+		return /** @type {Expression} */ (remove_parens(node));
 	} catch (err) {
 		// If we are in an each loop we need the error to be thrown in cases like
 		// `as { y = z }` so we still throw and handle the error there
@@ -88,6 +54,6 @@ export default function read_expression(parser, opening_token, disallow_loose) {
 			}
 		}
 
-		parser.acorn_error(err);
+		throw err;
 	}
 }

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

@@ -31,14 +31,7 @@ export function read_script(parser, start, attributes) {
 		parser.template.slice(0, script_start).replace(regex_not_newline_characters, ' ') + data;
 	parser.read(regex_starts_with_closing_script_tag);
 
-	/** @type {Program} */
-	let ast;
-
-	try {
-		ast = acorn.parse(source, parser.root.comments, parser.ts, true);
-	} catch (err) {
-		parser.acorn_error(err);
-	}
+	const ast = acorn.parse(source, parser.root.comments, parser.ts, true);
 
 	ast.start = script_start;
 

package/src/compiler/phases/1-parse/state/tag.js

@@ -392,12 +392,7 @@ function open(parser) {
 
 		let function_expression = matched
 			? /** @type {ArrowFunctionExpression} */ (
-					parse_expression_at(
-						prelude + `${params} => {}`,
-						parser.root.comments,
-						parser.ts,
-						params_start
-					)
+					parse_expression_at(parser, prelude + `${params} => {}`, params_start)
 				)
 			: { params: [] };
 

package/src/compiler/phases/2-analyze/visitors/ConstTag.js

@@ -1,6 +1,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import * as b from '#compiler/builders';
 import { validate_opening_tag } from './shared/utils.js';
 
 /**
@@ -42,4 +43,28 @@ export function ConstTag(node, context) {
 		function_depth: context.state.function_depth + 1,
 		derived_function_depth: context.state.function_depth + 1
 	});
+
+	const has_await = node.metadata.expression.has_await;
+	const blockers = [...node.metadata.expression.dependencies]
+		.map((dep) => dep.blocker)
+		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
+
+	if (has_await || context.state.async_consts || blockers.length > 0) {
+		const run = (context.state.async_consts ??= {
+			id: context.state.analysis.root.unique('promises'),
+			declaration_count: 0
+		});
+		node.metadata.promises_id = run.id;
+
+		const bindings = context.state.scope.get_bindings(declaration);
+
+		// keep the counter in sync with the number of thunks pushed in ConstTag in transform
+		// TODO 6.0 once non-async and non-runes mode is gone investigate making this more robust
+		// via something like the approach in https://github.com/sveltejs/svelte/pull/18032
+		const length = run.declaration_count++;
+		const blocker = b.member(run.id, b.literal(length), true);
+		for (const binding of bindings) {
+			binding.blocker = blocker;
+		}
+	}
 }

package/src/compiler/phases/2-analyze/visitors/Fragment.js

@@ -6,5 +6,5 @@
  * @param {Context} context
  */
 export function Fragment(node, context) {
-	context.next({ ...context.state, fragment: node });
+	context.next({ ...context.state, fragment: node, async_consts: undefined });
 }

package/src/compiler/phases/2-analyze/visitors/shared/function.js

@@ -10,7 +10,7 @@ export function visit_function(node, context) {
 		for (const [name] of context.state.scope.references) {
 			const binding = context.state.scope.get(name);
 
-			if (binding && binding.scope.function_depth < context.state.scope.function_depth) {
+			if (binding && binding.scope !== context.state.scope) {
 				context.state.expression.references.add(binding);
 			}
 		}

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

@@ -352,7 +352,7 @@ export function client_component(analysis, options) {
 			)
 		);
 	} else if (dev) {
-		component_returned_object.push(b.spread(b.call(b.id('$.legacy_api'))));
+		component_returned_object.unshift(b.spread(b.call(b.id('$.legacy_api'))));
 	}
 
 	const push_args = [b.id('$$props'), b.literal(analysis.runes)];

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

@@ -1,7 +1,6 @@
-/** @import { Expression, Identifier, Pattern } from 'estree' */
+/** @import { Expression, Identifier, Pattern, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-/** @import { ExpressionMetadata } from '../../../nodes.js' */
 import { dev } from '../../../../state.js';
 import { extract_identifiers } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
@@ -27,13 +26,7 @@ export function ConstTag(node, context) {
 
 		context.state.transform[declaration.id.name] = { read: get_value };
 
-		add_const_declaration(
-			context.state,
-			declaration.id,
-			expression,
-			node.metadata.expression,
-			context.state.scope.get_bindings(declaration)
-		);
+		add_const_declaration(context.state, declaration.id, expression, node.metadata);
 	} else {
 		const identifiers = extract_identifiers(declaration.id);
 		const tmp = b.id(context.state.scope.generate('computed_const'));
@@ -70,13 +63,7 @@ export function ConstTag(node, context) {
 			expression = b.call('$.tag', expression, b.literal('[@const]'));
 		}
 
-		add_const_declaration(
-			context.state,
-			tmp,
-			expression,
-			node.metadata.expression,
-			context.state.scope.get_bindings(declaration)
-		);
+		add_const_declaration(context.state, tmp, expression, node.metadata);
 
 		for (const node of identifiers) {
 			context.state.transform[node.name] = {
@@ -90,42 +77,40 @@ export function ConstTag(node, context) {
  * @param {ComponentContext['state']} state
  * @param {Identifier} id
  * @param {Expression} expression
- * @param {ExpressionMetadata} metadata
- * @param {import('#compiler').Binding[]} bindings
+ * @param {AST.ConstTag['metadata']} metadata
  */
-function add_const_declaration(state, id, expression, metadata, bindings) {
+function add_const_declaration(state, id, expression, metadata) {
 	// we need to eagerly evaluate the expression in order to hit any
 	// 'Cannot access x before initialization' errors
 	const after = dev ? [b.stmt(b.call('$.get', id))] : [];
 
-	const has_await = metadata.has_await;
-	const blockers = [...metadata.dependencies]
+	const blockers = [...metadata.expression.dependencies]
 		.map((dep) => dep.blocker)
 		.filter((b) => b !== null && b.object !== state.async_consts?.id);
 
-	if (has_await || state.async_consts || blockers.length > 0) {
+	if (metadata.promises_id) {
 		const run = (state.async_consts ??= {
-			id: b.id(state.scope.generate('promises')),
+			id: metadata.promises_id,
 			thunks: []
 		});
 
 		state.consts.push(b.let(id));
 
-		const assignment = b.assignment('=', id, expression);
-		const body = after.length === 0 ? assignment : b.block([b.stmt(assignment), ...after]);
+		/** @type {Statement | undefined} */
+		let promise_stmt;
 
 		if (blockers.length === 1) {
-			run.thunks.push(b.thunk(b.member(/** @type {Expression} */ (blockers[0]), 'promise')));
+			promise_stmt = b.stmt(b.await(b.member(/** @type {Expression} */ (blockers[0]), 'promise')));
 		} else if (blockers.length > 0) {
-			run.thunks.push(b.thunk(b.call('$.wait', b.array(blockers))));
+			promise_stmt = b.stmt(b.await(b.call('$.wait', b.array(blockers))));
 		}
 
-		run.thunks.push(b.thunk(body, has_await));
-
-		const blocker = b.member(run.id, b.literal(run.thunks.length - 1), true);
-
-		for (const binding of bindings) {
-			binding.blocker = blocker;
+		// keep the number of thunks pushed in sync with ConstTag in analysis phase
+		const assignment = b.assignment('=', id, expression);
+		if (promise_stmt) {
+			run.thunks.push(b.thunk(b.block([promise_stmt, b.stmt(assignment)]), true));
+		} else {
+			run.thunks.push(b.thunk(assignment, metadata.expression.has_await));
 		}
 	} else {
 		state.consts.push(b.const(id, expression));

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

@@ -1,4 +1,4 @@
-/** @import { Expression, Pattern } from 'estree' */
+/** @import { Expression, Pattern, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
@@ -12,36 +12,37 @@ export function ConstTag(node, context) {
 	const declaration = node.declaration.declarations[0];
 	const id = /** @type {Pattern} */ (context.visit(declaration.id));
 	const init = /** @type {Expression} */ (context.visit(declaration.init));
-	const has_await = node.metadata.expression.has_await;
 	const blockers = [...node.metadata.expression.dependencies]
 		.map((dep) => dep.blocker)
 		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
 
-	if (has_await || context.state.async_consts || blockers.length > 0) {
+	if (node.metadata.promises_id) {
 		const run = (context.state.async_consts ??= {
-			id: b.id(context.state.scope.generate('promises')),
+			id: node.metadata.promises_id,
 			thunks: []
 		});
 
 		const identifiers = extract_identifiers(declaration.id);
-		const bindings = context.state.scope.get_bindings(declaration);
 
 		for (const identifier of identifiers) {
 			context.state.init.push(b.let(identifier.name));
 		}
 
+		/** @type {Statement | undefined} */
+		let promise_stmt;
+
 		if (blockers.length === 1) {
-			run.thunks.push(b.thunk(/** @type {Expression} */ (blockers[0])));
+			promise_stmt = b.stmt(b.await(/** @type {Expression} */ (blockers[0])));
 		} else if (blockers.length > 0) {
-			run.thunks.push(b.thunk(b.call('Promise.all', b.array(blockers))));
+			promise_stmt = b.stmt(b.await(b.call('Promise.all', b.array(blockers))));
 		}
 
+		// keep the number of thunks pushed in sync with ConstTag in analysis phase
 		const assignment = b.assignment('=', id, init);
-		run.thunks.push(b.thunk(b.block([b.stmt(assignment)]), has_await));
-
-		const blocker = b.member(run.id, b.literal(run.thunks.length - 1), true);
-		for (const binding of bindings) {
-			binding.blocker = blocker;
+		if (promise_stmt) {
+			run.thunks.push(b.thunk(b.block([promise_stmt, b.stmt(assignment)]), true));
+		} else {
+			run.thunks.push(b.thunk(assignment, node.metadata.expression.has_await));
 		}
 	} else {
 		context.state.init.push(b.const(id, init));

package/src/internal/client/constants.js

@@ -62,6 +62,8 @@ export const STATE_SYMBOL = Symbol('$state');
 export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
 export const PROXY_PATH_SYMBOL = Symbol('proxy path');
+/** An anchor might change, via this symbol on the original anchor we can tell HMR about the updated anchor */
+export const HMR_ANCHOR = Symbol('hmr anchor');
 
 /** allow users to ignore aborted signal errors if `reason.name === 'StaleReactionError` */
 export const STALE_REACTION = new (class StaleReactionError extends Error {

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

@@ -1,6 +1,6 @@
 /** @import { Effect, TemplateNode } from '#client' */
 import { FILENAME, HMR } from '../../../constants.js';
-import { EFFECT_TRANSPARENT } from '#client/constants';
+import { EFFECT_TRANSPARENT, HMR_ANCHOR } from '#client/constants';
 import { hydrate_node, hydrating } from '../dom/hydration.js';
 import { block, branch, destroy_effect } from '../reactivity/effects.js';
 import { set, source } from '../reactivity/sources.js';
@@ -15,10 +15,10 @@ export function hmr(fn) {
 	const current = source(fn);
 
 	/**
-	 * @param {TemplateNode} anchor
+	 * @param {TemplateNode} initial_anchor
 	 * @param {any} props
 	 */
-	function wrapper(anchor, props) {
+	function wrapper(initial_anchor, props) {
 		let component = {};
 		let instance = {};
 
@@ -26,6 +26,7 @@ export function hmr(fn) {
 		let effect;
 
 		let ran = false;
+		let anchor = initial_anchor;
 
 		block(() => {
 			if (component === (component = get(current))) {
@@ -39,6 +40,8 @@ export function hmr(fn) {
 			}
 
 			effect = branch(() => {
+				anchor = /** @type {any} */ (anchor)[HMR_ANCHOR] ?? anchor;
+
 				// when the component is invalidated, replace it without transitions
 				if (ran) set_should_intro(false);