@zignal/sync

Sync plugin for @zignal/core signal stores. Adds cross-tab sync via BroadcastChannel or localStorage to your state.

Features

• Keeps your zignal store in sync across all open tabs/windows
• Uses real-time sync (BroadcastChannel) by default, or storage-based sync (localStorage) as a fallback
• Simple API, works with any zignal store
• Lightweight and dependency-free (except React)

Installation

pnpm add @zignal/core
pnpm add @zignal/sync
# or
npm install @zignal/core
npm install @zignal/sync

Usage

import { createZignal } from '@zignal/core';
import { broadcast } from '@zignal/sync';

const useCounter = broadcast(createZignal(0), { key: 'counter' });

export function Counter() {
  const [count, setCount] = useCounter();
  return (
    <>
      <span>Count: {count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
}

API

broadcast<T>(zignal, options?)

• zignal: A zignal store (from createZignal)
• options.key: The sync key (used for BroadcastChannel or localStorage)
• options.strategy: 'broadcast' | 'storage' (default: 'broadcast')
  • 'broadcast': Uses BroadcastChannel API for real-time tab sync (falls back to localStorage if not supported)
  • 'storage': Uses localStorage and the storage event for sync

Fallback Behavior

If you choose 'broadcast' but the browser does not support it, broadcast will automatically fall back to using localStorage.

License

MIT