rename `derive` to `derived`

pull/2384/head
Conduitry 5 years ago
parent a4f360dd83
commit 6e46a18969

@ -244,21 +244,21 @@ const time = readable(new Date(), set => {
});
```
* `store = derive(a, callback: (a: any) => any)`
* `store = derive(a, callback: (a: any, set: (value: any) => void) => void)`
* `store = derive([a, ...b], callback: ([a: any, ...b: any[]]) => any)`
* `store = derive([a, ...b], callback: ([a: any, ...b: any[]], set: (value: any) => void) => void)`
* `store = derived(a, callback: (a: any) => any)`
* `store = derived(a, callback: (a: any, set: (value: any) => void) => void)`
* `store = derived([a, ...b], callback: ([a: any, ...b: any[]]) => any)`
* `store = derived([a, ...b], callback: ([a: any, ...b: any[]], set: (value: any) => void) => void)`
---
Derives a store from one or more other stores. Whenever those dependencies change, the callback runs.
In the simplest version, `derive` takes a single store, and the callback returns a derived value.
In the simplest version, `derived` takes a single store, and the callback returns a derived value.
```js
import { derive } from 'svelte/store';
import { derived } from 'svelte/store';
const doubled = derive(a, $a => $a * 2);
const doubled = derived(a, $a => $a * 2);
```
---
@ -266,9 +266,9 @@ const doubled = derive(a, $a => $a * 2);
The callback can set a value asynchronously by accepting a second argument, `set`, and calling it when appropriate.
```js
import { derive } from 'svelte/store';
import { derived } from 'svelte/store';
const delayed = derive(a, ($a, set) => {
const delayed = derived(a, ($a, set) => {
setTimeout(() => set($a), 1000);
});
```
@ -278,11 +278,11 @@ const delayed = derive(a, ($a, set) => {
In both cases, an array of arguments can be passed as the first argument instead of a single store.
```js
import { derive } from 'svelte/store';
import { derived } from 'svelte/store';
const summed = derive([a, b], ([$a, $b]) => $a + $b);
const summed = derived([a, b], ([$a, $b]) => $a + $b);
const delayed = derive([a, b], ([$a, $b], set) => {
const delayed = derived([a, b], ([$a, $b], set) => {
setTimeout(() => set($a + $b), 1000);
});
```

@ -1,4 +1,4 @@
import { readable, derive } from 'svelte/store';
import { readable, derived } from 'svelte/store';
export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => {
@ -12,7 +12,7 @@ export const time = readable(new Date(), function start(set) {
const start = new Date();
export const elapsed = derive(
export const elapsed = derived(
time,
$time => Math.round(($time - start) / 1000)
);

@ -1,4 +1,4 @@
import { readable, derive } from 'svelte/store';
import { readable, derived } from 'svelte/store';
export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => {
@ -12,7 +12,7 @@ export const time = readable(new Date(), function start(set) {
const start = new Date();
export const elapsed = derive(
export const elapsed = derived(
time,
$time => {}
);

@ -1,4 +1,4 @@
import { readable, derive } from 'svelte/store';
import { readable, derived } from 'svelte/store';
export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => {
@ -12,7 +12,7 @@ export const time = readable(new Date(), function start(set) {
const start = new Date();
export const elapsed = derive(
export const elapsed = derived(
time,
$time => Math.round(($time - start) / 1000)
);

@ -2,10 +2,10 @@
title: Derived stores
---
You can create a store whose value is based on the value of one or more *other* stores with `derive`. Building on our previous example, we can create a store that derives the time the page has been open:
You can create a store whose value is based on the value of one or more *other* stores with `derived`. Building on our previous example, we can create a store that derives the time the page has been open:
```js
export const elapsed = derive(
export const elapsed = derived(
time,
$time => Math.round(($time - start) / 1000)
);

@ -39,7 +39,7 @@ export function writable(value, start = noop) {
return { set, update, subscribe };
}
export function derive(stores, fn) {
export function derived(stores, fn) {
const single = !Array.isArray(stores);
if (single) stores = [stores];

@ -1,9 +1,9 @@
<script>
import { derive } from 'svelte/store';
import { derived } from 'svelte/store';
export let count;
const doubled = derive(count, $count => $count * 2);
const doubled = derived(count, $count => $count * 2);
</script>
<button on:click="{() => $count += 1}">count {$count}</button>

@ -1,5 +1,5 @@
import * as assert from 'assert';
import { readable, writable, derive, get } from '../../store.js';
import { readable, writable, derived, get } from '../../store.js';
describe('store', () => {
describe('writable', () => {
@ -100,10 +100,10 @@ describe('store', () => {
});
});
describe('derive', () => {
describe('derived', () => {
it('maps a single store', () => {
const a = writable(1);
const b = derive(a, n => n * 2);
const b = derived(a, n => n * 2);
const values = [];
@ -123,7 +123,7 @@ describe('store', () => {
it('maps multiple stores', () => {
const a = writable(2);
const b = writable(3);
const c = derive(([a, b]), ([a, b]) => a * b);
const c = derived(([a, b]), ([a, b]) => a * b);
const values = [];
@ -143,7 +143,7 @@ describe('store', () => {
it('passes optional set function', () => {
const number = writable(0);
const evens = derive(number, (n, set) => {
const evens = derived(number, (n, set) => {
if (n % 2 === 0) set(n);
});
@ -169,9 +169,9 @@ describe('store', () => {
it('prevents glitches', () => {
const lastname = writable('Jekyll');
const firstname = derive(lastname, n => n === 'Jekyll' ? 'Henry' : 'Edward');
const firstname = derived(lastname, n => n === 'Jekyll' ? 'Henry' : 'Edward');
const fullname = derive([firstname, lastname], names => names.join(' '));
const fullname = derived([firstname, lastname], names => names.join(' '));
const values = [];

Loading…
Cancel
Save