svelte 5.41.0 → 5.41.2

package/package.json

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

package/src/compiler/phases/2-analyze/index.js

@@ -306,7 +306,7 @@ export function analyze_module(source, options) {
 			fragment: null,
 			parent_element: null,
 			reactive_statement: null,
-			in_derived: false
+			derived_function_depth: -1
 		},
 		visitors
 	);
@@ -703,7 +703,7 @@ export function analyze_component(root, source, options) {
 				state_fields: new Map(),
 				function_depth: scope.function_depth,
 				reactive_statement: null,
-				in_derived: false
+				derived_function_depth: -1
 			};
 
 			walk(/** @type {AST.SvelteNode} */ (ast), state, visitors);
@@ -771,7 +771,7 @@ export function analyze_component(root, source, options) {
 				expression: null,
 				state_fields: new Map(),
 				function_depth: scope.function_depth,
-				in_derived: false
+				derived_function_depth: -1
 			};
 
 			walk(/** @type {AST.SvelteNode} */ (ast), state, visitors);

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

@@ -15,7 +15,10 @@ export function AwaitExpression(node, context) {
 	//   b) awaits that precede other expressions in template or `$derived(...)`
 	if (
 		tla ||
-		(is_reactive_expression(context.path, context.state.in_derived) &&
+		(is_reactive_expression(
+			context.path,
+			context.state.derived_function_depth === context.state.function_depth
+		) &&
 			!is_last_evaluated_expression(context.path, node))
 	) {
 		context.state.analysis.pickled_awaits.add(node);
@@ -53,9 +56,7 @@ export function AwaitExpression(node, context) {
  * @param {boolean} in_derived
  */
 export function is_reactive_expression(path, in_derived) {
-	if (in_derived) {
-		return true;
-	}
+	if (in_derived) return true;
 
 	let i = path.length;
 
@@ -67,6 +68,7 @@ export function is_reactive_expression(path, in_derived) {
 			parent.type === 'FunctionExpression' ||
 			parent.type === 'FunctionDeclaration'
 		) {
+			// No reactive expression found between function and await
 			return false;
 		}
 
@@ -83,11 +85,16 @@ export function is_reactive_expression(path, in_derived) {
  * @param {AST.SvelteNode[]} path
  * @param {Expression | SpreadElement | Property} node
  */
-export function is_last_evaluated_expression(path, node) {
+function is_last_evaluated_expression(path, node) {
 	let i = path.length;
 
 	while (i--) {
-		const parent = /** @type {Expression | Property | SpreadElement} */ (path[i]);
+		const parent = path[i];
+
+		if (parent.type === 'ConstTag') {
+			// {@const ...} tags are treated as deriveds and its contents should all get the preserve-reactivity treatment
+			return false;
+		}
 
 		// @ts-expect-error we could probably use a neater/more robust mechanism
 		if (parent.metadata) {

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

@@ -248,7 +248,7 @@ export function CallExpression(node, context) {
 		context.next({
 			...context.state,
 			function_depth: context.state.function_depth + 1,
-			in_derived: true,
+			derived_function_depth: context.state.function_depth + 1,
 			expression
 		});
 

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

@@ -38,6 +38,8 @@ export function ConstTag(node, context) {
 	context.visit(declaration.init, {
 		...context.state,
 		expression: node.metadata.expression,
-		in_derived: true
+		// We're treating this like a $derived under the hood
+		function_depth: context.state.function_depth + 1,
+		derived_function_depth: context.state.function_depth + 1
 	});
 }

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

@@ -1,3 +1,4 @@
+/** @import { Expression } from 'estree' */
 /** @import { AST, Binding } from '#compiler' */
 /** @import { Context } from '../types' */
 /** @import { Scope } from '../../scope' */
@@ -29,7 +30,7 @@ export function EachBlock(node, context) {
 	}
 
 	if (node.metadata.keyed && !node.context) {
-		e.each_key_without_as(node);
+		e.each_key_without_as(/** @type {Expression} */ (node.key));
 	}
 
 	// evaluate expression in parent scope

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

@@ -64,12 +64,6 @@ export function VariableDeclarator(node, context) {
 			}
 		}
 
-		if (rune === '$derived') {
-			context.visit(node.id);
-			context.visit(/** @type {Expression} */ (node.init), { ...context.state, in_derived: true });
-			return;
-		}
-
 		if (rune === '$props') {
 			if (node.id.type !== 'ObjectPattern' && node.id.type !== 'Identifier') {
 				e.props_invalid_identifier(node);

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

@@ -172,6 +172,7 @@ export function client_component(analysis, options) {
 		// these are set inside the `Fragment` visitor, and cannot be used until then
 		init: /** @type {any} */ (null),
 		consts: /** @type {any} */ (null),
+		let_directives: /** @type {any} */ (null),
 		update: /** @type {any} */ (null),
 		after_update: /** @type {any} */ (null),
 		template: /** @type {any} */ (null),
@@ -384,7 +385,9 @@ export function client_component(analysis, options) {
 			.../** @type {ESTree.Statement[]} */ (template.body)
 		]);
 
-		component_block.body.push(b.stmt(b.call(`$.async_body`, b.arrow([], body, true))));
+		component_block.body.push(
+			b.stmt(b.call(`$.async_body`, b.id('$$anchor'), b.arrow([b.id('$$anchor')], body, true)))
+		);
 	} else {
 		component_block.body.push(
 			...state.instance_level_snippets,

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

@@ -1,10 +1,10 @@
-/** @import { CallExpression, Expression } from 'estree' */
+/** @import { CallExpression, Expression, MemberExpression } from 'estree' */
 /** @import { Context } from '../types' */
 import { dev, is_ignored } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
-import { transform_inspect_rune } from '../../utils.js';
 import { should_proxy } from '../utils.js';
+import { get_inspect_args } from '../../utils.js';
 
 /**
  * @param {CallExpression} node
@@ -73,7 +73,7 @@ export function CallExpression(node, context) {
 
 		case '$inspect':
 		case '$inspect().with':
-			return transform_inspect_rune(node, context);
+			return transform_inspect_rune(rune, node, context);
 	}
 
 	if (
@@ -104,3 +104,21 @@ export function CallExpression(node, context) {
 
 	context.next();
 }
+
+/**
+ * @param {'$inspect' | '$inspect().with'} rune
+ * @param {CallExpression} node
+ * @param {Context} context
+ */
+function transform_inspect_rune(rune, node, context) {
+	if (!dev) return b.empty;
+
+	const { args, inspector } = get_inspect_args(rune, node, context.visit);
+
+	// by passing an arrow function, the log appears to come from the `$inspect` callsite
+	// rather than the `inspect.js` file containing the utility
+	const id = b.id('$$args');
+	const fn = b.arrow([b.rest(id)], b.call(inspector, b.spread(id)));
+
+	return b.call('$.inspect', b.thunk(b.array(args)), fn, rune === '$inspect' && b.true);
+}

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

@@ -63,6 +63,7 @@ export function Fragment(node, context) {
 		...context.state,
 		init: [],
 		consts: [],
+		let_directives: [],
 		update: [],
 		after_update: [],
 		memoizer: new Memoizer(),
@@ -150,7 +151,7 @@ export function Fragment(node, context) {
 		}
 	}
 
-	body.push(...state.consts);
+	body.push(...state.let_directives, ...state.consts);
 
 	if (has_await) {
 		body.push(b.if(b.call('$.aborted'), b.return()));
@@ -177,7 +178,11 @@ export function Fragment(node, context) {
 	}
 
 	if (has_await) {
-		return b.block([b.stmt(b.call('$.async_body', b.arrow([], b.block(body), true)))]);
+		return b.block([
+			b.stmt(
+				b.call('$.async_body', b.id('$$anchor'), b.arrow([b.id('$$anchor')], b.block(body), true))
+			)
+		]);
 	} else {
 		return b.block(body);
 	}

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

@@ -21,22 +21,24 @@ export function LetDirective(node, context) {
 			};
 		}
 
-		return b.const(
-			name,
-			b.call(
-				'$.derived',
-				b.thunk(
-					b.block([
-						b.let(
-							/** @type {Expression} */ (node.expression).type === 'ObjectExpression'
-								? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
-									b.object_pattern(node.expression.properties)
-								: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
-									b.array_pattern(node.expression.elements),
-							b.member(b.id('$$slotProps'), node.name)
-						),
-						b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
-					])
+		context.state.let_directives.push(
+			b.const(
+				name,
+				b.call(
+					'$.derived',
+					b.thunk(
+						b.block([
+							b.let(
+								/** @type {Expression} */ (node.expression).type === 'ObjectExpression'
+									? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
+										b.object_pattern(node.expression.properties)
+									: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
+										b.array_pattern(node.expression.elements),
+								b.member(b.id('$$slotProps'), node.name)
+							),
+							b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
+						])
+					)
 				)
 			)
 		);
@@ -46,6 +48,8 @@ export function LetDirective(node, context) {
 			read: (node) => b.call('$.get', node)
 		};
 
-		return b.const(name, create_derived(context.state, b.member(b.id('$$slotProps'), node.name)));
+		context.state.let_directives.push(
+			b.const(name, create_derived(context.state, b.member(b.id('$$slotProps'), node.name)))
+		);
 	}
 }

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

@@ -106,7 +106,7 @@ export function RegularElement(node, context) {
 
 			case 'LetDirective':
 				// visit let directives before everything else, to set state
-				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+				context.visit(attribute, { ...context.state, let_directives: lets });
 				break;
 
 			case 'OnDirective':

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

@@ -49,7 +49,7 @@ export function SlotElement(node, context) {
 				}
 			}
 		} else if (attribute.type === 'LetDirective') {
-			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+			context.visit(attribute, { ...context.state, let_directives: lets });
 		}
 	}
 

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

@@ -9,7 +9,7 @@
 export function SvelteFragment(node, context) {
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'LetDirective') {
-			context.state.init.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+			context.visit(attribute);
 		}
 	}
 

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

@@ -101,7 +101,7 @@ export function build_component(node, component_name, context) {
 	if (slot_scope_applies_to_itself) {
 		for (const attribute of node.attributes) {
 			if (attribute.type === 'LetDirective') {
-				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+				context.visit(attribute, { ...context.state, let_directives: lets });
 			}
 		}
 	}
@@ -109,7 +109,7 @@ export function build_component(node, component_name, context) {
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'LetDirective') {
 			if (!slot_scope_applies_to_itself) {
-				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute, states.default)));
+				context.visit(attribute, { ...states.default, let_directives: lets });
 			}
 		} else if (attribute.type === 'OnDirective') {
 			if (!attribute.expression) {

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

@@ -1,9 +1,9 @@
-/** @import { CallExpression, Expression } from 'estree' */
+/** @import { CallExpression, Expression, MemberExpression } from 'estree' */
 /** @import { Context } from '../types.js' */
-import { is_ignored } from '../../../../state.js';
+import { dev, is_ignored } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
-import { transform_inspect_rune } from '../../utils.js';
+import { get_inspect_args } from '../../utils.js';
 
 /**
  * @param {CallExpression} node
@@ -51,7 +51,13 @@ export function CallExpression(node, context) {
 	}
 
 	if (rune === '$inspect' || rune === '$inspect().with') {
-		return transform_inspect_rune(node, context);
+		if (!dev) return b.empty;
+
+		const { args, inspector } = get_inspect_args(rune, node, context.visit);
+
+		return rune === '$inspect'
+			? b.call(inspector, b.literal('$inspect('), ...args, b.literal(')'))
+			: b.call(inspector, b.literal('init'), ...args);
 	}
 
 	context.next();

package/src/compiler/phases/3-transform/utils.js

@@ -1,7 +1,7 @@
 /** @import { Context } from 'zimmerframe' */
 /** @import { TransformState } from './types.js' */
 /** @import { AST, Binding, Namespace, ValidatedCompileOptions } from '#compiler' */
-/** @import { Node, Expression, CallExpression } from 'estree' */
+/** @import { Node, Expression, CallExpression, MemberExpression } from 'estree' */
 import {
 	regex_ends_with_whitespaces,
 	regex_not_whitespace,
@@ -452,30 +452,19 @@ export function determine_namespace_for_children(node, namespace) {
 }
 
 /**
- * @template {TransformState} T
+ * @param {'$inspect' | '$inspect().with'} rune
  * @param {CallExpression} node
- * @param {Context<any, T>} context
+ * @param {(node: AST.SvelteNode) => AST.SvelteNode} visit
  */
-export function transform_inspect_rune(node, context) {
-	const { state, visit } = context;
-	const as_fn = state.options.generate === 'client';
-
-	if (!dev) return b.empty;
-
-	if (node.callee.type === 'MemberExpression') {
-		const raw_inspect_args = /** @type {CallExpression} */ (node.callee.object).arguments;
-		const inspect_args =
-			/** @type {Array<Expression>} */
-			(raw_inspect_args.map((arg) => visit(arg)));
-		const with_arg = /** @type {Expression} */ (visit(node.arguments[0]));
-
-		return b.call(
-			'$.inspect',
-			as_fn ? b.thunk(b.array(inspect_args)) : b.array(inspect_args),
-			with_arg
-		);
-	} else {
-		const arg = node.arguments.map((arg) => /** @type {Expression} */ (visit(arg)));
-		return b.call('$.inspect', as_fn ? b.thunk(b.array(arg)) : b.array(arg));
-	}
+export function get_inspect_args(rune, node, visit) {
+	const call =
+		rune === '$inspect'
+			? node
+			: /** @type {CallExpression} */ (/** @type {MemberExpression} */ (node.callee).object);
+
+	return {
+		args: call.arguments.map((arg) => /** @type {Expression} */ (visit(arg))),
+		inspector:
+			rune === '$inspect' ? 'console.log' : /** @type {Expression} */ (visit(node.arguments[0]))
+	};
 }

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

@@ -2,13 +2,14 @@ import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
 import { inspect_effect, render_effect, validate_effect } from '../reactivity/effects.js';
 import { untrack } from '../runtime.js';
+import { get_stack } from './tracing.js';
 
 /**
  * @param {() => any[]} get_value
- * @param {Function} [inspector]
+ * @param {Function} inspector
+ * @param {boolean} show_stack
  */
-// eslint-disable-next-line no-console
-export function inspect(get_value, inspector = console.log) {
+export function inspect(get_value, inspector, show_stack = false) {
 	validate_effect('$inspect');
 
 	let initial = true;
@@ -28,7 +29,16 @@ export function inspect(get_value, inspector = console.log) {
 
 		var snap = snapshot(value, true, true);
 		untrack(() => {
-			inspector(initial ? 'init' : 'update', ...snap);
+			if (show_stack) {
+				inspector(...snap);
+
+				if (!initial) {
+					// eslint-disable-next-line no-console
+					console.log(get_stack('UpdatedAt'));
+				}
+			} else {
+				inspector(initial ? 'init' : 'update', ...snap);
+			}
 		});
 
 		initial = false;

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

@@ -134,7 +134,16 @@ export function trace(label, fn) {
  * @returns {Error & { stack: string } | null}
  */
 export function get_stack(label) {
+	// @ts-ignore stackTraceLimit doesn't exist everywhere
+	const limit = Error.stackTraceLimit;
+
+	// @ts-ignore
+	Error.stackTraceLimit = Infinity;
 	let error = Error();
+
+	// @ts-ignore
+	Error.stackTraceLimit = limit;
+
 	const stack = error.stack;
 
 	if (!stack) return null;
@@ -151,7 +160,7 @@ export function get_stack(label) {
 		if (line.includes('validate_each_keys')) {
 			return null;
 		}
-		if (line.includes('svelte/src/internal')) {
+		if (line.includes('svelte/src/internal') || line.includes('svelte\\src\\internal')) {
 			continue;
 		}
 		new_lines.push(line);

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

@@ -1,5 +1,6 @@
 /** @import { TemplateNode, Value } from '#client' */
 import { flatten } from '../../reactivity/async.js';
+import { Batch, current_batch } from '../../reactivity/batch.js';
 import { get } from '../../runtime.js';
 import {
 	hydrate_next,
@@ -18,8 +19,11 @@ import { get_boundary } from './boundary.js';
  */
 export function async(node, expressions, fn) {
 	var boundary = get_boundary();
+	var batch = /** @type {Batch} */ (current_batch);
+	var blocking = !boundary.is_pending();
 
 	boundary.update_pending_count(1);
+	batch.increment(blocking);
 
 	var was_hydrating = hydrating;
 
@@ -44,6 +48,7 @@ export function async(node, expressions, fn) {
 			fn(node, ...values);
 		} finally {
 			boundary.update_pending_count(-1);
+			batch.decrement(blocking);
 		}
 
 		if (was_hydrating) {