Code Monkey home page Code Monkey logo

svelte-kits-store's Introduction

@svelte-kits/store

A drop-in replacement for Svelte stores, safe to use with SvelteKit 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.

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

- 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, and there is active discussion ongoing about the dangerous behavior of stores with SSR.

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.

Authors

Contributing

Contributions are always welcome!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.