react-broadcast-sync 1.2.1 → 1.4.0

package/src/hooks/useBroadcastChannel.ts

@@ -3,9 +3,10 @@ import {
   BroadcastActions,
   BroadcastMessage,
   BroadcastOptions,
-  ClearMessage,
   ClearReceivedMessagesOptions,
   ClearSentMessagesOptions,
+  GetLatestMessageOptions,
+  InternalMessage,
   SendMessageOptions,
 } from '../types/types';
 import {
@@ -14,16 +15,27 @@ import {
   isMessageExpired,
   createMessage,
   getInternalMessageType,
-  isInternalType,
   isValidInternalClearMessage,
   debounce,
 } from '../utils/messageUtils';
 import { debug } from '../utils/debug';
 
-const INTERNAL_MESSAGE_TYPES: Record<string, ClearMessage> = {
+const INTERNAL_MESSAGE_TYPES: Record<string, InternalMessage> = {
   CLEAR_SENT_MESSAGES: 'CLEAR_SENT_MESSAGES',
+  PING: 'PING',
+  PONG: 'PONG',
 } as const;
 
+let flushSyncFn: undefined | ((cb: () => void) => void) = undefined;
+if (process.env.NODE_ENV === 'test') {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    flushSyncFn = require('react-dom').flushSync;
+  } catch {
+    // ignore error in test env
+  }
+}
+
 export const useBroadcastChannel = (
   channelName: string,
   options: BroadcastOptions = {}
@@ -42,23 +54,34 @@ export const useBroadcastChannel = (
   const [messages, setMessages] = useState<BroadcastMessage[]>([]);
   const [sentMessages, setSentMessages] = useState<BroadcastMessage[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [isPingInProgress, setIsPingInProgress] = useState(false);
 
   // Refs
   const channel = useRef<BroadcastChannel | null>(null);
   const receivedMessageIds = useRef(new Map<string, number>());
-  const source = useRef(sourceName || generateSourceName()).current;
-  const internalTypes = useRef({
-    CLEAR_SENT_MESSAGES: getInternalMessageType(
-      INTERNAL_MESSAGE_TYPES.CLEAR_SENT_MESSAGES,
-      channelName,
-      namespace
-    ),
-  }).current;
+  const activeSourcesCollector = useRef<Set<string> | null>(null);
+
+  // Memoized values
+  const source = useMemo(() => sourceName || generateSourceName(), [sourceName]);
+  const internalTypes = useMemo(
+    () => ({
+      CLEAR_SENT_MESSAGES: getInternalMessageType(
+        INTERNAL_MESSAGE_TYPES.CLEAR_SENT_MESSAGES,
+        channelName,
+        namespace
+      ),
+      PING: getInternalMessageType(INTERNAL_MESSAGE_TYPES.PING, channelName, namespace),
+      PONG: getInternalMessageType(INTERNAL_MESSAGE_TYPES.PONG, channelName, namespace),
+    }),
+    [channelName, namespace]
+  );
 
   const resolvedChannelName = useMemo(() => {
     return `${channelName}-${namespace}`;
   }, [channelName, namespace]);
 
+  const stableRegisteredTypes = useMemo(() => registeredTypes, [JSON.stringify(registeredTypes)]);
+
   const performCleanup = useCallback(() => {
     setMessages(prev => prev.filter(msg => !isMessageExpired(msg)));
   }, []);
@@ -77,11 +100,51 @@ export const useBroadcastChannel = (
     setTimeout(() => setError(null), 3000);
   }, []);
 
+  const ping = useCallback(
+    (timeoutMs: number = 300): Promise<string[]> => {
+      if (isPingInProgress) {
+        debug.ping.inProgress();
+        return Promise.resolve([]);
+      }
+
+      if (!channel.current) {
+        const error =
+          'BroadcastChannel is not supported in this browser. Please check browser compatibility.';
+        debug.error(error);
+        setErrorMessage(error);
+        return Promise.resolve([]);
+      }
+
+      // Set synchronously before returning the promise
+      if (flushSyncFn) {
+        flushSyncFn(() => setIsPingInProgress(true));
+      } else {
+        setIsPingInProgress(true);
+      }
+      const collector = new Set<string>();
+      activeSourcesCollector.current = collector;
+
+      channel.current.postMessage(createMessage(internalTypes.PING, null, source));
+
+      return new Promise(resolve => {
+        setTimeout(() => {
+          setIsPingInProgress(false);
+          if (activeSourcesCollector.current === collector) {
+            activeSourcesCollector.current = null;
+          }
+          resolve(Array.from(collector));
+        }, timeoutMs);
+      });
+    },
+    [internalTypes.PING, source, setErrorMessage, isPingInProgress, flushSyncFn]
+  );
+
   const postMessage = useCallback(
     (messageType: string, messageContent: any, options: SendMessageOptions = {}) => {
       const channelCurrent = channel.current;
       if (!channelCurrent) {
-        const error = 'Channel not available';
+        const error =
+          'BroadcastChannel is not supported in this browser. Please check browser compatibility.';
         debug.error(error);
         setErrorMessage(error);
         return;
@@ -150,6 +213,24 @@ export const useBroadcastChannel = (
     }
   }, []);
 
+  const getLatestMessage = useCallback(
+    (options: GetLatestMessageOptions = {}) => {
+      const { source, type } = options;
+
+      for (let i = messages.length - 1; i >= 0; i--) {
+        const msg = messages[i];
+        const sourceMatches = !source || msg.source === source;
+        const typeMatches = !type || msg.type === type;
+        if (sourceMatches && typeMatches) {
+          return msg;
+        }
+      }
+
+      return null;
+    },
+    [messages]
+  );
+
   const handleMessage = useCallback(
     (event: MessageEvent) => {
       try {
@@ -158,23 +239,12 @@ export const useBroadcastChannel = (
 
         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 (isValidInternalClearMessage(message)) {
           if (message.type === internalTypes.CLEAR_SENT_MESSAGES) {
             const { ids = [], types = [] } = (message as any).message || {};
 
-            setMessages(prev =>
-              prev.filter(msg => {
+            setMessages(prev => [
+              ...prev.filter(msg => {
                 // Only consider messages from the same sender
                 if (msg.source !== message.source) return true;
 
@@ -184,14 +254,35 @@ export const useBroadcastChannel = (
                 const idMatches = ids.length === 0 || ids.includes(msg.id);
                 const typeMatches = types.length === 0 || types.includes(msg.type);
 
-                // Remove when BOTH criteria match (wildcards included)
                 return !(idMatches && typeMatches);
-              })
-            );
+              }),
+            ]);
 
-            // After handling we don't want to process this internal control packet further
             return;
           }
+          if (message.type === internalTypes.PING) {
+            channel.current?.postMessage(createMessage(internalTypes.PONG, null, source));
+            return;
+          }
+
+          if (message.type === internalTypes.PONG) {
+            const pongSource = message.source;
+            const collector = activeSourcesCollector.current;
+
+            if (collector && collector.has(pongSource) === false) {
+              collector.add(pongSource);
+            }
+
+            return;
+          }
+        }
+        if (stableRegisteredTypes.length > 0 && !stableRegisteredTypes.includes(message.type)) {
+          debug.message.ignored(message.type);
+          return;
+        }
+        if (isMessageExpired(message)) {
+          debug.message.expired(message.id);
+          return;
         }
 
         const now = Date.now();
@@ -209,9 +300,26 @@ export const useBroadcastChannel = (
         setErrorMessage(error);
       }
     },
-    [source, registeredTypes, keepLatestMessage, setErrorMessage, internalTypes, deduplicationTTL]
+    [
+      source,
+      stableRegisteredTypes,
+      keepLatestMessage,
+      setErrorMessage,
+      internalTypes,
+      deduplicationTTL,
+    ]
   );
 
+  const closeChannel = useCallback(() => {
+    const bc = channel.current;
+    if (bc && typeof bc.close === 'function') {
+      bc.removeEventListener('message', handleMessage);
+      bc.close();
+      debug.channel.closed(resolvedChannelName);
+      channel.current = null;
+    }
+  }, [handleMessage, resolvedChannelName]);
+
   useEffect(() => {
     if (typeof BroadcastChannel === 'undefined') {
       const error =
@@ -227,9 +335,7 @@ export const useBroadcastChannel = (
 
     bc.addEventListener('message', handleMessage);
     return () => {
-      bc.removeEventListener('message', handleMessage);
-      bc.close();
-      debug.channel.closed(resolvedChannelName);
+      closeChannel();
     };
   }, [resolvedChannelName, handleMessage, setErrorMessage]);
 
@@ -269,10 +375,14 @@ export const useBroadcastChannel = (
     channelName: resolvedChannelName,
     messages,
     sentMessages,
+    isPingInProgress,
+    ping,
     postMessage,
     clearReceivedMessages,
     clearSentMessages,
+    getLatestMessage,
     error,
+    closeChannel,
   };
 };