Skip to content

Commit d138f34

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

2 files changed

Lines changed: 24 additions & 8 deletions

File tree

apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,17 @@ In essence, `$derived(expression)` is equivalent to `$derived.by(() => expressio
5252

5353
Anything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.
5454

55+
In addition, if an expression contains an [`await`](await-expressions), Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...
56+
57+
```js
58+
let a = Promise.resolve(1);
59+
let b = 2;
60+
// ---cut---
61+
let total = $derived(await a + b);
62+
```
63+
64+
...both `a` and `b` are tracked, even though `b` is only read once `a` has resolved, after the initial execution. (This does not apply to `await` in functions that are called by the expression, only the expression itself.)
65+
5566
To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
5667

5768
## Overriding derived values

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,22 +60,27 @@ Updates can overlap — a fast update will be reflected in the UI while an earli
6060
Svelte will do as much asynchronous work as it can in parallel. For example if you have two `await` expressions in your markup...
6161

6262
```svelte
63-
<p>{await one()}</p>
64-
<p>{await two()}</p>
63+
<p>{await one(x)}</p>
64+
<p>{await two(y)}</p>
6565
```
6666

6767
...both functions will run at the same time, as they are independent expressions, even though they are _visually_ sequential.
6868

6969
This does not apply to sequential `await` expressions inside your `<script>` or inside async functions — these run like any other asynchronous JavaScript. An exception is that independent `$derived` expressions will update independently, even though they will run sequentially when they are first created:
7070

7171
```js
72-
async function one() { return 1; }
73-
async function two() { return 2; }
72+
/** @param {number} x */
73+
async function one(x) { return x; }
74+
/** @param {number} y */
75+
async function two(y) { return y; }
76+
let x = $state(1);
77+
let y = $state(2);
7478
// ---cut---
75-
// these will run sequentially the first time,
76-
// but will update independently
77-
let a = $derived(await one());
78-
let b = $derived(await two());
79+
// `b` will not be created until `a` has resolved,
80+
// but once created they will update independently
81+
// even if `x` and `y` update simultaneously
82+
let a = $derived(await one(x));
83+
let b = $derived(await two(y));
7984
```
8085

8186
> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) warning

0 commit comments

Comments
 (0)