You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -105,10 +105,10 @@ Test samples are kept in `/test/xxx/samples` folder.
105
105
pnpm test validator
106
106
```
107
107
108
-
1. To filter tests _within_ a test suite, use `pnpm test <suite-name> -- -t <test-name>`, for example:
108
+
1. To filter tests _within_ a test suite, use `pnpm test <suite-name> -t <test-name>`, for example:
109
109
110
110
```bash
111
-
pnpm test validator -- -t a11y-alt-text
111
+
pnpm test validator -t a11y-alt-text
112
112
```
113
113
114
114
(You can also do `FILTER=<test-name> pnpm test <suite-name>` which removes other tests rather than simply skipping them — this will result in faster and more compact test results, but it's non-idiomatic. Choose your fighter.)
Copy file name to clipboardExpand all lines: documentation/docs/02-runes/02-$state.md
+4-2Lines changed: 4 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -50,7 +50,7 @@ todos.push({
50
50
});
51
51
```
52
52
53
-
> [!NOTE] When you update properties of proxies, the original object is _not_ mutated.
53
+
> [!NOTE] When you update properties of proxies, the original object is _not_ mutated. If you need to use your own proxy handlers in a state proxy, [you should wrap the object _after_ wrapping it in `$state`](https://svelte.dev/playground/hello-world?version=latest#H4sIAAAAAAAACpWR3WoDIRCFX2UqhWyIJL3erAulL9C7XnQLMe5ksbUqOpsfln33YuyGFNJC8UKdc2bOhw7Myk9kJXsJ0nttO9jcR5KEG9AWJDwHdzwxznbaYGTl68Do5JM_FRifuh-9X8Y9Gkq1rYx4q66cJbQUWcmqqIL2VDe2IYMEbvuOikBADi-GJDSkXG-phId0G-frye2DO2psQYDFQ0Ys8gQO350dUkEydEg82T0GOs0nsSG9g2IqgxACZueo2ZUlpdvoDC6N64qsg1QKY8T2bpZp8gpIfbCQ85Zn50Ud82HkeY83uDjspenxv3jXcSDyjPWf9L1vJf0GH666J-jLu1ery4dV257IWXBWGa0-xFDMQdTTn2ScxWKsn86ROsLwQxqrVR5QM84Ij8TKFD2-cUZSm4O2LSt30kQcvwCgCmfZnAIAAA==).
54
54
55
55
Note that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:
56
56
@@ -119,7 +119,9 @@ class Todo {
119
119
}
120
120
```
121
121
122
-
> Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
122
+
### Built-in classes
123
+
124
+
Svelte provides reactive implementations of built-in classes like `Set`, `Map`, `Date` and `URL` that can be imported from [`svelte/reactivity`](svelte-reactivity).
Copy file name to clipboardExpand all lines: documentation/docs/02-runes/03-$derived.md
+21Lines changed: 21 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -94,6 +94,27 @@ let selected = $derived(items[index]);
94
94
95
95
...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.
96
96
97
+
## Destructuring
98
+
99
+
If you use destructuring with a `$derived` declaration, the resulting variables will all be reactive — this...
100
+
101
+
```js
102
+
functionstuff() { return { a:1, b:2, c:3 } }
103
+
// ---cut---
104
+
let { a, b, c } =$derived(stuff());
105
+
```
106
+
107
+
...is roughly equivalent to this:
108
+
109
+
```js
110
+
functionstuff() { return { a:1, b:2, c:3 } }
111
+
// ---cut---
112
+
let _stuff =$derived(stuff());
113
+
let a =$derived(_stuff.a);
114
+
let b =$derived(_stuff.b);
115
+
let c =$derived(_stuff.c);
116
+
```
117
+
97
118
## Update propagation
98
119
99
120
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').
Copy file name to clipboardExpand all lines: documentation/docs/02-runes/04-$effect.md
+15Lines changed: 15 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -221,6 +221,21 @@ The `$effect.tracking` rune is an advanced feature that tells you whether or not
221
221
222
222
It is used to implement abstractions like [`createSubscriber`](/docs/svelte/svelte-reactivity#createSubscriber), which will create listeners to update reactive values but _only_ if those values are being tracked (rather than, for example, read inside an event handler).
223
223
224
+
## `$effect.pending`
225
+
226
+
When using [`await`](await-expressions) in components, the `$effect.pending()` rune tells you how many promises are pending in the current [boundary](svelte-boundary), not including child boundaries ([demo](/playground/untitled#H4sIAAAAAAAAE3WRMU_DMBCF_8rJdHDUqilILGkaiY2RgY0yOPYZWbiOFV8IleX_jpMUEAIWS_7u-d27c2ROnJBV7B6t7WDsequAozKEqmAbpo3FwKqnyOjsJ90EMr-8uvN-G97Q0sRaEfAvLjtH6CjbsDrI3nhqju5IFgkEHGAVSBDy62L_SdtvejPTzEU4Owl6cJJM50AoxcUG2gLiVM31URgChyM89N3JBORcF3BoICA9mhN2A3G9gdvdrij2UJYgejLaSCMsKLTivNj0SEOf7WEN7ZwnHV1dfqd2dTsQ5QCdk9bI10PkcxexXqcmH3W51Jt_le2kbH8os9Y3UaTcNLYpDx-Xab6GTHXpZ128MhpWqDVK2np0yrgXXqQpaLa4APDLBkIF8bd2sYql0Sn_DeE7sYr6AdNzvgljR-MUq7SwAdMHeUtgHR4CAAA=)):
227
+
228
+
```svelte
229
+
<button onclick={() => a++}>a++</button>
230
+
<button onclick={() => b++}>b++</button>
231
+
232
+
<p>{a} + {b} = {await add(a, b)}</p>
233
+
234
+
{#if $effect.pending()}
235
+
<p>pending promises: {$effect.pending()}</p>
236
+
{/if}
237
+
```
238
+
224
239
## `$effect.root`
225
240
226
241
The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for the creation of effects outside of the component initialisation phase.
0 commit comments