another test

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

@@ -0,0 +1,34 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [button1, button2, shift_1, pop_1, shift_2] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		button1.click();
+		await tick();
+		button2.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
+
+		pop_1.click();
+		await tick();
+		shift_2.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
+
+		// Check that the first batch can still resolve before the second even if one of its async values
+		// is already superseeded (but the subsequent batch as a whole is still pending).
+		shift_1.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `1 + 0 = 1 | 1 0`);
+
+		shift_1.click();
+		await tick();
+		shift_2.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `1 + 2 = 3 | 1 1`);
+	}
+});

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

@@ -0,0 +1,22 @@
+<script>
+	const queue1 = [];
+	const queue2 = [];
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0)
+
+	function push(value, where = 1) {
+		if (!value) return value;
+		return new Promise(r => (where === 1 ? queue1 : queue2).push(() => r(value)));
+	}
+</script>
+
+<button onclick={() => {a++;c++}}>a / c</button>
+<button onclick={() => {b+=2;d++}}>b / d</button>
+<button onclick={() => queue1.shift()?.()}>shift 1</button>
+<button onclick={() => queue1.pop()?.()}>pop 1</button>
+<button onclick={() => queue2.shift()?.()}>shift 2</button>
+
+<p>{a} + {b} = {await push(a + b)} | {await push(c, 2)} {await push(d, 2)}</p>