Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamsebastiandev/svelte-supercharged-stores
Custom Stores for @Svelte
https://github.com/iamsebastiandev/svelte-supercharged-stores
stores svelte typescript
Last synced: 28 days ago
JSON representation
Custom Stores for @Svelte
- Host: GitHub
- URL: https://github.com/iamsebastiandev/svelte-supercharged-stores
- Owner: IamSebastianDev
- License: mit
- Created: 2022-03-01T21:26:48.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-13T13:05:34.000Z (9 months ago)
- Last Synced: 2024-04-14T02:53:09.778Z (9 months ago)
- Topics: stores, svelte, typescript
- Language: TypeScript
- Homepage:
- Size: 1.57 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.md
- License: license.md
Awesome Lists containing this project
README
> Note: This repository is no longer actively maintained. The stores remain useable, but there will be no more updateds of dependencies. With the Svelte v5 release, stores will become obsolete.
# Svelte Supercharged Stores 🚀
[](https://www.npmjs.com/package/@iasd/svelte-supercharged-stores)[](https://npmjs.com/package/@iasd/svelte-supercharged-stores)[](https://npmjs.com/package/@iasd/svelte-supercharged-stores)[](https://github.com/iamsebastiandev/flotsam/svelte-supercharged-stores)
## Overview
Svelte Supercharged Stores introduces new types of custom `Stores` to the [https://svelte.dev](Svelte) ecosystem.
## Installing
Install the stores via `yarn` or `npm` by running the following command.
```bash
yarn add -D @iasd/svelte-supercharged-stores
# or use npm
npm install -D @iasd/svelte-supercharged-stores
```
## `Persistable`
The `persistable` store creates a store that persists between sessions, using `local`- or `session` storage.
```ts
// store.ts
import { persistable } from '@iasd/svelte-supercharged-stores';
// create the optional config object
export const init = {
namespace: 'namespace',
storage: 'localStorage' | 'sessionStorage',
};
// To create a persistent value, pass a value to persist and a identifier string.
// Every time the value is created, it will check the storage for a value and set
// the svelte store accordingly.
export const store = persistable(0, 'persistent', init);
```
You can then use the created `Persistable` store in your Component like this:
```svelte
import { store } from "./store.ts";
$store++}>{$store}
```
After creating the persistable, the store can be used like any other Svelte store.
The optional `init` config object can be used to control the persistable store (or more) by providing access to a `namespace` property as well as giving control over the kind of storage interface to use.
> Note: The storeInit object should ideally be used to configure multiple persistable stores to use the same method and namespace.
After creating the store once, the store will automatically keep the localStorage or sessionStorage in sync. This means, that even after reloading, the store will initialize with the value stored in the chosen storage.
## `Reduceable`
The `reduceable` store adds a reducer pattern to a `Writeable` store. This can be used to update the store in a more systematic fashion if so desired. To update the values of the store, define a `Reducer` function and pass it to the store.
```ts
// store.ts
import { reduceable } from '@iasd/svelte-supercharged-stores';
// Create a basic reducer
type State = { count: number };
type Actions = 'increment' | 'decrement';
const initialState: State = { count: 0 };
const reducer: Reducer = (state, { type, payload }) => {
switch (type) {
case 'increment':
return { ...state, count: state.count + payload };
case 'decrement':
return { ...state, count: state.count - payload };
default:
return { ...state };
}
};
// define the reducer store
export const store = reduceable(initialState, reducer);
```
You can then use the created `Reduceable` store in your Component like this:
```svelte
import { store } from "./store.ts";
Current value: {$store}
store.dispatch({type: 'increment', payload: 1})}>Increase by 1
store.dispatch({type: 'increment', payload: 5})}>Increase by 5
```
> Note: While the example above is very basic, a `reduceable` store comes in handy when using it with more complex states/stores. The usual reducer pattern you are used to apply.
The `Reducer` function will always receive a snapshot of the current store and the action object passed to the dispatch method.
## `AsyncReadable`
The `asyncReadable` store can be used to fetch a resource or perform any action asynchronously. The function will return `Readable` stores for the `loading`, `error` & `data` states of the operation. `error` & `data` will be null, unless an error or data is returned by the async operation. `loading` will be initially `false`, set to `true` while the request is ongoing, and return to `false` when complete. If necessary, you can pass `Readable` or `Writeable` stores as dependencies, which values will be passed to the handler function. Any change in a dependency will execute the handler again.
```ts
// store.ts
import { asyncReadable } from '@iasd/svelte-supercharged-stores';
export const asyncStore = asyncReadable(async () => {
return await fetch('/api/');
});
```
You can then use the created `AsyncReadable` store in your Component like this:
```svelte
import { asyncStore } from "./store.ts";
const {loading, error, data} = asyncStore;
Loading: {$loading}
Error: {$error}
data: {$data}
```
## Contributing
If you would like to contribute, take a look at the [contribution guide](./contributing.md).
## 📋 License
@iasd/svelte-supercharged-stores is licensed under the [MIT License](https://opensource.org/licenses/MIT).