SpringType: st-state

> Nano library for client-side state management and persistency

![Gitter](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: 187 bytes (best, brotli) - 313 bytes (worst, umd, gz)
- ✅ Zero dependencies
- ✅ First class TypeScript support
- ✅ 100% Unit Test coverage
- ✅ TestCafé smoke tests

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, defaultRandomNumbers);
  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:

); }; 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): any; save(key: string): API; loadForSession(key: string, defaultValue?: any): any; saveForSession(key: string): API; }`

`Backers`

Thank you so much for supporting us financially! 🙏🏻😎🥳👍

src="https://avatars2.githubusercontent.com/u/17221813?v=4&s=150">

Tom

`Maintainers`

st-state` is brought to you by:

src="https://avatars3.githubusercontent.com/u/454817?v=4&s=150">

Aron Homberg

Contributing

Please help out to make this project even better and see your name added to the list of our
CONTRIBUTORS.md :tada:

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, defaultRandomNumbers);

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:

      
    
  );
};
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): any;
  save(key: string): API;
  loadForSession(key: string, defaultValue?: any): any;
  saveForSession(key: string): API;
}