svelte 5.55.4 → 5.55.6

package/elements.d.ts

@@ -2067,9 +2067,9 @@ export interface SvelteHTMLElements {
 	};
 	'svelte:head': { [name: string]: any };
 	'svelte:boundary': {
-		onerror?: (error: unknown, reset: () => void) => void;
-		failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
-		pending?: import('svelte').Snippet;
+		onerror?: ((error: unknown, reset: () => void) => void) | null | undefined;
+		failed?: import('svelte').Snippet<[error: unknown, reset: () => void]> | null | undefined;
+		pending?: import('svelte').Snippet | null | undefined;
 	};
 
 	[name: string]: { [name: string]: any };

package/package.json

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

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

@@ -524,6 +524,21 @@ function read_value(parser) {
 			in_url = true;
 		} else if ((char === ';' || char === '{' || char === '}') && !in_url && !quote_mark) {
 			return value.trim();
+		} else if (
+			char === '/' &&
+			!in_url &&
+			!quote_mark &&
+			parser.template[parser.index + 1] === '*'
+		) {
+			parser.index += 2;
+			while (parser.index < parser.template.length) {
+				if (parser.template[parser.index] === '*' && parser.template[parser.index + 1] === '/') {
+					parser.index += 2;
+					break;
+				}
+				parser.index++;
+			}
+			continue;
 		}
 
 		value += char;

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

