Skip to content

Commit 1be9b8d

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

File tree

5 files changed

+109
-6
lines changed

5 files changed

+109
-6
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,9 @@ class Todo {
120120
}
121121
```
122122

123-
> [NOTE!] Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
123+
### Built-in classes
124+
125+
Svelte provides reactive implementations of built-in classes like `Set`, `Map`, `Date` and `URL` that can be imported from [`svelte/reactivity`](svelte-reactivity).
124126

125127
## `$state.raw`
126128

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,27 @@ let selected = $derived(items[index]);
9595

9696
...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array. If `items` was _not_ deeply reactive, mutating `selected` would have no effect.
9797

98+
## Destructuring
99+
100+
If you use destructuring with a `$derived` declaration, the resulting variables will all be reactive — this...
101+
102+
```js
103+
function stuff() { return { a: 1, b: 2, c: 3 } }
104+
// ---cut---
105+
let { a, b, c } = $derived(stuff());
106+
```
107+
108+
...is roughly equivalent to this:
109+
110+
```js
111+
function stuff() { return { a: 1, b: 2, c: 3 } }
112+
// ---cut---
113+
let _stuff = $derived(stuff());
114+
let a = $derived(_stuff.a);
115+
let b = $derived(_stuff.b);
116+
let c = $derived(_stuff.c);
117+
```
118+
98119
## Update propagation
99120

100121
Svelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').

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

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,47 @@ Effect cannot be created inside a `$derived` value that was not itself created i
8989
### effect_update_depth_exceeded
9090

9191
```
92-
Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
92+
Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
9393
```
9494

95+
If an effect updates some state that it also depends on, it will re-run, potentially in a loop:
96+
97+
```js
98+
let count = $state(0);
99+
100+
$effect(() => {
101+
// this both reads and writes `count`,
102+
// so will run in an infinite loop
103+
count += 1;
104+
});
105+
```
106+
107+
(Svelte intervenes before this can crash your browser tab.)
108+
109+
The same applies to array mutations, since these both read and write to the array:
110+
111+
```js
112+
let array = $state(['hello']);
113+
114+
$effect(() => {
115+
array.push('goodbye');
116+
});
117+
```
118+
119+
Note that it's fine for an effect to re-run itself as long as it 'settles':
120+
121+
```js
122+
let array = ['a', 'b', 'c'];
123+
// ---cut---
124+
$effect(() => {
125+
// this is okay, because sorting an already-sorted array
126+
// won't result in a mutation
127+
array.sort();
128+
});
129+
```
130+
131+
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.
132+
95133
### flush_sync_in_effect
96134

97135
```

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -344,10 +344,13 @@ Available since 5.7.0
344344

345345
</blockquote>
346346

347-
Returns a `subscribe` function that, if called in an effect (including expressions in the template),
348-
calls its `start` callback with an `update` function. Whenever `update` is called, the effect re-runs.
347+
Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.
348+
It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.
349349

350-
If `start` returns a function, it will be called when the effect is destroyed.
350+
If `subscribe` is called inside an effect (including indirectly, for example inside a getter),
351+
the `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.
352+
353+
If `start` returns a cleanup function, it will be called when the effect is destroyed.
351354

352355
If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
353356
are active, and the returned teardown function will only be called when all effects are destroyed.
@@ -376,6 +379,7 @@ export class MediaQuery {
376379
}
377380

378381
get current() {
382+
// This makes the getter reactive, if read in an effect
379383
this.#subscribe();
380384

381385
// Return the current state of the query, whether or not we're in an effect

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

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,47 @@ Effect cannot be created inside a `$derived` value that was not itself created i
9696
### effect_update_depth_exceeded
9797

9898
```
99-
Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
99+
Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
100100
```
101101

102+
If an effect updates some state that it also depends on, it will re-run, potentially in a loop:
103+
104+
```js
105+
let count = $state(0);
106+
107+
$effect(() => {
108+
// this both reads and writes `count`,
109+
// so will run in an infinite loop
110+
count += 1;
111+
});
112+
```
113+
114+
(Svelte intervenes before this can crash your browser tab.)
115+
116+
The same applies to array mutations, since these both read and write to the array:
117+
118+
```js
119+
let array = $state(['hello']);
120+
121+
$effect(() => {
122+
array.push('goodbye');
123+
});
124+
```
125+
126+
Note that it's fine for an effect to re-run itself as long as it 'settles':
127+
128+
```js
129+
let array = ['a', 'b', 'c'];
130+
// ---cut---
131+
$effect(() => {
132+
// this is okay, because sorting an already-sorted array
133+
// won't result in a mutation
134+
array.sort();
135+
});
136+
```
137+
138+
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.
139+
102140
### flush_sync_in_effect
103141

104142
```

0 commit comments

Comments
 (0)