SIXE is a global state management tool built on top of typescript, that helps your client application manage its state regardless of the web framework/library you use,
- Works on top of any frontend typescript framework/library
- State is outside main thread - runs in seperate thread for Performace
- Maintains State aross tabs and windows - state managed in shared worker
- Lightweight - Low unpack size
- No dependencies
- [ Typescript ] - Built on top of Typescript
- [ Shared Worker ] - Shared worker is used to maintain state
Checkout SIXE's Git Repo - [public repository] on GitHub.
/* to initialize the service Appname is optional */
var stateService = new SixeStateService('AppName');
/* to set/update state */
this.stateService.setState({
name: 'sixe',
data : ['grapes', 'tomato']
});
/* to listen to events that changes the state */
stateService.sixe.onmessage = (event:any) => {
let state = event?.data;
console.log(state)
};
/*
once all browsers for this SPA (connections) are closed
inside window event listener 'beforeunload'
*/
if (!this.state || this.state.connections == 1) stateService.close();
Note :
- Angular users might need to run NgZone inside onmessage event function to get their state properly,
- others can use their reactive variables to save/use the state you get from onmessage event function.
https://stackblitz.com/@BruceArmstrong007/collections/sixe-typescript-state-management-tool
Example in Angular - https://github.com/BruceArmstrong007/SIXE-Example-Angular-
to Install SIXE
npm i sixe
or
npm i sixe@latest- All major desktop browers - Chrome, Edge, Firefox, Opera, Safari
- Few mobile browsers - Firefox for Android, Safari on iOS
For more details visit mdn web docs
MIT
Raise issues here - github/issues
