Skip to content

bryanmylee/svelte-previous

Repository files navigation

svelte-previous-banner

svelte-previous

npm version npm downloads license build coverage size

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,
});