handle dotted and slashed notification types

Author: joetannenbaum

packages/react/src/hooks/use-echo.ts

@@ -181,7 +181,17 @@ export const useEchoNotification = <
         "private",
     );
 
-    const events = toArray(event);
+    const events = useRef(
+        toArray(event)
+            .map((e) => {
+                if (e.includes(".")) {
+                    return [e, e.replace(/\./g, "\\")];
+                }
+
+                return [e, e.replace(/\\/g, ".")];
+            })
+            .flat(),
+    );
     const listening = useRef(false);
     const initialized = useRef(false);
 
@@ -191,11 +201,14 @@ export const useEchoNotification = <
                 return;
             }
 
-            if (events.length === 0 || events.includes(notification.type)) {
+            if (
+                events.current.length === 0 ||
+                events.current.includes(notification.type)
+            ) {
                 callback(notification);
             }
         },
-        dependencies.concat(events).concat([callback]),
+        dependencies.concat(events.current).concat([callback]),
     );
 
     const listen = useCallback(() => {
@@ -221,7 +234,7 @@ export const useEchoNotification = <
 
     useEffect(() => {
         listen();
-    }, dependencies.concat(events));
+    }, dependencies.concat(events.current));
 
     return {
         ...result,

packages/react/tests/use-echo.test.ts

@@ -977,6 +977,35 @@ describe("useEchoNotification hook", async () => {
         expect(mockCallback).not.toHaveBeenCalledWith(notification3);
     });
 
+    it("handles dotted and slashed notification event types", async () => {
+        const mockCallback = vi.fn();
+        const channelName = "test-channel";
+        const events = [
+            "App.Notifications.First",
+            "App\\Notifications\\Second",
+        ];
+
+        renderHook(() =>
+            echoModule.useEchoNotification(channelName, mockCallback, events),
+        );
+
+        const channel = echoInstance.private(channelName);
+        expect(channel.notification).toHaveBeenCalled();
+
+        const notificationCallback = vi.mocked(channel.notification).mock
+            .calls[0][0];
+
+        const notification1 = { type: "App\\Notifications\\First", data: {} };
+        const notification2 = { type: "App\\Notifications\\Second", data: {} };
+
+        notificationCallback(notification1);
+        notificationCallback(notification2);
+
+        expect(mockCallback).toHaveBeenCalledWith(notification1);
+        expect(mockCallback).toHaveBeenCalledWith(notification2);
+        expect(mockCallback).toHaveBeenCalledTimes(2);
+    });
+
     it("accepts all notifications when no event types specified", async () => {
         const mockCallback = vi.fn();
         const channelName = "test-channel";

packages/vue/src/composables/useEcho.ts

@@ -196,12 +196,21 @@ export const useEchoNotification = <
         "private",
     );
 
-    const events = toArray(event);
-    let listening = false;
-    let initialized = false;
+    const events = toArray(event)
+        .map((e) => {
+            if (e.includes(".")) {
+                return [e, e.replace(/\./g, "\\")];
+            }
+
+            return [e, e.replace(/\\/g, ".")];
+        })
+        .flat();
+
+    const listening = ref(false);
+    const initialized = ref(false);
 
     const cb = (notification: BroadcastNotification<TPayload>) => {
-        if (!listening) {
+        if (!listening.value) {
             return;
         }
 
@@ -211,24 +220,24 @@ export const useEchoNotification = <
     };
 
     const listen = () => {
-        if (listening) {
+        if (listening.value) {
             return;
         }
 
-        if (!initialized) {
+        if (!initialized.value) {
             result.channel().notification(cb);
         }
 
-        listening = true;
-        initialized = true;
+        listening.value = true;
+        initialized.value = true;
     };
 
     const stopListening = () => {
-        if (!listening) {
+        if (!listening.value) {
             return;
         }
 
-        listening = false;
+        listening.value = false;
     };
 
     onMounted(() => {

packages/vue/tests/useEcho.test.ts

@@ -849,6 +849,43 @@ describe("useEchoNotification hook", async () => {
         expect(mockCallback).not.toHaveBeenCalledWith(notification3);
     });
 
+    it("handles dotted and slashed notification event types", async () => {
+        const mockCallback = vi.fn();
+        const channelName = "test-channel";
+        const events = [
+            "App.Notifications.First",
+            "App\\Notifications\\Second",
+        ];
+
+        wrapper = getNotificationTestComponent(
+            channelName,
+            mockCallback,
+            events,
+        );
+
+        const channel = echoInstance.private(channelName);
+        expect(channel.notification).toHaveBeenCalled();
+
+        const notificationCallback = vi.mocked(channel.notification).mock
+            .calls[0][0];
+
+        const notification1 = {
+            type: "App\\Notifications\\First",
+            data: {},
+        };
+        const notification2 = {
+            type: "App\\Notifications\\Second",
+            data: {},
+        };
+
+        notificationCallback(notification1);
+        notificationCallback(notification2);
+
+        expect(mockCallback).toHaveBeenCalledWith(notification1);
+        expect(mockCallback).toHaveBeenCalledWith(notification2);
+        expect(mockCallback).toHaveBeenCalledTimes(2);
+    });
+
     it("accepts all notifications when no event types specified", async () => {
         const mockCallback = vi.fn();
         const channelName = "test-channel";