mirror of https://github.com/sveltejs/svelte
parent
df50aa8384
commit
08a17b9839
@ -0,0 +1,48 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
const [fork, update, pop, commit] = target.querySelectorAll('button');
|
||||
const [sum, doubled] = target.querySelectorAll('p');
|
||||
logs.length = 0;
|
||||
|
||||
fork.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, ['sum 1,0']);
|
||||
logs.length = 0;
|
||||
|
||||
// Revalidate twice to also check that retaining async results does not
|
||||
// prevent the fork from responding to genuine changes to its inputs.
|
||||
for (const y of [1, 2]) {
|
||||
update.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [`sum 0,${y}`, `sum 1,${y}`]);
|
||||
logs.length = 0;
|
||||
|
||||
pop.click(); // resolve the fork before the real world
|
||||
await tick();
|
||||
assert.deepEqual(logs, [`double ${y + 1}`]);
|
||||
logs.length = 0;
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [`double ${y}`]);
|
||||
assert.htmlEqual(sum.innerHTML, String(y));
|
||||
assert.htmlEqual(doubled.innerHTML, String(y * 2));
|
||||
logs.length = 0;
|
||||
}
|
||||
|
||||
commit.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, []);
|
||||
assert.htmlEqual(sum.innerHTML, '3');
|
||||
assert.htmlEqual(doubled.innerHTML, '6');
|
||||
|
||||
pop.click(); // the superseded first fork run
|
||||
await tick();
|
||||
assert.htmlEqual(sum.innerHTML, '3');
|
||||
assert.htmlEqual(doubled.innerHTML, '6');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let x = $state(0);
|
||||
let y = $state(0);
|
||||
let f;
|
||||
const deferred = [];
|
||||
|
||||
function delay(x, y) {
|
||||
console.log(`sum ${x},${y}`);
|
||||
const value = x + y;
|
||||
return value ? new Promise((resolve) => deferred.push(() => resolve(value))) : value;
|
||||
}
|
||||
|
||||
async function double(value) {
|
||||
console.log(`double ${value}`);
|
||||
return value * 2;
|
||||
}
|
||||
|
||||
let sum = $derived(await delay(x, y));
|
||||
</script>
|
||||
|
||||
<button onclick={() => { f = fork(() => x++); }}>fork</button>
|
||||
<button onclick={() => y++}>update</button>
|
||||
<button onclick={() => deferred.pop()?.()}>pop</button>
|
||||
<button onclick={() => f.commit()}>commit</button>
|
||||
|
||||
<p>{sum}</p>
|
||||
<p>{await double(sum)}</p>
|
||||
Loading…
Reference in new issue