mirror of https://github.com/sveltejs/svelte
parent
f828ea3c6a
commit
0f44733183
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
let { promise } = $props();
|
||||||
|
let value = $derived(await promise);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>{value}</p>
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
/** @type {(value: string) => void} */
|
||||||
|
let resolve;
|
||||||
|
|
||||||
|
const promise = new Promise((r) => {
|
||||||
|
resolve = r;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
props: { promise },
|
||||||
|
compileOptions: {
|
||||||
|
experimental: {
|
||||||
|
async: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
html: '<p>loading...</p> <p>Something outside</p>',
|
||||||
|
async test({ assert, target, serialize }) {
|
||||||
|
resolve('hello');
|
||||||
|
|
||||||
|
// wait enough microtasks for the async chain to fully resolve:
|
||||||
|
// promise.then(() => Promise.resolve()).finally(() => decrement_pending())
|
||||||
|
await new Promise((r) => setTimeout(r, 0));
|
||||||
|
flushSync();
|
||||||
|
|
||||||
|
const html = serialize(target);
|
||||||
|
assert.equal(
|
||||||
|
html,
|
||||||
|
'<root><p>hello</p> <p>Something inside</p> <p>Something outside</p></root>'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<script>
|
||||||
|
import Inner from './Inner.svelte';
|
||||||
|
let { promise } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:boundary>
|
||||||
|
<Inner {promise} />
|
||||||
|
<p>Something inside</p>
|
||||||
|
|
||||||
|
{#snippet pending()}
|
||||||
|
<p>loading...</p>
|
||||||
|
{/snippet}
|
||||||
|
</svelte:boundary>
|
||||||
|
<p>Something outside</p>
|
||||||
Loading…
Reference in new issue