open-index/open-npm huggingface dataset:
npm package: @svelte-kits/store
Description: Safe stores for SvelteKit
Author: Bae Junehyeon
Latest version: 0.1.2

# @svelte-kits/store

A drop-in replacement for Svelte stores, safe to use with [SvelteKit](https://kit.svelte.dev/) SSR.
This library exposes the same API as `svelte/store`, but with modified stores that are safe to use with SvelteKit SSR.

This library has `svelte` and `@sveltejs/kit` as peer dependencies, so it cannot be used without SvelteKit.


## Installation

Install `@svelte-kits/store` with your favorite package manager.

```bash
$ npm install -D @svelte-kits/store
$ yarn add -D @svelte-kits/store
$ pnpm add -D @svelte-kits/store
```


## Usage/Examples

Since `@svelte-kits/store` is a drop-in replacement, just replace `svelte/store` with `@svelte-kits/store` in your code.
All of the original svelte stores are available, and the API is identical.

Some of the stores are modified to be safe to use with SvelteKit SSR.
`@svelte-kits/store` re-exports the rest of unmodified stores and types from `svelte/store` for convenience.

```diff
- import { get, writable, derived, type Updater } from "svelte/store";
+ import { get, writable, derived, type Updater } from "@svelte-kits/store";
  
  export const count = writable(0); // Safe to use with SSR!
```


## Why?
Shared stores are a great way to share state between components, but they can be tricky to use with SvelteKit SSR.
Since shared stores are global, if they are used in a long-running environment like a server, they can leak state between requests. 

SvelteKit explicitly documents that storing global variable [should be avoided](https://kit.svelte.dev/docs/state-management#avoid-shared-state-on-the-server), and there is active discussion ongoing about [the dangerous behavior of stores with SSR](https://github.com/sveltejs/kit/discussions/4339).

This library provides a drop-in replacement for Svelte stores that are safe to use with SvelteKit SSR, by providing a new set of stores that are isolated to each request.
With `@svelte-kits/store`, you can safely use shared stores in your SvelteKit app in the same manner as before, without keeping them in context manually or worrying about leaking state between requests.

Currently only the `writable` store is modified since it is the only store that is not safe to use with SSR. Other stores does not save any state within them, so they are fundamentally safe to use with SSR (unless you kept a state in a global variable somewhere else in your code. please don't to that).


## Implementation detail

Since it is relatively simple, you can have a look at [code](https://github.com/svelte-kits/store/blob/main/src/lib/writable.ts).


## Authors

- [@devunt](https://github.com/devunt)


## Contributing

Contributions are always welcome!
npm package: @svelte-library/svelte-persistable
Description: This package exposes a store which is persisted to storage and has typescript support.
Author: Thomas Biesaart
Latest version: 0.1.5

# Persisted Svelte Stores

This package exposes a store which is persisted to storage and has typescript support.

## Usage

Install the package:

**npm**
```bash
npm install @svelte-library/svelte-persistable
```

**yarn**
```bash
yarn add @svelte-library/svelte-persistable
```

### 1. Define your store

`src/myStore.ts`
```typescript
import {persistable, Config, JsonTransformer} from '@svelte-library/svelte-persistable'; 

interface MyStore {
  message: string;
}

// a function which provides the default value.
// it is only executed when no value was found in store.
const getDefaultValue = (): MyStore => ({
  message: "Hello World!"
});

const storageConfig: Config<MyStore> = {
  // this key must be unique within your app as it is used to
  // persist the state
  key: 'myApp/myStore',

  // provide a storage.
  // by default, this is the localStorage
  storage: localStorage,

  // provide a (de)serialization function
  // be default, this is JSON.stringify/parse
  transform: JsonTransformer,
};

export const myStore = persistable<MyStore>(
  getDefaultValue,
  storageConfig
)
```

### 2. Add a Gate to your app

A gate prevents your app from starting until the persistable stores are done loading:

`src/App.svelte`
```sveltets
<script lang="ts">
  import {Gate} from '@svelte-library/svelte-persistable';
  import {MessageDisplay} from './MessageDisplay.svelte';
  import {MessageInput} from './MessageInput.svelte';
  import {myStore} from './myStore';
</script>

<Gate waitFor={myStore}>
  <MessageDisplay />
  <MessageInput />
</Gate>
```

### 3. Use the data from your store

You can use your store just like any other [readable](https://svelte.dev/tutorial/readable-stores):

`src/MessageDisplay.svelte`
```sveltets
<script lang="ts">
  import {myStore} from './myStore';
</script>

<p>Message: {$myStore.message}</p>
```

### 4. Write to your store

And finally, you can use your store just like any other [writable](https://svelte.dev/tutorial/writable-stores).

`src/MessageInput.svelte`
```scveltets
<script lang="ts">
  import {myStore} from './myStore';
</script>

<input bind:value={$myStore.message}>
```