mirror of https://github.com/sveltejs/svelte
parent
1e4547b005
commit
e313292ccf
@ -0,0 +1,54 @@
|
||||
---
|
||||
title: await
|
||||
---
|
||||
|
||||
As of Svelte 5.36, you can use the `await` keyword inside your components in three places where it was previously unavailable:
|
||||
|
||||
- at the top level of your component's `<script>`
|
||||
- inside `$derived(...)` declarations
|
||||
- inside your markup
|
||||
|
||||
This feature is currently experimental, and you must opt in by adding the `experimental.async` option wherever you [configure](https://svelte.dev/docs/kit/configuration) Svelte, usually `svelte.config.js`:
|
||||
|
||||
```js
|
||||
/// file: svelte.config.js
|
||||
export default {
|
||||
compilerOptions: {
|
||||
experimenntal: {
|
||||
async: true
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
The experimental flag will be removed in Svelte 6.
|
||||
|
||||
## Boundaries
|
||||
|
||||
Currently, you can only use `await` inside a [`<svelte:boundary>`](svelte-boundary) with a `pending` snippet:
|
||||
|
||||
```svelte
|
||||
<svelte:boundary>
|
||||
<MyApp />
|
||||
|
||||
{#snippet pending()}
|
||||
<p>loading...</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
```
|
||||
|
||||
This restriction will be lifted once Svelte supports asynchronous server-side rendering.
|
||||
|
||||
> In the [playground](/playground), your app is rendered inside a boundary with an empty pending snippet, so that you can use `await` without having to create one.
|
||||
|
||||
## Synchronized updates
|
||||
|
||||
TODO
|
||||
|
||||
## Caveats
|
||||
|
||||
TODO
|
||||
|
||||
## Breaking changes
|
||||
|
||||
TODO
|
Loading…
Reference in new issue