mirror of https://github.com/sveltejs/svelte
parent
302dff234b
commit
b608ee24c8
@ -0,0 +1,29 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let queue: Array<{ deferred: PromiseWithResolvers<number>; value: number }> = [];
|
||||||
|
let inited = false;
|
||||||
|
|
||||||
|
function push(value: number) {
|
||||||
|
const deferred = Promise.withResolvers<number>();
|
||||||
|
queue.push({ deferred, value });
|
||||||
|
|
||||||
|
if (!inited) {
|
||||||
|
inited = true;
|
||||||
|
shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
return deferred.promise;
|
||||||
|
}
|
||||||
|
|
||||||
|
function shift() {
|
||||||
|
const next = queue.shift();
|
||||||
|
next?.deferred.resolve(next.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
let n = $state(0);
|
||||||
|
let current = $derived(await push(n));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={shift}>shift</button>
|
||||||
|
<button onclick={() => n += 1}>increment</button>
|
||||||
|
|
||||||
|
<p>{n}: {Math.min(current, 3)}</p>
|
@ -0,0 +1,41 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<p>pending...</p>`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>shift</button>
|
||||||
|
<button>increment</button>
|
||||||
|
<p>0: 0</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
const [shift, increment] = target.querySelectorAll('button');
|
||||||
|
const [p] = target.querySelectorAll('p');
|
||||||
|
|
||||||
|
for (let i = 1; i < 5; i += 1) {
|
||||||
|
flushSync(() => increment.click());
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 1; i < 5; i += 1) {
|
||||||
|
shift.click();
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
|
||||||
|
assert.equal(p.innerHTML, `${i}: ${i}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import Component from './Component.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:boundary>
|
||||||
|
<Component />
|
||||||
|
|
||||||
|
{#snippet pending()}
|
||||||
|
<p>pending...</p>
|
||||||
|
{/snippet}
|
||||||
|
</svelte:boundary>
|
Loading…
Reference in new issue