@@ -8,6 +8,10 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function DebugTag(node, context) {
+	const blockers = node.identifiers
+		.map((identifier) => context.state.scope.get(identifier.name)?.blocker)
+		.filter((blocker) => blocker != null);
+
 	const object = b.object(
 		node.identifiers.map((identifier) => {
 			const visited = b.call('$.snapshot', /** @type {Expression} */ (context.visit(identifier)));
@@ -20,9 +24,11 @@ export function DebugTag(node, context) {
 		})
 	);
 
-	const call = b.call('console.log', object);
+	const args = [b.thunk(b.block([b.stmt(b.call('console.log', object)), b.debugger]))];
 
-	context.state.init.push(
-		b.stmt(b.call('$.template_effect', b.thunk(b.block([b.stmt(call), b.debugger]))))
-	);
+	if (blockers.length > 0) {
+		args.push(b.array([]), b.array([]), b.array(blockers));
+	}
+
+	context.state.init.push(b.stmt(b.call('$.template_effect', ...args)));
 }

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

@@ -9,5 +9,9 @@ import { build_inline_component } from './shared/component.js';
  * @param {ComponentContext} context
  */
 export function Component(node, context) {
-	build_inline_component(node, /** @type {Expression} */ (context.visit(b.id(node.name))), context);
+	build_inline_component(
+		node,
+		/** @type {Expression} */ (context.visit(b.member_id(node.name))),
+		context
+	);
 }

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

@@ -2,23 +2,34 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
+import { create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.DebugTag} node
  * @param {ComponentContext} context
  */
 export function DebugTag(node, context) {
+	const blockers = node.identifiers
+		.map((identifier) => context.state.scope.get(identifier.name)?.blocker)
+		.filter((blocker) => blocker != null);
+
 	context.state.template.push(
-		b.stmt(
-			b.call(
-				'console.log',
-				b.object(
-					node.identifiers.map((identifier) =>
-						b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
+		...create_child_block(
+			[
+				b.stmt(
+					b.call(
+						'console.log',
+						b.object(
+							node.identifiers.map((identifier) =>
+								b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
+							)
+						)
 					)
-				)
-			)
-		),
-		b.debugger
+				),
+				b.debugger
+			],
+			b.array(blockers),
+			false
+		)
 	);
 }

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

@@ -12,7 +12,7 @@ import {
 import * as b from '#compiler/builders';
 import { sanitize_template_string } from '../../../../../utils/sanitize_template_string.js';
 import { regex_whitespaces_strict } from '../../../../patterns.js';
-import { has_await_expression } from '../../../../../utils/ast.js';
+import { has_await_expression, save } from '../../../../../utils/ast.js';
 import { ExpressionMetadata } from '../../../../nodes.js';
 
 /** Opens an if/each block, so that we can remove nodes in the case of a mismatch */
@@ -360,7 +360,7 @@ export class PromiseOptimiser {
 
 		return b.const(
 			b.array_pattern(this.expressions.map((_, i) => b.id(`$$${i}`))),
-			b.await(b.call('Promise.all', promises))
+			save(b.call('Promise.all', promises))
 		);
 	}
 

package/src/internal/client/constants.js

@@ -48,7 +48,8 @@ export const EFFECT_OFFSCREEN = 1 << 25;
 /**
  * Tells that we marked this derived and its reactions as visited during the "mark as (maybe) dirty"-phase.
  * Will be lifted during execution of the derived and during checking its dirty state (both are necessary
- * because a derived might be checked but not executed).
+ * because a derived might be checked but not executed). This is a pure performance optimization flag and
+ * should not be used for any other purpose!
  */
 export const WAS_MARKED = 1 << 16;
 

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

@@ -20,6 +20,8 @@ export function inspect(get_value, inspector, show_stack = false) {
 	// in an error (an `$inspect(object.property)` will run before the
 	// `{#if object}...{/if}` that contains it)
 	eager_effect(() => {
+		error = UNINITIALIZED;
+
 		try {
 			var value = get_value();
 		} catch (e) {

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

@@ -1,5 +1,5 @@
 /** @import { Blocker, TemplateNode, Value } from '#client' */
-import { flatten, increment_pending } from '../../reactivity/async.js';
+import { flatten } from '../../reactivity/async.js';
 import { get } from '../../runtime.js';
 import {
 	hydrate_next,
@@ -42,8 +42,6 @@ export function async(node, blockers = [], expressions = [], fn) {
 		return;
 	}
 
-	const decrement_pending = increment_pending();
-
 	if (was_hydrating) {
 		var previous_hydrate_node = hydrate_node;
 		set_hydrate_node(end);
@@ -64,8 +62,6 @@ export function async(node, blockers = [], expressions = [], fn) {
 			if (was_hydrating) {
 				set_hydrating(false);
 			}
-
-			decrement_pending();
 		}
 	});
 }

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

@@ -35,19 +35,18 @@ import { queue_micro_task } from '../task.js';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
 import { DEV } from 'esm-env';
-import { Batch, current_batch, previous_batch, schedule_effect } from '../../reactivity/batch.js';
+import { Batch, current_batch } from '../../reactivity/batch.js';
 import { internal_set, source } from '../../reactivity/sources.js';
 import { tag } from '../../dev/tracing.js';
 import { createSubscriber } from '../../../../reactivity/create-subscriber.js';
 import { create_text } from '../operations.js';
 import { defer_effect } from '../../reactivity/utils.js';
-import { set_signal_status } from '../../reactivity/status.js';
 
 /**
  * @typedef {{
- * 	 onerror?: (error: unknown, reset: () => void) => void;
- *   failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void;
- *   pending?: (anchor: Node) => void;
+ * 	 onerror?: ((error: unknown, reset: () => void) => void) | null;
+ *   failed?: ((anchor: Node, error: () => unknown, reset: () => () => void) => void) | null;
+ *   pending?: ((anchor: Node) => void) | null;
  * }} BoundaryProps
  */
 

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

@@ -1,8 +1,8 @@
 /** @import { TemplateNode } from '#client' */
 import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
 import { create_text, get_first_child, get_next_sibling } from '../operations.js';
-import { block } from '../../reactivity/effects.js';
-import { COMMENT_NODE, EFFECT_PRESERVED, HEAD_EFFECT } from '#client/constants';
+import { block, branch } from '../../reactivity/effects.js';
+import { COMMENT_NODE, HEAD_EFFECT } from '#client/constants';
 
 /**
  * @param {string} hash
@@ -49,9 +49,10 @@ export function head(hash, render_fn) {
 	}
 
 	try {
-		// normally a branch is the child of a block and would have the EFFECT_PRESERVED flag,
-		// but since head blocks don't necessarily only have direct branch children we add it on the block itself
-		block(() => render_fn(anchor), HEAD_EFFECT | EFFECT_PRESERVED);
+		block(() => {
+			var e = branch(() => render_fn(anchor));
+			e.f |= HEAD_EFFECT;
+		});
 	} finally {
 		if (was_hydrating) {
 			set_hydrating(true);

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

@@ -584,7 +584,7 @@ function get_setters(element) {
 	var element_proto = Element.prototype;
 
 	// Stop at Element, from there on there's only unnecessary setters we're not interested in
-	// Do not use contructor.name here as that's unreliable in some browser environments
+	// Do not use constructor.name here as that's unreliable in some browser environments
 	while (element_proto !== proto) {
 		descriptors = get_descriptors(proto);
 

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

@@ -40,7 +40,7 @@ export function bind_this(element_or_component = {}, update, get_value, get_part
 			parts = get_parts?.() || [];
 
 			untrack(() => {
-				if (element_or_component !== get_value(...parts)) {
+				if (!is_bound_this(get_value(...parts), element_or_component)) {
 					update(element_or_component, ...parts);
 					// If this is an effect rerun (cause: each block context changes), then nullify the binding at
 					// the previous position if it isn't already taken over by a different effect.

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

@@ -237,9 +237,9 @@ export function handle_event_propagation(event) {
 	});
 
 	// This started because of Chromium issue https://chromestatus.com/feature/5128696823545856,
-	// where removal or moving of of the DOM can cause sync `blur` events to fire, which can cause logic
+	// where removal or moving of the DOM can cause sync `blur` events to fire, which can cause logic
 	// to run inside the current `active_reaction`, which isn't what we want at all. However, on reflection,
-	// it's probably best that all event handled by Svelte have this behaviour, as we don't really want
+	// it's probably best that all events handled by Svelte have this behaviour, as we don't really want
 	// an event handler to run in the context of another reaction or effect.
 	var previous_reaction = active_reaction;
 	var previous_effect = active_effect;

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

@@ -115,10 +115,17 @@ export function animation(element, get_fn, get_params) {
 			) {
 				const options = get_fn()(this.element, { from, to }, get_params?.());
 
-				animation = animate(this.element, options, undefined, 1, () => {
-					animation?.abort();
-					animation = undefined;
-				});
+				animation = animate(
+					this.element,
+					options,
+					undefined,
+					1,
+					() => {},
+					() => {
+						animation?.abort();
+						animation = undefined;
+					}
+				);
 			}
 		},
 		fix() {
@@ -239,15 +246,24 @@ export function transition(flags, element, get_fn, get_params) {
 				intro?.abort();
 			}
 
-			intro = animate(element, get_options(), outro, 1, () => {
-				dispatch_event(element, 'introend');
-
-				// Ensure we cancel the animation to prevent leaking
-				intro?.abort();
-				intro = current_options = undefined;
-
-				element.style.overflow = overflow;
-			});
+			intro = animate(
+				element,
+				get_options(),
+				outro,
+				1,
+				() => {
+					dispatch_event(element, 'introstart');
+				},
+				() => {
+					dispatch_event(element, 'introend');
+
+					// Ensure we cancel the animation to prevent leaking
+					intro?.abort();
+					intro = current_options = undefined;
+
+					element.style.overflow = overflow;
+				}
+			);
 		},
 		out(fn) {
 			if (!is_outro) {
@@ -258,10 +274,19 @@ export function transition(flags, element, get_fn, get_params) {
 
 			element.inert = true;
 
-			outro = animate(element, get_options(), intro, 0, () => {
-				dispatch_event(element, 'outroend');
-				fn?.();
-			});
+			outro = animate(
+				element,
+				get_options(),
+				intro,
+				0,
+				() => {
+					dispatch_event(element, 'outrostart');
+				},
+				() => {
+					dispatch_event(element, 'outroend');
+					fn?.();
+				}
+			);
 		},
 		stop: () => {
 			intro?.abort();
@@ -306,10 +331,11 @@ export function transition(flags, element, get_fn, get_params) {
  * @param {AnimationConfig | ((opts: { direction: 'in' | 'out' }) => AnimationConfig)} options
  * @param {Animation | undefined} counterpart The corresponding intro/outro to this outro/intro
  * @param {number} t2 The target `t` value — `1` for intro, `0` for outro
+ * @param {(() => void)} on_begin Called just before beginning the animation
  * @param {(() => void)} on_finish Called after successfully completing the animation
  * @returns {Animation}
  */
-function animate(element, options, counterpart, t2, on_finish) {
+function animate(element, options, counterpart, t2, on_begin, on_finish) {
 	var is_intro = t2 === 1;
 
 	if (is_function(options)) {
@@ -323,7 +349,7 @@ function animate(element, options, counterpart, t2, on_finish) {
 		queue_micro_task(() => {
 			if (aborted) return;
 			var o = options({ direction: is_intro ? 'in' : 'out' });
-			a = animate(element, o, counterpart, t2, on_finish);
+			a = animate(element, o, counterpart, t2, on_begin, on_finish);
 		});
 
 		// ...but we want to do so without using `async`/`await` everywhere, so
@@ -342,7 +368,7 @@ function animate(element, options, counterpart, t2, on_finish) {
 	counterpart?.deactivate();
 
 	if (!options?.duration && !options?.delay) {
-		dispatch_event(element, is_intro ? 'introstart' : 'outrostart');
+		on_begin();
 		on_finish();
 
 		return {
@@ -382,7 +408,7 @@ function animate(element, options, counterpart, t2, on_finish) {
 		// remove dummy animation from the stack to prevent conflict with main animation
 		animation.cancel();
 
-		dispatch_event(element, is_intro ? 'introstart' : 'outrostart');
+		on_begin();
 
 		// for bidirectional transitions, we start from the current position,
 		// rather than doing a full intro/outro

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

@@ -55,33 +55,38 @@ export function flatten(blockers, sync, async, fn) {
 
 	/** @param {Value[]} values */
 	function finish(values) {
+		if ((parent.f & DESTROYED) !== 0) {
+			return;
+		}
+
 		restore();
 
 		try {
 			fn(values);
 		} catch (error) {
-			if ((parent.f & DESTROYED) === 0) {
-				invoke_error_boundary(error, parent);
-			}
+			invoke_error_boundary(error, parent);
 		}
 
 		unset_context();
 	}
 
+	var decrement_pending = increment_pending();
+
 	// Fast path: blockers but no async expressions
 	if (async.length === 0) {
-		/** @type {Promise<any>} */ (blocker_promise).then(() => finish(sync.map(d)));
+		/** @type {Promise<any>} */ (blocker_promise)
+			.then(() => finish(sync.map(d)))
+			.finally(decrement_pending);
+
 		return;
 	}
 
-	var decrement_pending = increment_pending();
-
 	// Full path: has async expressions
 	function run() {
 		Promise.all(async.map((expression) => async_derived(expression)))
 			.then((result) => finish([...sync.map(d), ...result]))
 			.catch((error) => invoke_error_boundary(error, parent))
-			.finally(() => decrement_pending());
+			.finally(decrement_pending);
 	}
 
 	if (blocker_promise) {
@@ -213,22 +218,35 @@ export async function* for_await_track_reactivity_loss(iterable) {
 		throw new TypeError('value is not async iterable');
 	}
 
-	/** Whether the completion of the iterator was "normal", meaning it wasn't ended via `break` or a similar method */
-	let normal_completion = false;
+	// eslint-disable-next-line no-useless-assignment
+	let invoke_return = true;
+
 	try {
 		while (true) {
 			const { done, value } = (await track_reactivity_loss(iterator.next()))();
 			if (done) {
-				normal_completion = true;
+				invoke_return = false;
 				break;
 			}
 			var prev = reactivity_loss_tracker;
-			yield value;
+			try {
+				yield value;
+			} catch (e) {
+				set_reactivity_loss_tracker(prev);
+				// If the yield throws, we need to call `return` but not return its value, instead rethrow
+				if (iterator.return !== undefined) {
+					(await track_reactivity_loss(iterator.return()))();
+				}
+				throw e;
+			}
 			set_reactivity_loss_tracker(prev);
 		}
+	} catch (error) {
+		invoke_return = false;
+		throw error;
 	} finally {
-		// If the iterator had an abrupt completion and `return` is defined on the iterator, call it and return the value
-		if (!normal_completion && iterator.return !== undefined) {
+		// If the iterator had an abrupt completion (break) and `return` is defined on the iterator, call it and return the value
+		if (invoke_return && iterator.return !== undefined) {
 			// eslint-disable-next-line no-unsafe-finally
 			return /** @type {TReturn} */ ((await track_reactivity_loss(iterator.return()))().value);
 		}
@@ -310,7 +328,7 @@ export function run(thunks) {
 		// wait one more tick, so that template effects are
 		// guaranteed to run before `$effect(...)`
 		.then(() => Promise.resolve())
-		.finally(() => decrement_pending());
+		.finally(decrement_pending);
 
 	return blockers;
 }
@@ -334,8 +352,8 @@ export function increment_pending() {
 	boundary.update_pending_count(1, batch);
 	batch.increment(blocking, effect);
 
-	return (skip = false) => {
+	return () => {
 		boundary.update_pending_count(-1, batch);
-		batch.decrement(blocking, effect, skip);
+		batch.decrement(blocking, effect);
 	};
 }