react-broadcast-sync 1.1.4 → 1.2.1

package/src/hooks/useBroadcastChannel.ts

@@ -3,6 +3,9 @@ import {
   BroadcastActions,
   BroadcastMessage,
   BroadcastOptions,
+  ClearMessage,
+  ClearReceivedMessagesOptions,
+  ClearSentMessagesOptions,
   SendMessageOptions,
 } from '../types/types';
 import {
@@ -17,9 +20,8 @@ import {
 } from '../utils/messageUtils';
 import { debug } from '../utils/debug';
 
-const INTERNAL_MESSAGE_TYPES = {
-  CLEAR_MESSAGE: 'CLEAR_MESSAGE',
-  CLEAR_ALL_MESSAGES: 'CLEAR_ALL_MESSAGES',
+const INTERNAL_MESSAGE_TYPES: Record<string, ClearMessage> = {
+  CLEAR_SENT_MESSAGES: 'CLEAR_SENT_MESSAGES',
 } as const;
 
 export const useBroadcastChannel = (
@@ -46,13 +48,8 @@ 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,
+    CLEAR_SENT_MESSAGES: getInternalMessageType(
+      INTERNAL_MESSAGE_TYPES.CLEAR_SENT_MESSAGES,
       channelName,
       namespace
     ),
@@ -80,42 +77,6 @@ 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 clearAllMessages = useCallback(() => {
-    setMessages([]);
-    setSentMessages([]);
-    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;
@@ -140,6 +101,55 @@ export const useBroadcastChannel = (
     [source, setErrorMessage]
   );
 
+  const clearReceivedMessages = useCallback((options: ClearReceivedMessagesOptions = {}) => {
+    const hasFilters = Boolean(
+      (options.ids && options.ids.length) ||
+        (options.types && options.types.length) ||
+        (options.sources && options.sources.length)
+    );
+
+    setMessages(prev =>
+      hasFilters
+        ? prev.filter(
+            msg =>
+              !(options.ids && options.ids.includes(msg.id)) &&
+              !(options.types && options.types.includes(msg.type)) &&
+              !(options.sources && options.sources.includes(msg.source))
+          )
+        : []
+    );
+  }, []);
+
+  const clearSentMessages = useCallback((options: ClearSentMessagesOptions = {}) => {
+    const { ids = [], types = [], sync = false } = options ?? {};
+    setSentMessages(prev =>
+      ids.length > 0 || types.length > 0
+        ? prev.filter(msg => {
+            // Only consider messages from the same sender
+            if (msg.source !== source) return true;
+
+            // Decide whether this message should be cleared:
+            // - If the ids array is empty, treat as wildcard (match all ids)
+            // - If the types array is empty, treat as wildcard (match all types)
+            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);
+          })
+        : []
+    );
+    if (sync) {
+      channel.current?.postMessage(
+        createMessage(
+          internalTypes.CLEAR_SENT_MESSAGES,
+          { ids: options.ids ?? [], types: options.types ?? [] },
+          source
+        )
+      );
+    }
+  }, []);
+
   const handleMessage = useCallback(
     (event: MessageEvent) => {
       try {
@@ -160,15 +170,26 @@ export const useBroadcastChannel = (
         }
 
         if (isValidInternalClearMessage(message)) {
-          if (message.type === internalTypes.CLEAR_MESSAGE) {
+          if (message.type === internalTypes.CLEAR_SENT_MESSAGES) {
+            const { ids = [], types = [] } = (message as any).message || {};
+
             setMessages(prev =>
-              prev.filter(msg => !(msg.id === message.id && msg.source === message.source))
+              prev.filter(msg => {
+                // Only consider messages from the same sender
+                if (msg.source !== message.source) return true;
+
+                // Decide whether this message should be cleared:
+                // - If the ids array is empty, treat as wildcard (match all ids)
+                // - If the types array is empty, treat as wildcard (match all types)
+                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);
+              })
             );
-            return;
-          }
 
-          if (message.type === internalTypes.CLEAR_ALL_MESSAGES) {
-            setMessages(prev => prev.filter(msg => msg.source !== message.source));
+            // After handling we don't want to process this internal control packet further
             return;
           }
         }
@@ -249,9 +270,8 @@ export const useBroadcastChannel = (
     messages,
     sentMessages,
     postMessage,
-    clearMessage,
-    clearAllMessages,
-    clearSentMessage,
+    clearReceivedMessages,
+    clearSentMessages,
     error,
   };
 };

package/src/tests/messageUtils.test.ts

@@ -65,19 +65,19 @@ describe('messageUtils', () => {
   });
 
   it('getInternalMessageType produces unique hashes for different channels', () => {
-    const one = getInternalMessageType('CLEAR_MESSAGE', 'chanA');
-    const two = getInternalMessageType('CLEAR_MESSAGE', 'chanB');
+    const one = getInternalMessageType('CLEAR_SENT_MESSAGES', 'chanA');
+    const two = getInternalMessageType('CLEAR_SENT_MESSAGES', 'chanB');
     expect(one).not.toBe(two);
   });
 
   it('getInternalMessageType generates consistent hash string', () => {
-    const type = getInternalMessageType('CLEAR_MESSAGE', 'my-channel', 'ns');
+    const type = getInternalMessageType('CLEAR_SENT_MESSAGES', 'my-channel', 'ns');
     expect(type).toContain('__INTERNAL__');
-    expect(type).toContain('CLEAR_MESSAGE');
+    expect(type).toContain('CLEAR_SENT_MESSAGES');
   });
 
   it('isInternalType detects internal message types', () => {
-    const type = getInternalMessageType('CLEAR_ALL_MESSAGES', 'chan');
+    const type = getInternalMessageType('CLEAR_SENT_MESSAGES', 'chan');
     expect(isInternalType(type)).toBe(true);
     expect(isInternalType('normal-type')).toBe(false);
   });
@@ -85,7 +85,7 @@ describe('messageUtils', () => {
   it('isValidInternalClearMessage detects valid structure', () => {
     const valid = {
       id: 'abc',
-      type: getInternalMessageType('CLEAR_ALL_MESSAGES', 'ch'),
+      type: getInternalMessageType('CLEAR_SENT_MESSAGES', 'ch'),
       source: 'tab-1',
     };
     const invalid = { id: 123, type: 'bad', source: 'tab-1' };