svelte 5.56.0 → 5.56.1

package/package.json

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

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

@@ -5,7 +5,6 @@ import * as acorn from 'acorn';
 import { walk } from 'zimmerframe';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
 import * as e from '../../errors.js';
-import { find_matching_bracket } from './utils/bracket.js';
 
 const JSParser = acorn.Parser;
 const TSParser = JSParser.extend(tsPlugin());
@@ -106,38 +105,26 @@ export function parse_expression_at(parser, source, index) {
  * @returns {Statement}
  */
 export function parse_statement_at(parser, source, index) {
-	const acorn = parser.ts ? TSParser : JSParser;
-	let end = find_matching_bracket(source, index, '{');
-	if (end === undefined) e.unexpected_eof(source.length);
-
-	while (source[end - 1] === ';') {
-		end -= 1;
-	}
-
-	const padded_source = `${' '.repeat(index)}${source.slice(index, end)}`;
-	const { onComment, add_comments } = get_comment_handlers(
-		padded_source,
-		parser.root.comments,
-		index
-	);
+	// cast to `any`: acorn's Parser constructor and parseStatement/nextToken aren't in its public types
+	const acorn = /** @type {any} */ (parser.ts ? TSParser : JSParser);
+	const { onComment, add_comments } = get_comment_handlers(source, parser.root.comments, index);
 
 	try {
-		const ast = acorn.parse(padded_source, {
-			onComment,
-			sourceType: 'module',
-			ecmaVersion: 16,
-			locations: true
-		});
-
-		add_comments(ast);
-
-		const statement = /** @type {Statement} */ (
-			/** @type {unknown} */ (/** @type {Program} */ (ast).body[0])
+		// This is like parseExpressionAt but for statements
+		const p = new acorn(
+			{ onComment, sourceType: 'module', ecmaVersion: 16, locations: true },
+			source,
+			index
 		);
-		statement.end = Math.min(/** @type {number} */ (statement.end), end);
+		p.nextToken();
+		const statement = /** @type {Statement} */ (p.parseStatement(null, true, Object.create(null)));
+		add_comments(/** @type {acorn.Node} */ (statement));
 		return statement;
-	} catch (e) {
-		handle_parse_error(e);
+	} catch (err) {
+		// A statement that runs to the end of the source (e.g. an unterminated declaration tag)
+		// is an EOF, not a stray token; preserve the friendlier `unexpected_eof` diagnostic.
+		if (/** @type {any} */ (err).pos === source.length) e.unexpected_eof(source.length);
+		handle_parse_error(err);
 	}
 }
 

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

@@ -12,9 +12,9 @@ import { find_matching_bracket, match_bracket } from '../utils/bracket.js';
 
 const regex_whitespace_with_closing_curly_brace = /\s*}/y;
 const regex_supported_declaration = /(?:let|const)\b/y;
-// All except `type` are reserved keywords and cannot be used as variable names.
-// For type we check if it's not something like `type .x` / `type ()` / `type % 2` / ...
-const regex_unsupported_declaration = /(?:(?:var|interface|enum)\b)|(?:type\s+[^?.(`<[&|%^}])/y;
+const regex_unsupported_declaration = /(?:var|interface|enum)\b/y;
+// `type` is a contextual keyword; this is just a shape hint, confirmed by parsing.
+const regex_maybe_type_declaration = /type\b/y;
 
 const pointy_bois = { '<': '>' };
 
@@ -77,10 +77,17 @@ function read_declaration(parser) {
 		e.declaration_tag_invalid_type({ start, end: start + unsupported.length });
 	}
 
-	if (!parser.match_regex(regex_supported_declaration)) {
+	if (
+		!parser.match_regex(regex_supported_declaration) &&
+		// `type` is special, since it is not a reserved keyword and can be used
+		// as part of a valid expression. We gotta parse first and then see what it is.
+		!parser.match_regex(regex_maybe_type_declaration)
+	) {
 		return null;
 	}
 
+	const initial_comment_count = parser.root.comments.length;
+
 	/** @type {import('estree').Statement | import('estree').VariableDeclaration} */
 	let declaration;
 	try {
@@ -117,10 +124,16 @@ function read_declaration(parser) {
 	}
 
 	if (declaration.type !== 'VariableDeclaration') {
-		e.declaration_tag_invalid_type({
-			start: declaration.start ?? start,
-			end: declaration.end ?? parser.index
-		});
+		if (declaration.type === 'ExpressionStatement') {
+			parser.root.comments.length = initial_comment_count; // Else they show up duplicated
+			return null;
+		} else {
+			// This is a TSTypeAliasDeclaration
+			e.declaration_tag_invalid_type({
+				start: declaration.start ?? start,
+				end: declaration.end ?? parser.index
+			});
+		}
 	}
 
 	// TODO support using

package/src/compiler/phases/1-parse/utils/bracket.js

@@ -39,7 +39,9 @@ function find_string_end(string, search_start_index, string_start_char) {
  * @returns {number} The index of the end of this regex expression, or `Infinity` if not found.
  */
 function find_regex_end(string, search_start_index) {
-	return find_unescaped_char(string, search_start_index, '/');
+	const slash = find_unescaped_char(string, search_start_index, '/');
+	const eol = find_unescaped_char(string, search_start_index, '\n');
+	return slash < eol ? slash : Infinity;
 }
 
 /**
@@ -105,7 +107,11 @@ export function find_matching_bracket(template, index, open) {
 				continue;
 			case '/': {
 				const next_char = template[i + 1];
-				if (!next_char) continue;
+				if (!next_char) {
+					// `/` is the last character; advance past it so we don't loop forever
+					i++;
+					continue;
+				}
 				if (next_char === '/') {
 					i = infinity_if_negative(template.indexOf('\n', i + 1)) + '\n'.length;
 					continue;
@@ -114,7 +120,12 @@ export function find_matching_bracket(template, index, open) {
 					i = infinity_if_negative(template.indexOf('*/', i + 1)) + '*/'.length;
 					continue;
 				}
-				i = find_regex_end(template, i + 1) + '/'.length;
+				const end = find_regex_end(template, i + 1) + '/'.length;
+				if (end === Infinity) {
+					i++;
+				} else {
+					i = end;
+				}
 				continue;
 			}
 			default: {

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

@@ -2,21 +2,34 @@
 /** @import { Context } from '../types' */
 import * as b from '#compiler/builders';
 import * as e from '../../../errors.js';
-import { validate_opening_tag } from './shared/utils.js';
+import { extract_identifiers } from '../../../utils/ast.js';
 
 /**
  * @param {AST.DeclarationTag} node
  * @param {Context} context
  */
 export function DeclarationTag(node, context) {
-	validate_opening_tag(node, context.state, node.declaration.kind[0]);
 	if (!context.state.analysis.runes && !context.state.analysis.maybe_runes) {
 		e.declaration_tag_no_legacy_mode(node);
 	}
 
+	const is_top_level = context.path.length === 1 && context.path[0].type === 'Fragment';
+	if (is_top_level) {
+		const duplicate = node.declaration.declarations
+			.flatMap((declaration) => extract_identifiers(declaration.id))
+			.find((id) => context.state.analysis.instance.scope.declarations.has(id.name));
+		if (duplicate) {
+			e.declaration_duplicate(duplicate, duplicate.name);
+		}
+	}
+
 	context.visit(node.declaration, {
 		...context.state,
 		in_declaration_tag: true,
+		// the declaration lives in the fragment scope, which is one level deeper than the
+		// `function_depth` we're tracking here (`set_scope` doesn't update `function_depth`).
+		// align them so that `state_referenced_locally` warnings are calculated correctly
+		function_depth: context.state.scope.function_depth,
 		expression: node.metadata.expression
 	});
 

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

@@ -25,19 +25,24 @@ export function SnippetBlock(node, context) {
 
 	context.next({ ...context.state, parent_element: null });
 
-	const can_hoist =
-		context.path.length === 1 &&
-		context.path[0].type === 'Fragment' &&
-		can_hoist_snippet(context.state.scope, context.state.scopes);
+	const is_top_level = context.path.length === 1 && context.path[0].type === 'Fragment';
 
-	const name = node.expression.name;
+	if (is_top_level) {
+		const name = node.expression.name;
 
-	if (can_hoist) {
-		const binding = /** @type {Binding} */ (context.state.scope.get(name));
-		context.state.analysis.module.scope.declarations.set(name, binding);
-	}
+		if (context.state.analysis.instance.scope.declarations.has(name)) {
+			e.declaration_duplicate(node.expression, name);
+		}
+
+		node.metadata.can_hoist =
+			is_top_level && can_hoist_snippet(context.state.scope, context.state.scopes);
 
-	node.metadata.can_hoist = can_hoist;
+		if (node.metadata.can_hoist) {
+			const name = node.expression.name;
+			const binding = /** @type {Binding} */ (context.state.scope.get(name));
+			context.state.analysis.module.scope.declarations.set(name, binding);
+		}
+	}
 
 	const { path } = context;
 	const parent = path.at(-2);

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

@@ -10,8 +10,10 @@ import { add_state_transformers } from './shared/declarations.js';
  * @param {ComponentContext} context
  */
 export function DeclarationTag(node, context) {
-	const declaration = /** @type {Statement | undefined} */ (context.visit(node.declaration));
+	// register the transformers _before_ visiting the declaration, so that
+	// later declarators can reference earlier ones (e.g. `{let a = $state(0), b = $derived(a * 2)}`)
 	add_state_transformers(context);
+	const declaration = /** @type {Statement | undefined} */ (context.visit(node.declaration));
 
 	if (
 		node.metadata.promises_id &&

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

@@ -343,7 +343,7 @@ export class PromiseOptimiser {
 	 * @param {ExpressionMetadata} metadata
 	 */
 	check_blockers(metadata) {
-		for (const binding of metadata.dependencies) {
+		for (const binding of metadata.references) {
 			if (binding.blocker) {
 				this.#blockers.add(binding.blocker);
 			}

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

@@ -203,7 +203,9 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 	var each_array = derived_safe_equal(() => {
 		var collection = get_collection();
 
-		return is_array(collection) ? collection : collection == null ? [] : array_from(collection);
+		return /** @type {V[]} */ (
+			is_array(collection) ? collection : collection == null ? [] : array_from(collection)
+		);
 	});
 
 	if (DEV) {

package/src/internal/client/dom/elements/attributes.js

@@ -332,6 +332,15 @@ function set_attributes(
 
 	var setters = get_setters(element);
 
+	if (element.nodeName === INPUT_TAG && 'type' in next && ('value' in next || '__value' in next)) {
+		var type = next.type;
+
+		if (type !== current.type || (type === undefined && element.hasAttribute('type'))) {
+			current.type = type;
+			set_attribute(element, 'type', type, skip_warning);
+		}
+	}
+
 	// since key is captured we use const
 	for (const key in next) {
 		// let instead of var because referenced in a closure

package/src/internal/client/dom/elements/bindings/input.js

@@ -7,7 +7,6 @@ import { is } from '../../../proxy.js';
 import { queue_micro_task } from '../../task.js';
 import { hydrating } from '../../hydration.js';
 import { tick, untrack } from '../../../runtime.js';
-import { is_runes } from '../../../context.js';
 import { current_batch, previous_batch } from '../../../reactivity/batch.js';
 import { async_mode_flag } from '../../../../flags/index.js';
 

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

@@ -1,4 +1,4 @@
-/** @import { Blocker, Effect, Value } from '#client' */
+/** @import { Blocker, Effect, Source, Value } from '#client' */
 import { DESTROYED, STALE_REACTION } from '#client/constants';
 import { DEV } from 'esm-env';
 import {
@@ -38,8 +38,22 @@ export function flatten(blockers, sync, async, fn) {
 	// Filter out already-settled blockers - no need to wait for them
 	var pending = blockers.filter((b) => !b.settled);
 
+	var deriveds = sync.map(d);
+
+	if (DEV) {
+		deriveds.forEach((d, i) => {
+			// TODO this is kinda useful for debugging but a lousy implementation —
+			// maybe the compiler could pass through the template string
+			d.label = sync[i]
+				.toString()
+				.replace('() => ', '')
+				.replaceAll('$.eager(() => ', '$state.eager(')
+				.replace(/\$\.get\((.+?)\)/g, (_, id) => id);
+		});
+	}
+
 	if (async.length === 0 && pending.length === 0) {
-		fn(sync.map(d));
+		fn(deriveds);
 		return;
 	}
 
@@ -53,8 +67,10 @@ export function flatten(blockers, sync, async, fn) {
 				? Promise.all(pending.map((b) => b.promise))
 				: null;
 
-	/** @param {Value[]} values */
-	function finish(values) {
+	/**
+	 * @param {Source[]} async
+	 */
+	function finish(async) {
 		if ((parent.f & DESTROYED) !== 0) {
 			return;
 		}
@@ -62,7 +78,7 @@ export function flatten(blockers, sync, async, fn) {
 		restore();
 
 		try {
-			fn(values);
+			fn([...deriveds, ...async]);
 		} catch (error) {
 			invoke_error_boundary(error, parent);
 		}
@@ -74,17 +90,14 @@ export function flatten(blockers, sync, async, fn) {
 
 	// Fast path: blockers but no async expressions
 	if (async.length === 0) {
-		/** @type {Promise<any>} */ (blocker_promise)
-			.then(() => finish(sync.map(d)))
-			.finally(decrement_pending);
-
+		/** @type {Promise<any>} */ (blocker_promise).then(() => finish([])).finally(decrement_pending);
 		return;
 	}
 
 	// Full path: has async expressions
 	function run() {
 		Promise.all(async.map((expression) => async_derived(expression)))
-			.then((result) => finish([...sync.map(d), ...result]))
+			.then(finish)
 			.catch((error) => invoke_error_boundary(error, parent))
 			.finally(decrement_pending);
 	}

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

@@ -387,7 +387,9 @@ export function render_effect(fn, flags = 0) {
  */
 export function template_effect(fn, sync = [], async = [], blockers = []) {
 	flatten(blockers, sync, async, (values) => {
-		create_effect(RENDER_EFFECT, () => fn(...values.map(get)));
+		create_effect(RENDER_EFFECT, () => {
+			fn(...values.map(get));
+		});
 	});
 }
 
@@ -518,7 +520,7 @@ export function destroy_effect(effect, remove_dom = true) {
 		removed = true;
 	}
 
-	set_signal_status(effect, DESTROYING);
+	effect.f |= DESTROYING;
 	destroy_effect_children(effect, remove_dom && !removed);
 	remove_reactions(effect, 0);
 

package/src/reactivity/url-search-params.js

@@ -132,11 +132,12 @@ export class SvelteURLSearchParams extends URLSearchParams {
 	 * @returns {void}
 	 */
 	set(name, value) {
-		var previous = super.getAll(name).join('');
+		var previous = super.getAll(name);
 		super.set(name, value);
 		// can't use has(name, value), because for something like https://svelte.dev?foo=1&bar=2&foo=3
 		// if you set `foo` to 1, then foo=3 gets deleted whilst `has("foo", "1")` returns true
-		if (previous !== super.getAll(name).join('')) {
+		var current = super.getAll(name);
+		if (previous.length !== current.length || previous.some((value, i) => value !== current[i])) {
 			this.#update_url();
 			increment(this.#version);
 		}

package/src/version.js

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