fix: prevent flushed effects from running again

.changeset/warm-trams-smash.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent flushed effects from running again

packages/svelte/src/internal/client/reactivity/async.js

@@ -248,6 +248,7 @@ export function run(thunks) {
 
 	promise.finally(() => {
 		blocker.settled = true;
+		unset_context();
 	});
 
 	for (const fn of thunks.slice(1)) {

packages/svelte/src/internal/client/reactivity/batch.js

@@ -1,6 +1,5 @@
 /** @import { Fork } from 'svelte' */
 /** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
-/** @import { Boundary } from '../dom/blocks/boundary' */
 import {
 	BLOCK_EFFECT,
 	BRANCH_EFFECT,
@@ -14,7 +13,6 @@ import {
 	ROOT_EFFECT,
 	MAYBE_DIRTY,
 	DERIVED,
-	BOUNDARY_EFFECT,
 	EAGER_EFFECT,
 	HEAD_EFFECT,
 	ERROR_VALUE,
@@ -225,6 +223,10 @@ export class Batch {
 			flush_queued_effects(render_effects);
 			flush_queued_effects(effects);
 
+			// Clear effects. Those that are still needed will be rescheduled through unskipping the skipped branches.
+			this.#dirty_effects.clear();
+			this.#maybe_dirty_effects.clear();
+
 			previous_batch = null;
 
 			this.#deferred?.resolve();
@@ -423,6 +425,7 @@ export class Batch {
 			batch_values = previous_batch_values;
 		}
 
+		this.#skipped_branches.clear();
 		batches.delete(this);
 	}
 

packages/svelte/tests/runtime-runes/samples/async-boundary-nav-race/_config.js

@@ -0,0 +1,82 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>a</button>
+		<button>b</button>
+		<button>resolve a</button>
+		<button>resolve b</button>
+		<p>pending a</p>
+	`,
+	async test({ assert, target }) {
+		const [a, b, resolve_a, resolve_b] = target.querySelectorAll('button');
+
+		resolve_a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>page a</p>
+			`
+		);
+
+		b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>pending b</p>
+			`
+		);
+
+		a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>pending a</p>
+			`
+		);
+
+		resolve_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>pending a</p>
+			`
+		);
+
+		resolve_a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>page a</p>
+			`
+		);
+
+		await new Promise((r) => setTimeout(r, 100));
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-boundary-nav-race/main.svelte

@@ -0,0 +1,52 @@
+<script>
+	let page = $state('a');
+
+	/** @type {Array<() => void>} */
+	const a = [];
+	/** @type {Array<() => void>} */
+	const b = [];
+
+	function gate(next) {
+		const deferred = Promise.withResolvers();
+
+		if (next === 'a') a.push(deferred.resolve);
+		else b.push(deferred.resolve);
+
+		return deferred.promise;
+	}
+
+	function nav(next) {
+		page = next;
+	}
+
+	const to_render = $derived(page === 'a' ? snippet_a : snippet_b);
+</script>
+
+<button onclick={() => nav('a')}>a</button>
+<button onclick={() => nav('b')}>b</button>
+<button onclick={() => a.shift()?.()}>resolve a</button>
+<button onclick={() => b.shift()?.()}>resolve b</button>
+
+{#snippet snippet_a()}
+	<svelte:boundary>
+		{@const _a = await gate('a')}
+		<p>page a</p>
+
+		{#snippet pending()}
+			<p>pending a</p>
+		{/snippet}
+	</svelte:boundary>
+{/snippet}
+
+{#snippet snippet_b()}
+	<svelte:boundary>
+		{@const _b = await gate('b')}
+		<p>page b</p>
+
+		{#snippet pending()}
+			<p>pending b</p>
+		{/snippet}
+	</svelte:boundary>
+{/snippet}
+
+{@render to_render()}