svelte-previous

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.

Installation

$ 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.

Demo

Visit the REPL demo.

Usage

withPrevious accepts an initial value, and returns a tuple comprising a Writable and a Readable store.

<script>
  import { withPrevious } from 'svelte-previous';

  export let name;
  // current is writable, while previous is read-only.
  const [currentName, previousName] = withPrevious(0);
  // To update the values, assign to the writable store.
  $: $currentName = name;
</script>

transition from {$previousName} to {$currentName}.

Options

withPrevious takes an options object as its second argument.

numToTrack: number

By default, withPrevious tracks one previous value.

To track more than one value, set numToTrack.

<script>
  const [current, prev1, prev2] = withPrevious(0, { numToTrack: 2 });
</script>

from {$prev2} to {$prev1} to {$current}.

initPrevious: T[]

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.

<script>
  const [current, prev1, prev2] = withPrevious(0, { numToTrack: 2, initPrevious: [1, 2, 3] })
</script>

from {$prev2} to {$prev1} to {$current}. <!-- from 2 to 1 to 0. -->

requireChange: boolean

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.

const [current, previous] = withPrevious(0, { requireChange: false });

isEqual: (a: T, b: T) => boolean

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.

const [current, previous] = withPrevious(0, {
  isEqual: (a, b) => a.name === b.name && a.age === b.age,
});

It is also possible to use lodash.isequal.

import isEqual from 'lodash.isequal';

const [current, previous] = withPrevious(0, {
  isEqual: isEqual,
});