https://github.com/friendofsvelte/state
Super powered Svelte 5 states
https://github.com/friendofsvelte/state
persistent-storage runes svelte svelte5
Last synced: 10 months ago
JSON representation
Super powered Svelte 5 states
- Host: GitHub
- URL: https://github.com/friendofsvelte/state
- Owner: friendofsvelte
- Created: 2025-02-14T15:38:17.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-02-24T09:26:26.000Z (11 months ago)
- Last Synced: 2025-02-24T10:31:13.313Z (11 months ago)
- Topics: persistent-storage, runes, svelte, svelte5
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@friendofsvelte/state
- Size: 63.5 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Persistent Svelte 5 State
A lightweight, type-safe state management solution for Svelte applications with built-in storage persistence.
## Features
- đ¯ **Type-safe**: Full TypeScript support with automatic type inference
- đž **Persistent Storage**: Automatic state persistence in localStorage or sessionStorage
- đĒļ **Lightweight**: Zero dependencies beyond Svelte
- ⥠**Reactive**: Seamless integration with Svelte's reactivity system
- đ **Auto-sync**: Automatically syncs state across components
- đĻ **Simple API**: Just one function to manage all your state needs
## Installation
```bash
npm install @friendofsvelte/state
```
## Quick Start
1. Define your state using `PersistentState`:
```typescript
// new.svelte.ts / js
import { PersistentState } from '@friendofsvelte/state';
export const box = new PersistentState('box', {
color: '#ff3e00',
dimensions: [100, 100]
}, 'sessionStorage');
```
2. Use in your components:
```svelte
import { box } from '$lib/new.svelte';
const listColors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'brown'];
function switchNextColor() {
const currentIndex = listColors.indexOf(box.current.color);
const nextIndex = currentIndex + 1;
if (nextIndex >= listColors.length) {
box.current.color = listColors[0];
} else {
box.current.color = listColors[nextIndex];
}
}
{box.current.color}
Change color
```
## API Reference
### `PersistentState(key: string, initial?: T, storageType: StorageType = 'localStorage')`
Creates or retrieves a persistent state container.
Parameters:
- `key`: Unique identifier for the state container
- `initial`: (Optional) Initial state value
- `storageType`: (Optional) Storage type - 'localStorage' or 'sessionStorage' (default: 'localStorage')
Returns:
- A reactive state object of type `T`
> Inspired by: Rich-Harris' [local-storage-test](https://github.com/Rich-Harris/local-storage-test/blob/main/src/lib/storage.svelte.ts)
## Examples
### Basic Usage
```svelte
import { PersistentState } from '@friendofsvelte/state';
const box = new PersistentState('box', {
color: '#ff3e00',
dimensions: [100, 100]
}, 'sessionStorage');
function switchNextColor() {
const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'brown'];
const currentIndex = colors.indexOf(box.current.color);
box.current.color = colors[(currentIndex + 1) % colors.length];
}
{box.current.color}
Change color
```
## Contributing
Contributions are welcome! Please feel free to submit a [Pull Request](https://github.com/friendofsvelte/state/pulls).
## License
MIT License - see LICENSE file for details