Fix: Don't wrap await inside @const async functions with save

packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js

@@ -53,10 +53,6 @@ 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--) {
@@ -67,6 +63,27 @@ 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;
 		}
 
@@ -76,7 +93,7 @@ export function is_reactive_expression(path, in_derived) {
 		}
 	}
 
-	return false;
+	return in_derived;
 }
 
 /**

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

@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<nav><ul><button>Tab 1</button><button>Tab 2</button><button>Tab 3</button></ul></nav> <h1>Tab 1</h1>`,
+
+	async test({ assert, target }) {
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+		btn2.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<nav><ul><button>Tab 1</button><button>Tab 2</button><button>Tab 3</button></ul></nav> <h1>Tab 2</h1>`
+		);
+
+		btn3.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<nav><ul><button>Tab 1</button><button>Tab 2</button><button>Tab 3</button></ul></nav> <h1>Tab 3</h1>`
+		);
+
+		btn1.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<nav><ul><button>Tab 1</button><button>Tab 2</button><button>Tab 3</button></ul></nav> <h1>Tab 1</h1>`
+		);
+	}
+});

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

@@ -0,0 +1,37 @@
+<script>
+	const tabs = [
+		{ id: 'tab1', label: 'Tab 1'},
+		{ id: 'tab2', label: 'Tab 2' },
+		{ id: 'tab3', label: 'Tab 3' }
+	]
+
+	let activeTab = $state('tab1')
+
+	const doSomething = async () => {
+		console.log('doSomething called')
+	}
+</script>
+
+<nav>
+	<ul>
+		{#each tabs as tab (tab.id)}
+			{@const switchTab = async () => {
+				console.log('switchTab called', tab.id)
+				activeTab = tab.id
+				await doSomething()
+			}}
+
+			<button onclick={switchTab}>
+				{tab.label}
+			</button>
+		{/each}
+	</ul>
+</nav>
+
+{#if activeTab == 'tab1'}
+	<h1>Tab 1</h1>
+{:else if activeTab == 'tab2'}
+	<h1>Tab 2</h1>
+{:else if activeTab == 'tab3'}
+	<h1>Tab 3</h1>
+{/if}