mirror of https://github.com/sveltejs/svelte
parent
58842f5795
commit
7b19d12d34
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: async fragments
|
@ -0,0 +1,16 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<h1>Loading...</h1>`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<h1>Hello, world!</h1>
|
||||||
|
<input type="text"/>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,23 @@
|
|||||||
|
<script>
|
||||||
|
let name = $state('world');
|
||||||
|
/**
|
||||||
|
* @template T
|
||||||
|
* @param {T} value
|
||||||
|
* @param {number} ms
|
||||||
|
* @returns {Promise<T>}
|
||||||
|
*/
|
||||||
|
function wait(value, ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms, value));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<svelte:boundary>
|
||||||
|
{#snippet pending()}
|
||||||
|
<h1>Loading...</h1>
|
||||||
|
{/snippet}
|
||||||
|
{#snippet greet()}
|
||||||
|
{@const greeting = await wait(`Hello, ${name}!`, 50)}
|
||||||
|
<h1>{greeting}</h1>
|
||||||
|
<input type="text" bind:value={name} />
|
||||||
|
{/snippet}
|
||||||
|
{@render greet()}
|
||||||
|
</svelte:boundary>
|
Loading…
Reference in new issue