This is a fork for Svelte's store, adding a pipe
method.
Stores can be piped through a number of operators. Synchronous operators include:
map
, filter
, scan
, pluck
, concat
, tap
, take
, skip
, startWith
, withLatestFrom
, bufferCount
, and readonly
.
Async operators include debounce
, throttle
, bufferTime
and wait
.
Install with npm:
npm install 'svelte-pipeable-store';
I've also made a REPL with an example counter
import {
writable,
map, filter, scan,
pluck, concat, tap, take, skip,
debounce, throttle, buffer, wait
} from 'svelte-pipeable-store';
const counter = writable(0);
const score = counter.pipe(filter(n => n%2 === 0)) // only odd scores count
.pipe(scan((acc,n) => acc + n, 0));// add to total
const score_sheet = score.pipe(
map(n => `total: ${n}`), // you can put multiple
concat() // operators in one call to pipe
);
const score_elem = score.pipe( // if a store's state can update quickly
debounce(500), // you can use async operators to slow down updates
throttle(2000) // particularly if your pipeline has a bottleneck
wait(score => fetch(`/endpoint?score=${score}`)) // eg ajax, large DOM updates (or if they have transitions)
)
I've made a few operators, still Similarish syntax to RxJS. API docs
With just a few lines to Svelte's store can add a pipe
method to writable
and readable
stores.
function writable(value, start = noop) {
...
function pipe(...operators) {
return operators.reduce((src, operator) => operator(src), this);
}
return { set, update, subscribe, pipe };
}
function readable(value, start) {
const {subscribe, pipe} = writable(value, start);
return {subscribe, pipe}
}
The pipe
method takes one or more Operators.
Operators are functions that take a (source) store and return a (destination) store.
The minimal requirement for a store are now two methods subscribe
and pipe
:
Store = {
subscribe(fn) -> unsubscribe()
pipe(...operators) -> Store
}
Operator = Store -> Store