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