https://github.com/springtype-org/st-state
~250 byte nano library for client-side state management and persistence
https://github.com/springtype-org/st-state
Last synced: 25 days ago
JSON representation
~250 byte nano library for client-side state management and persistence
- Host: GitHub
- URL: https://github.com/springtype-org/st-state
- Owner: springtype-org
- License: mit
- Created: 2021-02-04T23:13:31.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-05T23:21:41.000Z (about 5 years ago)
- Last Synced: 2025-02-05T08:46:37.938Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 135 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
SpringType: st-state
> Nano library for client-side state management and persistency
[](https://gitter.im/springtype-official/springtype?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
Purpose
This is an exremely tiny, yet powerful library for global state management. `st-state` can also save and load state from/to `sessionStorage` and `localStorage`.
Features
- ✅ Abstracts the HTML5 `local/sessionStorage` API
- ✅ Tiny: `202 bytes` (best, brotli) - `324 bytes` (worst, umd, gz)
- ✅ Zero dependencies
- ✅ First class TypeScript support
- ✅ 100% Unit Test coverage
How to
This is how using `st-state` looks like:
```tsx
import { tsx, render, Ref } from 'springtype';
import { $ } from 'st-query';
import { store } from 'st-state';
const RANDOM_NUMBERS = 'randomNumbers';
const RandomNumbersList = () => {
return
{state.get(RANDOM_NUMBERS).map((randomNumber) =>
{randomNumber}
)}
}
const App = () => {
const randomNumberListRef: Ref = {};
// remember randomNumbers generated before
const defaultRandomNumbers = store.load(RANDOM_NUMBERS, []);
// current randomNumbers state, possibly initialized by remembered ones
const randomNumbers: Array = store.get(RANDOM_NUMBERS);
const onGenerateRandomNumber = () => {
// updating the state locally
randomNumbers.push(Math.random());
// setting the state gobally
store.set(RANDOM_NUMBERS, randomNumbers);
// also persisting the state for re-visits
store.save(RANDOM_NUMBERS);
// re-render the UI
$(randomNumberListRef.current).html();
}
return (
Random numbers:
Generate random number
);
};
render();
```
API
The following contract is made between the webapp and `st-state`:
```typescript
export interface State {
[key: string]: any;
}
export interface API {
state: State;
get(key: string, defaultValue?: any): any;
set(key: string, value: any): API;
load(key: string, defaultValue?: any): API;
save(key: string): API;
loadForSession(key: string, defaultValue?: any): API;
saveForSession(key: string): API;
}
```
Backers
Thank you so much for supporting us financially! 🙏🏻😎🥳👍
Maintainers
`st-state` is brought to you by:
Contributing
Please help out to make this project even better and see your name added to the list of our
[CONTRIBUTORS.md](./CONTRIBUTORS.md) :tada:
