SIXE

Lightweight State Management Library for Angular, React, Vue and others

SIXE

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,

Features

• 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

Tech

• [ Typescript ] - Built on top of Typescript
• [ Shared Worker ] - Shared worker is used to maintain state

Checkout SIXE's Git Repo - [public repository] on GitHub.

Usage

/* 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)
};

/* 
 Must add this code on events such as "beforeunload" or "unload" so that it clears the state
*/
window.addEventListener("beforeunload", function(event) {
  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.

Examples (Angular ,React, Vue)

https://stackblitz.com/@BruceArmstrong007/collections/sixe-typescript-state-management-tool

Example in Angular - https://github.com/BruceArmstrong007/SIXE-Example-Angular-

Installation

to Install SIXE

npm i sixe 
or
npm i sixe@latest

Support

• 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

License

MIT

Issues

Raise issues here - github/issues

Image for multi window state management