svelte 5.55.5 → 5.55.7

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.5",
+  "version": "5.55.7",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -164,7 +164,7 @@
     "aria-query": "5.3.1",
     "axobject-query": "^4.1.0",
     "clsx": "^2.1.1",
-    "devalue": "^5.6.4",
+    "devalue": "^5.8.1",
     "esm-env": "^1.2.1",
     "esrap": "^2.2.4",
     "is-reference": "^3.0.3",

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

@@ -63,6 +63,11 @@ 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');
+export const ATTRIBUTES_CACHE = Symbol('attributes');
+export const CLASS_CACHE = Symbol('class');
+export const STYLE_CACHE = Symbol('style');
+export const TEXT_CACHE = Symbol('text');
+export const FORM_RESET_HANDLER = Symbol('form reset');
 /** 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');
 

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

@@ -5,7 +5,12 @@ import { get_descriptors, get_prototype_of } from '../../../shared/utils.js';
 import { create_event, delegate, delegated, event, event_symbol } from './events.js';
 import { add_form_reset_listener, autofocus } from './misc.js';
 import * as w from '../../warnings.js';
-import { IS_XHTML, LOADING_ATTR_SYMBOL } from '#client/constants';
+import {
+	ATTRIBUTES_CACHE,
+	FORM_RESET_HANDLER,
+	IS_XHTML,
+	LOADING_ATTR_SYMBOL
+} from '#client/constants';
 import { queue_micro_task } from '../task.js';
 import { is_capture_event, can_delegate_event, normalize_attribute } from '../../../../utils.js';
 import {
@@ -69,8 +74,7 @@ export function remove_input_defaults(input) {
 		}
 	};
 
-	// @ts-expect-error
-	input.__on_r = remove_defaults;
+	/** @type {any} */ (input)[FORM_RESET_HANDLER] = remove_defaults;
 	queue_micro_task(remove_defaults);
 	add_form_reset_listener();
 }
