fix: restore batch along with effect context (#16668)

Fixes https://github.com/sveltejs/svelte/issues/16596
Fixes https://github.com/sveltejs/kit/issues/14124

.changeset/silent-pigs-relax.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: restore batch along with effect context

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

@@ -73,11 +73,13 @@ function capture() {
 	var previous_effect = active_effect;
 	var previous_reaction = active_reaction;
 	var previous_component_context = component_context;
+	var previous_batch = current_batch;
 
 	return function restore() {
 		set_active_effect(previous_effect);
 		set_active_reaction(previous_reaction);
 		set_component_context(previous_component_context);
+		previous_batch?.activate();
 
 		if (DEV) {
 			set_from_async_derived(null);
@@ -176,8 +178,8 @@ export function unset_context() {
  * @param {() => Promise<void>} fn
  */
 export async function async_body(fn) {
-	const unsuspend = suspend();
+	var unsuspend = suspend();
-	const active = /** @type {Effect} */ (active_effect);
+	var active = /** @type {Effect} */ (active_effect);
 
 	try {
 		await fn();

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

@@ -76,8 +76,8 @@ let queued_root_effects = [];
 let last_scheduled_effect = null;
 
 let is_flushing = false;
-
 let is_flushing_sync = false;
+
 export class Batch {
 	/**
 	 * The current values of any sources that are updated in this batch
@@ -678,6 +678,8 @@ export function suspend() {
 		if (!pending) {
 			batch.activate();
 			batch.decrement();
+		} else {
+			batch.deactivate();
 		}
 
 		unset_context();

packages/svelte/tests/runtime-runes/samples/async-nested-top-level/Bar.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { resolve } from './main.svelte';
+
+	const bar = await new Promise((r) => resolve.push(() => r('bar')));
+</script>
+
+<p>bar: {bar}</p>

packages/svelte/tests/runtime-runes/samples/async-nested-top-level/Foo.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { resolve } from './main.svelte';
+	import Bar from './Bar.svelte';
+
+	const foo = await new Promise((r) => resolve.push(() => r('foo')));
+</script>
+
+<p>foo: {foo}</p>
+
+<Bar/>

packages/svelte/tests/runtime-runes/samples/async-nested-top-level/_config.js

@@ -0,0 +1,42 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [show, resolve] = target.querySelectorAll('button');
+
+		show.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>pending...</p>
+			`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>pending...</p>
+			`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>foo: foo</p>
+				<p>bar: bar</p>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-nested-top-level/main.svelte

@@ -0,0 +1,31 @@
+<script module>
+	export let resolve = [];
+</script>
+
+<script>
+	import Foo from './Foo.svelte';
+	
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = true}>
+	show
+</button>
+
+<button onclick={() => resolve.shift()()}>
+	resolve
+</button>
+
+<svelte:boundary>
+	{#if show}
+		<Foo/>
+	{/if}
+
+	{#if $effect.pending()}
+		<p>pending...</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>initializing...</p>
+	{/snippet}
+</svelte:boundary>

packages/svelte/tests/runtime-runes/samples/async-redirect/_config.js

@@ -29,6 +29,7 @@ export default test({
 				<button>c</button>
 				<button>ok</button>
 				<p>c</p>
+				<p>b or c</p>
 			`
 		);
 
@@ -46,6 +47,7 @@ export default test({
 				<button>c</button>
 				<button>ok</button>
 				<p>b</p>
+				<p>b or c</p>
 			`
 		);
 	}

packages/svelte/tests/runtime-runes/samples/async-redirect/main.svelte

@@ -33,6 +33,10 @@
 		<p>c</p>
 	{/if}
 
+	{#if route === 'b' || route === 'c'}
+		<p>b or c</p>
+	{/if}
+
 	{#snippet pending()}
 		<p>pending...</p>
 	{/snippet}

packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/Foo.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { resolve } from './main.svelte';
+
+	const foo = $derived(await new Promise((r) => resolve.push(() => r('foo'))));
+	const bar = $derived(await new Promise((r) => resolve.push(() => r('bar'))));
+</script>
+
+<p>{foo} {bar}</p>

packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/_config.js

@@ -0,0 +1,41 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [show, resolve] = target.querySelectorAll('button');
+
+		show.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>pending...</p>
+			`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>pending...</p>
+			`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>foo bar</p>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/main.svelte

@@ -0,0 +1,31 @@
+<script module>
+	export let resolve = [];
+</script>
+
+<script>
+	import Foo from './Foo.svelte';
+	
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = true}>
+	show
+</button>
+
+<button onclick={() => resolve.shift()()}>
+	resolve
+</button>
+
+<svelte:boundary>
+	{#if show}
+		<Foo/>
+	{/if}
+
+	{#if $effect.pending()}
+		<p>pending...</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>initializing...</p>
+	{/snippet}
+</svelte:boundary>