From 170cd1868eac8df52bfc79abefee89d06f4d2a4a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 5 May 2026 17:22:46 -0400
Subject: [PATCH] add tests

---
 .../samples/async-batch-order/_config.js      |  30 +++
 .../samples/async-batch-order/main.svelte     |  21 ++
 .../samples/async-stale-derived-4/_config.js  |  28 +++
 .../samples/async-stale-derived-4/main.svelte |  21 ++
 .../samples/async-stale-derived-5/_config.js  |  33 +++
 .../samples/async-stale-derived-5/main.svelte | 197 ++++++++++++++++++
 6 files changed, 330 insertions(+)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-batch-order/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-batch-order/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/main.svelte

diff --git a/packages/svelte/tests/runtime-runes/samples/async-batch-order/_config.js b/packages/svelte/tests/runtime-runes/samples/async-batch-order/_config.js
new file mode 100644
index 0000000000..53cceb9d54
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-batch-order/_config.js
@@ -0,0 +1,30 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [increment, shift, middle] = target.querySelectorAll('button');
+		const [div] = target.querySelectorAll('div');
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		middle.click(); // resolve the second increment which will make the if block go away and the first batch discarded
+		await tick();
+		assert.htmlEqual(div.innerHTML, '2 2');
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(div.innerHTML, '3 3');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-batch-order/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-batch-order/main.svelte
new file mode 100644
index 0000000000..0289380d78
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-batch-order/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let a = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<div>
+	{a} {await delay(a)}
+	{#if a < 2}
+		{await delay(a)}
+	{/if}
+</div>
+
+<button onclick={() => {a++;}}>a++</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred[2]()}>middle</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/_config.js
new file mode 100644
index 0000000000..e1555c0062
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/_config.js
@@ -0,0 +1,28 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment, hide, pop] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		pop.click();
+		await tick();
+		hide.click(); // hides the if block, which cancels the pending async inside, which means the batch can complete
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button> <button>hide</button> <button>pop</button> 1`
+		);
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button> <button>hide</button> <button>pop</button> 1`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/main.svelte
new file mode 100644
index 0000000000..5ff3263d39
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let show = $state(true);
+	let count = $state(0);
+
+	const queue = [];
+
+	function push(value) {
+		if (!value) return value;
+		return new Promise(r => queue.push(() => r(value)));
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => show = false}>hide</button>
+<!-- pop() so that the outer one resolves first, not the one inside the if block -->
+<button onclick={() => queue.pop()?.()}>pop</button>
+
+{await push(count)}
+{#if show}
+	{await push(count)}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/_config.js
new file mode 100644
index 0000000000..05d92e9df2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/_config.js
@@ -0,0 +1,33 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment, shift] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>3</button><button>shift</button><p>1 = 1</p><p>fizz: true</p><p>buzz: true</p>`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>3</button><button>shift</button><p>1 = 1</p><p>fizz: true</p><p>buzz: true</p>`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>3</button><button>shift</button><p>3 = 3</p><p>fizz: true</p><p>buzz: false</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/main.svelte
new file mode 100644
index 0000000000..fe10d72396
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/main.svelte
@@ -0,0 +1,197 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	const queue = [];
+
+	let n = $state(1);
+	let fizz = $state(true);
+	let buzz = $state(true);
+
+	function increment() {
+		n++;
+
+		fizz = n % 3 === 0;
+		buzz = n % 5 === 0;
+	}
+
+	function push(value) {
+		if (value === 1) return 1;
+		const d = Promise.withResolvers();
+
+		queue.push(() => d.resolve(value));
+
+		const signal = getAbortSignal();
+		signal.onabort = () => d.reject(signal.reason);
+
+		return d.promise;
+	}
+</script>
+
+<button onclick={increment}>
+	{$state.eager(n)}
+</button>
+
+<button onclick={() => queue.shift()?.()}>shift</button>
+
+<p>{n} = {await push(n)}</p>
+
+{#if true}
+	<p>fizz: {fizz}</p>
+{/if}
+
+{#if true}
+	<p>buzz: {buzz}</p>
+{/if}
+
+ 
+
+<!-- <script>
+	import { getAbortSignal } from 'svelte';
+
+	const queue = [];
+
+	function push(value) {
+		if (value === 1) return 1;
+		const d = Promise.withResolvers();
+
+		queue.push(() => d.resolve(value));
+
+		const signal = getAbortSignal();
+		signal.onabort = () => d.reject(signal.reason);
+
+		return d.promise;
+	}
+
+	function shift() {
+		queue.shift()?.();
+	}
+
+	function pop() {
+		queue.pop()?.();
+	}
+
+	let n = $state(1);
+</script>
+
+<button onclick={() => n++}>
+	{$state.eager(n)}
+</button>
+
+<button onclick={shift}>shift</button>
+<button onclick={pop}>pop</button>
+
+<p>{n} = {await push(n)}</p> -->
+
+
+<!-- <script>
+	let a = $state(0);
+
+	const deferred = []; 
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+{a} {await delay(a)}
+{#if a < 2}
+	{await delay(a)}
+{/if}
+
+<button onclick={() => {a++;}}>
+	a+1
+</button>
+<button onclick={() => {a+=2;}}>
+	a+2
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred[2]()}>middle</button> -->
+
+<!-- <script>
+	let a = $state(0);
+	let b = $derived(await delay(a * 2));
+	let c = $state(0);
+	let d = $derived(await delay(b + c));
+	// let e = $derived(d === (b + c));
+
+	const deferred = []; 
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {a} | b {b} | c {c} | d {d}
+<button onclick={() => {a++;}}>
+	a++
+</button>
+<button onclick={() => {c++;}}>
+	c++
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button> -->
+
+<!-- <script>
+	let count = $state(0);
+	let other = $state(0);
+
+	const queue = [];
+	function push(v) {
+		return new Promise((r,e) => queue.push(() => v === 1 ? e(v) : r(v)));
+	}
+</script>
+
+<button onclick={() => {
+	if (count === 0) {
+		other++;
+		count++;
+	} else {
+		count++
+	}
+}}>increment</button>
+<button onclick={() => queue.pop()?.()}>pop</button>
+
+{#if count > 0}
+	<svelte:boundary>
+		{await push(count)} {count} {other}
+		{#snippet failed()}boom{/snippet}
+	</svelte:boundary> 
+{/if} -->
+
+<!-- <script>
+	let count1 = $state(0);
+	let count2 = $state(0);
+
+	const queued = [];
+
+	async function delay(v) {
+		if (!v) return v;
+		return new Promise(r => queued.push(() => r(v)));
+	}
+
+	function show(get) {
+		console.log('running', get());
+		return $state.eager(get()) !== get();
+	}
+</script>
+
+<button onclick={() => count1++}>increment</button> 
+<button onclick={() => count2++}>increment</button> 
+<button onclick={() => queued.shift()?.()}>resolve</button>
+ 
+{await delay(count1)}
+{await delay(count2)}
+
+{#if show(() => count1)}
+	<p>loading...</p>
+{:else}
+	<p>{count1}</p>
+{/if}
+
+{#if show(() => count2)}
+	<p>loading...</p>
+{:else}
+	<p>{count2}</p>
+{/if} -->