fix: send $effect.pending count to the correct boundary

Author: Rich-Harris

.changeset/dirty-cycles-smash.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: send `$effect.pending` count to the correct boundary

packages/svelte/src/internal/client/dom/blocks/async.js

@@ -1,15 +1,15 @@
 /** @import { TemplateNode, Value } from '#client' */
 import { flatten } from '../../reactivity/async.js';
 import { get } from '../../runtime.js';
-import { get_pending_boundary } from './boundary.js';
+import { get_boundary } from './boundary.js';
 
 /**
  * @param {TemplateNode} node
  * @param {Array<() => Promise<any>>} expressions
  * @param {(anchor: TemplateNode, ...deriveds: Value[]) => void} fn
  */
 export function async(node, expressions, fn) {
-	var boundary = get_pending_boundary();
+	var boundary = get_boundary();
 
 	boundary.update_pending_count(1);
 

packages/svelte/src/internal/client/dom/blocks/boundary.js

@@ -81,6 +81,7 @@ export class Boundary {
 	/** @type {DocumentFragment | null} */
 	#offscreen_fragment = null;
 
+	#local_pending_count = 0;
 	#pending_count = 0;
 	#is_creating_fallback = false;
 
@@ -95,12 +96,12 @@ export class Boundary {
 
 	#effect_pending_update = () => {
 		if (this.#effect_pending) {
-			internal_set(this.#effect_pending, this.#pending_count);
+			internal_set(this.#effect_pending, this.#local_pending_count);
 		}
 	};
 
 	#effect_pending_subscriber = createSubscriber(() => {
-		this.#effect_pending = source(this.#pending_count);
+		this.#effect_pending = source(this.#local_pending_count);
 
 		if (DEV) {
 			tag(this.#effect_pending, '$effect.pending()');
@@ -179,6 +180,14 @@ export class Boundary {
 		}
 	}
 
+	/**
+	 * Returns `true` if the effect exists inside a boundary whose pending snippet is shown
+	 * @returns {boolean}
+	 */
+	is_pending() {
+		return this.pending || (!!this.parent && this.parent.is_pending());
+	}
+
 	has_pending_snippet() {
 		return !!this.#props.pending;
 	}
@@ -220,8 +229,20 @@ export class Boundary {
 		}
 	}
 
-	/** @param {1 | -1} d */
+	/**
+	 * Updates the pending count associated with the currently visible pending snippet,
+	 * if any, such that we can replace the snippet with content once work is done
+	 * @param {1 | -1} d
+	 */
 	#update_pending_count(d) {
+		if (!this.has_pending_snippet()) {
+			if (this.parent) {
+				this.parent.#update_pending_count(d);
+			}
+
+			return;
+		}
+
 		this.#pending_count += d;
 
 		if (this.#pending_count === 0) {
@@ -242,12 +263,9 @@ export class Boundary {
 
 	/** @param {1 | -1} d */
 	update_pending_count(d) {
-		if (this.has_pending_snippet()) {
-			this.#update_pending_count(d);
-		} else if (this.parent) {
-			this.parent.#update_pending_count(d);
-		}
+		this.#update_pending_count(d);
 
+		this.#local_pending_count += d;
 		effect_pending_updates.add(this.#effect_pending_update);
 	}
 
@@ -384,13 +402,9 @@ function move_effect(effect, fragment) {
 	}
 }
 
-export function get_pending_boundary() {
+export function get_boundary() {
 	var boundary = /** @type {Effect} */ (active_effect).b;
 
-	while (boundary !== null && !boundary.has_pending_snippet()) {
-		boundary = boundary.parent;
-	}
-
 	if (boundary === null) {
 		e.await_outside_boundary();
 	}

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

@@ -3,7 +3,7 @@
 import { DESTROYED } from '#client/constants';
 import { DEV } from 'esm-env';
 import { component_context, is_runes, set_component_context } from '../context.js';
-import { get_pending_boundary } from '../dom/blocks/boundary.js';
+import { get_boundary } from '../dom/blocks/boundary.js';
 import { invoke_error_boundary } from '../error-handling.js';
 import {
 	active_effect,
@@ -39,7 +39,7 @@ export function flatten(sync, async, fn) {
 	var parent = /** @type {Effect} */ (active_effect);
 
 	var restore = capture();
-	var boundary = get_pending_boundary();
+	var boundary = get_boundary();
 
 	Promise.all(async.map((expression) => async_derived(expression)))
 		.then((result) => {

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

@@ -15,7 +15,7 @@ import {
 } from '#client/constants';
 import { async_mode_flag } from '../../flags/index.js';
 import { deferred, define_property } from '../../shared/utils.js';
-import { get_pending_boundary } from '../dom/blocks/boundary.js';
+import { get_boundary } from '../dom/blocks/boundary.js';
 import {
 	active_effect,
 	is_dirty,
@@ -668,9 +668,9 @@ export function schedule_effect(signal) {
 }
 
 export function suspend() {
-	var boundary = get_pending_boundary();
+	var boundary = get_boundary();
 	var batch = /** @type {Batch} */ (current_batch);
-	var pending = boundary.pending;
+	var pending = boundary.is_pending();
 
 	boundary.update_pending_count(1);
 	if (!pending) batch.increment();

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

@@ -135,7 +135,7 @@ export function async_derived(fn, location) {
 		prev = promise;
 
 		var batch = /** @type {Batch} */ (current_batch);
-		var pending = boundary.pending;
+		var pending = boundary.is_pending();
 
 		if (should_suspend) {
 			boundary.update_pending_count(1);

packages/svelte/tests/runtime-runes/samples/async-effect-pending-nested/_config.js

@@ -0,0 +1,95 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, shift] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>loading...</p>
+			`
+		);
+
+		shift.click();
+		shift.click();
+		shift.click();
+
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>inner pending: 0</p>
+				<p>outer pending: 0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>inner pending: 3</p>
+				<p>outer pending: 0</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>inner pending: 2</p>
+				<p>outer pending: 0</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>inner pending: 1</p>
+				<p>outer pending: 0</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>1</p>
+				<p>1</p>
+				<p>1</p>
+				<p>inner pending: 0</p>
+				<p>outer pending: 0</p>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-effect-pending-nested/main.svelte

@@ -0,0 +1,34 @@
+<script>
+	let value = $state(0);
+	let deferreds = [];
+
+	function push(value) {
+		const deferred = Promise.withResolvers();
+		deferreds.push({ value, deferred });
+		return deferred.promise;
+	}
+
+	function shift() {
+		const d = deferreds.shift();
+		d?.deferred.resolve(d.value);
+	}
+</script>
+
+<button onclick={() => value++}>increment</button>
+<button onclick={() => shift()}>shift</button>
+
+<svelte:boundary>
+	<svelte:boundary>
+		<p>{await push(value)}</p>
+		<p>{await push(value)}</p>
+		<p>{await push(value)}</p>
+		<p>inner pending: {$effect.pending()}</p>
+	</svelte:boundary>
+	<p>outer pending: {$effect.pending()}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+
+