@crikey/stores-base
Types and functions for creating Svelte compatible stores.
@crikey/stores-base
stores further extend the svelte/store
contract to allow for additional features and extensibility.
See @crikey/stores-base for full documentation.
API
Store creation functions:
constant
- Create a Readable
store with a fixed constant value
readable
- Create a Readable
store
writable
- Create a Writable
store
derive
- Create a Readable
store derived from the resolved values of other stores
transform
- Create a Writable
store by applying transform functions when reading and writing values
Utility functions:
get
- Retrieve the value of a store
read_only
- Restrict a store to the Readable
interface
Type guards:
is_writable
- Type guard to determine if store is Writable
is_readable
- Type guard to determine if store is Readable
Trigger functions:
trigger_always
- Trigger at every available opportunity
trigger_strict_not_equal
- Trigger based on strict inequality
trigger_safe_not_equal
- Svelte compatible trigger - Trigger when not equal or value is complex
Installation
# pnpm
$ pnpm add @crikey/stores-base
# npm
$ npm add @crikey/stores-base
# yarn
$ yarn add @crikey/stores-base
Usage
This package is predominantly intended for internal use.
See individual APIs for strict usage instructions or browse the unit tests and usage from other packages in the mono repository.
Differences with Svelte stores
Definable trigger semantics
Svelte stores use a greedy change detection system to, whereby complex types are always considered to have changed.
e.g.
import { writable } from 'svelte/store';
const value = {};
const store = writable(value);
store.subscribe(value => console.log('changed'));
store.set(value);
// > changed
// > changed
@crikey/stores-base
stores allow for user defined trigger functions. This trigger function is
called for each Writable.set
and Writable.update
call, allowing for user defined
comparisons between the old value and the new value to determine if subscribers should be notified.
e.g.
import {writable, trigger_strict_not_equal } from '@crikey/stores-base';
const value = {};
const store = writable(trigger_strict_not_equal, value); // only trigger if old_value !== new_value
store.subscribe(value => console.log('changed'));
store.set(value);
// > changed
Asynchronous update
as well as set
@crikey stores extend the readable
, writable
, and derive
signatures
allowing calculations to asynchronously update
as well as set
their values.
e.g.
const store_a = writable(trigger_strict_not_equal, 1);
const auto_increment = derive(
trigger_strict_not_equal,
store_a,
(a, { update }) => {
const intervalId = setInterval(
() => { update(value => value + a); },
1000
);
return () => {
clearTimeout(intervalId);
}
},
0
);
auto_increment.subscribe(value => console.log('store value:', value));
await new Promise(resolve => {
setTimeout(resolve, 3800);
});
// > store value: 0
// > store value: 1
// > store value: 2
// > store value: 3
Subscriber execution order
In order to ensure reliable and predictable execution order for subscribers, stores utilize an internal action queue.
Whenever a store is changed, its active subscriptions are pushed onto a queue and executed in order. If more changes
result in more subscriptions being pushed onto the queue, they are added to the end of the current queue and everything
continues to be executed in FIFO order.
Svelte does not expose this queue and thus extensions are not able to maintain a pure FIFO order when mixed.
As a natural result, when mixing svelte stores and @crikey/stores
, execution order will not be strictly FIFO.
Unlimited dependencies
To avoid erroneous recalculations, {@link derive | derived} store types keep track of which inputs are being
recalculated (see Premature evaluation below). @crikey/stores-base
determines the most efficient approach
to this problem based on the number of inputs required.
svelte
store implementation details use a fixed tracking system allowing for a maximum of 32 inputs. Additional
inputs beyond this number will begin to behave incorrectly.
Note that this is an implementation detail and as such is likely to be improved at some point.
Premature evaluation
Ensuring a derived store value is evaluated against up-to-date inputs is non-trivial.
From the below examples, svelte and @crikey are comparable except for (e) where svelte stores may erroneously calculate
a derived value based off of atrophied inputs.
Some examples:
a) Simple single dependency
- As soon as
a
changes, d
is recalculated.
graph TD
a --> d
b) Simple dual dependency
- As soon as
a
or b
changes, d
is recalculated.
graph TD
a --> d
b --> d
c) Simple chained dependency
- As soon as
a
changes, b
is recalculated.
- As soon as
b
or c
changes, d
is recalculated.
graph TD
a --> b --> d
c --> d
d) Diamond dependency
- As soon as
a
changes, b
and c
are recalculated.
- As soon as
b
or c
changes, d
is recalculated.
graph TD
a --> b --> d
a --> c --> d
e) Diamond+ dependency
- As soon as
a
changes, b
, c
, and d
are recalculated.
- As soon as
b
or c
changes, d
is recalculated.
svelte:
A change to a
may result in d
being recalculated multiple times, sometimes using partially atrophied data from its
dependencies.
@crikey:
A change to a
will at most result in d
being recalculated once, after all its dependencies have been resolved.
graph TD
a --> d
a --> b --> d
a --> c --> d
Infinite recursion checks
Subscribing to a store from within its start function triggers a RecursionError rather returning the initial_value
Error handling
Uncaught errors in subscribers, start functions or derivation functions can now be handled via @{link set_store_runner}