react-broadcast-sync 1.0.0 → 1.1.0

package/src/hooks/useBroadcastChannel.ts

@@ -1,9 +1,14 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { BroadcastActions, BroadcastMessage, BroadcastOptions, SendMessageOptions } from '../types/types';
-import { 
-  generateSourceName, 
-  isValidMessage, 
-  isMessageExpired, 
+import {
+  BroadcastActions,
+  BroadcastMessage,
+  BroadcastOptions,
+  SendMessageOptions,
+} from '../types/types';
+import {
+  generateSourceName,
+  isValidMessage,
+  isMessageExpired,
   createMessage,
   getInternalMessageType,
   isInternalType,
@@ -13,9 +18,9 @@ import {
 import { debug } from '../utils/debug';
 
 const INTERNAL_MESSAGE_TYPES = {
-    CLEAR_MESSAGE: 'CLEAR_MESSAGE',
-    CLEAR_ALL_MESSAGES: 'CLEAR_ALL_MESSAGES',
-  } as const;
+  CLEAR_MESSAGE: 'CLEAR_MESSAGE',
+  CLEAR_ALL_MESSAGES: 'CLEAR_ALL_MESSAGES',
+} as const;
 
 export const useBroadcastChannel = (
   channelName: string,
@@ -25,10 +30,10 @@ export const useBroadcastChannel = (
     sourceName,
     cleaningInterval = 1000,
     keepLatestMessage = false,
-    registeredTypes = [], 
+    registeredTypes = [],
     namespace = '',
     deduplicationTTL = 5 * 60 * 1000,
-    cleanupDebounceMs = 0
+    cleanupDebounceMs = 0,
   } = options;
 
   // State
@@ -41,8 +46,16 @@ export const useBroadcastChannel = (
   const receivedMessageIds = useRef(new Map<string, number>());
   const source = useRef(sourceName || generateSourceName()).current;
   const internalTypes = useRef({
-    CLEAR_MESSAGE: getInternalMessageType(INTERNAL_MESSAGE_TYPES.CLEAR_MESSAGE, channelName, namespace),
-    CLEAR_ALL_MESSAGES: getInternalMessageType(INTERNAL_MESSAGE_TYPES.CLEAR_ALL_MESSAGES, channelName, namespace),
+    CLEAR_MESSAGE: getInternalMessageType(
+      INTERNAL_MESSAGE_TYPES.CLEAR_MESSAGE,
+      channelName,
+      namespace
+    ),
+    CLEAR_ALL_MESSAGES: getInternalMessageType(
+      INTERNAL_MESSAGE_TYPES.CLEAR_ALL_MESSAGES,
+      channelName,
+      namespace
+    ),
   }).current;
 
   const resolvedChannelName = useMemo(() => {
@@ -67,107 +80,121 @@ export const useBroadcastChannel = (
     setTimeout(() => setError(null), 3000);
   }, []);
 
-  const clearMessage = useCallback((id: string) => {
-    setMessages(prev => prev.filter(msg => msg.id !== id));
-    setSentMessages(prev => prev.filter(msg => msg.id !== id));
-    channel.current?.postMessage({ 
-      id, 
-      type: internalTypes.CLEAR_MESSAGE, 
-      source 
-    });
-    debug.message.cleared(id);
-  }, [source, internalTypes.CLEAR_MESSAGE]);
+  const clearMessage = useCallback(
+    (id: string) => {
+      setMessages(prev => prev.filter(msg => msg.id !== id));
+      setSentMessages(prev => prev.filter(msg => msg.id !== id));
+      channel.current?.postMessage({
+        id,
+        type: internalTypes.CLEAR_MESSAGE,
+        source,
+      });
+      debug.message.cleared(id);
+    },
+    [source, internalTypes.CLEAR_MESSAGE]
+  );
 
   const clearAllMessages = useCallback(() => {
     setMessages([]);
     setSentMessages([]);
-    channel.current?.postMessage({ 
-      id: internalTypes.CLEAR_ALL_MESSAGES, 
-      type: internalTypes.CLEAR_ALL_MESSAGES, 
-      source 
+    channel.current?.postMessage({
+      id: internalTypes.CLEAR_ALL_MESSAGES,
+      type: internalTypes.CLEAR_ALL_MESSAGES,
+      source,
     });
   }, [source, internalTypes.CLEAR_ALL_MESSAGES]);
 
-  const clearSentMessage = useCallback((id: string) => {
-    setSentMessages(prev => prev.filter(msg => msg.id !== id));
-    channel.current?.postMessage({ 
-      id, 
-      type: internalTypes.CLEAR_MESSAGE, 
-      source 
-    });
-  }, [source, internalTypes.CLEAR_MESSAGE]);
-
-  const postMessage = useCallback((
-    messageType: string,
-    messageContent: any,
-    options: SendMessageOptions = {}
-  ) => {
-    const channelCurrent = channel.current;
-    if (!channelCurrent) {
-      const error = 'Channel not available';
-      debug.error(error);
-      setErrorMessage(error);
-      return;
-    }
+  const clearSentMessage = useCallback(
+    (id: string) => {
+      setSentMessages(prev => prev.filter(msg => msg.id !== id));
+      channel.current?.postMessage({
+        id,
+        type: internalTypes.CLEAR_MESSAGE,
+        source,
+      });
+    },
+    [source, internalTypes.CLEAR_MESSAGE]
+  );
 
-    try {
-      const message = createMessage(messageType, messageContent, source, options);
-      channelCurrent.postMessage(message);
-      debug.message.sent(message);
-      setSentMessages(prev => [...prev, message]);
-    } catch (e) {
-      const error = 'Failed to send message';
-      debug.error(error);
-      setErrorMessage(error);
-    }
-  }, [source, setErrorMessage]);
-
-  const handleMessage = useCallback((event: MessageEvent) => {
-    try {
-      const message: BroadcastMessage = event.data;
-      debug.message.received(message);
-
-      if (!isValidMessage(message)) return;
-      if (message.source === source) return;
-      if (!isInternalType(message.type) && registeredTypes.length > 0 && !registeredTypes.includes(message.type)) return;
-      if (isMessageExpired(message)) {
-        debug.message.expired(message.id);
+  const postMessage = useCallback(
+    (messageType: string, messageContent: any, options: SendMessageOptions = {}) => {
+      const channelCurrent = channel.current;
+      if (!channelCurrent) {
+        const error = 'Channel not available';
+        debug.error(error);
+        setErrorMessage(error);
         return;
       }
 
-      if (isValidInternalClearMessage(message)) {
-        if (message.type === internalTypes.CLEAR_MESSAGE) {
-          setMessages(prev =>
-            prev.filter(msg => !(msg.id === message.id && msg.source === message.source))
-          );
+      try {
+        const message = createMessage(messageType, messageContent, source, options);
+        channelCurrent.postMessage(message);
+        debug.message.sent(message);
+        setSentMessages(prev => [...prev, message]);
+      } catch (e) {
+        const error = 'Failed to send message';
+        debug.error(error);
+        setErrorMessage(error);
+      }
+    },
+    [source, setErrorMessage]
+  );
+
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      try {
+        const message: BroadcastMessage = event.data;
+        debug.message.received(message);
+
+        if (!isValidMessage(message)) return;
+        if (message.source === source) return;
+        if (
+          !isInternalType(message.type) &&
+          registeredTypes.length > 0 &&
+          !registeredTypes.includes(message.type)
+        )
+          return;
+        if (isMessageExpired(message)) {
+          debug.message.expired(message.id);
           return;
         }
-      
-        if (message.type === internalTypes.CLEAR_ALL_MESSAGES) {
-          setMessages(prev => prev.filter(msg => msg.source !== message.source));
+
+        if (isValidInternalClearMessage(message)) {
+          if (message.type === internalTypes.CLEAR_MESSAGE) {
+            setMessages(prev =>
+              prev.filter(msg => !(msg.id === message.id && msg.source === message.source))
+            );
+            return;
+          }
+
+          if (message.type === internalTypes.CLEAR_ALL_MESSAGES) {
+            setMessages(prev => prev.filter(msg => msg.source !== message.source));
+            return;
+          }
+        }
+
+        const now = Date.now();
+        const receivedAt = receivedMessageIds.current.get(message.id);
+        if (receivedAt && now - receivedAt < deduplicationTTL) {
+          debug.message.duplicate(message.id);
           return;
         }
-      }
 
-      const now = Date.now();
-      const receivedAt = receivedMessageIds.current.get(message.id);
-      if (receivedAt && now - receivedAt < deduplicationTTL) {
-        debug.message.duplicate(message.id);
-        return;
+        receivedMessageIds.current.set(message.id, now);
+        setMessages(prev => (keepLatestMessage ? [message] : [...prev, message]));
+      } catch (e) {
+        const error = 'Error processing broadcast message';
+        debug.error(error);
+        setErrorMessage(error);
       }
-
-      receivedMessageIds.current.set(message.id, now);
-      setMessages(prev => keepLatestMessage ? [message] : [...prev, message]);
-    } catch (e) {
-      const error = 'Error processing broadcast message';
-      debug.error(error);
-      setErrorMessage(error);
-    }
-  }, [source, registeredTypes, keepLatestMessage, setErrorMessage, internalTypes, deduplicationTTL]);
+    },
+    [source, registeredTypes, keepLatestMessage, setErrorMessage, internalTypes, deduplicationTTL]
+  );
 
   useEffect(() => {
     if (typeof BroadcastChannel === 'undefined') {
-      const error = 'BroadcastChannel is not supported in this browser. Please check browser compatibility.';
+      const error =
+        'BroadcastChannel is not supported in this browser. Please check browser compatibility.';
       debug.error(error);
       setErrorMessage(error);
       return;
@@ -213,7 +240,7 @@ export const useBroadcastChannel = (
         }
       }
     }, 60 * 1000);
-  
+
     return () => clearInterval(interval);
   }, [deduplicationTTL]);
 
@@ -229,4 +256,4 @@ export const useBroadcastChannel = (
   };
 };
 
-export default useBroadcastChannel; 
+export default useBroadcastChannel;

package/src/index.ts

@@ -5,5 +5,5 @@ export type {
   BroadcastOptions,
   SendMessageOptions,
   BroadcastMessage,
-  BroadcastActions
+  BroadcastActions,
 } from './types/types';

package/src/tests/BroadcastProvider.test.tsx

@@ -36,7 +36,7 @@ const TestComponent = () => {
     <div>
       <div data-testid="error">{error}</div>
       <div data-testid="messages">
-        {messages.map((msg) => (
+        {messages.map(msg => (
           <div key={msg.id} data-testid={`message-${msg.id}`}>
             {msg.message.text}
           </div>
@@ -92,7 +92,7 @@ describe('BroadcastProvider', () => {
       type: 'test',
       message: { text: 'Hello' },
       source: 'other-tab',
-      timestamp: Date.now()
+      timestamp: Date.now(),
     };
 
     act(() => {
@@ -138,7 +138,7 @@ describe('BroadcastProvider', () => {
     };
 
     const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
-    
+
     render(
       <BroadcastProvider channelName="test-channel">
         <ThrowComponent />
@@ -147,17 +147,17 @@ describe('BroadcastProvider', () => {
 
     expect(screen.getByText('Error occurred in BroadcastProvider')).toBeInTheDocument();
     expect(consoleError).toHaveBeenCalledWith('BroadcastChannel error:', expect.any(Error));
-    
+
     consoleError.mockRestore();
   });
 
   it('throws error when useBroadcastProvider is used outside provider', () => {
     const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
-    
+
     expect(() => {
       render(<TestComponent />);
     }).toThrow('useBroadcastProvider must be used within a BroadcastProvider');
-    
+
     consoleError.mockRestore();
   });
-}); 
+});

package/src/tests/debug.test.ts

@@ -48,14 +48,18 @@ describe('debug', () => {
     it('logs channel events', () => {
       debug.channel.created('test-channel');
       expect(console.log).toHaveBeenCalledWith(
-        expect.stringMatching(/\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/),
+        expect.stringMatching(
+          /\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/
+        ),
         'Channel created:',
         'test-channel'
       );
 
       debug.channel.closed('test-channel');
       expect(console.log).toHaveBeenCalledWith(
-        expect.stringMatching(/\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/),
+        expect.stringMatching(
+          /\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/
+        ),
         'Channel closed:',
         'test-channel'
       );
@@ -63,38 +67,48 @@ describe('debug', () => {
 
     it('logs message events', () => {
       const testMessage = { id: '123', type: 'test' };
-      
+
       debug.message.sent(testMessage);
       expect(console.log).toHaveBeenCalledWith(
-        expect.stringMatching(/\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/),
+        expect.stringMatching(
+          /\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/
+        ),
         'Message sent:',
         testMessage
       );
 
       debug.message.received(testMessage);
       expect(console.log).toHaveBeenCalledWith(
-        expect.stringMatching(/\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/),
+        expect.stringMatching(
+          /\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/
+        ),
         'Message received:',
         testMessage
       );
 
       debug.message.cleared('123');
       expect(console.log).toHaveBeenCalledWith(
-        expect.stringMatching(/\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/),
+        expect.stringMatching(
+          /\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/
+        ),
         'Message cleared:',
         '123'
       );
 
       debug.message.expired('123');
       expect(console.log).toHaveBeenCalledWith(
-        expect.stringMatching(/\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/),
+        expect.stringMatching(
+          /\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/
+        ),
         'Message expired:',
         '123'
       );
 
       debug.message.duplicate('123');
       expect(console.warn).toHaveBeenCalledWith(
-        expect.stringMatching(/\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/),
+        expect.stringMatching(
+          /\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/
+        ),
         'Duplicate message ignored:',
         '123'
       );
@@ -103,14 +117,18 @@ describe('debug', () => {
     it('logs cleanup events', () => {
       debug.cleanup.started();
       expect(console.log).toHaveBeenCalledWith(
-        expect.stringMatching(/\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/),
+        expect.stringMatching(
+          /\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/
+        ),
         'Cleanup started',
         ''
       );
 
       debug.cleanup.completed(5);
       expect(console.log).toHaveBeenCalledWith(
-        expect.stringMatching(/\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/),
+        expect.stringMatching(
+          /\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/
+        ),
         'Cleanup completed:',
         { removedCount: 5 }
       );
@@ -119,7 +137,9 @@ describe('debug', () => {
     it('logs errors', () => {
       debug.error('test error');
       expect(console.error).toHaveBeenCalledWith(
-        expect.stringMatching(/\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/),
+        expect.stringMatching(
+          /\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z\] \[react-broadcast-sync\]/
+        ),
         'Error:',
         'test error'
       );
@@ -153,18 +173,18 @@ describe('debug', () => {
     });
 
     it('logs message with no data', () => {
-        debug.cleanup.started();
-        expect(console.log).toHaveBeenCalledWith(
-          expect.stringContaining('[react-broadcast-sync]'),
-          'Cleanup started',
-          ''
-        );
-      });
+      debug.cleanup.started();
+      expect(console.log).toHaveBeenCalledWith(
+        expect.stringContaining('[react-broadcast-sync]'),
+        'Cleanup started',
+        ''
+      );
+    });
   });
 
   describe('when process.env is undefined', () => {
     beforeEach(() => {
-      // @ts-ignore - Simulating environment where process.env is undefined
+      // @ts-expect-error - Testing invalid input
       process.env = undefined;
     });
 
@@ -176,24 +196,44 @@ describe('debug', () => {
 
   it('logs info messages', () => {
     debug.channel.created('test-channel');
-    expect(console.log).toHaveBeenCalledWith(expect.stringContaining('[react-broadcast-sync]'), 'Channel created:', 'test-channel');
+    expect(console.log).toHaveBeenCalledWith(
+      expect.stringContaining('[react-broadcast-sync]'),
+      'Channel created:',
+      'test-channel'
+    );
   });
 
   it('logs warning messages', () => {
     debug.message.duplicate('test-id');
-    expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('[react-broadcast-sync]'), 'Duplicate message ignored:', 'test-id');
+    expect(console.warn).toHaveBeenCalledWith(
+      expect.stringContaining('[react-broadcast-sync]'),
+      'Duplicate message ignored:',
+      'test-id'
+    );
   });
 
   it('logs error messages', () => {
     debug.error('Test error');
-    expect(console.error).toHaveBeenCalledWith(expect.stringContaining('[react-broadcast-sync]'), 'Error:', 'Test error');
+    expect(console.error).toHaveBeenCalledWith(
+      expect.stringContaining('[react-broadcast-sync]'),
+      'Error:',
+      'Test error'
+    );
   });
 
   it('logs cleanup information', () => {
     debug.cleanup.started();
-    expect(console.log).toHaveBeenCalledWith(expect.stringContaining('[react-broadcast-sync]'), 'Cleanup started', '');
+    expect(console.log).toHaveBeenCalledWith(
+      expect.stringContaining('[react-broadcast-sync]'),
+      'Cleanup started',
+      ''
+    );
 
     debug.cleanup.completed(2);
-    expect(console.log).toHaveBeenCalledWith(expect.stringContaining('[react-broadcast-sync]'), 'Cleanup completed:', { removedCount: 2 });
+    expect(console.log).toHaveBeenCalledWith(
+      expect.stringContaining('[react-broadcast-sync]'),
+      'Cleanup completed:',
+      { removedCount: 2 }
+    );
   });
-}); 
+});

package/src/tests/messageUtils.test.ts

@@ -8,7 +8,7 @@ import {
   getInternalMessageType,
   isInternalType,
   isValidInternalClearMessage,
-  debounce
+  debounce,
 } from '../utils/messageUtils';
 
 beforeEach(() => {
@@ -86,7 +86,7 @@ describe('messageUtils', () => {
     const valid = {
       id: 'abc',
       type: getInternalMessageType('CLEAR_ALL_MESSAGES', 'ch'),
-      source: 'tab-1'
+      source: 'tab-1',
     };
     const invalid = { id: 123, type: 'bad', source: 'tab-1' };
     expect(isValidInternalClearMessage(valid)).toBe(true);
@@ -112,9 +112,14 @@ describe('debounce', () => {
   });
 
   it('debounce handles multiple calls and preserves this context', () => {
-    const obj = { value: 0, increment: function() { this.value++; } };
+    const obj = {
+      value: 0,
+      increment: function () {
+        this.value++;
+      },
+    };
     const debounced = debounce(obj.increment.bind(obj), 100);
-    
+
     debounced();
     debounced();
     debounced.flush();
@@ -124,7 +129,7 @@ describe('debounce', () => {
   it('debounce flush returns undefined when no pending call', () => {
     const fn = jest.fn();
     const debounced = debounce(fn, 100);
-    
+
     expect(debounced.flush()).toBeUndefined();
     expect(fn).not.toHaveBeenCalled();
   });
@@ -132,7 +137,7 @@ describe('debounce', () => {
   it('debounce handles function with return value', () => {
     const fn = jest.fn().mockReturnValue('test');
     const debounced = debounce(fn, 100);
-    
+
     debounced();
     expect(debounced.flush()).toBe('test');
   });
@@ -145,7 +150,7 @@ describe('debounce', () => {
     jest.advanceTimersByTime(200);
     expect(fn).not.toHaveBeenCalled();
   });
-  
+
   it('debounce.flush executes immediately', () => {
     const fn = jest.fn();
     const debounced = debounce(fn, 100);
@@ -157,11 +162,11 @@ describe('debounce', () => {
   it('debounce handles multiple calls with different arguments', () => {
     const fn = jest.fn();
     const debounced = debounce(fn, 100);
-    
+
     debounced('first');
     debounced('second');
     debounced('third');
-    
+
     expect(fn).not.toHaveBeenCalled();
     debounced.flush();
     expect(fn).toHaveBeenCalledTimes(1);
@@ -171,7 +176,7 @@ describe('debounce', () => {
   it('debounce handles cancel and flush in sequence', () => {
     const fn = jest.fn();
     const debounced = debounce(fn, 100);
-    
+
     debounced('test');
     debounced.cancel();
     expect(debounced.flush()).toBeUndefined();
@@ -217,14 +222,14 @@ describe('debounce', () => {
   it('debounce.flush handles case where timeoutId exists but lastArgs is null', () => {
     const fn = jest.fn();
     const debounced = debounce(fn, 100);
-    
+
     // Schedule a call
     debounced('test');
-    
+
     // Force the timeout to be set but clear lastArgs
     jest.advanceTimersByTime(50); // Advance partially through the timeout
     debounced.cancel(); // This clears lastArgs but might not clear timeoutId immediately
-    
+
     // Call flush when timeoutId exists but lastArgs is null
     const result = debounced.flush();
     expect(result).toBeUndefined();
@@ -234,11 +239,11 @@ describe('debounce', () => {
   it('debounce.flush handles multiple calls with different arguments and preserves return value', () => {
     const fn = jest.fn((x: number) => x * 2);
     const debounced = debounce(fn, 100);
-    
+
     debounced(1);
     debounced(2);
     debounced(3);
-    
+
     const result = debounced.flush();
     expect(result).toBe(6); // 3 * 2
     expect(fn).toHaveBeenCalledTimes(1);