Skip to content

Commit a6ee8ad

Browse files
Sync svelte docs (#1633)
sync svelte docs Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
1 parent 9bc1184 commit a6ee8ad

File tree

4 files changed

+160
-0
lines changed

4 files changed

+160
-0
lines changed

apps/svelte.dev/content/docs/svelte/03-template-syntax/19-await-expressions.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,54 @@ If a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, tha
136136

137137
> [!NOTE] In the future, we plan to add a streaming implementation that renders the content in the background.
138138
139+
## Forking
140+
141+
The [`fork(...)`](svelte#fork) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.
142+
143+
```svelte
144+
<script>
145+
import { fork } from 'svelte';
146+
import Menu from './Menu.svelte';
147+
148+
let open = $state(false);
149+
150+
/** @type {import('svelte').Fork | null} */
151+
let pending = null;
152+
153+
function preload() {
154+
pending ??= fork(() => {
155+
open = true;
156+
});
157+
}
158+
159+
function discard() {
160+
pending?.discard();
161+
pending = null;
162+
}
163+
</script>
164+
165+
<button
166+
onfocusin={preload}
167+
onfocusout={discard}
168+
onpointerenter={preload}
169+
onpointerleave={discard}
170+
onclick={() => {
171+
pending?.commit();
172+
pending = null;
173+
174+
// in case `pending` didn't exist
175+
// (if it did, this is a no-op)
176+
open = true;
177+
}}
178+
>open menu</button>
179+
180+
{#if open}
181+
<!-- any async work inside this component will start
182+
as soon as the fork is created -->
183+
<Menu onclose={() => open = false} />
184+
{/if}
185+
```
186+
139187
## Caveats
140188

141189
As an experimental feature, the details of how `await` is handled (and related APIs like `$effect.pending()`) are subject to breaking changes outside of a semver major release, though we intend to keep such changes to a bare minimum.

apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,12 @@ $effect(() => {
130130

131131
Often when encountering this issue, the value in question shouldn't be state (for example, if you are pushing to a `logs` array in an effect, make `logs` a normal array rather than `$state([])`). In the rare cases where you really _do_ need to write to state in an effect — [which you should avoid]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency.
132132

133+
### experimental_async_fork
134+
135+
```
136+
Cannot use `fork(...)` unless the `experimental.async` compiler option is `true`
137+
```
138+
133139
### flush_sync_in_effect
134140

135141
```
@@ -140,6 +146,18 @@ The `flushSync()` function can be used to flush any pending effects synchronousl
140146

141147
This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
142148

149+
### fork_discarded
150+
151+
```
152+
Cannot commit a fork that was already committed or discarded
153+
```
154+
155+
### fork_timing
156+
157+
```
158+
Cannot create a fork inside an effect or when state changes are pending
159+
```
160+
143161
### get_abort_signal_outside_reaction
144162

145163
```

apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
createEventDispatcher,
1717
createRawSnippet,
1818
flushSync,
19+
fork,
1920
getAbortSignal,
2021
getAllContexts,
2122
getContext,
@@ -316,6 +317,38 @@ function flushSync<T = void>(fn?: (() => T) | undefined): T;
316317

317318

318319

320+
## fork
321+
322+
<blockquote class="since note">
323+
324+
Available since 5.42
325+
326+
</blockquote>
327+
328+
Creates a 'fork', in which state changes are evaluated but not applied to the DOM.
329+
This is useful for speculatively loading data (for example) when you suspect that
330+
the user is about to take some action.
331+
332+
Frameworks like SvelteKit can use this to preload data when the user touches or
333+
hovers over a link, making any subsequent navigation feel instantaneous.
334+
335+
The `fn` parameter is a synchronous function that modifies some state. The
336+
state changes will be reverted after the fork is initialised, then reapplied
337+
if and when the fork is eventually committed.
338+
339+
When it becomes clear that a fork will _not_ be committed (e.g. because the
340+
user navigated elsewhere), it must be discarded to avoid leaking memory.
341+
342+
<div class="ts-block">
343+
344+
```dts
345+
function fork(fn: () => void): Fork;
346+
```
347+
348+
</div>
349+
350+
351+
319352
## getAbortSignal
320353

321354
Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](/docs/svelte/$derived) or [effect](/docs/svelte/$effect) re-runs or is destroyed.
@@ -938,6 +971,49 @@ interface EventDispatcher<
938971
<div class="ts-block-property-details"></div>
939972
</div></div>
940973

974+
## Fork
975+
976+
<blockquote class="since note">
977+
978+
Available since 5.42
979+
980+
</blockquote>
981+
982+
Represents work that is happening off-screen, such as data being preloaded
983+
in anticipation of the user navigating
984+
985+
<div class="ts-block">
986+
987+
```dts
988+
interface Fork {/*…*/}
989+
```
990+
991+
<div class="ts-block-property">
992+
993+
```dts
994+
commit(): Promise<void>;
995+
```
996+
997+
<div class="ts-block-property-details">
998+
999+
Commit the fork. The promise will resolve once the state change has been applied
1000+
1001+
</div>
1002+
</div>
1003+
1004+
<div class="ts-block-property">
1005+
1006+
```dts
1007+
discard(): void;
1008+
```
1009+
1010+
<div class="ts-block-property-details">
1011+
1012+
Discard the fork
1013+
1014+
</div>
1015+
</div></div>
1016+
9411017
## MountOptions
9421018

9431019
Defines the options accepted by the `mount()` function.

apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,12 @@ $effect(() => {
137137

138138
Often when encountering this issue, the value in question shouldn't be state (for example, if you are pushing to a `logs` array in an effect, make `logs` a normal array rather than `$state([])`). In the rare cases where you really _do_ need to write to state in an effect — [which you should avoid]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency.
139139

140+
### experimental_async_fork
141+
142+
```
143+
Cannot use `fork(...)` unless the `experimental.async` compiler option is `true`
144+
```
145+
140146
### flush_sync_in_effect
141147

142148
```
@@ -147,6 +153,18 @@ The `flushSync()` function can be used to flush any pending effects synchronousl
147153

148154
This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
149155

156+
### fork_discarded
157+
158+
```
159+
Cannot commit a fork that was already committed or discarded
160+
```
161+
162+
### fork_timing
163+
164+
```
165+
Cannot create a fork inside an effect or when state changes are pending
166+
```
167+
150168
### get_abort_signal_outside_reaction
151169

152170
```

0 commit comments

Comments
 (0)