https://github.com/plrenaudin/svelte-storez

Svelte writable store with some extras
https://github.com/plrenaudin/svelte-storez

history localstorage store svelte sveltejs

Last synced: 26 days ago
JSON representation

Svelte writable store with some extras

• Host: GitHub
• URL: https://github.com/plrenaudin/svelte-storez
• Owner: plrenaudin
• Created: 2020-02-22T21:54:46.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-28T21:34:27.000Z (about 1 year ago)
• Last Synced: 2024-04-29T00:24:00.829Z (8 months ago)
• Topics: history, localstorage, store, svelte, sveltejs
• Language: JavaScript
• Homepage: https://codesandbox.io/s/storez-demo-c11v9
• Size: 515 KB
• Stars: 27
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-svelte-stores - storez

README

        
# 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](https://codesandbox.io/s/storez-demo-c11v9)

### Basic example

```js

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

```js

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

```js

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:

```html

  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"]

Value: {$store}


History



  {#each $history as item}

  
{item}

  {/each}



Undo

```


## API

### Constructor

```js

// Svelte compatible store API

storez(val);

storez(val, start);

// Same with Storez options

storez(val, options);

storez(val, start, options);

```

### Storez instance

```js

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

instance.z.redo();

// Here: instance === wrongValue

```

## 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 |