chore: even more async tests (#18990)

extracting some tests from #18983 — these pass on `main`, `pt-1`, `pt-2`
and `pt-3`. The others in that PR don't pass on `main`, so will be dealt
with separately

Author: Rich-Harris

packages/svelte/tests/runtime-runes/samples/async-derived-equal-real-value-hidden/_config.js

@@ -0,0 +1,33 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+const buttons =
+	'<button>x</button><button>s</button><button>resolve a</button><button>resolve b</button>';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target }) {
+		await tick();
+		const [x, s, resolve_a, resolve_b] = target.querySelectorAll('button');
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>0:5</p><p>5</p>`);
+
+		// batch A: `t` becomes truthy (pending)
+		x.click();
+		await tick();
+
+		// batch B: `d` becomes 0 (pending)
+		s.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>0:5</p><p>5</p>`);
+
+		// In A's world, `d` is recomputed to 0. That's the real value, but not the value
+		// A sees for it (the one from before B's change), so A has to record it
+		resolve_a.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>1:0</p><p>5</p>`);
+
+		resolve_b.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>1:0</p><p>0</p>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-derived-equal-real-value-hidden/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	let x = $state(0);
+	let s = $state(5);
+
+	const pending = new Map();
+
+	function delay(name, value, initial) {
+		if (value === initial) return value;
+		return new Promise((resolve) => pending.set(name, () => resolve(value)));
+	}
+
+	const t = $derived(await delay('a', x, 0));
+	const d = $derived(t ? 0 : s);
+</script>
+
+<button onclick={() => x++}>x</button>
+<button onclick={() => (s = 0)}>s</button>
+<button onclick={() => pending.get('a')?.()}>resolve a</button>
+<button onclick={() => pending.get('b')?.()}>resolve b</button>
+
+{#if d >= 0}
+	<p>{t}:{d}</p>
+{/if}
+
+<p>{await delay('b', s, 5)}</p>

packages/svelte/tests/runtime-runes/samples/async-effect-write-keeps-batch-derived/_config.js

@@ -0,0 +1,33 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+const buttons = '<button>x</button><button>t</button><button>shift</button>';
+
+// While batch A (x) commits, a pre effect writes to `s`. That marks `label` (via `big`) as
+// maybe dirty, but it doesn't actually change. `label` must still show the value from A's
+// point of view, not the one from the later, still-pending batch B (t).
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [x, t, shift] = target.querySelectorAll('button');
+
+		// A
+		x.click();
+		await tick();
+
+		// B
+		t.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>0</p><p>0</p><p>0 false-0</p>`);
+
+		// A commits, B is still pending
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>1</p><p>0</p><p>1 false-0</p>`);
+
+		// B commits
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>1</p><p>1</p><p>1 false-1</p>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-effect-write-keeps-batch-derived/main.svelte

@@ -0,0 +1,32 @@
+<script>
+	import { untrack } from 'svelte';
+
+	let x = $state(0);
+	let t = $state(0);
+	let s = $state(0);
+
+	// `s` changes, but `big` doesn't
+	let big = $derived(s > 100);
+	let label = $derived(`${big}-${t}`);
+
+	const queue = [];
+	function push(v) {
+		if (!v) return v;
+		return new Promise((r) => queue.push(() => r(v)));
+	}
+
+	$effect.pre(() => {
+		if (x) untrack(() => s++);
+	});
+</script>
+
+<button onclick={() => x++}>x</button>
+<button onclick={() => t++}>t</button>
+<button onclick={() => queue.shift()()}>shift</button>
+
+<p>{await push(x)}</p>
+<p>{await push(t)}</p>
+<!-- evaluates `label` during traversal of B -->
+{#key label}{/key}
+
+<p>{x} {label}</p>

packages/svelte/tests/runtime-runes/samples/async-fork-commit-new-reader/_config.js

@@ -0,0 +1,35 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+const buttons =
+	'<button>u</button><button>fork</button><button>cond</button><button>commit</button><button>shift</button>';
+
+// The template effect is deferred by the fork (it depends on `s` via `big`), but before the
+// fork is committed, it re-runs in the real world and starts reading `s` directly.
+// Committing the fork (while another batch is pending) must still update it.
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [u, f, cond, commit, shift] = target.querySelectorAll('button');
+
+		// unrelated pending batch
+		u.click();
+		await tick();
+
+		f.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>0</p><p>false</p>`);
+
+		cond.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>0</p><p>0</p>`);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>0</p><p>1</p>`);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>1</p><p>1</p>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-fork-commit-new-reader/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { fork } from 'svelte';
+
+	let s = $state(0);
+	let cond = $state(false);
+	let u = $state(0);
+	let big = $derived(s > 100);
+
+	const queue = [];
+	function push(v) {
+		if (!v) return v;
+		return new Promise((r) => queue.push(() => r(v)));
+	}
+
+	let f;
+</script>
+
+<button onclick={() => u++}>u</button>
+<button onclick={() => (f = fork(() => s++))}>fork</button>
+<button onclick={() => (cond = true)}>cond</button>
+<button onclick={() => f.commit()}>commit</button>
+<button onclick={() => queue.shift()()}>shift</button>
+
+<p>{await push(u)}</p>
+<p>{cond ? s : big}</p>

packages/svelte/tests/runtime-runes/samples/async-stale-read-many-sources/_config.js

@@ -0,0 +1,39 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+const buttons = '<button>show</button><button>items</button><button>shift</button>';
+/** @param {number} offset */
+const list = (offset) => Array.from({ length: 2000 }, (_, i) => `${i + offset},`).join('');
+
+// When the branch is created in B1, the each block reads all 2000 items, each of which B2 holds
+// a newer value of. The each block must be scheduled to re-run in B2 once, not once per stale
+// value — otherwise B2 is flushed 2000 times (each flush being O(size of B2)), which takes seconds
+export default test({
+	mode: ['client'],
+	async test({ assert, target }) {
+		await tick();
+		const [show, items, shift] = target.querySelectorAll('button');
+
+		// B1: show = true -> pending
+		show.click();
+		await tick();
+
+		// B2: increment all items -> pending
+		items.click();
+		await tick();
+
+		// B1 resolves -> the branch is created, reading 2000 values that are stale relative to B2
+		const start = performance.now();
+		shift.click();
+		await tick();
+		const duration = performance.now() - start;
+
+		assert.ok(duration < 1000, `took ${duration}ms`);
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>0</p><div>${list(0)}</div>`);
+
+		// B2 resolves
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>1</p><div>${list(1)}</div>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-stale-read-many-sources/main.svelte

@@ -0,0 +1,23 @@
+<script>
+	let show = $state(false);
+	let items = $state(Array.from({ length: 2000 }, (_, i) => i));
+
+	const deferred = [];
+
+	function delay(v) {
+		if (!v) return v;
+		return new Promise((resolve) => deferred.push(() => resolve(v)));
+	}
+</script>
+
+<button onclick={() => (show = true)}>show</button>
+<button onclick={() => items.forEach((_, i) => items[i]++)}>items</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+
+<p>{await delay(items[0])}</p>
+
+{#if await delay(show)}
+	<div>
+		{#each items as item}{item},{/each}
+	</div>
+{/if}