mirror of https://github.com/sveltejs/svelte
chore: use queue_microtask on `#await` again (#12647)
Now that we've made `mount` and `hydrate` not call `flushSync` anymore, we can go back to using `queue_microtask` inside `#await`, which means people who want to synchronously see the pending block can do so using `flushSync` (as validated by our tests). This essentially reverts #12274animation-params
Simon H
2 months ago
committed by
GitHub
parent
32c4e47060
commit
85f2f161ed
@ -1,4 +1,4 @@
|
||||
<div class="a svelte-xyz"></div>
|
||||
<div class="b svelte-xyz"></div>
|
||||
<div class="g svelte-xyz"></div>
|
||||
<div class="h svelte-xyz"></div>
|
||||
<div class="d svelte-xyz"></div>
|
||||
<div class="f svelte-xyz"></div>
|
||||
<div class="h svelte-xyz"></div>
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="a svelte-xyz"></div>
|
||||
<div class="c svelte-xyz"></div>
|
||||
<div class="e svelte-xyz"></div>
|
||||
<div class="b svelte-xyz"></div>
|
||||
<div class="e svelte-xyz"></div>
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="a svelte-xyz"></div>
|
||||
<div class="b svelte-xyz"></div>
|
||||
<div class="g svelte-xyz"></div>
|
||||
<div class="h svelte-xyz"></div>
|
||||
<div class="d svelte-xyz"></div>
|
||||
<div class="f svelte-xyz"></div>
|
||||
<div class="h svelte-xyz"></div>
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="a svelte-xyz"></div>
|
||||
<div class="c svelte-xyz"></div>
|
||||
<div class="e svelte-xyz"></div>
|
||||
<div class="b svelte-xyz"></div>
|
||||
<div class="e svelte-xyz"></div>
|
||||
@ -0,0 +1,68 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [b1, b2, b3] = target.querySelectorAll('button');
|
||||
|
||||
// not flushing means we wait a tick before showing the pending state ...
|
||||
b2.click();
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Clear</button> <button>Immediate</button> <button>Takes time</button>`
|
||||
);
|
||||
|
||||
// ... and show the then state directly if the promise resolved by then
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Clear</button> <button>Immediate</button> <button>Takes time</button> then`
|
||||
);
|
||||
|
||||
// reset
|
||||
b1.click();
|
||||
flushSync();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Clear</button> <button>Immediate</button> <button>Takes time</button>`
|
||||
);
|
||||
|
||||
// flushing means we show the pending state immediately
|
||||
b2.click();
|
||||
flushSync();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Clear</button> <button>Immediate</button> <button>Takes time</button> pending`
|
||||
);
|
||||
|
||||
await Promise.resolve();
|
||||
b1.click();
|
||||
flushSync();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Clear</button> <button>Immediate</button> <button>Takes time</button>`
|
||||
);
|
||||
|
||||
// when not flushing ...
|
||||
b3.click();
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Clear</button> <button>Immediate</button> <button>Takes time</button>`
|
||||
);
|
||||
|
||||
// ... we show the pending state after a tick when the promise hasn't resolved by then
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Clear</button> <button>Immediate</button> <button>Takes time</button> pending`
|
||||
);
|
||||
|
||||
await new Promise((r) => setTimeout(r, 110));
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Clear</button> <button>Immediate</button> <button>Takes time</button> then`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
let { promise } = $props();
|
||||
</script>
|
||||
|
||||
{#await promise}
|
||||
pending
|
||||
{:then value}
|
||||
then {value}
|
||||
{/await}
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import Await from './await.svelte';
|
||||
|
||||
let promise = $state();
|
||||
</script>
|
||||
|
||||
<button onclick={() => (promise = null)}>Clear</button>
|
||||
<button onclick={() => (promise = Promise.resolve())}>Immediate</button>
|
||||
<button onclick={() => (promise = new Promise((r) => setTimeout(r, 100)))}>Takes time</button>
|
||||
|
||||
{#if promise}
|
||||
<Await {promise} />
|
||||
{/if}
|
||||
Loading…
Reference in new issue