Needlessly Promiscuous, Modularize!

    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published



    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.


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

      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;
    transition from {$previousName} to {$currentName}.


    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.

      const [current, prev1, prev2] = withPrevious(0, { numToTrack: 2 });
    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.

      const [current, prev1, prev2] = withPrevious(0, { numToTrack: 2, initPrevious: [1, 2, 3] })
    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.age === b.age,

    It is also possible to use lodash.isequal.

    import isEqual from 'lodash.isequal';
    const [current, previous] = withPrevious(0, {
      isEqual: isEqual,


    npm i svelte-previous

    DownloadsWeekly Downloads






    Unpacked Size

    14.4 kB

    Total Files


    Last publish


    • bryanmylee