# @eslym/svelte-utility-stores

> Some utility svelte stores

Latest version **2.1.4** (published 2025-05-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @eslym/svelte-utility-stores
pnpm add @eslym/svelte-utility-stores
yarn add @eslym/svelte-utility-stores
bun add @eslym/svelte-utility-stores
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.1.4 |
| Published | 2025-05-19 |
| First published | 2023-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 28.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 0nepeop1e |
| Maintainers | 0nepeop1e |
| Keywords | svelte |

## Links

- npm: https://www.npmjs.com/package/@eslym/svelte-utility-stores
- npm.io page: https://npm.io/package/@eslym/svelte-utility-stores

## Recent versions

- 2.1.4 (latest) — 2025-05-19
- 2.1.3 — 2025-03-27
- 2.1.2 — 2025-03-24
- 2.1.1 — 2025-03-21
- 2.1.0 — 2025-01-13
- 2.0.2 — 2024-12-06
- 2.0.1 — 2024-12-06
- 2.0.0 — 2024-12-05
- 1.0.0 — 2023-08-31

## README

# @eslym/svelte-utility-stores

Some utility svelte stores

> [!IMPORTANT]  
> Version 2 removed array, map and set since svelte 5 has built-in support for them.

## Install

```bash
npm i -D @eslym/svelte-utility-stores
```

```bash
yarn add -D @eslym/svelte-utility-stores
```

## Usage

### Local Storage and Session Storage stores

Stores which read from and write to the Storage objects, could be `localStorage` or `sessionStorage`,
the store will aware to the call of `Storage#setItem`, `Storage#removeItem`, `Storage#clear` and even
the `storage` event of `windows`.

> [!NOTE]  
> In SSR, the store returned will just be a regular `writable` store.

```svelte
<script lang="ts">
    import { local } from "@eslym/svelte-utility-stores";
    // or
    import local from "@eslym/svelte-utility-stores/local";

    const token = local('token');

    $inspect($token);
</script>
```

```svelte
<script lang="ts">
    import { session } from "@eslym/svelte-utility-stores";
    // or
    import session from "@eslym/svelte-utility-stores/session";

    const token = session('token');

    $inspect($token);
</script>
```

### Stringify store

```svelte
<script lang="ts">
    import { stringify } from "@eslym/svelte-utility-stores";
    // or
    import stringify from "@eslym/svelte-utility-stores/stringify";

    import superjson from 'superjson';

    // serialize to local storage with the 'token' key using superjson
    const token = stringify<{ token: string; expires: Date; }>(superjson, local('token'));

    $inspect($token);
</script>
```

### JSON store

```svelte
<script lang="ts">
    import { json } from "@eslym/svelte-utility-stores";
    // or
    import json from "@eslym/svelte-utility-stores/json";

    // serialize to local storage with the 'token' key using json
    const token = json<{ token: string; expires: string; }>(local('token'));

    $inspect($token);
</script>
```

> [!CAUTION]
> The `json` function is now taking a function for a fallback value instead of the value itself.

### Masked

Create a pair of stores which for masking, the display store will return the masked value when
the value store is `undefined` (unchanged), useful for password input field.

```svelte
<script lang="ts">
    import { masked } from "@eslym/svelte-utility-stores";
    // or
    import masked from "@eslym/svelte-utility-stores/masked";

    const { value: password, display: passwordDisplay } = masked();

    $inspect([$passwordDisplay, $password]);
</script>

<form method="post">
    {#if $password !== undefined}
        <input type="hidden" name="passwordUpdate" bind:value={$password} />
    {/if}
    <input type="password" bind:value={$passwordDisplay}/>
    <button disabled={$password === undefined}>Update</button>
    <button type="button" onclick={() => $password = undefined}>Reset</button>
</form>
```

### Reactivity (requires svelte >= 5.7.0)

Wrap a value or svelte store into a reactive property descriptor which can be used in
`Object.defineProperty` to create reactive object.

```svelte
<script lang="ts">
    // can only import from "@eslym/svelte-utility-stores/reactivity"
    import { wrapValue, wrapStore } from "@eslym/svelte-utility-stores/reactivity";

    import local from "@eslym/svelte-utility-stores/local";

    let obj = Object.defineProperties({}, {
        value: wrapValue('Hello, World!'),
        store: wrapStore(local('some-example')),
    });
</script>

<!-- Svelte will gives warning but these will works just fine  -->
<input type="text" bind:value={obj.value} />
<input type="text" bind:value={obj.store} />

```

### Reactive Storage (requires svelte >= 5.7.0)

> [!IMPORTANT]
> Reactive Storage only supports client-side rendering, so please do not import it in SSR.

Make `Storage` (including `localStorage` and `sessionStorage`) into reactive in svelte.

```svelte
<script lang="ts">
    import "@eslym/svelte-utility-stores/reactive-storage";

    // use `$derived` to make the value reactive
    let someValue = $derived(localStorage.getItem('some-value'));
</script>

<p>
{ someValue }
</p>

<button onclick=>{() => localStorage.setItem('Hello World')}>
    Set Hello World
</button>
```

Or you make create a proxy for the `Storage` object.

```svelte
<script lang="ts">
    import { storageProxy } from "@eslym/svelte-utility-stores/reactive-storage";

    const local = storageProxy(localStorage);
</script>
<input type="text" bind:value={local.someValue} />
```

---
_Source: https://npm.io/package/@eslym/svelte-utility-stores · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._