WaveSync

WaveSync is a lightweight, modular state management library designed for browser environments, with cross-tab synchronization capabilities. It allows developers to easily manage and synchronize application state across multiple browser tabs using BroadcastChannel.

Features

• Global State Management: Add and manage modular states effortlessly.
• Cross-Tab Synchronization: Automatically sync state updates across browser tabs.
• Lightweight API: Intuitive and minimalistic API for quick integration.
• Modular Design: Manage independent state modules to maintain cleaner code.

Installation

To install WaveSync, use npm or yarn:

npm install wavesync

Or using yarn:

yarn add wavesync

Usage

Importing WaveSync

import waveSync from 'wavesync';

Adding a Module

Add a module with an initial state:

waveSync.addModule('user', { name: 'Guest', age: 0 });

Updating Module State

Update the state of a module using the set method:

waveSync.modules['user'].set?.('name', 'John');
waveSync.modules['user'].set?.('age', 30);

Retrieving Module State

Get the current state of a specific module:

const userState = waveSync.getModule('user');
console.log(userState); // { name: 'John', age: 30 }

Retrieving Global State

Get the global state for all modules:

const globalState = waveSync.getState();
console.log(globalState);

Resetting State

Reset all modules and clear the global state:

waveSync.resetState();
console.log(waveSync.getState()); // {}

Advanced Features

Cross-Tab Synchronization

WaveSync uses BroadcastChannel to automatically synchronize state updates across multiple browser tabs. For example, if you update the state in one tab, the changes will reflect in all other tabs:

waveSync.modules['user'].set?.('name', 'Alice');
// All other open tabs will receive the updated state automatically.

Modular Design

Each module in WaveSync is independent, allowing you to manage state for specific features or components without polluting the global namespace.

Best Practices

1. Use Descriptive Module Names: Choose clear and descriptive names for your modules (e.g., user, settings).
2. Avoid Large States: Keep module states manageable and avoid storing large datasets directly.
3. Combine with Persistence: Use localStorage or IndexedDB to persist state if needed.

Example Application

Here’s a complete example:

import waveSync from 'wavesync';

// Add modules
waveSync.addModule('user', { name: 'Guest', age: 0 });
waveSync.addModule('theme', { mode: 'light' });

// Update module states
waveSync.modules['user'].set?.('name', 'John Doe');
waveSync.modules['theme'].set?.('mode', 'dark');

// Retrieve state
console.log(waveSync.getModule('user')); // { name: 'John Doe', age: 0 }
console.log(waveSync.getState());

// Cross-tab synchronization works automatically!

License

WaveSync is open-source and available under the MIT License.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to improve WaveSync.