don't commit stale batches

Author: Rich-Harris

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

@@ -87,6 +87,12 @@ export class Batch {
 	 */
 	#deferred = null;
 
+	/**
+	 * True if an async effect inside this batch resolved and
+	 * its parent branch was already deleted
+	 */
+	#neutered = false;
+
 	/**
 	 * Async effects (created inside `async_derived`) encountered during processing.
 	 * These run after the rest of the batch has updated, since they should
@@ -278,10 +284,14 @@ export class Batch {
 		current_batch = null;
 	}
 
+	neuter() {
+		this.#neutered = true;
+	}
+
 	flush() {
 		if (queued_root_effects.length > 0) {
 			this.flush_effects();
-		} else {
+		} else if (!this.#neutered) {
 			this.#commit();
 		}
 

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

@@ -9,7 +9,8 @@ import {
 	EFFECT_PRESERVED,
 	MAYBE_DIRTY,
 	STALE_REACTION,
-	UNOWNED
+	UNOWNED,
+	DESTROYED
 } from '#client/constants';
 import {
 	active_reaction,
@@ -144,6 +145,10 @@ export function async_derived(fn, location) {
 		const handler = (value, error = undefined) => {
 			prev = null;
 
+			if ((parent.f & DESTROYED) !== 0) {
+				batch.neuter();
+			}
+
 			current_async_effect = null;
 
 			if (!pending) batch.activate();

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

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

packages/svelte/tests/runtime-runes/samples/async-stale-derived/main.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	let count = $state(0);
+
+	let deferreds = [];
+
+	function push() {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => deferreds.shift()?.resolve(count)}>shift</button>
+
+<svelte:boundary>
+	{#if count % 2}
+		<p>delayed: {await push()}</p>
+	{:else}
+		<p>{await count}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>