Svelte stores that remember previous values
npm install svelte-previous
!license
!build
Svelte stores that remember previous values!
This allows us to perform actions that depend on previous values, such as transitions between old and new values.
``bash`
$ npm i -D svelte-previous
Since Svelte automatically bundles all required dependencies, you only need to install this package as a dev dependency with the -D flag.
Visit the REPL demo.
withPrevious accepts an initial value, and returns a tuple comprising a Writable and a Readable store.
`svelte
transition from {$previousName} to {$currentName}.
`
withPrevious takes an options object as its second argument.
By default, withPrevious tracks one previous value.
To track more than one value, set numToTrack.
`svelte
from {$prev2} to {$prev1} to {$current}.
`
To initialize previous values with something besides null, pass an array of values from newest to oldest.
Missing values will be filled with null and extra values will be ignored.
`svelte
from {$prev2} to {$prev1} to {$current}.
`
Due to how reactivity is handled in Svelte, some assignments may assign the same value multiple times to a variable. Therefore, to prevent a single value from overwriting all previous values, a change in value is required before the current and previous values are updated.
Set requireChange = false to change this behaviour.
`ts`
const [current, previous] = withPrevious(0, { requireChange: false });
By default, equality is determined with the === operator. However, === only checks equality by reference when comparing objects.
Provide a custom isEqual function to compare objects.
`ts`
const [current, previous] = withPrevious(0, {
isEqual: (a, b) => a.name === b.name && a.age === b.age,
});
It is also possible to use lodash.isequal.
`ts
import isEqual from 'lodash.isequal';
const [current, previous] = withPrevious(0, {
isEqual: isEqual,
});
``