Skip to content

Commit 1be9b8d

Browse files
github-actions[bot]svelte-docs-bot[bot]
github-actions[bot]
and
svelte-docs-bot[bot]
authored
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy