mirror of https://github.com/sveltejs/svelte
Merge f8276d5fbf into 8e98c03e25
Simon H
2 days ago
committed by
GitHub
commit
0454b356db
@ -0,0 +1,41 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
const buttons = `
|
||||
<button>fork</button>
|
||||
<button>update</button>
|
||||
<button>resolve</button>
|
||||
<button>discard</button>
|
||||
`;
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, instance }) {
|
||||
const [fork_button, update, resolve, discard] = target.querySelectorAll('button');
|
||||
|
||||
fork_button.click();
|
||||
await tick();
|
||||
assert.equal(instance.get_calls(), 1);
|
||||
assert.htmlEqual(target.innerHTML, buttons);
|
||||
|
||||
// Transfer an invalidation into the fork while its async work is pending.
|
||||
update.click();
|
||||
await tick();
|
||||
assert.equal(instance.get_calls(), 1); // can also be 2 at this point already, would also be ok
|
||||
|
||||
try {
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.equal(instance.get_calls(), 2);
|
||||
|
||||
// Completing the replacement must not replay the same invalidation.
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.equal(instance.get_calls(), 2);
|
||||
} finally {
|
||||
discard.click();
|
||||
await tick();
|
||||
}
|
||||
|
||||
assert.htmlEqual(target.innerHTML, buttons);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,42 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let sharedState = $state(0);
|
||||
let show = $state(false);
|
||||
let f;
|
||||
let calls = 0;
|
||||
|
||||
const resolvers = [];
|
||||
|
||||
// Only evaluated in the fork, with a fresh object on each evaluation.
|
||||
const searchParams = $derived({ value: sharedState });
|
||||
|
||||
export function get_calls() {
|
||||
return calls;
|
||||
}
|
||||
|
||||
function load(value) {
|
||||
calls += 1;
|
||||
return new Promise((resolve) => resolvers.push(() => resolve(value)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
onclick={() => {
|
||||
f = fork(() => {
|
||||
sharedState = 1;
|
||||
show = true;
|
||||
});
|
||||
}}
|
||||
>fork</button
|
||||
>
|
||||
<button onclick={() => sharedState++}>update</button>
|
||||
<button onclick={() => resolvers.shift()?.()}>resolve</button>
|
||||
<button onclick={() => f?.discard()}>discard</button>
|
||||
|
||||
{#if show}
|
||||
<svelte:boundary>
|
||||
{#snippet pending()}loading{/snippet}
|
||||
<p>{await load(searchParams.value)}</p>
|
||||
</svelte:boundary>
|
||||
{/if}
|
||||
@ -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]);
|
||||
|
||||
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>`);
|
||||
}
|
||||
});
|
||||
@ -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}
|
||||
@ -0,0 +1,45 @@
|
||||
import { flushSync, tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
const buttons = `
|
||||
<button>preload</button>
|
||||
<button>increment</button>
|
||||
<button>commit</button>
|
||||
<button>reveal</button>
|
||||
<button>discard</button>
|
||||
<button>preload second</button>
|
||||
<button>commit second</button>
|
||||
<button>reset</button>
|
||||
`;
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [preload, increment, commit, reveal, discard, preload_second, commit_second, reset] =
|
||||
target.querySelectorAll('button');
|
||||
|
||||
for (const mode of ['commit', 'reveal', 'second-fork']) {
|
||||
preload.click();
|
||||
flushSync(() => increment.click());
|
||||
assert.htmlEqual(target.innerHTML, buttons);
|
||||
|
||||
if (mode === 'commit') {
|
||||
commit.click();
|
||||
await tick();
|
||||
} else if (mode === 'reveal') {
|
||||
flushSync(() => reveal.click());
|
||||
discard.click();
|
||||
} else {
|
||||
preload_second.click();
|
||||
discard.click();
|
||||
commit_second.click();
|
||||
await tick();
|
||||
}
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<p>1 2</p>`);
|
||||
flushSync(() => increment.click());
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<p>2 4</p>`);
|
||||
flushSync(() => reset.click());
|
||||
assert.htmlEqual(target.innerHTML, buttons);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let show = $state(false);
|
||||
let count = $state(0);
|
||||
let doubled = $derived(count * 2);
|
||||
let f;
|
||||
let other;
|
||||
</script>
|
||||
|
||||
<button onclick={() => (f = fork(() => (show = true)))}>preload</button>
|
||||
<button onclick={() => count++}>increment</button>
|
||||
<button onclick={() => f.commit()}>commit</button>
|
||||
<button onclick={() => (show = true)}>reveal</button>
|
||||
<button onclick={() => f.discard()}>discard</button>
|
||||
<button onclick={() => (other = fork(() => (show = true)))}>preload second</button>
|
||||
<button onclick={() => other.commit()}>commit second</button>
|
||||
<button onclick={() => { show = false; count = 0; }}>reset</button>
|
||||
|
||||
{#if show}
|
||||
<p>{count} {doubled}</p>
|
||||
{/if}
|
||||
@ -0,0 +1,32 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
const buttons = `
|
||||
<button>preload</button>
|
||||
<button>reveal</button>
|
||||
<button>hide</button>
|
||||
<button>commit</button>
|
||||
`;
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [preload, reveal, hide, commit] = target.querySelectorAll('button');
|
||||
|
||||
preload.click();
|
||||
reveal.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`${buttons}<b>0</b><p>constant</p><p>keyed</p><p>boundary</p>`
|
||||
);
|
||||
|
||||
hide.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<b>0</b>`);
|
||||
|
||||
// The remaining fork write must not resurrect its obsolete branch selection.
|
||||
commit.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<b>1</b>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let show = $state(false);
|
||||
let other = $state(0);
|
||||
let f;
|
||||
</script>
|
||||
|
||||
<button onclick={() => (f = fork(() => { show = true; other = 1; }))}>preload</button>
|
||||
<button onclick={() => (show = true)}>reveal</button>
|
||||
<button onclick={() => (show = false)}>hide</button>
|
||||
<button onclick={() => f.commit()}>commit</button>
|
||||
|
||||
<b>{other}</b>
|
||||
|
||||
{#if show}
|
||||
{#if true}<p>constant</p>{/if}
|
||||
{#key 1}<p>keyed</p>{/key}
|
||||
<svelte:boundary onerror={console.error}>
|
||||
<p>boundary</p>
|
||||
</svelte:boundary>
|
||||
{/if}
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
let { total, navigating } = $props();
|
||||
const pages = $derived(Math.ceil(total / 28));
|
||||
const pending = $derived(navigating && pages > 1);
|
||||
</script>
|
||||
|
||||
{#if pending}pending{/if}
|
||||
<p>{pages}</p>
|
||||
@ -0,0 +1,73 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
const buttons = `
|
||||
<button>preload</button>
|
||||
<button>reveal outer</button>
|
||||
<button>reveal and navigate</button>
|
||||
<button>navigate</button>
|
||||
<button>resolve</button>
|
||||
<button>commit</button>
|
||||
<button>discard</button>
|
||||
<button>reset</button>
|
||||
`;
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
const [preload, reveal, reveal_and_navigate, navigate, resolve, commit, discard, reset] =
|
||||
target.querySelectorAll('button');
|
||||
|
||||
for (const mode of ['separate', 'together', 'pending']) {
|
||||
for (const finish of [commit, discard]) {
|
||||
preload.click();
|
||||
|
||||
if (mode !== 'pending') {
|
||||
resolve.click();
|
||||
await tick();
|
||||
}
|
||||
|
||||
assert.htmlEqual(target.innerHTML, buttons);
|
||||
assert.deepEqual(logs, ['load']);
|
||||
|
||||
if (mode === 'together') {
|
||||
reveal_and_navigate.click();
|
||||
} else {
|
||||
reveal.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<section></section>`);
|
||||
navigate.click();
|
||||
}
|
||||
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<section></section>`);
|
||||
assert.deepEqual(logs, ['load']);
|
||||
|
||||
if (mode === 'pending') {
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<section></section>`);
|
||||
}
|
||||
|
||||
finish.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`${buttons}<section>${finish === commit ? 'pending <p>2</p>' : ''}</section>`
|
||||
);
|
||||
assert.deepEqual(logs, ['load']);
|
||||
|
||||
if (finish === commit) {
|
||||
navigate.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<section><p>2</p></section>`);
|
||||
assert.deepEqual(logs, ['load']);
|
||||
}
|
||||
|
||||
reset.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, buttons);
|
||||
logs.length = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,36 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let outer = $state(false);
|
||||
let inner = $state(false);
|
||||
let navigating = $state(false);
|
||||
let f;
|
||||
|
||||
const deferred = [];
|
||||
|
||||
function load() {
|
||||
console.log('load');
|
||||
return new Promise((resolve) => deferred.push(() => resolve(42)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => (f = fork(() => { outer = true; inner = true; }))}>preload</button>
|
||||
<button onclick={() => (outer = true)}>reveal outer</button>
|
||||
<button onclick={() => { outer = true; navigating = true; }}>reveal and navigate</button>
|
||||
<button onclick={() => (navigating = !navigating)}>navigate</button>
|
||||
<button onclick={() => deferred.shift()?.()}>resolve</button>
|
||||
<button onclick={() => f.commit()}>commit</button>
|
||||
<button onclick={() => f.discard()}>discard</button>
|
||||
<button onclick={() => { outer = false; inner = false; navigating = false; }}>reset</button>
|
||||
|
||||
{#if outer}
|
||||
<section>
|
||||
{#if inner}
|
||||
<svelte:boundary onerror={(error) => console.log(error.message)}>
|
||||
{#snippet pending()}loading{/snippet}
|
||||
<Child total={await load()} {navigating} />
|
||||
</svelte:boundary>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
let { total, navigating } = $props();
|
||||
const pages = $derived(Math.ceil(total / 28));
|
||||
const pending = $derived(navigating && pages > 1);
|
||||
</script>
|
||||
|
||||
{#if pending}pending{/if}
|
||||
<p>{pages}</p>
|
||||
@ -0,0 +1,50 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
const buttons = `
|
||||
<button>preload</button>
|
||||
<button>navigate</button>
|
||||
<button>commit</button>
|
||||
<button>discard</button>
|
||||
`;
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
const [preload, navigate, commit, discard] = target.querySelectorAll('button');
|
||||
|
||||
preload.click();
|
||||
// Let the async child resolve, without committing its fork.
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
assert.htmlEqual(target.innerHTML, buttons);
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
// A real-world update must not evaluate the speculative child in the real world.
|
||||
navigate.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, buttons);
|
||||
assert.deepEqual(logs, []);
|
||||
discard.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, buttons);
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
navigate.click();
|
||||
await tick();
|
||||
preload.click();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
navigate.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, buttons);
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
commit.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}pending <p>2</p>`);
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
navigate.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<p>2</p>`);
|
||||
assert.deepEqual(logs, []);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let show = $state(false);
|
||||
let navigating = $state(false);
|
||||
let f;
|
||||
</script>
|
||||
|
||||
<button onclick={() => (f = fork(() => (show = true)))}>preload</button>
|
||||
<button onclick={() => (navigating = !navigating)}>navigate</button>
|
||||
<button onclick={() => f.commit()}>commit</button>
|
||||
<button onclick={() => f.discard()}>discard</button>
|
||||
|
||||
{#if show}
|
||||
<svelte:boundary onerror={(error) => console.log(error.message)}>
|
||||
{#snippet pending()}loading{/snippet}
|
||||
<Child total={await Promise.resolve(42)} {navigating} />
|
||||
</svelte:boundary>
|
||||
{/if}
|
||||
@ -0,0 +1,61 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
const buttons = `
|
||||
<button>up</button>
|
||||
<button>down</button>
|
||||
<button>show1</button>
|
||||
<button>show2</button>
|
||||
<button>shift a</button>
|
||||
<button>shift t</button>
|
||||
`;
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
|
||||
const [up, down, show1, show2, shift_a, shift_t] = target.querySelectorAll('button');
|
||||
|
||||
// batch B: reveals boundary 1 -> commits with pending snippet, stays live
|
||||
show1.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons} <p>loading 1...</p>`);
|
||||
|
||||
// batch C: reveals boundary 2 -> commits with pending snippet, stays live
|
||||
show2.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons} <p>loading 1...</p> <p>loading 2...</p>`);
|
||||
|
||||
// batch A: writes a=1; the async-a effect is owned by C, so A merges with
|
||||
// C and stays pending. B remains separate
|
||||
up.click();
|
||||
await tick();
|
||||
|
||||
// B's continuation first-reads `a`, which is overlaid by the pending
|
||||
// merged batch. B has already committed its UI, so it cannot entangle —
|
||||
// it reads the latest value (1) instead
|
||||
shift_t.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons} <p>late read: 1</p> <p>loading 2...</p>`);
|
||||
|
||||
// revert `a` to 0 inside the pending batch — its eventual commit leaves
|
||||
// `a` unchanged. The write re-runs the late reader (it acquired `a` as a
|
||||
// dependency), so it re-awaits a fresh deferred
|
||||
down.click();
|
||||
await tick();
|
||||
|
||||
// resolve the pending batch's async-a runs -> it commits
|
||||
shift_a.click();
|
||||
await tick();
|
||||
shift_a.click();
|
||||
await tick();
|
||||
shift_a.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons} <p>late read: 1</p> <p>async a: 0</p>`);
|
||||
|
||||
// resolve the late reader's re-run -> it converges on the committed value
|
||||
shift_t.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons} <p>late read: 0</p> <p>async a: 0</p>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,49 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let show1 = $state(false);
|
||||
let show2 = $state(false);
|
||||
|
||||
let deferreds = [];
|
||||
|
||||
function push(key, v) {
|
||||
const d = Promise.withResolvers();
|
||||
deferreds.push({ key, v, d });
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
function shift(key, override) {
|
||||
const i = deferreds.findIndex((d) => d.key === key);
|
||||
if (i === -1) return;
|
||||
const [{ v, d }] = deferreds.splice(i, 1);
|
||||
d.resolve(override ?? v);
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => a++}>up</button>
|
||||
<button onclick={() => a--}>down</button>
|
||||
<button onclick={() => (show1 = true)}>show1</button>
|
||||
<button onclick={() => (show2 = true)}>show2</button>
|
||||
<button onclick={() => shift('a')}>shift a</button>
|
||||
<button onclick={() => shift('t', 1)}>shift t</button>
|
||||
|
||||
{#if show1}
|
||||
<svelte:boundary>
|
||||
<!-- no state deps initially; reads `a` for the first time only when
|
||||
the awaited value (controlled by the test) says so -->
|
||||
<p>late read: {(await push('t', 0)) > 0 ? a : -1}</p>
|
||||
|
||||
{#snippet pending()}
|
||||
<p>loading 1...</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
{/if}
|
||||
|
||||
{#if show2}
|
||||
<svelte:boundary>
|
||||
<p>async a: {await push('a', a)}</p>
|
||||
|
||||
{#snippet pending()}
|
||||
<p>loading 2...</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
{/if}
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let { x } = $props();
|
||||
console.log(x.x);
|
||||
$effect(() => console.log('$effect: '+ x.x))
|
||||
</script>
|
||||
|
||||
{x.x}
|
||||
@ -0,0 +1,44 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
const [x, y, resolve] = target.querySelectorAll('button');
|
||||
|
||||
x.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, ['universe']);
|
||||
|
||||
y.click();
|
||||
await tick();
|
||||
// the new branch reads `x`, which the pending batch has written, as a new
|
||||
// dependency — the two batches entangle, so the new branch is held back
|
||||
// until the async work completes. Its $effect is deferred, but the
|
||||
// init-time console.log necessarily runs eagerly (with the latest value)
|
||||
assert.deepEqual(logs, ['universe', 'universe']);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>x</button>
|
||||
<button>y++</button>
|
||||
<button>resolve</button>
|
||||
`
|
||||
);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
// both branches commit together, fully consistent
|
||||
assert.deepEqual(logs, ['universe', 'universe', '$effect: universe', '$effect: universe']);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>x</button>
|
||||
<button>y++</button>
|
||||
<button>resolve</button>
|
||||
universe
|
||||
universe
|
||||
universe
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,28 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let x = $state();
|
||||
let y = $state(0);
|
||||
let deferred = [];
|
||||
|
||||
function delay(s) {
|
||||
const d = Promise.withResolvers();
|
||||
deferred.push(() => d.resolve(s))
|
||||
return d.promise;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => x = {x:'universe'}}>x</button>
|
||||
|
||||
<button onclick={() => y++}>y++</button>
|
||||
|
||||
<button onclick={() => deferred.shift()()}>resolve</button>
|
||||
|
||||
{#if x?.x === 'universe'}
|
||||
{await delay(x.x)}
|
||||
<Child {x} />
|
||||
{/if}
|
||||
|
||||
{#if y > 0}
|
||||
<Child {x} />
|
||||
{/if}
|
||||
@ -0,0 +1,51 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [x, y, resolve] = target.querySelectorAll('button');
|
||||
|
||||
x.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>x</button>
|
||||
<button>y++</button>
|
||||
<button>resolve</button>
|
||||
<h1>WORLD</h1>
|
||||
`
|
||||
);
|
||||
|
||||
y.click();
|
||||
await tick();
|
||||
// the new branch reads `upper` — a derived owned by the pending batch — as
|
||||
// a new dependency. The two batches entangle, so the new branch is held
|
||||
// back until the async work completes (rather than rendering with the
|
||||
// derived's pre-write value, 'WORLD')
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>x</button>
|
||||
<button>y++</button>
|
||||
<button>resolve</button>
|
||||
<h1>WORLD</h1>
|
||||
`
|
||||
);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
// both branches commit together, fully consistent
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>x</button>
|
||||
<button>y++</button>
|
||||
<button>resolve</button>
|
||||
<h1>UNIVERSE</h1>
|
||||
universe
|
||||
<p>UNIVERSE</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
let x = $state({ x: 'world' });
|
||||
let y = $state(0);
|
||||
let deferred = [];
|
||||
|
||||
const upper = $derived(x.x.toUpperCase());
|
||||
|
||||
function delay(s) {
|
||||
const d = Promise.withResolvers();
|
||||
deferred.push(() => d.resolve(s));
|
||||
return d.promise;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => (x = { x: 'universe' })}>x</button>
|
||||
|
||||
<button onclick={() => y++}>y++</button>
|
||||
|
||||
<button onclick={() => deferred.shift()()}>resolve</button>
|
||||
|
||||
<h1>{upper}</h1>
|
||||
|
||||
{#if x.x === 'universe'}
|
||||
{await delay(x.x)}
|
||||
{/if}
|
||||
|
||||
{#if y > 0}
|
||||
<p>{upper}</p>
|
||||
{/if}
|
||||
@ -0,0 +1,63 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [a, t, shift_a, shift_t] = target.querySelectorAll('button');
|
||||
|
||||
shift_a.click();
|
||||
shift_t.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>a</button>
|
||||
<button>t</button>
|
||||
<button>shift a</button>
|
||||
<button>shift t</button>
|
||||
<p>async a: 0</p>
|
||||
<p>late read: -1</p>
|
||||
`
|
||||
);
|
||||
|
||||
// batch A: writes `a`, stays pending (its promise is unresolved)
|
||||
a.click();
|
||||
await tick();
|
||||
|
||||
// batch B: writes `t`; resolve its promise so the continuation
|
||||
// reads `a` for the first time while A is still pending. This
|
||||
// entangles B with A — both worlds are held back and commit together
|
||||
t.click();
|
||||
await tick();
|
||||
shift_t.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>a</button>
|
||||
<button>t</button>
|
||||
<button>shift a</button>
|
||||
<button>shift t</button>
|
||||
<p>async a: 0</p>
|
||||
<p>late read: -1</p>
|
||||
`
|
||||
);
|
||||
|
||||
// commit the merged batch
|
||||
shift_a.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>a</button>
|
||||
<button>t</button>
|
||||
<button>shift a</button>
|
||||
<button>shift t</button>
|
||||
<p>async a: 1</p>
|
||||
<p>late read: 1</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,35 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let t = $state(0);
|
||||
|
||||
let deferreds = [];
|
||||
|
||||
function push(key, v) {
|
||||
const d = Promise.withResolvers();
|
||||
deferreds.push({ key, v, d });
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
function shift(key) {
|
||||
const i = deferreds.findIndex((d) => d.key === key);
|
||||
if (i === -1) return;
|
||||
const [{ v, d }] = deferreds.splice(i, 1);
|
||||
d.resolve(v);
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => a++}>a</button>
|
||||
<button onclick={() => t++}>t</button>
|
||||
<button onclick={() => shift('a')}>shift a</button>
|
||||
<button onclick={() => shift('t')}>shift t</button>
|
||||
|
||||
<svelte:boundary>
|
||||
<p>async a: {await push('a', a)}</p>
|
||||
|
||||
<!-- reads `a` after an await, but only once t > 0 -->
|
||||
<p>late read: {(await push('t', t), t > 0 ? a : -1)}</p>
|
||||
|
||||
{#snippet pending()}
|
||||
<p>loading...</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,41 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [update, show, resolve] = target.querySelectorAll('button');
|
||||
|
||||
update.click();
|
||||
await tick();
|
||||
|
||||
show.click();
|
||||
await tick();
|
||||
|
||||
// the template effect newly depends on `value`, which the pending batch
|
||||
// has written — it reads the latest value rather than the pre-write one
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>update</button>
|
||||
<button>show</button>
|
||||
<button>resolve</button>
|
||||
<p>1</p>
|
||||
`
|
||||
);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>update</button>
|
||||
<button>show</button>
|
||||
<button>resolve</button>
|
||||
<p>1</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
let value = $state();
|
||||
let show = $state(false);
|
||||
const deferred = Promise.withResolvers();
|
||||
|
||||
function wait(value) {
|
||||
return value === undefined ? '' : deferred.promise;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => (value = { x: 1 })}>update</button>
|
||||
<button onclick={() => (show = true)}>show</button>
|
||||
<button onclick={() => deferred.resolve('')}>resolve</button>
|
||||
|
||||
{await wait(value)}
|
||||
|
||||
<p>{show ? value.x : ''}</p>
|
||||
Loading…
Reference in new issue