fix: don't preserve reactivity context across function boundaries

Fixes sveltejs#15133

Author: dummdidumm

.changeset/short-banks-yell.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't preserve reactivity context across function boundaries

packages/svelte/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);

packages/svelte/src/compiler/phases/2-analyze/types.d.ts

@@ -29,9 +29,9 @@ export interface AnalysisState {
 	reactive_statement: null | ReactiveStatement;
 
 	/**
-	 * True if we're directly inside a `$derived(...)` expression (but not `$derived.by(...)`)
+	 * Set when we're inside a `$derived(...)` expression (but not `$derived.by(...)`) or `@const`
 	 */
-	in_derived: boolean;
+	derived_function_depth: number;
 }
 
 export type Context<State extends AnalysisState = AnalysisState> = import('zimmerframe').Context<

packages/svelte/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,6 +56,8 @@ export function AwaitExpression(node, context) {
  * @param {boolean} in_derived
  */
 export function is_reactive_expression(path, in_derived) {
+	if (in_derived) return true;
+
 	let i = path.length;
 
 	while (i--) {
@@ -63,26 +68,6 @@ export function is_reactive_expression(path, in_derived) {
 			parent.type === 'FunctionExpression' ||
 			parent.type === 'FunctionDeclaration'
 		) {
-			// Check if there's a reactive rune call (like $derived) between this function and the await
-			for (let j = i + 1; j < path.length; j++) {
-				const node = path[j];
-				// @ts-expect-error
-				if (node.metadata) {
-					// There's a reactive expression between the function and the await
-					return true;
-				}
-				// Also check for $derived, $effect, etc. calls
-				if (
-					node.type === 'CallExpression' &&
-					node.callee?.type === 'Identifier' &&
-					(node.callee.name === '$derived' ||
-						node.callee.name === '$effect' ||
-						node.callee.name === '$inspect')
-				) {
-					// This is a reactive rune call
-					return true;
-				}
-			}
 			// No reactive expression found between function and await
 			return false;
 		}
@@ -93,18 +78,23 @@ export function is_reactive_expression(path, in_derived) {
 		}
 	}
 
-	return in_derived;
+	return false;
 }
 
 /**
  * @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) {

packages/svelte/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
 		});
 

packages/svelte/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
 	});
 }

packages/svelte/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);

packages/svelte/tests/runtime-runes/samples/const-async-function-await/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });