svelte 5.57.1 → 5.57.2

package/package.json

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

package/src/compiler/errors.js

@@ -1213,6 +1213,16 @@ export function let_directive_invalid_placement(node) {
 	e(node, 'let_directive_invalid_placement', `\`let:\` directive at invalid position\nhttps://svelte.dev/e/let_directive_invalid_placement`);
 }
 
+/**
+ * Cannot use `let:` directives on a component that has a `children` snippet. Use snippet parameters instead (e.g. `{#snippet children({ %name% })}`)
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function let_directive_snippet_conflict(node, name) {
+	e(node, 'let_directive_snippet_conflict', `Cannot use \`let:\` directives on a component that has a \`children\` snippet. Use snippet parameters instead (e.g. \`{#snippet children({ ${name} })}\`)\nhttps://svelte.dev/e/let_directive_snippet_conflict`);
+}
+
 /**
  * Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax
  * @param {null | number | NodeLike} node

package/src/compiler/migrate/index.js

@@ -910,8 +910,10 @@ const instance_script = {
 				start = /** @type {number} */ (parent.start);
 				end = /** @type {number} */ (parent.end);
 			}
-			while (state.str.original[start] !== '\n') start--;
-			while (state.str.original[end] !== '\n') end++;
+			// remove the declaration's whole line, or what there is of it inside the script
+			const script = /** @type {{ start: number; end: number }} */ (state.analysis.instance.ast);
+			while (start > script.start && state.str.original[start] !== '\n') start--;
+			while (end < script.end && state.str.original[end] !== '\n') end++;
 			state.str.update(start, end, '');
 		}
 	},
@@ -987,8 +989,11 @@ const instance_script = {
 					return;
 				}
 
