svelte 5.57.0 → 5.57.2

package/src/compiler/state.js

@@ -33,10 +33,14 @@ export let component_name = '<unknown>';
 export let source;
 
 /**
- * The source code split into lines (set by `set_source`)
- * @type {string[]}
+ * The source code split into lines, initialized when a diagnostic needs a code frame
+ * @type {string[] | undefined}
  */
-export let source_lines = [];
+let source_lines;
+
+export function get_source_lines() {
+	return (source_lines ??= source.split('\n'));
+}
 
 /**
  * True if compiling with `dev: true`
@@ -52,7 +56,7 @@ export let locator;
 /** @param {string} value */
 export function set_source(value) {
 	source = value;
-	source_lines = source.split('\n');
+	source_lines = undefined;
 
 	const l = getLocator(source, { offsetLine: 1 });
 
@@ -141,7 +145,7 @@ export function reset(state) {
 	runes = false;
 	component_name = UNKNOWN_FILENAME;
 	source = '';
-	source_lines = [];
+	source_lines = undefined;
 	filename = (state.filename ?? UNKNOWN_FILENAME).replace(/\\/g, '/');
 	warning_filter = state.warning ?? (() => true);
 	warnings = [];

package/src/compiler/utils/ast.js

@@ -286,7 +286,7 @@ function _extract_paths(paths, inserts, param, expression, update_expression, ha
 					const props = [];
 
 					for (const p of param.properties) {
-						if (p.type === 'Property' && p.key.type !== 'PrivateIdentifier') {
+						if (p.type === 'Property') {
 							if (p.key.type === 'Identifier' && !p.computed) {
 								props.push(b.literal(p.key.name));
 							} else if (p.key.type === 'Literal') {
@@ -548,10 +548,7 @@ export function is_expression_async(expression) {
 				if (property.type === 'SpreadElement') {
 					return is_expression_async(property.argument);
 				} else if (property.type === 'Property') {
-					return (
-						(property.key.type !== 'PrivateIdentifier' && is_expression_async(property.key)) ||
-						is_expression_async(property.value)
-					);
+					return is_expression_async(property.key) || is_expression_async(property.value);
 				}
 			});
 		}

package/src/compiler/utils/compile_diagnostic.js

@@ -15,7 +15,7 @@ function tabs_to_spaces(str) {
  * @param {number} column
  */
 function get_code_frame(line, column) {
-	const lines = state.source_lines;
+	const lines = state.get_source_lines();
 	const frame_start = Math.max(0, line - 2);
 	const frame_end = Math.min(line + 3, lines.length);
 	const digits = String(frame_end + 1).length;

package/src/compiler/utils/extract_svelte_ignore.js

@@ -1,5 +1,5 @@
 import { IGNORABLE_RUNTIME_WARNINGS } from '../../constants.js';
-import fuzzymatch from '../phases/1-parse/utils/fuzzymatch.js';
+import fuzzymatch from './fuzzymatch.js';
 import * as w from '../warnings.js';
 
 const regex_svelte_ignore = /^\s*svelte-ignore\s/;

package/src/compiler/utils/mapped_code.js

@@ -1,10 +1,10 @@
 /** @import { ValidatedCompileOptions } from '#compiler' */
+
 /** @import { Processed } from '../preprocess/public.js' */
 /** @import { SourceMap } from 'magic-string' */
 /** @import { Source } from '../preprocess/private.js' */
 /** @import { DecodedSourceMap, SourceMapSegment, RawSourceMap } from '@jridgewell/remapping' */
 import remapping from '@jridgewell/remapping';
-import { push_array } from './push_array.js';
 
 /**
  * @param {string} s
@@ -12,6 +12,18 @@ import { push_array } from './push_array.js';
 function last_line_length(s) {
 	return s.length - s.lastIndexOf('\n') - 1;
 }
+
+/**
+ * `array.push(...items)` overflows the stack for large `items`.
+ * @template T
+ * @param {T[]} array
+ * @param {T[]} items
+ */
+function push_array(array, items) {
+	for (let i = 0; i < items.length; i++) {
+		array.push(items[i]);
+	}
+}
 // mutate map in-place
 
 /**

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

@@ -51,15 +51,6 @@ export const EFFECT_PRESERVED = 1 << 19;
 export const USER_EFFECT = 1 << 20;
 export const EFFECT_OFFSCREEN = 1 << 25;
 
-// Flags exclusive to deriveds
-/**
- * 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). This is a pure performance optimization flag and
- * should not be used for any other purpose!
- */
-export const WAS_MARKED = 1 << 16;
-
 // Flags used for async
 export const REACTION_IS_UPDATING = 1 << 21;
 export const ASYNC = 1 << 22;

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

@@ -15,7 +15,6 @@ import {
 	MAYBE_DIRTY,
 	RENDER_EFFECT,
 	ROOT_EFFECT,
-	WAS_MARKED,
 	MANAGED_EFFECT
 } from '#client/constants';
 import { snapshot } from '../../shared/clone.js';
@@ -204,7 +203,6 @@ export function log_reactions(signal) {
 		if ((flags & DIRTY) !== 0) names.push('DIRTY');
 		if ((flags & MAYBE_DIRTY) !== 0) names.push('MAYBE_DIRTY');
 		if ((flags & CONNECTED) !== 0) names.push('CONNECTED');
-		if ((flags & WAS_MARKED) !== 0) names.push('WAS_MARKED');
 		if ((flags & INERT) !== 0) names.push('INERT');
 		if ((flags & DESTROYED) !== 0) names.push('DESTROYED');
 

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