@@ -561,8 +565,7 @@ export function attribute_effect(
  */
 function get_attributes(element) {
 	return /** @type {Record<string | symbol, unknown>} **/ (
-		// @ts-expect-error
-		element.__attributes ??= {
+		/** @type {any} */ (element)[ATTRIBUTES_CACHE] ??= {
 			[IS_CUSTOM_ELEMENT]: element.nodeName.includes('-'),
 			[IS_HTML]: element.namespaceURI === NAMESPACE_HTML
 		}
@@ -583,13 +586,19 @@ function get_setters(element) {
 	var proto = element; // In the case of custom elements there might be setters on the instance
 	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
+	// Stop at Element, from there on there's only unnecessary (and dangerous, like innerHTML) setters we're not interested in
+	// Do not use constructor.name here as that's unreliable in some browser environments
 	while (element_proto !== proto) {
 		descriptors = get_descriptors(proto);
 
 		for (var key in descriptors) {
-			if (descriptors[key].set) {
+			if (
+				descriptors[key].set &&
+				// better safe than sorry, we don't want spread attributes to mess with HTML content
+				key !== 'innerHTML' &&
+				key !== 'textContent' &&
+				key !== 'innerText'
+			) {
 				setters.push(key);
 			}
 		}

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

@@ -5,6 +5,7 @@ import {
 	set_active_effect,
 	set_active_reaction
 } from '../../../runtime.js';
+import { FORM_RESET_HANDLER } from '../../../constants.js';
 import { add_form_reset_listener } from '../misc.js';
 
 /**
@@ -58,18 +59,15 @@ export function without_reactive_context(fn) {
  */
 export function listen_to_event_and_reset_event(element, event, handler, on_reset = handler) {
 	element.addEventListener(event, () => without_reactive_context(handler));
-	// @ts-expect-error
-	const prev = element.__on_r;
+	const prev = /** @type {any} */ (element)[FORM_RESET_HANDLER];
 	if (prev) {
 		// special case for checkbox that can have multiple binds (group & checked)
-		// @ts-expect-error
-		element.__on_r = () => {
+		/** @type {any} */ (element)[FORM_RESET_HANDLER] = () => {
 			prev();
 			on_reset(true);
 		};
 	} else {
-		// @ts-expect-error
-		element.__on_r = () => on_reset(true);
+		/** @type {any} */ (element)[FORM_RESET_HANDLER] = () => on_reset(true);
 	}
 
 	add_form_reset_listener();

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/class.js

@@ -1,4 +1,5 @@
 import { to_class } from '../../../shared/attributes.js';
+import { CLASS_CACHE } from '../../constants.js';
 import { hydrating } from '../hydration.js';
 
 /**
@@ -11,8 +12,7 @@ import { hydrating } from '../hydration.js';
  * @returns {Record<string, boolean> | undefined}
  */
 export function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
-	// @ts-expect-error need to add __className to patched prototype
-	var prev = dom.__className;
+	var prev = /** @type {any} */ (dom)[CLASS_CACHE];
 
 	if (
 		hydrating ||
@@ -35,8 +35,7 @@ export function set_class(dom, is_html, value, hash, prev_classes, next_classes)
 			}
 		}
 
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = value;
+		/** @type {any} */ (dom)[CLASS_CACHE] = value;
 	} else if (next_classes && prev_classes !== next_classes) {
 		for (var key in next_classes) {
 			var is_present = !!next_classes[key];

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/misc.js

@@ -1,6 +1,7 @@
 import { hydrating } from '../hydration.js';
 import { clear_text_content, get_first_child } from '../operations.js';
 import { queue_micro_task } from '../task.js';
+import { FORM_RESET_HANDLER } from '../../constants.js';
 
 /**
  * @param {HTMLElement} dom
@@ -45,8 +46,7 @@ export function add_form_reset_listener() {
 				Promise.resolve().then(() => {
 					if (!evt.defaultPrevented) {
 						for (const e of /**@type {HTMLFormElement} */ (evt.target).elements) {
-							// @ts-expect-error
-							e.__on_r?.();
+							/** @type {any} */ (e)[FORM_RESET_HANDLER]?.();
 						}
 					}
 				});

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

@@ -1,4 +1,5 @@
 import { to_style } from '../../../shared/attributes.js';
+import { STYLE_CACHE } from '../../constants.js';
 import { hydrating } from '../hydration.js';
 
 /**
@@ -28,8 +29,7 @@ function update_styles(dom, prev = {}, next, priority) {
  * @param {Record<string, any> | [Record<string, any>, Record<string, any>]} [next_styles]
  */
 export function set_style(dom, value, prev_styles, next_styles) {
-	// @ts-expect-error
-	var prev = dom.__style;
+	var prev = /** @type {any} */ (dom)[STYLE_CACHE];
 
 	if (hydrating || prev !== value) {
 		var next_style_attr = to_style(value, next_styles);
@@ -42,8 +42,7 @@ export function set_style(dom, value, prev_styles, next_styles) {
 			}
 		}
 
-		// @ts-expect-error
-		dom.__style = value;
+		/** @type {any} */ (dom)[STYLE_CACHE] = value;
 	} else if (next_styles) {
 		if (Array.isArray(next_styles)) {
 			update_styles(dom, prev_styles?.[0], next_styles[0]);

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

@@ -5,7 +5,14 @@ import { init_array_prototype_warnings } from '../dev/equality.js';
 import { get_descriptor, is_extensible } from '../../shared/utils.js';
 import { active_effect } from '../runtime.js';
 import { async_mode_flag } from '../../flags/index.js';
-import { TEXT_NODE, REACTION_RAN } from '#client/constants';
+import {
+	ATTRIBUTES_CACHE,
+	CLASS_CACHE,
+	REACTION_RAN,
+	STYLE_CACHE,
+	TEXT_CACHE,
+	TEXT_NODE
+} from '#client/constants';
 import { eager_block_effects } from '../reactivity/batch.js';
 import { NAMESPACE_HTML } from '../../../constants.js';
 
@@ -48,21 +55,15 @@ export function init_operations() {
 
 	if (is_extensible(element_prototype)) {
 		// the following assignments improve perf of lookups on DOM nodes
-		// @ts-expect-error
-		element_prototype.__click = undefined;
-		// @ts-expect-error
-		element_prototype.__className = undefined;
-		// @ts-expect-error
-		element_prototype.__attributes = null;
-		// @ts-expect-error
-		element_prototype.__style = undefined;
+		/** @type {any} */ (element_prototype)[CLASS_CACHE] = undefined;
+		/** @type {any} */ (element_prototype)[ATTRIBUTES_CACHE] = null;
+		/** @type {any} */ (element_prototype)[STYLE_CACHE] = undefined;
 		// @ts-expect-error
 		element_prototype.__e = undefined;
 	}
 
 	if (is_extensible(text_prototype)) {
-		// @ts-expect-error
-		text_prototype.__t = undefined;
+		/** @type {any} */ (text_prototype)[TEXT_CACHE] = undefined;
 	}
 
 	if (DEV) {

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);
 	};
 }