Nanananananananana.. Pat Man!
    Have ideas to improve npm?Join in the discussion! »

    storez

    0.3.10 • Public • Published

    Storez

    Svelte writable store with extra feature

    • Fully compatible with svelte writable store
    • Subscriber function receives the new and the old value
    • Read and persist value to localstorage
    • Keep previous values in history (undo store mutation with undo())
    • Write operation debouncing
    • Get current value without having to subscribe or use svelte/store get method

    Installation

    npm install storez
    

    Usage example

    Check out the Demo

    Basic example

    import storez from "storez";
    
    const myStore = storez("my value");
    
    const dispose = myStore.subscribe((newVal, oldVal) => {
      console.log(`'${oldVal}' has been changed to '${mewVal}'`);
    });
    
    myStore.set("changed value"); // console output: 'my value' has been changed to 'changed value'

    With localStorage

    import storez from "storez";
    
    const myStore = storez("my value", { localstorage: { key: "myPersistedStore" } });
    
    const dispose = myStore.subscribe(() => {...});
    
    myStore.set("changed value");
    
    localstorage.getItem("myPersistedStore") // === "my value"
    
    dispose(); // persist in localStorage
    
    localstorage.getItem("myPersistedStore") // === "changed value"

    With history

    import storez from "storez";
    
    export const store = storez("my value", { history: { size: 1000 } });
    
    store.set("changed value");
    
    store.set("another value");
    
    // Undo last mutation:
    store.z.undo();

    In the Svelte file:

    <script>
      import { store } from "./store";
      const history = store.z.history; // is a Svelte derived store containing an array of all the previous values
      // e.g. ["my value", "changed value"]
    </script>
    
    <input type="text" bind:value="{$store}" />
    <p>Value: {$store}</p>
    
    <strong>History</strong>
    <ul>
      {#each $history as item}
      <li>{item}</li>
      {/each}
    </ul>
    <button on:click="{store.z.undo}">Undo</button>

    API

    Constructor

    // Svelte compatible store API
    storez(val);
    storez(val, start);
    
    // Same with Storez options
    storez(val, options);
    storez(val, start, options);

    Storez instance

    const instance = storez("initial", ...);
    instance.set("newValue");
    instance.set("wrongValue");
    
    instance.z.get() // returns the current value of the store (e.g. "wrongValue") This value is not reactive
    
    // If History module enabled:
    instance.z.history; // History module: Svelte readable store containing the state history
    instance.z.undo(); // History module: undo last mutation
    // Here: instance === newValue
    

    Options

    Module Options Type Details
    (default) debounce Number Timeout between each insert in the store
    localstorage key String Key under which the local storage will be saved
    history size Number Overall size of the array of element kept in the history

    Install

    npm i storez

    DownloadsWeekly Downloads

    50

    Version

    0.3.10

    License

    ISC

    Unpacked Size

    23.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar