mirror of https://github.com/sveltejs/svelte
Simon Holthausen
1 week ago
parent
a7c16935a5
commit
2cfc5819d0
@ -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,79 @@
|
|||||||
|
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]) {
|
||||||
|
try {
|
||||||
|
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;
|
||||||
|
} catch (e) {
|
||||||
|
/** @type {Error} */ (e).message =
|
||||||
|
`${mode}/${finish === commit ? 'commit' : 'discard'}: ${/** @type {Error} */ (e).message}`;
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -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}
|
||||||
Loading…
Reference in new issue