another

packages/svelte/tests/runtime-runes/samples/async-fork-branch-merge/_config.js

@@ -0,0 +1,35 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+const buttons = `
+	<button>preload</button>
+	<button>increment</button>
+	<button>commit</button>
+	<button>merge</button>
+	<button>resolve</button>
+`;
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [preload, increment, commit, merge, resolve] = target.querySelectorAll('button');
+
+		preload.click();
+		flushSync(() => increment.click());
+		assert.deepEqual(logs, [0, 1]); // [0] would also be ok; the 1 must be done in the context of the fork (impossible to assert so you gotta check manually)
+
+		commit.click();
+		assert.deepEqual(logs, [0, 1]);
+
+		flushSync(() => merge.click());
+		await tick();
+		assert.deepEqual(logs, [0, 1]);
+		assert.htmlEqual(target.innerHTML, buttons);
+
+		// Resolve the obsolete request for 0, then the existing request for 1.
+		resolve.click();
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [0, 1]);
+		assert.htmlEqual(target.innerHTML, `${buttons}<p>1</p>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-fork-branch-merge/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { fork } from 'svelte';
+
+	let show = $state(false);
+	let count = $state(0);
+	let gate = $state(1);
+	let f;
+
+	const deferred = [];
+
+	function load(value) {
+		console.log(value);
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => (show = true)))}>preload</button>
+<button onclick={() => count++}>increment</button>
+<button onclick={() => f.commit()}>commit</button>
+<button onclick={() => gate++}>merge</button>
+<button onclick={() => deferred.shift()?.()}>resolve</button>
+
+{#if show && gate > 0}
+	<p>{await load(count)}</p>
+{/if}