react-broadcast-sync 1.0.0

package/.github/workflows/ci.yml

@@ -0,0 +1,61 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  llint-and-typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Run Prettier check
+        run: npm run format:check
+
+      - name: Run type checks
+        run: npm run typecheck
+
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18, 20]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run build
+        run: npm run build
+
+      - name: Run tests with coverage
+        run: npm test -- --coverage
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/lcov.info
+          fail_ci_if_error: true

package/.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
+npm run typecheck
+npm run lint-staged

package/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+coverage

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

package/.releaserc.json

@@ -0,0 +1,22 @@
+{
+  "branches": ["main"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogFile": "CHANGELOG.md"
+      }
+    ],
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["CHANGELOG.md", "package.json"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    "@semantic-release/github"
+  ]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Idan Shalem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,495 @@
+<p align="center">
+  <img src="./assets/react-broadcast-sync-logo.png" alt="react-broadcast-sync logo" width="300" />
+</p>
+
+# react-broadcast-sync
+
+![CI](https://github.com/IdanShalem/react-broadcast-sync/actions/workflows/ci.yml/badge.svg)
+[![codecov](https://codecov.io/gh/IdanShalem/react-broadcast-sync/branch/main/graph/badge.svg)](https://codecov.io/gh/IdanShalem/react-broadcast-sync)
+[![npm version](https://img.shields.io/npm/v/react-broadcast-sync.svg)](https://www.npmjs.com/package/react-broadcast-sync)
+[![npm downloads](https://img.shields.io/npm/dm/react-broadcast-sync.svg)](https://www.npmjs.com/package/react-broadcast-sync)
+[![bundlephobia](https://badgen.net/bundlephobia/minzip/react-broadcast-sync)](https://bundlephobia.com/result?p=react-broadcast-sync)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Issues](https://img.shields.io/github/issues/IdanShalem/react-broadcast-sync)](https://github.com/IdanShalem/react-broadcast-sync/issues)
+
+A lightweight React hook for syncing state and communication across browser tabs using the BroadcastChannel API. This package provides a clean and type-safe abstraction over the native API, enabling efficient, scoped, and reliable cross-tab messaging.
+
+## ✨ Features
+
+- 🚀 Simple and intuitive API
+- 🔄 Real-time synchronization across tabs
+- ✅ TypeScript support
+- 📦 Zero dependencies
+- 🧹 Automatic message expiration and cleanup
+- 🧪 Send/receive any serializable message
+- 🧩 Namespace and source scoping support
+- 🔒 Clear individual or all messages
+- ✅ Only accept allowed message types (optional)
+- 🧠 `BroadcastProvider` for context-based usage
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-broadcast-sync
+# or
+yarn add react-broadcast-sync
+# or
+pnpm add react-broadcast-sync
+```
+
+---
+
+## 🚀 Quick Start
+
+### 🔧 Basic Usage
+
+```tsx
+import { useBroadcastChannel } from 'react-broadcast-sync';
+
+function MyComponent() {
+  const { messages, postMessage, clearMessage } =
+    useBroadcastChannel('my-channel');
+
+  const handleSend = () => {
+    postMessage('greeting', { text: 'Hello from another tab!' });
+  };
+
+  return (
+    <>
+      <button onClick={handleSend}>Send</button>
+      {messages.map((msg) => (
+        <div key={msg.id}>
+          {msg.message.text}
+          <button onClick={() => clearMessage(msg.id)}>Clear</button>
+        </div>
+      ))}
+    </>
+  );
+}
+```
+
+---
+
+### ⚙️ Advanced Usage
+
+```tsx
+const {
+  channelName,
+  messages,
+  sentMessages,
+  postMessage,
+  clearMessage,
+  clearAllMessages,
+  clearSentMessage,
+  error,
+} = useBroadcastChannel('my-channel', {
+  sourceName: 'my-tab',
+  cleaningInterval: 2000,
+  keepLatestMessage: true,
+  registeredTypes: ['greeting', 'notification'],
+  namespace: 'my-app',
+  deduplicationTTL: 10 * 60 * 1000, // 10 minutes
+  cleanupDebounceMs: 500, // Debounce cleanup operations by 500ms
+});
+```
+
+#### 💬 Sending a message with expiration:
+
+```tsx
+postMessage(
+  'notification',
+  { text: 'This disappears in 5s' },
+  { expirationDuration: 5000 }
+);
+```
+
+---
+
+### 🧩 Using `BroadcastProvider`
+
+You can wrap part of your app with `BroadcastProvider` and use `useBroadcastProvider()` to consume the channel context.
+
+```tsx
+import { BroadcastProvider, useBroadcastProvider } from 'react-broadcast-sync';
+
+function App() {
+  return (
+    <BroadcastProvider channelName="notifications">
+      <NotificationBar />
+    </BroadcastProvider>
+  );
+}
+
+function NotificationBar() {
+  const { messages } = useBroadcastProvider();
+
+  return (
+    <div>
+      {messages.map((msg) => (
+        <p key={msg.id}>{msg.message.text}</p>
+      ))}
+    </div>
+  );
+}
+```
+
+---
+
+## 📘 API Reference
+
+### `useBroadcastChannel` Hook
+
+```typescript
+const {
+  channelName,
+  messages,
+  sentMessages,
+  postMessage,
+  clearMessage,
+  clearAllMessages,
+  clearSentMessage,
+  error,
+} = useBroadcastChannel(channelName, options);
+```
+
+#### Options
+
+```typescript
+interface BroadcastOptions {
+  sourceName?: string; // Custom name for the message source
+  cleaningInterval?: number; // Interval in ms for cleaning expired messages (default: 1000)
+  keepLatestMessage?: boolean; // Keep only the latest message (default: false)
+  registeredTypes?: string[]; // List of allowed message types
+  namespace?: string; // Channel namespace for isolation
+  deduplicationTTL?: number; // Time in ms to keep message IDs for deduplication (default: 5 minutes)
+  cleanupDebounceMs?: number; // Debounce time in ms for cleanup operations (default: 0)
+}
+```
+
+#### Default Values
+
+| Option              | Default Value | Description                         |
+| ------------------- | ------------- | ----------------------------------- |
+| `sourceName`        | `undefined`   | Auto-generated if not provided      |
+| `cleaningInterval`  | `1000`        | 1 second between cleanup runs       |
+| `keepLatestMessage` | `false`       | Keep all messages by default        |
+| `registeredTypes`   | `[]`          | Accept all message types by default |
+| `namespace`         | `''`          | No namespace by default             |
+| `deduplicationTTL`  | `300000`      | 5 minutes (5 _ 60 _ 1000 ms)        |
+| `cleanupDebounceMs` | `0`           | No debounce by default              |
+
+#### Return Value
+
+```typescript
+interface BroadcastActions {
+  channelName: string; // The resolved channel name (includes namespace)
+  messages: BroadcastMessage[]; // Received messages
+  sentMessages: BroadcastMessage[]; // Messages sent by this instance
+  postMessage: (
+    type: string,
+    content: any,
+    options?: SendMessageOptions
+  ) => void;
+  clearMessage: (id: string) => void;
+  clearAllMessages: () => void;
+  clearSentMessage: (id: string) => void;
+  error: string | null; // Current error state
+}
+```
+
+### `useBroadcastChannel(channelName, options?)`
+
+Returns an object with:
+
+| Property             | Type                 | Description                                            |
+| -------------------- | -------------------- | ------------------------------------------------------ |
+| `channelName`        | `string`             | The resolved channel name (includes namespace)         |
+| `messages`           | `BroadcastMessage[]` | All received messages from other tabs                  |
+| `sentMessages`       | `BroadcastMessage[]` | Messages sent from this tab                            |
+| `postMessage()`      | `function`           | Send a message to all tabs                             |
+| `clearMessage()`     | `function`           | Remove a message locally and notify others to clear it |
+| `clearAllMessages()` | `function`           | Remove all messages locally and notify others          |
+| `clearSentMessage()` | `function`           | Remove a sent message without affecting others         |
+| `error`              | `string \| null`     | Any runtime error from the channel                     |
+
+#### 📨 Send Options:
+
+```ts
+interface SendMessageOptions {
+  expirationDuration?: number; // TTL in ms
+  expirationDate?: number; // Exact expiry timestamp
+}
+```
+
+#### 📩 Message Format:
+
+```ts
+interface BroadcastMessage {
+  id: string;
+  type: string;
+  message: any;
+  timestamp: number;
+  source: string;
+  expirationDate?: number;
+}
+```
+
+---
+
+## ✅ Best Practices
+
+- **Use `namespace`** to isolate functionality between different app modules.
+- **Register allowed message types** using `registeredTypes` to avoid processing unknown or irrelevant messages.
+- **Always handle `error`** state in UI or logs to detect channel failures.
+- **Use `keepLatestMessage: true`** if you only care about the most recent message (e.g. status updates).
+- **Set appropriate `deduplicationTTL`** based on your message frequency and importance.
+- **Use `cleanupDebounceMs`** when dealing with rapid message updates to prevent performance issues.
+
+## 🎯 Common Use Cases
+
+### Real-time Notifications
+
+```tsx
+function NotificationSystem() {
+  const { messages, postMessage } = useBroadcastChannel('notifications', {
+    keepLatestMessage: true,
+    registeredTypes: ['alert', 'info', 'warning'],
+    deduplicationTTL: 60000, // 1 minute
+  });
+
+  return (
+    <div>
+      {messages.map((msg) => (
+        <Notification key={msg.id} type={msg.type} content={msg.message} />
+      ))}
+    </div>
+  );
+}
+```
+
+### Multi-tab Form Synchronization
+
+```tsx
+function FormSync() {
+  const { messages, postMessage } = useBroadcastChannel('form-sync', {
+    namespace: 'my-form',
+    cleaningInterval: 5000,
+  });
+
+  const handleChange = (field: string, value: string) => {
+    postMessage(
+      'field-update',
+      { field, value },
+      { expirationDuration: 300000 }
+    ); // 5 minutes
+  };
+
+  return <Form onChange={handleChange} />;
+}
+```
+
+### Tab Status Synchronization
+
+```tsx
+function TabStatus() {
+  const { postMessage } = useBroadcastChannel('tab-status', {
+    sourceName: 'main-tab',
+    keepLatestMessage: true,
+  });
+
+  useEffect(() => {
+    postMessage('tab-active', { timestamp: Date.now() });
+    return () => postMessage('tab-inactive', { timestamp: Date.now() });
+  }, []);
+
+  return null;
+}
+```
+
+## 🔧 Performance Considerations
+
+### Message Deduplication
+
+The `deduplicationTTL` option creates a time window (in milliseconds) during which messages with the same content and type from the same source are considered duplicates and will be ignored. This is particularly useful for:
+
+- **Preventing Message Loops**: Avoids infinite message echo between tabs when they broadcast the same message back and forth
+- **Reducing Redundancy**: Filters out identical messages sent in rapid succession, preventing unnecessary processing
+- **Natural Debouncing**: Provides built-in debouncing behavior for broadcast events without additional code
+
+Recommended TTL values based on use case:
+
+- **High-frequency updates** (e.g., real-time typing, cursor position): 1000-5000ms
+- **Medium-frequency updates** (e.g., form sync, status changes): 5000-15000ms
+- **Low-frequency updates** (e.g., notifications, alerts): 15000-30000ms
+
+Example:
+
+```tsx
+// Without deduplication, this could cause a message loop
+function ChatComponent() {
+  const { postMessage } = useBroadcastChannel('chat', {
+    deduplicationTTL: 5000, // Ignore duplicate messages for 5 seconds
+  });
+
+  const handleMessage = (text: string) => {
+    postMessage('chat-message', { text });
+  };
+}
+```
+
+### Cleanup Optimization
+
+- Use `cleanupDebounceMs` to prevent excessive cleanup operations
+- Recommended values:
+  - For frequent updates: 500-1000ms
+  - For infrequent updates: 0ms (no debounce)
+- Adjust `cleaningInterval` based on your message expiration needs
+
+### Memory Management
+
+- Clear messages when they're no longer needed using `clearMessage` or `clearAllMessages`
+- Use message expiration for temporary data
+- Consider using `keepLatestMessage: true` for status updates to prevent memory buildup
+
+## 🚨 Troubleshooting
+
+### Common Issues
+
+1. **Messages Not Received**
+
+   - Check if `registeredTypes` includes your message type
+   - Verify the channel name and namespace match
+   - Ensure the message hasn't expired
+   - Check if `deduplicationTTL` isn't too short
+
+2. **Performance Issues**
+
+   - Increase `cleanupDebounceMs` if cleanup is too frequent
+   - Use `keepLatestMessage: true` for high-frequency updates
+   - Consider increasing `cleaningInterval` if cleanup is too aggressive
+
+3. **Memory Leaks**
+   - Ensure proper cleanup in component unmount
+   - Use message expiration for temporary data
+   - Clear messages when they're no longer needed
+
+### Debug Mode
+
+Enable debug logging by setting the environment variable:
+
+```bash
+REACT_APP_DEBUG_BROADCAST=true
+```
+
+This will log:
+
+- Channel creation and closure
+- Message sending and receiving
+- Cleanup operations
+- Error states
+
+## ⚡ Performance Considerations
+
+1. **Message Size**
+
+   - Keep messages small and serializable
+   - Avoid sending large objects or circular references
+   - Consider using message IDs to reference larger data
+
+2. **Message Frequency**
+
+   - Use `keepLatestMessage: true` for high-frequency updates
+   - Implement debouncing for rapid state changes
+   - Consider using `expirationDuration` for temporary messages
+
+3. **Memory Management**
+   - Clear messages when they're no longer needed
+   - Use `cleaningInterval` to automatically remove expired messages
+   - Implement proper cleanup in component unmount
+
+## 🧪 Testing
+
+### Unit Testing
+
+```tsx
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useBroadcastChannel } from 'react-broadcast-sync';
+
+test('should send and receive messages', () => {
+  const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+
+  act(() => {
+    result.current.postMessage('test', { data: 'hello' });
+  });
+
+  expect(result.current.messages).toHaveLength(1);
+  expect(result.current.messages[0].message.data).toBe('hello');
+});
+```
+
+### Integration Testing
+
+```tsx
+import { render, screen } from '@testing-library/react';
+import { BroadcastProvider } from 'react-broadcast-sync';
+
+test('should render messages from provider', () => {
+  render(
+    <BroadcastProvider channelName="test-channel">
+      <TestComponent />
+    </BroadcastProvider>
+  );
+
+  // Your test assertions here
+});
+```
+
+---
+
+## 🌐 Browser Support
+
+Relies on [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel):
+
+- ✅ Chrome 54+
+- ✅ Firefox 38+
+- ✅ Edge 79+
+- ✅ Safari 15.4+
+- ✅ Opera 41+
+
+---
+
+## 🛠️ Coming Soon
+
+We're actively improving `react-broadcast-sync`! Here are some features and enhancements planned for upcoming versions:
+
+- ✅ **Unit and Integration Tests**  
+  Ensure robust behavior and edge-case coverage.
+
+- 🔄 **Automatic Channel Recovery**  
+  Reconnect automatically if the `BroadcastChannel` gets disconnected or closed by the browser.
+
+- 🧼 **`clearMessagesByType()`**  
+  Clear all messages of a specific type with a single call.
+
+- 🎯 **Per-Type Callbacks**  
+  Define message handlers for specific types with `onMessage({ type, callback })`.
+
+- 🧹 **`clearAllSentMessages()` / `clearAllReceivedMessages()`**  
+  Fine-grained control for clearing messages based on source.
+
+We're committed to keeping this package lightweight, flexible, and production-ready.  
+Your feedback and contributions are welcome — feel free to [open an issue](https://github.com/IdanShalem/react-broadcast-sync/issues)!
+
+---
+
+## 🤝 Contributing
+
+PRs and feature suggestions welcome! Open an issue or submit a pull request.
+
+---
+
+## 🪪 License
+
+MIT © [Idan Shalem](https://github.com/IdanShalem)

package/commitlint.config.js

@@ -0,0 +1,3 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+};

package/dist/BroadcastProvider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BroadcastMessage } from './types/types';
+interface BroadcastContextValue {
+    messages: BroadcastMessage[];
+    error: string | null;
+    channel: BroadcastChannel | null;
+}
+interface BroadcastProviderProps {
+    channelName: string;
+    children: React.ReactNode;
+}
+export declare const BroadcastProvider: React.FC<BroadcastProviderProps>;
+export declare const useBroadcastProvider: () => BroadcastContextValue;
+export {};

package/dist/hooks/useBroadcastChannel.d.ts

@@ -0,0 +1,3 @@
+import { BroadcastActions, BroadcastOptions } from '../types/types';
+export declare const useBroadcastChannel: (channelName: string, options?: BroadcastOptions) => BroadcastActions;
+export default useBroadcastChannel;

package/dist/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),r=require("react/jsx-runtime");const t="__INTERNAL__",s=()=>Math.random().toString(36).substr(2,9),n=(e,r)=>{const t=`${s()}-${e}-${r}`;return btoa(t).replace(/=+$/,"")},a=e=>!!e.expirationDate&&e.expirationDate<Date.now(),o=(e,r,s="")=>{const n=btoa(`react-broadcast-sync:${e}:${`${r}-${s}`}`);return`${t}:${e}:${n}`},c=e=>e.startsWith(`${t}:`),l=(e,r)=>{let t,s=null,n=null,a=null;const o=function(...o){n=o,a=this,null!==s&&clearTimeout(s),s=setTimeout((()=>{s=null,null!==n&&(t=e.apply(a,n),n=null,a=null)}),r)};return o.cancel=()=>{null!==s&&(clearTimeout(s),s=null,n=null,a=null)},o.flush=()=>(null!==s&&(clearTimeout(s),s=null,null!==n&&(t=e.apply(a,n),n=null,a=null)),t),o},i=(e,r,t)=>{if("undefined"==typeof process||!process.env||"true"!==process.env.REACT_APP_DEBUG_BROADCAST)return;const s=`[${(new Date).toISOString()}] [react-broadcast-sync]`;switch(e){case"info":console.log(s,r,t||"");break;case"warn":console.warn(s,r,t||"");break;case"error":console.error(s,r,t||"")}},u={created:e=>i("info","Channel created:",e),closed:e=>i("info","Channel closed:",e)},d={sent:e=>i("info","Message sent:",e),received:e=>i("info","Message received:",e),cleared:e=>i("info","Message cleared:",e),expired:e=>i("info","Message expired:",e),duplicate:e=>i("warn","Duplicate message ignored:",e)},p={started:()=>i("info","Cleanup started"),completed:e=>i("info","Cleanup completed:",{removedCount:e})},f=e=>i("error","Error:",e),E="CLEAR_MESSAGE",v="CLEAR_ALL_MESSAGES",h=(r,t={})=>{const{sourceName:i,cleaningInterval:h=1e3,keepLatestMessage:S=!1,registeredTypes:C=[],namespace:g="",deduplicationTTL:A=3e5,cleanupDebounceMs:m=0}=t,[M,L]=e.useState([]),[b,y]=e.useState([]),[_,R]=e.useState(null),w=e.useRef(null),x=e.useRef(new Map),D=e.useRef(i||`tab-${s()}`).current,B=e.useRef({CLEAR_MESSAGE:o(E,r,g),CLEAR_ALL_MESSAGES:o(v,r,g)}).current,$=e.useMemo((()=>`${r}-${g}`),[r,g]),G=e.useCallback((()=>{L((e=>e.filter((e=>!a(e)))))}),[]),k=e.useRef(m>0?l(G,m):Object.assign(G,{cancel:()=>{}})).current,T=e.useCallback((e=>{R(e),setTimeout((()=>R(null)),3e3)}),[]),P=e.useCallback((e=>{var r;L((r=>r.filter((r=>r.id!==e)))),y((r=>r.filter((r=>r.id!==e)))),null===(r=w.current)||void 0===r||r.postMessage({id:e,type:B.CLEAR_MESSAGE,source:D}),d.cleared(e)}),[D,B.CLEAR_MESSAGE]),j=e.useCallback((()=>{var e;L([]),y([]),null===(e=w.current)||void 0===e||e.postMessage({id:B.CLEAR_ALL_MESSAGES,type:B.CLEAR_ALL_MESSAGES,source:D})}),[D,B.CLEAR_ALL_MESSAGES]),I=e.useCallback((e=>{var r;y((r=>r.filter((r=>r.id!==e)))),null===(r=w.current)||void 0===r||r.postMessage({id:e,type:B.CLEAR_MESSAGE,source:D})}),[D,B.CLEAR_MESSAGE]),N=e.useCallback(((e,r,t={})=>{const s=w.current;if(!s){const e="Channel not available";return f(e),void T(e)}try{const a=((e,r,t,s={})=>{var a;const o=Date.now();return{id:n(t,o),type:e,message:r,timestamp:o,source:t,expirationDate:null!==(a=s.expirationDate)&&void 0!==a?a:s.expirationDuration?o+s.expirationDuration:void 0}})(e,r,D,t);s.postMessage(a),d.sent(a),y((e=>[...e,a]))}catch(e){const r="Failed to send message";f(r),T(r)}}),[D,T]),O=e.useCallback((e=>{try{const r=e.data;if(d.received(r),!(e=>Boolean(e&&"object"==typeof e&&"id"in e))(r))return;if(r.source===D)return;if(!c(r.type)&&C.length>0&&!C.includes(r.type))return;if(a(r))return void d.expired(r.id);if((e=>e&&"object"==typeof e&&"string"==typeof e.id&&"string"==typeof e.source&&"string"==typeof e.type&&c(e.type))(r)){if(r.type===B.CLEAR_MESSAGE)return void L((e=>e.filter((e=>!(e.id===r.id&&e.source===r.source)))));if(r.type===B.CLEAR_ALL_MESSAGES)return void L((e=>e.filter((e=>e.source!==r.source))))}const t=Date.now(),s=x.current.get(r.id);if(s&&t-s<A)return void d.duplicate(r.id);x.current.set(r.id,t),L((e=>S?[r]:[...e,r]))}catch(e){const r="Error processing broadcast message";f(r),T(r)}}),[D,C,S,T,B,A]);return e.useEffect((()=>{if("undefined"==typeof BroadcastChannel){const e="BroadcastChannel is not supported in this browser. Please check browser compatibility.";return f(e),void T(e)}const e=new BroadcastChannel($);return w.current=e,u.created($),e.addEventListener("message",O),()=>{e.removeEventListener("message",O),e.close(),u.closed($)}}),[$,O,T]),e.useEffect((()=>{if(h<=0)return;const e=setInterval((()=>{p.started();const e=M.length;k(),p.completed(e-M.length)}),h);return()=>{var r;clearInterval(e),m>0&&(null===(r=k.cancel)||void 0===r||r.call(k))}}),[h,k,m]),e.useEffect((()=>{const e=setInterval((()=>{const e=Date.now();for(const[r,t]of x.current.entries())e-t>=A&&x.current.delete(r)}),6e4);return()=>clearInterval(e)}),[A]),{channelName:$,messages:M,sentMessages:b,postMessage:N,clearMessage:P,clearAllMessages:j,clearSentMessage:I,error:_}},S=e.createContext(void 0);class C extends e.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){console.error("BroadcastChannel error:",e)}render(){return this.state.hasError?r.jsx("div",{children:"Error occurred in BroadcastProvider"}):this.props.children}}exports.BroadcastProvider=({children:t,channelName:s})=>{const{messages:n,error:a}=h(s),[o,c]=e.useState(null),l=e.useRef(null);e.useEffect((()=>{if("undefined"==typeof BroadcastChannel)return void c("BroadcastChannel is not supported in this browser. Please check browser compatibility.");const e=new BroadcastChannel(s);return l.current=e,()=>{e.close()}}),[s]);const i=e.useMemo((()=>({messages:n,error:o||a,channel:l.current})),[n,o,a]);return r.jsx(C,{children:r.jsx(S.Provider,{value:i,children:t})})},exports.useBroadcastChannel=h,exports.useBroadcastProvider=()=>{const r=e.useContext(S);if(!r)throw new Error("useBroadcastProvider must be used within a BroadcastProvider");return r};
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/utils/messageUtils.ts","../src/utils/debug.ts","../src/hooks/useBroadcastChannel.ts","../src/BroadcastProvider.tsx"],"sourcesContent":[null,null,null,null],"names":["INTERNAL_PREFIX","generateRandomPart","Math","random","toString","substr","generateMessageId","source","timestamp","raw","btoa","replace","isMessageExpired","message","expirationDate","Date","now","getInternalMessageType","baseType","channelName","namespace","hash","isInternalType","type","startsWith","debounce","fn","wait","result","timeoutId","lastArgs","lastThis","debounced","args","this","clearTimeout","setTimeout","apply","cancel","flush","log","level","data","process","env","REACT_APP_DEBUG_BROADCAST","prefix","toISOString","console","warn","error","debug","created","closed","sent","received","cleared","messageId","expired","duplicate","started","completed","removedCount","INTERNAL_MESSAGE_TYPES","useBroadcastChannel","options","sourceName","cleaningInterval","keepLatestMessage","registeredTypes","deduplicationTTL","cleanupDebounceMs","messages","setMessages","useState","sentMessages","setSentMessages","setError","channel","useRef","receivedMessageIds","Map","current","internalTypes","CLEAR_MESSAGE","CLEAR_ALL_MESSAGES","resolvedChannelName","useMemo","performCleanup","useCallback","prev","filter","msg","debouncedCleanup","Object","assign","setErrorMessage","clearMessage","id","_a","postMessage","clearAllMessages","clearSentMessage","messageType","messageContent","channelCurrent","createMessage","content","expirationDuration","undefined","e","handleMessage","event","Boolean","isValidMessage","length","includes","isValidInternalClearMessage","receivedAt","get","set","useEffect","BroadcastChannel","bc","addEventListener","removeEventListener","close","interval","setInterval","before","clearInterval","call","entries","delete","BroadcastChannelContext","createContext","ErrorBoundary","React","Component","constructor","state","hasError","getDerivedStateFromError","componentDidCatch","render","_jsx","props","children","BroadcastProvider","hookError","value","Provider","useBroadcastProvider","context","useContext","Error"],"mappings":"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"}