Merge pull request #430 from laravel/optional-listener

Make events and listeners optional

Author: joetannenbaum

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

@@ -80,8 +80,8 @@ export const useEcho = <
     TVisibility extends Channel["visibility"] = "private",
 >(
     channelName: string,
-    event: string | string[],
-    callback: (payload: TPayload) => void,
+    event: string | string[] = [],
+    callback: (payload: TPayload) => void = () => {},
     dependencies: any[] = [],
     visibility: TVisibility = "private" as TVisibility,
 ) => {
@@ -173,8 +173,8 @@ export const useEchoPresence = <
     TDriver extends BroadcastDriver = BroadcastDriver,
 >(
     channelName: string,
-    event: string | string[],
-    callback: (payload: TPayload) => void,
+    event: string | string[] = [],
+    callback: (payload: TPayload) => void = () => {},
     dependencies: any[] = [],
 ) => {
     return useEcho<TPayload, TDriver, "presence">(
@@ -191,8 +191,8 @@ export const useEchoPublic = <
     TDriver extends BroadcastDriver = BroadcastDriver,
 >(
     channelName: string,
-    event: string | string[],
-    callback: (payload: TPayload) => void,
+    event: string | string[] = [],
+    callback: (payload: TPayload) => void = () => {},
     dependencies: any[] = [],
 ) => {
     return useEcho<TPayload, TDriver, "public">(
@@ -211,8 +211,8 @@ export const useEchoModel = <
 >(
     model: TModel,
     identifier: string | number,
-    event: ModelEvents<TModel> | ModelEvents<TModel>[],
-    callback: (payload: ModelPayload<TPayload>) => void,
+    event: ModelEvents<TModel> | ModelEvents<TModel>[] = [],
+    callback: (payload: ModelPayload<TPayload>) => void = () => {},
     dependencies: any[] = [],
 ) => {
     return useEcho<ModelPayload<TPayload>, TDriver, "private">(

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

@@ -307,6 +307,15 @@ describe("useEcho hook", async () => {
         const channel = echoInstance.private(channelName);
         expect(channel.listen).toHaveBeenCalledTimes(1);
     });
+
+    it("events and listeners are optional", async () => {
+        const channelName = "test-channel";
+
+        const { result } = renderHook(() => echoModule.useEcho(channelName));
+
+        expect(result.current).toHaveProperty("channel");
+        expect(result.current.channel).not.toBeNull();
+    });
 });
 
 describe("useEchoModel hook", async () => {
@@ -524,6 +533,18 @@ describe("useEchoModel hook", async () => {
         const channel = echoInstance.private(expectedChannelName);
         expect(channel.listen).toHaveBeenCalledWith(`.${event}`, mockCallback);
     });
+
+    it("events and listeners are optional", async () => {
+        const model = "App.Models.User.Profile";
+        const identifier = "123";
+
+        const { result } = renderHook(() =>
+            echoModule.useEchoModel(model, identifier),
+        );
+
+        expect(result.current).toHaveProperty("channel");
+        expect(result.current.channel).not.toBeNull();
+    });
 });
 
 describe("useEchoPublic hook", async () => {
@@ -661,6 +682,17 @@ describe("useEchoPublic hook", async () => {
 
         expect(echoInstance.leave).toHaveBeenCalledWith(channelName);
     });
+
+    it("events and listeners are optional", async () => {
+        const channelName = "test-channel";
+
+        const { result } = renderHook(() =>
+            echoModule.useEchoPublic(channelName),
+        );
+
+        expect(result.current).toHaveProperty("channel");
+        expect(result.current.channel).not.toBeNull();
+    });
 });
 
 describe("useEchoPresence hook", async () => {
@@ -810,4 +842,15 @@ describe("useEchoPresence hook", async () => {
 
         expect(echoInstance.leave).toHaveBeenCalledWith(channelName);
     });
+
+    it("events and listeners are optional", async () => {
+        const channelName = "test-channel";
+
+        const { result } = renderHook(() =>
+            echoModule.useEchoPresence(channelName),
+        );
+
+        expect(result.current).toHaveProperty("channel");
+        expect(result.current.channel).not.toBeNull();
+    });
 });

packages/vue/src/composables/useEcho.ts

@@ -80,8 +80,8 @@ export const useEcho = <
     TVisibility extends Channel["visibility"] = "private",
 >(
     channelName: string,
-    event: string | string[],
-    callback: (payload: TPayload) => void,
+    event: string | string[] = [],
+    callback: (payload: TPayload) => void = () => {},
     dependencies: any[] = [],
     visibility: TVisibility = "private" as TVisibility,
 ) => {
@@ -193,8 +193,8 @@ export const useEchoPresence = <
     TDriver extends BroadcastDriver = BroadcastDriver,
 >(
     channelName: string,
-    event: string | string[],
-    callback: (payload: TPayload) => void,
+    event: string | string[] = [],
+    callback: (payload: TPayload) => void = () => {},
     dependencies: any[] = [],
 ) => {
     return useEcho<TPayload, TDriver, "presence">(
@@ -211,8 +211,8 @@ export const useEchoPublic = <
     TDriver extends BroadcastDriver = BroadcastDriver,
 >(
     channelName: string,
-    event: string | string[],
-    callback: (payload: TPayload) => void,
+    event: string | string[] = [],
+    callback: (payload: TPayload) => void = () => {},
     dependencies: any[] = [],
 ) => {
     return useEcho<TPayload, TDriver, "public">(

packages/vue/tests/useEcho.test.ts

@@ -29,8 +29,8 @@ const getUnConfiguredTestComponent = (
 
 const getTestComponent = (
     channelName: string,
-    event: string | string[],
-    callback: (data: any) => void,
+    event: string | string[] | undefined,
+    callback: ((data: any) => void) | undefined,
     dependencies: any[] = [],
     visibility: "private" | "public" = "private",
 ) => {
@@ -58,8 +58,8 @@ const getTestComponent = (
 
 const getPublicTestComponent = (
     channelName: string,
-    event: string | string[],
-    callback: (data: any) => void,
+    event: string | string[] | undefined,
+    callback: ((data: any) => void) | undefined,
     dependencies: any[] = [],
 ) => {
     const TestComponent = defineComponent({
@@ -80,8 +80,8 @@ const getPublicTestComponent = (
 
 const getPresenceTestComponent = (
     channelName: string,
-    event: string | string[],
-    callback: (data: any) => void,
+    event: string | string[] | undefined,
+    callback: ((data: any) => void) | undefined,
     dependencies: any[] = [],
 ) => {
     const TestComponent = defineComponent({
@@ -416,6 +416,14 @@ describe("useEcho hook", async () => {
             );
         });
     });
+
+    it("events and listeners are optional", async () => {
+        const channelName = "test-channel";
+
+        wrapper = getTestComponent(channelName, undefined, undefined);
+
+        expect(wrapper.vm.channel).not.toBeNull();
+    });
 });
 
 describe("useEchoPublic hook", async () => {
@@ -538,6 +546,14 @@ describe("useEchoPublic hook", async () => {
 
         expect(echoInstance.leave).toHaveBeenCalledWith(channelName);
     });
+
+    it("events and listeners are optional", async () => {
+        const channelName = "test-channel";
+
+        wrapper = getPublicTestComponent(channelName, undefined, undefined);
+
+        expect(wrapper.vm.channel).not.toBeNull();
+    });
 });
 
 describe("useEchoPresence hook", async () => {
@@ -673,4 +689,12 @@ describe("useEchoPresence hook", async () => {
 
         expect(echoInstance.leave).toHaveBeenCalledWith(channelName);
     });
+
+    it("events and listeners are optional", async () => {
+        const channelName = "test-channel";
+
+        wrapper = getPresenceTestComponent(channelName, undefined, undefined);
+
+        expect(wrapper.vm.channel).not.toBeNull();
+    });
 });