mirror of https://github.com/sveltejs/svelte
parent
0d51dbae32
commit
f5e0751f0f
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: wait a microtask for await blocks to reduce UI churn
|
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
$effect(() => {
|
||||||
|
console.log('mounting Pending.svelte');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>pending</p>
|
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
let { value } = $props();
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
console.log('mounting Then.svelte');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>then {value}</p>
|
@ -0,0 +1,30 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target, logs }) {
|
||||||
|
const [b1, b2] = target.querySelectorAll('button');
|
||||||
|
b1.click();
|
||||||
|
await Promise.resolve();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<p>then a</p><button>Show Promise A</button><button>Show Promise B</button>`
|
||||||
|
);
|
||||||
|
b2.click();
|
||||||
|
await Promise.resolve();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>Show Promise A</button><button>Show Promise B</button>`
|
||||||
|
);
|
||||||
|
await Promise.resolve();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<p>then b</p><button>Show Promise A</button><button>Show Promise B</button>`
|
||||||
|
);
|
||||||
|
|
||||||
|
assert.deepEqual(logs, [
|
||||||
|
'mounting Pending.svelte',
|
||||||
|
'mounting Then.svelte',
|
||||||
|
'mounting Then.svelte'
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
import Pending from "./Pending.svelte"
|
||||||
|
import Then from './Then.svelte';
|
||||||
|
|
||||||
|
const promise_a = Promise.resolve('a')
|
||||||
|
const promise_b = Promise.resolve('b')
|
||||||
|
|
||||||
|
let current_promise = $state(promise_a);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#await current_promise}
|
||||||
|
<Pending />
|
||||||
|
{:then value}
|
||||||
|
<Then {value} />
|
||||||
|
{/await}
|
||||||
|
|
||||||
|
<button onclick={()=>{current_promise = promise_a}}>Show Promise A</button>
|
||||||
|
<button onclick={()=>{current_promise = promise_b}}>Show Promise B</button>
|
Loading…
Reference in new issue