+				let declared = 0;
 				for (const binding of bindings) {
-					if (binding.reassigned && (ids.includes(binding.node) || expression_ids.length === 0)) {
+					// a binding this statement declares needs its `let` whether or not it is reassigned
+					if (ids.includes(binding.node) || (binding.reassigned && expression_ids.length === 0)) {
+						declared++;
 						check_rune_binding('state');
 						const init =
 							binding.kind === 'state'
@@ -1004,7 +1009,13 @@ const instance_script = {
 					}
 				}
 
-				if (expression_ids.length === 0 && bindings.every((b) => b.kind !== 'store_sub')) {
+				// the statement goes only once every target has a declaration standing in for it
+				if (
+					expression_ids.length === 0 &&
+					bindings.length > 0 &&
+					declared === bindings.length &&
+					bindings.every((b) => b.kind !== 'store_sub')
+				) {
 					state.str.remove(/** @type {number} */ (node.start), /** @type {number} */ (node.end));
 					return;
 				}

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

@@ -532,6 +532,7 @@ function next(parser) {
 	if (block.type === 'IfBlock') {
 		if (!parser.eat('else')) e.expected_token(start, '{:else} or {:else if}');
 		if (parser.eat('if')) e.block_invalid_elseif(start);
+		if (block.alternate) e.block_duplicate_clause(start, '{:else}');
 
 		parser.allow_whitespace();
 
@@ -580,6 +581,7 @@ function next(parser) {
 
 	if (block.type === 'EachBlock') {
 		if (!parser.eat('else')) e.expected_token(start, '{:else}');
+		if (block.fallback) e.block_duplicate_clause(start, '{:else}');
 
 		parser.allow_whitespace();
 		parser.eat('}', true);

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

@@ -1,6 +1,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import { determine_slot } from '../../../utils/slot.js';
 
 /**
  * @param {AST.LetDirective} node
@@ -21,4 +22,25 @@ export function LetDirective(node, context) {
 	) {
 		e.let_directive_invalid_placement(node);
 	}
+
+	// an explicit `children` snippet replaces the default slot content, so the `let:`
+	// directive would never be provided. if the component has a `slot` attribute, the
+	// directive applies to the component itself instead, which is fine
+	if (
+		(parent.type === 'Component' ||
+			parent.type === 'SvelteComponent' ||
+			parent.type === 'SvelteSelf') &&
+		!determine_slot(parent) &&
+		parent.fragment.nodes.some(
+			(child) => child.type === 'SnippetBlock' && child.expression.name === 'children'
+		)
+	) {
+		const { expression } = node;
+		const pattern =
+			expression === null || (expression.type === 'Identifier' && expression.name === node.name)
+				? node.name
+				: `${node.name}: ${context.state.analysis.source.slice(expression.start, expression.end)}`;
+
+		e.let_directive_snippet_conflict(node, pattern);
+	}
 }

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

@@ -173,8 +173,8 @@ export function check_element(node, context) {
 						current_role === get_implicit_role(node.name, attribute_map) &&
 						// <ul role="list"> is ok because CSS list-style:none removes the semantics and this is a way to bring them back
 						!['ul', 'ol', 'li', 'menu'].includes(node.name) &&
-						// <a role="link" /> is ok because without href the a tag doesn't have a role of link
-						!(node.name === 'a' && !attribute_map.has('href'))
+						// <a role="link" /> and <area role="link" /> are ok because without href they don't have a role of link
+						!((node.name === 'a' || node.name === 'area') && !attribute_map.has('href'))
 					) {
 						w.a11y_no_redundant_roles(attribute, current_role);
 					}

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

@@ -18,7 +18,8 @@ export function AwaitExpression(node, context) {
 	// in dev, note which values are read inside a reactive expression,
 	// but don't track them
 	else if (dev && !is_ignored(node, 'await_reactivity_loss')) {
-		return b.call(b.await(b.call('$.track_reactivity_loss', argument)));
+		// don't use b.await here, this way we preserve location information
+		return b.call({ ...node, argument: b.call('$.track_reactivity_loss', argument) });
 	}
 
 	return argument === node.argument ? node : { ...node, argument };

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

@@ -119,8 +119,9 @@ export function build_event_handler(node, metadata, context) {
 
 		// local variable can be assigned directly
 		// except in dev mode where when need $.apply()
-		// in order to handle warnings.
-		if (!dev && binding?.declaration_kind !== 'import') {
+		// in order to handle warnings, or when it is
+		// assigned after a top-level `await`
+		if (!dev && binding?.declaration_kind !== 'import' && !binding?.blocker) {
 			return handler;
 		}
 	}

package/src/compiler/phases/scope.js

@@ -1343,6 +1343,14 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 			}
 
 			context.next({ scope: child_scope });
+
+			// the parameters and what the body declares end up in the same function
+			const body_scope = /** @type {Scope} */ (scopes.get(node.body));
+			for (const [name, binding] of body_scope.declarations) {
+				if (child_scope.declarations.has(name)) {
+					e.declaration_duplicate(binding.node, name);
+				}
+			}
 		},
 
 		Fragment: (node, context) => {

package/src/compiler/print/index.js

@@ -754,7 +754,9 @@ const svelte_visitors = (comments, state) => ({
 		if (node.pending) {
 			context.write('}');
 			block(context, node.pending, state.preserve_whitespace > 0);
-			context.write('{:');
+			if (node.then || node.catch) {
+				context.write('{:');
+			}
 		} else {
 			context.write(' ');
 		}

package/src/index-client.js

@@ -17,7 +17,7 @@ if (DEV) {
 		if (!(rune in globalThis)) {
 			// TODO if people start adjusting the "this can contain runes" config through v-p-s more, adjust this message
 			/** @type {any} */
-			let value; // let's hope noone modifies this global, but belts and braces
+			let value; // let's hope no one modifies this global, but belts and braces
 			Object.defineProperty(globalThis, rune, {
 				configurable: true,
 				// eslint-disable-next-line getter-return

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

@@ -131,8 +131,10 @@ export function trace(label, fn) {
 }
 
 /**
- * @param {Value} source
+ * @template {Value} T
+ * @param {T} source
  * @param {string} label
+ * @returns {T}
  */
 export function tag(source, label) {
 	source.label = label;

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

@@ -1,6 +1,16 @@
 /** @import { Effect, Source, TemplateNode, } from '#client' */
-import { BOUNDARY_EFFECT, EFFECT_PRESERVED, EFFECT_TRANSPARENT } from '#client/constants';
-import { HYDRATION_START_ELSE, HYDRATION_START_FAILED } from '../../../../constants.js';
+import {
+	BOUNDARY_EFFECT,
+	DESTROYED,
+	DESTROYING,
+	EFFECT_PRESERVED,
+	EFFECT_TRANSPARENT
+} from '#client/constants';
+import {
+	HYDRATION_ERROR,
+	HYDRATION_START_ELSE,
+	HYDRATION_START_FAILED
+} from '../../../../constants.js';
 import { component_context, set_component_context } from '../../context.js';
 import { invoke_error_boundary } from '../../error-handling.js';
 import {
@@ -22,6 +32,7 @@ import {
 	hydrate_node,
 	hydrating,
 	next,
+	read_hydration_instruction,
 	skip_nodes,
 	set_hydrate_node
 } from '../hydration.js';
@@ -154,16 +165,18 @@ export class Boundary {
 
 		this.#effect = block(() => {
 			if (hydrating) {
-				const comment = /** @type {Comment} */ (this.#hydrate_open);
+				const comment_data = read_hydration_instruction(
+					/** @type {TemplateNode} */ (this.#hydrate_open)
+				);
 				hydrate_next();
 
-				const server_rendered_pending = comment.data === HYDRATION_START_ELSE;
-				const server_rendered_failed = comment.data.startsWith(HYDRATION_START_FAILED);
+				const server_rendered_pending = comment_data === HYDRATION_START_ELSE;
+				const server_rendered_failed = comment_data.startsWith(HYDRATION_START_FAILED);
 
 				if (server_rendered_failed) {
 					// Server rendered the failed snippet - hydrate it.
 					// The serialized error is embedded in the comment: <!--[?<json>-->
-					const serialized_error = JSON.parse(comment.data.slice(HYDRATION_START_FAILED.length));
+					const serialized_error = JSON.parse(comment_data.slice(HYDRATION_START_FAILED.length));
 					this.#hydrate_failed_content(serialized_error);
 				} else if (server_rendered_pending) {
 					this.#hydrate_pending_content();
@@ -220,6 +233,8 @@ export class Boundary {
 		var calling_on_error = false;
 
 		const reset = () => {
+			if (this.#is_destroyed()) return;
+
 			if (did_reset) {
 				w.svelte_boundary_reset_noop();
 				return;
@@ -243,6 +258,8 @@ export class Boundary {
 		};
 
 		const invoke_onerror = () => {
+			if (this.#is_destroyed()) return;
+
 			try {
 				calling_on_error = true;
 				this.#props.onerror?.(error, reset);
@@ -255,6 +272,10 @@ export class Boundary {
 		return { reset, invoke_onerror };
 	}
 
+	#is_destroyed() {
+		return (this.#effect.f & (DESTROYED | DESTROYING)) !== 0;
+	}
+
 	#hydrate_pending_content() {
 		const pending = this.#props.pending;
 		if (!pending) return;
@@ -263,6 +284,8 @@ export class Boundary {
 		this.#pending_effect = branch(() => pending(this.#anchor));
 
 		queue_micro_task(() => {
+			if (this.#is_destroyed()) return;
+
 			var fragment = (this.#offscreen_fragment = document.createDocumentFragment());
 			var anchor = create_text();
 			var handled = false;
@@ -445,6 +468,10 @@ export class Boundary {
 
 	/** @param {unknown} error */
 	error(error) {
+		if (error === HYDRATION_ERROR) {
+			throw error;
+		}
+
 		// If we have nothing to capture the error, or if we hit an error while
 		// rendering the fallback, re-throw for another boundary to handle
 		if (!this.#props.onerror && !this.#props.failed) {
@@ -457,7 +484,7 @@ export class Boundary {
 			if (this.#failed_effect) current_batch.skip_effect(this.#failed_effect);
 
 			current_batch.oncommit(() => {
-				this.#handle_error(error);
+				if (!this.#is_destroyed()) this.#handle_error(error);
 			});
 		} else {
 			this.#handle_error(error);
@@ -493,11 +520,13 @@ export class Boundary {
 
 		/** @param {unknown} transformed_error */
 		const handle_error_result = (transformed_error) => {
+			if (this.#is_destroyed()) return;
+
 			const { reset, invoke_onerror } = this.#create_reset(transformed_error);
 
 			invoke_onerror();
 
-			if (failed) {
+			if (failed && !this.#is_destroyed()) {
 				this.#failed_effect = this.#run(() => {
 					try {
 						return branch(() => {
@@ -523,6 +552,8 @@ export class Boundary {
 		};
 
 		queue_micro_task(() => {
+			if (this.#is_destroyed()) return;
+
 			// Run the error through the API-level transformError transform (e.g. SvelteKit's handleError)
 			/** @type {unknown} */
 			var result;

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

@@ -1,4 +1,4 @@
-/** @import { EachItem, EachOutroGroup, EachState, Effect, EffectNodes, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
+/** @import { EachItem, EachOutroGroup, EachState, Effect, EffectNodes, MaybeSource, TemplateNode, TransitionManager } from '#client' */
 /** @import { Batch } from '../../reactivity/batch.js'; */
 import {
 	EACH_INDEX_REACTIVE,
@@ -216,9 +216,6 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		tag(each_array, '{#each ...}');
 	}
 
-	/** @type {V[]} */
-	var array;
-
 	/** @type {Map<Batch, Set<any>>} */
 	var pending = new Map();
 
@@ -234,6 +231,11 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 
 		state.pending.delete(batch);
 
+		// The effect doesn't necessarily re-run in a batch right before that batch commits
+		// (its view of the collection may not have changed), so we read the collection
+		// as the committing batch sees it rather than using the most recent block run's result
+		var array = get(each_array);
+
 		state.fallback = fallback;
 		reconcile(state, array, anchor, flags, get_key);
 
@@ -264,7 +266,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 	}
 
 	var effect = block(() => {
-		array = /** @type {V[]} */ (get(each_array));
+		var array = /** @type {V[]} */ (get(each_array));
 		var length = array.length;
 
 		/** `true` if there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
@@ -664,7 +666,7 @@ function reconcile(state, array, anchor, flags, get_key) {
  * @param {V} value
  * @param {unknown} key
  * @param {number} index
- * @param {(anchor: Node, item: V | Source<V>, index: number | Value<number>, collection: () => V[]) => void} render_fn
+ * @param {(anchor: Node, item: MaybeSource<V>, index: MaybeSource<number>, collection: () => V[]) => void} render_fn
  * @param {number} flags
  * @param {() => V[]} get_collection
  * @returns {EachItem}

package/src/internal/client/dom/blocks/svelte-element.js

@@ -71,6 +71,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 
 		branches.ensure(next_tag, (anchor) => {
 			if (next_tag) {
+				var is_hydrating = hydrating;
 				element = hydrating ? /** @type {Element} */ (element) : create_element(next_tag, ns);
 
 				if (DEV && location) {
@@ -123,7 +124,8 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				// we do this after calling `render_fn` so that child effects don't override `nodes.end`
 				/** @type {Effect & { nodes: EffectNodes }} */ (active_effect).nodes.end = element;
 
-				anchor.before(element);
+				// we only move the node if we are not hydrating since a claimed element is already in place
+				if (!is_hydrating) anchor.before(element);
 			}
 
 			if (hydrating) {

package/src/internal/client/dom/css.js

@@ -12,7 +12,7 @@ export function append_styles(anchor, css) {
 	// Use an effect to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
 	effect(() => {
 		// Bit of a hack: branches.js/each.js use offscreen fragments with temporary text nodes that will
-		// never be connected to the real dom. Therfore walk up to the branch that has created the component
+		// never be connected to the real dom. Therefore walk up to the branch that has created the component
 		// whose styles we want to append, and check its node instead. It will be connected by the time we get here.
 		anchor = active_effect?.parent?.nodes?.start ?? anchor;
 		var root = anchor.getRootNode();