mirror of https://github.com/sveltejs/svelte
Simon Holthausen
4 days ago
parent
7018c09247
commit
18219ad1ff
@ -0,0 +1,70 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
/** @param {number} n */
|
||||
const html = (n) => `<p>c</p><section>${n}|${n}</section>`;
|
||||
|
||||
// Branches with async expressions (with and without dependencies) that fork `a` created are revealed
|
||||
// by another batch (a real one, or fork `b`), before or after `a`'s results are in. The revealing batch
|
||||
// has to run the async expressions itself, since `a`'s results only exist in `a`. When `a` is discarded
|
||||
// the other batch's results are shown; when it's committed, its own results are shown (nothing is fetched
|
||||
// again), even though the other batch's results come in later.
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
async test({ assert, target, instance }) {
|
||||
const [fork_a, show, fork_b, reset, resolve_all, discard_a, commit_a, commit_b] =
|
||||
target.querySelectorAll('button');
|
||||
const [output] = target.querySelectorAll('main');
|
||||
|
||||
const settle = async () => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await tick();
|
||||
resolve_all.click();
|
||||
}
|
||||
await tick();
|
||||
};
|
||||
|
||||
for (const revealer of ['real', 'fork']) {
|
||||
for (const finish of ['discard', 'commit']) {
|
||||
for (const resolved of [true, false]) {
|
||||
const mode = `${revealer} reveals, a ${finish}ed, a's results ${resolved ? 'resolved' : 'pending'}`;
|
||||
|
||||
try {
|
||||
fork_a.click();
|
||||
if (resolved) {
|
||||
resolve_all.click();
|
||||
await tick();
|
||||
}
|
||||
assert.deepEqual(instance.log.splice(0), ['cc', 'n1']);
|
||||
|
||||
if (revealer === 'real') show.click();
|
||||
else fork_b.click();
|
||||
await tick();
|
||||
assert.htmlEqual(output.innerHTML, '');
|
||||
assert.deepEqual(instance.log.splice(0), ['cc', 'n0']);
|
||||
|
||||
if (finish === 'discard') discard_a.click();
|
||||
else commit_a.click();
|
||||
await settle();
|
||||
assert.htmlEqual(
|
||||
output.innerHTML,
|
||||
finish === 'commit' ? html(1) : revealer === 'real' ? html(0) : ''
|
||||
);
|
||||
|
||||
commit_b.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html(finish === 'commit' ? 1 : 0));
|
||||
assert.deepEqual(instance.log, []);
|
||||
|
||||
reset.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, '');
|
||||
} catch (e) {
|
||||
/** @type {Error} */ (e).message = `${mode}: ${/** @type {Error} */ (e).message}`;
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,53 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let show = $state(false);
|
||||
let n = $state(0);
|
||||
export const log = [];
|
||||
const registry = [];
|
||||
let a;
|
||||
let b;
|
||||
|
||||
function f(tag, value) {
|
||||
log.push(`${tag}${value}`);
|
||||
return new Promise((resolve) => registry.push(() => resolve(value)));
|
||||
}
|
||||
|
||||
function set(values) {
|
||||
if ('show' in values) show = values.show;
|
||||
if ('n' in values) n = values.n;
|
||||
}
|
||||
|
||||
function resolve_all() {
|
||||
for (const r of registry.splice(0)) r();
|
||||
}
|
||||
|
||||
function discard_a() {
|
||||
a?.discard();
|
||||
a = undefined;
|
||||
}
|
||||
|
||||
function commit_a() {
|
||||
a?.commit();
|
||||
a = undefined;
|
||||
}
|
||||
|
||||
function commit_b() {
|
||||
b?.commit();
|
||||
b = undefined;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => (a = fork(() => set({ show: true, n: 1 })))}>fork a</button>
|
||||
<button onclick={() => set({ show: true })}>show</button>
|
||||
<button onclick={() => (b = fork(() => set({ show: true })))}>fork b</button>
|
||||
<button onclick={() => set({ show: false, n: 0 })}>reset</button>
|
||||
<button onclick={resolve_all}>resolve all</button>
|
||||
<button onclick={discard_a}>discard a</button>
|
||||
<button onclick={commit_a}>commit a</button>
|
||||
<button onclick={commit_b}>commit b</button>
|
||||
|
||||
<main>
|
||||
{#if show}<p>{await f('c', 'c')}</p>{/if}
|
||||
{#if show}<section>{n}|{await f('n', n)}</section>{/if}
|
||||
</main>
|
||||
@ -0,0 +1,33 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
async test({ assert, target }) {
|
||||
const [fork_a, fork_b, resolve_one, resolve_all, discard_a, commit_b] =
|
||||
target.querySelectorAll('button');
|
||||
const [output] = target.querySelectorAll('main');
|
||||
|
||||
fork_a.click();
|
||||
await tick();
|
||||
resolve_one.click();
|
||||
await tick();
|
||||
fork_b.click();
|
||||
await tick();
|
||||
resolve_one.click();
|
||||
await tick();
|
||||
discard_a.click();
|
||||
await tick();
|
||||
resolve_one.click();
|
||||
await tick();
|
||||
commit_b.click();
|
||||
await tick();
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
resolve_all.click();
|
||||
await tick();
|
||||
}
|
||||
|
||||
assert.htmlEqual(output.innerHTML, '<section>s</section>');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let show = $state(false);
|
||||
const registry = [];
|
||||
let a;
|
||||
let b;
|
||||
|
||||
function f(value) {
|
||||
return new Promise((resolve) => registry.push(() => resolve(value)));
|
||||
}
|
||||
|
||||
function resolve_all() { for (const r of registry.splice(0)) r(); }
|
||||
</script>
|
||||
|
||||
<button onclick={() => (a = fork(() => (show = true)))}>fork a</button>
|
||||
<button onclick={() => (b = fork(() => (show = true)))}>fork b</button>
|
||||
<button onclick={() => registry.shift()?.()}>resolve one</button>
|
||||
<button onclick={resolve_all}>resolve all</button>
|
||||
<button onclick={() => a?.discard()}>discard a</button>
|
||||
<button onclick={() => b?.commit()}>commit b</button>
|
||||
|
||||
<main>{#if show}<section>{await f('s')}</section>{/if}</main>
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
let { f, n } = $props();
|
||||
let x = $derived(await f(n));
|
||||
</script>
|
||||
|
||||
<p>{n}|{x}</p>
|
||||
@ -0,0 +1,53 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// A component with a top-level `await` inside a branch that a fork created is revealed by a real batch
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
async test({ assert, target, instance }) {
|
||||
const [fork_a, show, reset, resolve_all, discard, commit] = target.querySelectorAll('button');
|
||||
const [output] = target.querySelectorAll('main');
|
||||
|
||||
const settle = async () => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await tick();
|
||||
resolve_all.click();
|
||||
}
|
||||
await tick();
|
||||
};
|
||||
|
||||
for (const finish of ['discard', 'commit']) {
|
||||
for (const resolved of [true, false]) {
|
||||
const mode = `${finish}, ${resolved ? 'resolved' : 'pending'}`;
|
||||
|
||||
try {
|
||||
fork_a.click();
|
||||
await tick();
|
||||
if (resolved) {
|
||||
resolve_all.click();
|
||||
await tick();
|
||||
}
|
||||
assert.deepEqual(instance.log.splice(0), [1]);
|
||||
|
||||
show.click();
|
||||
await tick();
|
||||
assert.deepEqual(instance.log.splice(0), [0]);
|
||||
|
||||
if (finish === 'discard') discard.click();
|
||||
else commit.click();
|
||||
await settle();
|
||||
const n = finish === 'commit' ? 1 : 0;
|
||||
assert.htmlEqual(output.innerHTML, `<p>${n}|${n}</p>`);
|
||||
assert.deepEqual(instance.log, []);
|
||||
|
||||
reset.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, '');
|
||||
} catch (e) {
|
||||
/** @type {Error} */ (e).message = `${mode}: ${/** @type {Error} */ (e).message}`;
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,33 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let show = $state(false);
|
||||
let n = $state(0);
|
||||
export const log = [];
|
||||
const registry = [];
|
||||
let a;
|
||||
|
||||
function f(value) {
|
||||
log.push(value);
|
||||
return new Promise((resolve) => registry.push(() => resolve(value)));
|
||||
}
|
||||
|
||||
function set(values) {
|
||||
if ('show' in values) show = values.show;
|
||||
if ('n' in values) n = values.n;
|
||||
}
|
||||
|
||||
function resolve_all() {
|
||||
for (const r of registry.splice(0)) r();
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => (a = fork(() => set({ show: true, n: 1 })))}>fork</button>
|
||||
<button onclick={() => set({ show: true })}>show</button>
|
||||
<button onclick={() => set({ show: false, n: 0 })}>reset</button>
|
||||
<button onclick={resolve_all}>resolve all</button>
|
||||
<button onclick={() => a?.discard()}>discard</button>
|
||||
<button onclick={() => a?.commit()}>commit</button>
|
||||
|
||||
<main>{#if show}<Child {f} {n} />{/if}</main>
|
||||
@ -0,0 +1,53 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// The fallback of an each block, created by a fork, is adopted by a real batch: it has to run the
|
||||
// fallback's async expression itself, since the fork's result only exists in the fork
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
async test({ assert, target, instance }) {
|
||||
const [fork_empty, empty, reset, resolve_all, discard, commit] =
|
||||
target.querySelectorAll('button');
|
||||
const [output] = target.querySelectorAll('main');
|
||||
|
||||
const settle = async () => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await tick();
|
||||
resolve_all.click();
|
||||
}
|
||||
await tick();
|
||||
};
|
||||
|
||||
for (const finish of ['discard', 'commit']) {
|
||||
for (const resolved of [true, false]) {
|
||||
const mode = `${finish}, ${resolved ? 'resolved' : 'pending'}`;
|
||||
|
||||
try {
|
||||
fork_empty.click();
|
||||
if (resolved) {
|
||||
resolve_all.click();
|
||||
await tick();
|
||||
}
|
||||
assert.deepEqual(instance.log.splice(0), ['empty']);
|
||||
|
||||
empty.click();
|
||||
await tick();
|
||||
assert.deepEqual(instance.log.splice(0), ['empty']);
|
||||
|
||||
if (finish === 'discard') discard.click();
|
||||
else commit.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, '<p>empty</p>');
|
||||
assert.deepEqual(instance.log, []);
|
||||
|
||||
reset.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, '<b>0</b>');
|
||||
} catch (e) {
|
||||
/** @type {Error} */ (e).message = `${mode}: ${/** @type {Error} */ (e).message}`;
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,26 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let list = $state([0]);
|
||||
export const log = [];
|
||||
const registry = [];
|
||||
let current_fork;
|
||||
|
||||
function f(value) {
|
||||
log.push(value);
|
||||
return new Promise((resolve) => registry.push(() => resolve(value)));
|
||||
}
|
||||
|
||||
function resolve_all() {
|
||||
for (const r of registry.splice(0)) r();
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => (current_fork = fork(() => (list = [])))}>fork empty</button>
|
||||
<button onclick={() => (list = [])}>empty</button>
|
||||
<button onclick={() => (list = [0])}>reset</button>
|
||||
<button onclick={resolve_all}>resolve all</button>
|
||||
<button onclick={() => current_fork?.discard()}>discard</button>
|
||||
<button onclick={() => current_fork?.commit()}>commit</button>
|
||||
|
||||
<main>{#each list as x (x)}<b>{x}</b>{:else}<p>{await f('empty')}</p>{/each}</main>
|
||||
@ -0,0 +1,128 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
/** @param {number[]} list */
|
||||
const html = (list) =>
|
||||
list.map((x) => `<b>${x}|${x}|c</b>`).join('') + list.map((x) => `<s>${x}|${x}</s>`).join('');
|
||||
|
||||
// Items of keyed and unkeyed each blocks that were created by a fork (and whose async expressions
|
||||
// therefore only have results in that fork) are adopted by a real batch. The real batch has to run
|
||||
// their async expressions itself — with dependencies (unkeyed `x`) or without (keyed `x` is a plain
|
||||
// value, `'c'` is a constant) — whether the fork is discarded or committed afterwards. When the
|
||||
// fork is committed, its own results are used: nothing is fetched again.
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
async test({ assert, target, instance }) {
|
||||
const [
|
||||
reset_list,
|
||||
fork_list,
|
||||
real_list,
|
||||
fork_append_2,
|
||||
append_2,
|
||||
append_5,
|
||||
resolve_all,
|
||||
discard,
|
||||
commit
|
||||
] = target.querySelectorAll('button');
|
||||
const [output] = target.querySelectorAll('main');
|
||||
|
||||
const settle = async () => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await tick();
|
||||
resolve_all.click();
|
||||
}
|
||||
await tick();
|
||||
};
|
||||
|
||||
const reset = async () => {
|
||||
reset_list.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1]));
|
||||
instance.log.length = 0;
|
||||
};
|
||||
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1]));
|
||||
instance.log.length = 0;
|
||||
|
||||
for (const finish of ['discard', 'commit']) {
|
||||
try {
|
||||
// the fork creates items, the real batch reuses some of them (with equal and different values)
|
||||
fork_list.click();
|
||||
assert.deepEqual(
|
||||
instance.log.sort(),
|
||||
['cc', 'cc', 'k3', 'k2', 'u0', 'u1', 'u2', 'u3'].sort()
|
||||
);
|
||||
instance.log.length = 0;
|
||||
|
||||
real_list.click();
|
||||
if (finish === 'discard') discard.click();
|
||||
else commit.click();
|
||||
await settle();
|
||||
// the real write came last, so it wins either way
|
||||
assert.htmlEqual(output.innerHTML, html([3, 0, 1]));
|
||||
await reset();
|
||||
|
||||
// the fork's results are already in when the real batch adopts its items with the same values
|
||||
fork_append_2.click();
|
||||
resolve_all.click();
|
||||
await tick();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1]));
|
||||
instance.log.length = 0;
|
||||
|
||||
append_2.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1, 2]));
|
||||
// the fork's results only exist in the fork, so the real batch has to fetch them itself
|
||||
assert.deepEqual(instance.log.sort(), ['cc', 'k2', 'u2']);
|
||||
instance.log.length = 0;
|
||||
|
||||
if (finish === 'discard') discard.click();
|
||||
else commit.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1, 2]));
|
||||
assert.deepEqual(instance.log, []);
|
||||
await reset();
|
||||
|
||||
// the fork is finished while the real batch that adopted its items is still pending
|
||||
fork_append_2.click();
|
||||
instance.log.length = 0;
|
||||
append_2.click();
|
||||
await tick();
|
||||
assert.deepEqual(instance.log.sort(), ['cc', 'k2', 'u2']);
|
||||
instance.log.length = 0;
|
||||
|
||||
if (finish === 'discard') discard.click();
|
||||
else commit.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1, 2]));
|
||||
assert.deepEqual(instance.log, []);
|
||||
await reset();
|
||||
|
||||
// a real batch adopts an item with a different value after the fork's results are in
|
||||
// (TODO also commit the fork here, once the fork re-running the unkeyed item's expression
|
||||
// with the real world's new value no longer keeps the fork's outdated result)
|
||||
if (finish === 'discard') {
|
||||
fork_append_2.click();
|
||||
resolve_all.click();
|
||||
await tick();
|
||||
instance.log.length = 0;
|
||||
|
||||
append_5.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1, 5]));
|
||||
// keyed: a new item, unkeyed: the adopted item's input changed (and the fork revalidates it)
|
||||
assert.deepEqual(instance.log.sort(), ['cc', 'k5', 'u5', 'u5']);
|
||||
|
||||
discard.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1, 5]));
|
||||
await reset();
|
||||
}
|
||||
} catch (e) {
|
||||
/** @type {Error} */ (e).message = `${finish}: ${/** @type {Error} */ (e).message}`;
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,35 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let list = $state([0, 1]);
|
||||
export const log = [];
|
||||
const registry = [];
|
||||
let current_fork;
|
||||
|
||||
function f(tag, value) {
|
||||
log.push(`${tag}${value}`);
|
||||
return new Promise((resolve) => registry.push(() => resolve(value)));
|
||||
}
|
||||
|
||||
function resolve_all() {
|
||||
for (const r of registry.splice(0)) r();
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => (list = [0, 1])}>reset</button>
|
||||
<button onclick={() => (current_fork = fork(() => (list = [3, 2, 1, 0])))}>fork list</button>
|
||||
<button onclick={() => (list = [3, 0, 1])}>real list</button>
|
||||
<button onclick={() => (current_fork = fork(() => (list = [0, 1, 2])))}>fork append 2</button>
|
||||
<button onclick={() => (list = [0, 1, 2])}>append 2</button>
|
||||
<button onclick={() => (list = [0, 1, 5])}>append 5</button>
|
||||
<button onclick={resolve_all}>resolve all</button>
|
||||
<button onclick={() => current_fork?.discard()}>discard</button>
|
||||
<button onclick={() => current_fork?.commit()}>commit</button>
|
||||
|
||||
<main>
|
||||
<svelte:boundary>
|
||||
{#each list as x (x)}<b>{x}|{await f('k', x)}|{await f('c', 'c')}</b>{/each}
|
||||
{#each list as x}<s>{x}|{await f('u', x)}</s>{/each}
|
||||
{#snippet pending()}{/snippet}
|
||||
</svelte:boundary>
|
||||
</main>
|
||||
@ -0,0 +1,25 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
async test({ assert, target }) {
|
||||
const [fork_list, real_list, resolve_all, discard] = target.querySelectorAll('button');
|
||||
const [output] = target.querySelectorAll('main');
|
||||
|
||||
resolve_all.click();
|
||||
await tick();
|
||||
assert.htmlEqual(output.innerHTML, '<s>0|0</s><s>1|1</s>');
|
||||
|
||||
fork_list.click();
|
||||
real_list.click();
|
||||
discard.click();
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await tick();
|
||||
resolve_all.click();
|
||||
}
|
||||
await tick();
|
||||
assert.htmlEqual(output.innerHTML, '<s>3|3</s><s>0|0</s><s>1|1</s>');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let list = $state([0, 1]);
|
||||
const registry = [];
|
||||
let current_fork;
|
||||
|
||||
function f(value) {
|
||||
return new Promise((resolve) => registry.push(() => resolve(value)));
|
||||
}
|
||||
|
||||
function resolve_all() { for (const r of registry.splice(0)) r(); }
|
||||
</script>
|
||||
|
||||
<button onclick={() => (current_fork = fork(() => (list = [3, 2, 1, 0])))}>fork list</button>
|
||||
<button onclick={() => (list = [3, 0, 1])}>real list</button>
|
||||
<button onclick={resolve_all}>resolve all</button>
|
||||
<button onclick={() => current_fork?.discard()}>discard</button>
|
||||
|
||||
<main>
|
||||
<svelte:boundary>
|
||||
{#each list as x}<s>{x}|{await f(x)}</s>{/each}
|
||||
{#snippet pending()}{/snippet}
|
||||
</svelte:boundary>
|
||||
</main>
|
||||
@ -0,0 +1,78 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
/**
|
||||
* @param {number[]} list
|
||||
* @param {boolean} show
|
||||
*/
|
||||
const html = (list, show) =>
|
||||
list.map((x) => `<div>${x}|${x}${show ? `<p>${x}</p>` : ''}</div>`).join('');
|
||||
|
||||
// A fork creates an each item, and branches inside of it (and inside an existing item) that contain
|
||||
// async expressions. A real batch adopts the item first and the branches later, or both at once.
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
async test({ assert, target, instance }) {
|
||||
const [fork_a, list_and_show, list, show, reset, resolve_all, discard, commit] =
|
||||
target.querySelectorAll('button');
|
||||
const [output] = target.querySelectorAll('main');
|
||||
|
||||
const settle = async () => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await tick();
|
||||
resolve_all.click();
|
||||
}
|
||||
await tick();
|
||||
};
|
||||
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0], false));
|
||||
instance.log.length = 0;
|
||||
|
||||
for (const together of [false, true]) {
|
||||
for (const finish of ['discard', 'commit']) {
|
||||
const mode = `${together ? 'together' : 'separately'}, ${finish}`;
|
||||
|
||||
try {
|
||||
fork_a.click();
|
||||
resolve_all.click();
|
||||
await tick();
|
||||
assert.deepEqual(instance.log.splice(0).sort(), ['p0', 'p1', 'x1']);
|
||||
|
||||
if (!together) {
|
||||
// the item is adopted, the branch inside it stays the fork's
|
||||
list.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1], false));
|
||||
assert.deepEqual(instance.log.splice(0), ['x1']);
|
||||
|
||||
show.click();
|
||||
} else {
|
||||
list_and_show.click();
|
||||
}
|
||||
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1], true));
|
||||
assert.deepEqual(
|
||||
instance.log.splice(0).sort(),
|
||||
together ? ['p0', 'p1', 'x1'] : ['p0', 'p1']
|
||||
);
|
||||
|
||||
if (finish === 'discard') discard.click();
|
||||
else commit.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0, 1], true));
|
||||
assert.deepEqual(instance.log, []);
|
||||
|
||||
reset.click();
|
||||
await settle();
|
||||
assert.htmlEqual(output.innerHTML, html([0], false));
|
||||
instance.log.length = 0;
|
||||
} catch (e) {
|
||||
/** @type {Error} */ (e).message = `${mode}: ${/** @type {Error} */ (e).message}`;
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let list = $state([0]);
|
||||
let show = $state(false);
|
||||
export const log = [];
|
||||
const registry = [];
|
||||
let a;
|
||||
|
||||
function f(tag, value) {
|
||||
log.push(`${tag}${value}`);
|
||||
return new Promise((resolve) => registry.push(() => resolve(value)));
|
||||
}
|
||||
|
||||
function set(values) {
|
||||
if ('list' in values) list = values.list;
|
||||
if ('show' in values) show = values.show;
|
||||
}
|
||||
|
||||
function resolve_all() {
|
||||
for (const r of registry.splice(0)) r();
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => (a = fork(() => set({ list: [0, 1], show: true })))}>fork</button>
|
||||
<button onclick={() => set({ list: [0, 1], show: true })}>list and show</button>
|
||||
<button onclick={() => set({ list: [0, 1] })}>list</button>
|
||||
<button onclick={() => set({ show: true })}>show</button>
|
||||
<button onclick={() => set({ list: [0], show: false })}>reset</button>
|
||||
<button onclick={resolve_all}>resolve all</button>
|
||||
<button onclick={() => a?.discard()}>discard</button>
|
||||
<button onclick={() => a?.commit()}>commit</button>
|
||||
|
||||
<main>
|
||||
<svelte:boundary>
|
||||
{#each list as x (x)}
|
||||
<div>{x}|{await f('x', x)}{#if show}<p>{await f('p', x)}</p>{/if}</div>
|
||||
{/each}
|
||||
{#snippet pending()}{/snippet}
|
||||
</svelte:boundary>
|
||||
</main>
|
||||
Loading…
Reference in new issue