svelte 5.55.1 → 5.55.2

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.2",
   "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/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/internal/client/dom/blocks/each.js

@@ -42,6 +42,7 @@ import { DEV } from 'esm-env';
 import { derived_safe_equal } from '../../reactivity/deriveds.js';
 import { current_batch } from '../../reactivity/batch.js';
 import * as e from '../../errors.js';
+import { tag } from '../../dev/tracing.js';
 
 // When making substantive changes to this file, validate them with the each block stress test:
 // https://svelte.dev/playground/1972b2cf46564476ad8c8c6405b23b7b
@@ -205,6 +206,10 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		return is_array(collection) ? collection : collection == null ? [] : array_from(collection);
 	});
 
+	if (DEV) {
+		tag(each_array, '{#each ...}');
+	}
+
 	/** @type {V[]} */
 	var array;
 

package/src/internal/client/reactivity/batch.js

@@ -172,6 +172,12 @@ export class Batch {
 	 */
 	#skipped_branches = new Map();
 
+	/**
+	 * Inverse of #skipped_branches which we need to tell prior batches to unskip them when committing
+	 * @type {Set<Effect>}
+	 */
+	#unskipped_branches = new Set();
+
 	is_fork = false;
 
 	#decrement_queued = false;
@@ -215,28 +221,31 @@ export class Batch {
 		if (!this.#skipped_branches.has(effect)) {
 			this.#skipped_branches.set(effect, { d: [], m: [] });
 		}
+		this.#unskipped_branches.delete(effect);
 	}
 
 	/**
 	 * Remove an effect from the #skipped_branches map and reschedule
 	 * any tracked dirty/maybe_dirty child effects
 	 * @param {Effect} effect
+	 * @param {(e: Effect) => void} callback
 	 */
-	unskip_effect(effect) {
+	unskip_effect(effect, callback = (e) => this.schedule(e)) {
 		var tracked = this.#skipped_branches.get(effect);
 		if (tracked) {
 			this.#skipped_branches.delete(effect);
 
 			for (var e of tracked.d) {
 				set_signal_status(e, DIRTY);
-				this.schedule(e);
+				callback(e);
 			}
 
 			for (e of tracked.m) {
 				set_signal_status(e, MAYBE_DIRTY);
-				this.schedule(e);
+				callback(e);
 			}
 		}
+		this.#unskipped_branches.add(effect);
 	}
 
 	#process() {
@@ -349,7 +358,9 @@ export class Batch {
 			next_batch.#process();
 		}
 
-		if (!batches.has(this)) {
+		// In sync mode flushSync can cause #commit to wrongfully think that there needs to be a rebase, so we only do it in async mode
+		// TODO fix the underlying cause, otherwise this will likely regress when non-async mode is removed
+		if (async_mode_flag && !batches.has(this)) {
 			this.#commit();
 		}
 	}
@@ -419,18 +430,22 @@ export class Batch {
 	 * Associate a change to a given source with the current
 	 * batch, noting its previous and current values
 	 * @param {Value} source
-	 * @param {any} old_value
+	 * @param {any} value
 	 * @param {boolean} [is_derived]
 	 */
-	capture(source, old_value, is_derived = false) {
-		if (old_value !== UNINITIALIZED && !this.previous.has(source)) {
-			this.previous.set(source, old_value);
+	capture(source, value, is_derived = false) {
+		if (source.v !== UNINITIALIZED && !this.previous.has(source)) {
+			this.previous.set(source, source.v);
 		}
 
 		// Don't save errors in `batch_values`, or they won't be thrown in `runtime.js#get`
 		if ((source.f & ERROR_VALUE) === 0) {
-			this.current.set(source, [source.v, is_derived]);
-			batch_values?.set(source, source.v);
+			this.current.set(source, [value, is_derived]);
+			batch_values?.set(source, value);
+		}
+
+		if (!this.is_fork) {
+			source.v = value;
 		}
 	}
 
@@ -526,6 +541,19 @@ export class Batch {
 					invariant(batch.#roots.length === 0, 'Batch has scheduled roots');
 				}
 
+				// A batch was unskipped in a later batch -> tell prior batches to unskip it, too
+				if (is_earlier) {
+					for (const unskipped of this.#unskipped_branches) {
+						batch.unskip_effect(unskipped, (e) => {
+							if ((e.f & (BLOCK_EFFECT | ASYNC)) !== 0) {
+								batch.schedule(e);
+							} else {
+								batch.#defer_effects([e]);
+							}
+						});
+					}
+				}
+
 				batch.activate();
 
 				/** @type {Set<Value>} */
@@ -787,6 +815,7 @@ export class Batch {
 	}
 }
 
+// TODO Svelte@6 think about removing the callback argument.
 /**
  * Synchronously flush any pending updates.
  * Returns void if no callback is provided, otherwise returns the result of calling the callback.
@@ -1162,11 +1191,6 @@ export function fork(fn) {
 
 	flushSync(fn);
 
-	// revert state changes
-	for (var [source, value] of batch.previous) {
-		source.v = value;
-	}
-
 	return {
 		commit: async () => {
 			if (committed) {

package/src/internal/client/reactivity/deriveds.js

@@ -384,7 +384,6 @@ export function execute_derived(derived) {
  * @returns {void}
  */
 export function update_derived(derived) {
-	var old_value = derived.v;
 	var value = execute_derived(derived);
 
 	if (!derived.equals(value)) {
@@ -395,8 +394,11 @@ export function update_derived(derived) {
 		// otherwise, the next time we get here after a 'real world' state
 		// change, `derived.equals` may incorrectly return `true`
 		if (!current_batch?.is_fork || derived.deps === null) {
-			derived.v = value;
-			current_batch?.capture(derived, old_value, true);
+			if (current_batch !== null) {
+				current_batch.capture(derived, value, true);
+			} else {
+				derived.v = value;
+			}
 
 			// deriveds without dependencies should never be recomputed
 			if (derived.deps === null) {

package/src/internal/client/reactivity/sources.js

@@ -180,18 +180,10 @@ export function set(source, value, should_proxy = false) {
  */
 export function internal_set(source, value, updated_during_traversal = null) {
 	if (!source.equals(value)) {
-		var old_value = source.v;
-
-		if (is_destroying_effect) {
-			old_values.set(source, value);
-		} else {
-			old_values.set(source, old_value);
-		}
-
-		source.v = value;
+		old_values.set(source, is_destroying_effect ? value : source.v);
 
 		var batch = Batch.ensure();
-		batch.capture(source, old_value);
+		batch.capture(source, value);
 
 		if (DEV) {
 			if (tracing_mode_flag || active_effect !== null) {

package/src/internal/client/runtime.js

@@ -399,7 +399,14 @@ function remove_reaction(signal, dependency) {
 			derived.f &= ~WAS_MARKED;
 		}
 
-		update_derived_status(derived);
+		// In a fork it's possible that a derived is executed and gets reactions, then commits, but is
+		// never re-executed. This is possible when the derived is only executed once in the context
+		// of a new branch which happens before fork.commit() runs. In this case, the derived still has
+		// UNINITIALIZED as its value, and then when it's loosing its reactions we need to ensure it stays
+		// DIRTY so it is reexecuted once someone wants its value again.
+		if (derived.v !== UNINITIALIZED) {
+			update_derived_status(derived);
+		}
 
 		// freeze any effects inside this derived
 		freeze_derived_effects(derived);

package/src/internal/server/errors.js

@@ -105,6 +105,18 @@ export function invalid_csp() {
 	throw error;
 }
 
+/**
+ * The `idPrefix` option cannot include `--`.
+ * @returns {never}
+ */
+export function invalid_id_prefix() {
+	const error = new Error(`invalid_id_prefix\nThe \`idPrefix\` option cannot include \`--\`.\nhttps://svelte.dev/e/invalid_id_prefix`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
 /**
  * `%name%(...)` is not available on the server
  * @param {string} name

package/src/internal/server/renderer.js

@@ -759,6 +759,10 @@ export class Renderer {
 	 * @returns {Renderer}
 	 */
 	static #open_render(mode, component, options) {
+		if (options.idPrefix?.includes('--')) {
+			e.invalid_id_prefix();
+		}
+
 		var previous_context = ssr_context;
 
 		try {

package/src/reactivity/date.js

@@ -95,6 +95,10 @@ export class SvelteDate extends Date {
 							return date_proto[method].apply(this, args);
 						});
 
+						if (DEV) {
+							tag(d, `SvelteDate.${method}()`);
+						}
+
 						this.#deriveds.set(method, d);
 
 						set_active_reaction(reaction);

package/src/version.js

@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.55.1';
+export const VERSION = '5.55.2';
 export const PUBLIC_VERSION = '5';