Skip to content

Commit b2b7bd1

Browse files
committed
Document new update param to store callbacks
1 parent 10ab317 commit b2b7bd1

File tree

1 file changed

+24
-7
lines changed

1 file changed

+24
-7
lines changed

site/content/docs/03-run-time.md

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,7 @@ This makes it possible to wrap almost any other reactive state handling library
268268
store = writable(value?: any)
269269
```
270270
```js
271-
store = writable(value?: any, start?: (set: (value: any) => void) => () => void)
271+
store = writable(value?: any, start?: (set: (value: any) => void, update?: (fn: any => any) => void) => () => void)
272272
```
273273

274274
---
@@ -295,7 +295,7 @@ count.update(n => n + 1); // logs '2'
295295

296296
---
297297

298-
If a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a `set` function which changes the value of the store. It must return a `stop` function that is called when the subscriber count goes from one to zero.
298+
If a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a `set` function which changes the value of the store, and optionally an `update` function which works like the `update` method on the store, taking a callback to calculate the store's new value from its old value. It must return a `stop` function that is called when the subscriber count goes from one to zero.
299299

300300
```js
301301
import { writable } from 'svelte/store';
@@ -338,6 +338,16 @@ const time = readable(null, set => {
338338

339339
return () => clearInterval(interval);
340340
});
341+
342+
const ticktock = readable(null, (set, update) => {
343+
set('tick');
344+
345+
const interval = setInterval(() => {
346+
update(sound => sound === 'tick' ? 'tock' : 'tick');
347+
}, 1000);
348+
349+
return () => clearInterval(interval);
350+
});
341351
```
342352

343353
#### `derived`
@@ -346,13 +356,13 @@ const time = readable(null, set => {
346356
store = derived(a, callback: (a: any) => any)
347357
```
348358
```js
349-
store = derived(a, callback: (a: any, set: (value: any) => void) => void | () => void, initial_value: any)
359+
store = derived(a, callback: (a: any, set: (value: any) => void, update?: (fn: any => any) => void) => void | () => void, initial_value: any)
350360
```
351361
```js
352362
store = derived([a, ...b], callback: ([a: any, ...b: any[]]) => any)
353363
```
354364
```js
355-
store = derived([a, ...b], callback: ([a: any, ...b: any[]], set: (value: any) => void) => void | () => void, initial_value: any)
365+
store = derived([a, ...b], callback: ([a: any, ...b: any[]], set: (value: any) => void, update?: (fn: any => any) => void) => void | () => void, initial_value: any)
356366
```
357367

358368
---
@@ -369,16 +379,23 @@ const doubled = derived(a, $a => $a * 2);
369379

370380
---
371381

372-
The callback can set a value asynchronously by accepting a second argument, `set`, and calling it when appropriate.
382+
The callback can set a value asynchronously by accepting a second argument, `set`, and an optional third argument, `update`, calling either or both of them when appropriate.
373383

374-
In this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` is first called.
384+
In this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` or `update` is first called. If no initial value is specified, the store's initial value will be `undefined`.
375385

376386
```js
377387
import { derived } from 'svelte/store';
378388

379389
const delayed = derived(a, ($a, set) => {
380390
setTimeout(() => set($a), 1000);
381391
}, 'one moment...');
392+
393+
const delayedIncrement = derived(a, ($a, set, update) => {
394+
set($a);
395+
setTimeout(() => update(x => x + 1), 1000);
396+
// every time $a produces a value, this produces two
397+
// values, $a immediately and then $a + 1 a second later
398+
});
382399
```
383400

384401
---
@@ -808,7 +825,7 @@ The `crossfade` function creates a pair of [transitions](docs#transition_fn) cal
808825
* `delay` (`number`, default 0) — milliseconds before starting
809826
* `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
810827
* `easing` (`function`, default `cubicOut`) — an [easing function](docs#svelte_easing)
811-
* `fallback` (`function`) — A fallback [transition](docs#transition_fn) to use for send when there is no matching element being received, and for receive when there is no element being sent.
828+
* `fallback` (`function`) — A fallback [transition](docs#transition_fn) to use for send when there is no matching element being received, and for receive when there is no element being sent.
812829

813830
```sv
814831
<script>

0 commit comments

Comments
 (0)