rename `derive` to `derived`

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

@ -244,21 +244,21 @@ const time = readable(new Date(), set => {
}); });
``` ```
* `store = derive(a, callback: (a: any) => any)` * `store = derived(a, callback: (a: any) => any)`
* `store = derive(a, callback: (a: any, set: (value: any) => void) => void)` * `store = derived(a, callback: (a: any, set: (value: any) => void) => void)`
* `store = derive([a, ...b], callback: ([a: any, ...b: any[]]) => any)` * `store = derived([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, ...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. 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 ```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. The callback can set a value asynchronously by accepting a second argument, `set`, and calling it when appropriate.
```js ```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); 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. In both cases, an array of arguments can be passed as the first argument instead of a single store.
```js ```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); 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) { export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => { const interval = setInterval(() => {
@ -12,7 +12,7 @@ export const time = readable(new Date(), function start(set) {
const start = new Date(); const start = new Date();
export const elapsed = derive( export const elapsed = derived(
time, time,
$time => Math.round(($time - start) / 1000) $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) { export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => { const interval = setInterval(() => {
@ -12,7 +12,7 @@ export const time = readable(new Date(), function start(set) {
const start = new Date(); const start = new Date();
export const elapsed = derive( export const elapsed = derived(
time, time,
$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) { export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => { const interval = setInterval(() => {
@ -12,7 +12,7 @@ export const time = readable(new Date(), function start(set) {
const start = new Date(); const start = new Date();
export const elapsed = derive( export const elapsed = derived(
time, time,
$time => Math.round(($time - start) / 1000) $time => Math.round(($time - start) / 1000)
); );

@ -2,10 +2,10 @@
title: Derived stores 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 ```js
export const elapsed = derive( export const elapsed = derived(
time, time,
$time => Math.round(($time - start) / 1000) $time => Math.round(($time - start) / 1000)
); );

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

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

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

Loading…
Cancel
Save