https://github.com/brucearmstrong007/sixe
State Management Typescript Library for managing state in your web application
https://github.com/brucearmstrong007/sixe
frontend shared-worker state-management typescript web-application
Last synced: 6 months ago
JSON representation
State Management Typescript Library for managing state in your web application
- Host: GitHub
- URL: https://github.com/brucearmstrong007/sixe
- Owner: BruceArmstrong007
- Created: 2023-03-09T09:23:50.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-20T13:18:03.000Z (almost 3 years ago)
- Last Synced: 2025-08-10T04:23:19.318Z (7 months ago)
- Topics: frontend, shared-worker, state-management, typescript, web-application
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/sixe
- Size: 267 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SIXE
## Lightweight State Management Library for Angular, React, Vue and others
[SIXE](/ico/sixe.ico)
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](https://github.com/BruceArmstrong007/SIXE)] 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)
};
/*
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.
## 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
```sh
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](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker)
## License
MIT
## Issues
Raise issues here - [github/issues](https://github.com/BruceArmstrong007/SIXE/issues)
## Image for multi window state management
