fix: makeEventFunctions take an array of parameters (#2186)

- Previously every emit required exactly one parameter, which is not the
case
- Allow zero or more parameters

Author: mofojed

packages/dashboard/src/PanelEvent.ts

@@ -76,7 +76,7 @@ export const {
   listen: listenForPanelOpen,
   emit: emitPanelOpen,
   useListener: usePanelOpenListener,
-} = makeEventFunctions<PanelOpenEventDetail>(PanelEvent.OPEN);
+} = makeEventFunctions<[detail: PanelOpenEventDetail]>(PanelEvent.OPEN);
 
 // TODO (#2147): Add the rest of the event functions here. Need to create the correct types for all of them.
 

packages/golden-layout/src/utils/EventUtils.test.ts

@@ -45,7 +45,7 @@ describe('EventUtils', () => {
 
   it('makeEmitFunction', () => {
     const event = 'test';
-    const emit = makeEmitFunction(event);
+    const emit = makeEmitFunction<unknown>(event);
     const payload = { test: 'test' };
     emit(eventEmitter, payload);
     expect(eventEmitter.emit).toHaveBeenCalledWith(event, payload);
@@ -109,30 +109,93 @@ describe('EventUtils', () => {
   });
 
   describe('makeEventFunctions', () => {
-    const event = 'test';
-    const { listen, emit, useListener } = makeEventFunctions(event);
-    const handler = jest.fn();
+    describe('makeEventFunctions without payload', () => {
+      const event = 'test';
+      const { listen, emit, useListener } = makeEventFunctions(event);
+      const handler = jest.fn();
 
-    it('listen', () => {
-      listen(eventEmitter, handler);
-      expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
-      expect(eventEmitter.off).not.toHaveBeenCalled();
+      it('listen', () => {
+        listen(eventEmitter, handler);
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+      });
+
+      it('emit', () => {
+        emit(eventEmitter);
+        expect(eventEmitter.emit).toHaveBeenCalledWith(event);
+      });
+
+      it('useListener', () => {
+        const { unmount } = renderHook(() =>
+          useListener(eventEmitter, handler)
+        );
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+        jest.clearAllMocks();
+        unmount();
+        expect(eventEmitter.on).not.toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).toHaveBeenCalledWith(event, handler);
+      });
     });
+    describe('makeEventFunctions with payload', () => {
+      type Payload = { test: string };
+      const event = 'test';
+      const { listen, emit, useListener } = makeEventFunctions<Payload>(event);
+      const handler = jest.fn();
+
+      it('listen', () => {
+        listen(eventEmitter, handler);
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+      });
+
+      it('emit', () => {
+        const payload: Payload = { test: 'test' };
+        emit(eventEmitter, payload);
+        expect(eventEmitter.emit).toHaveBeenCalledWith(event, payload);
+      });
 
-    it('emit', () => {
-      const payload = { test: 'test' };
-      emit(eventEmitter, payload);
-      expect(eventEmitter.emit).toHaveBeenCalledWith(event, payload);
+      it('useListener', () => {
+        const { unmount } = renderHook(() =>
+          useListener(eventEmitter, handler)
+        );
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+        jest.clearAllMocks();
+        unmount();
+        expect(eventEmitter.on).not.toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).toHaveBeenCalledWith(event, handler);
+      });
     });
+    describe('makeEventFunctions with multiple parameters', () => {
+      type Payload = [number, string];
+      const event = 'test';
+      const { listen, emit, useListener } = makeEventFunctions<Payload>(event);
+      const handler = jest.fn();
 
-    it('useListener', () => {
-      const { unmount } = renderHook(() => useListener(eventEmitter, handler));
-      expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
-      expect(eventEmitter.off).not.toHaveBeenCalled();
-      jest.clearAllMocks();
-      unmount();
-      expect(eventEmitter.on).not.toHaveBeenCalledWith(event, handler);
-      expect(eventEmitter.off).toHaveBeenCalledWith(event, handler);
+      it('listen', () => {
+        listen(eventEmitter, handler);
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+      });
+
+      it('emit', () => {
+        const payload: Payload = [1, 'test'];
+        emit(eventEmitter, ...payload);
+        expect(eventEmitter.emit).toHaveBeenCalledWith(event, ...payload);
+      });
+
+      it('useListener', () => {
+        const { unmount } = renderHook(() =>
+          useListener(eventEmitter, handler)
+        );
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+        jest.clearAllMocks();
+        unmount();
+        expect(eventEmitter.on).not.toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).toHaveBeenCalledWith(event, handler);
+      });
     });
   });
 });

packages/golden-layout/src/utils/EventUtils.ts

@@ -1,20 +1,23 @@
-import EventEmitter from './EventEmitter';
 import { useEffect } from 'react';
+import EventEmitter from './EventEmitter';
 
+type AsArray<P> = P extends unknown[] ? P : [P];
+
+export type EventHandlerFunction<P = []> = (...parameters: AsArray<P>) => void;
 export type EventListenerRemover = () => void;
-export type EventListenFunction<TPayload = unknown> = (
+export type EventListenFunction<TParameters = []> = (
   eventEmitter: EventEmitter,
-  handler: (p: TPayload) => void
+  handler: EventHandlerFunction<TParameters>
 ) => EventListenerRemover;
 
-export type EventEmitFunction<TPayload = unknown> = (
+export type EventEmitFunction<TParameters = []> = (
   eventEmitter: EventEmitter,
-  payload: TPayload
+  ...parameters: AsArray<TParameters>
 ) => void;
 
-export type EventListenerHook<TPayload = unknown> = (
+export type EventListenerHook<TParameters = []> = (
   eventEmitter: EventEmitter,
-  handler: (p: TPayload) => void
+  handler: EventHandlerFunction<TParameters>
 ) => void;
 
 /**
@@ -24,35 +27,35 @@ export type EventListenerHook<TPayload = unknown> = (
  * @param handler The handler to call when the event is emitted
  * @returns A function to stop listening for the event
  */
-export function listenForEvent<TPayload>(
+export function listenForEvent<TParameters = []>(
   eventEmitter: EventEmitter,
   event: string,
-  handler: (p: TPayload) => void
+  handler: EventHandlerFunction<TParameters>
 ): EventListenerRemover {
   eventEmitter.on(event, handler);
   return () => {
     eventEmitter.off(event, handler);
   };
 }
 
-export function makeListenFunction<TPayload>(
+export function makeListenFunction<TParameters = []>(
   event: string
-): EventListenFunction<TPayload> {
+): EventListenFunction<TParameters> {
   return (eventEmitter, handler) =>
     listenForEvent(eventEmitter, event, handler);
 }
 
-export function makeEmitFunction<TPayload>(
+export function makeEmitFunction<TParameters = []>(
   event: string
-): EventEmitFunction<TPayload> {
-  return (eventEmitter, payload) => {
-    eventEmitter.emit(event, payload);
+): EventEmitFunction<TParameters> {
+  return (eventEmitter, ...parameters) => {
+    eventEmitter.emit(event, ...parameters);
   };
 }
 
-export function makeUseListenerFunction<TPayload>(
+export function makeUseListenerFunction<TParameters = []>(
   event: string
-): EventListenerHook<TPayload> {
+): EventListenerHook<TParameters> {
   return (eventEmitter, handler) => {
     useEffect(
       () => listenForEvent(eventEmitter, event, handler),
@@ -66,14 +69,16 @@ export function makeUseListenerFunction<TPayload>(
  * @param event Name of the event to create functions for
  * @returns Listener, Emitter, and Hook functions for the event
  */
-export function makeEventFunctions<TPayload>(event: string): {
-  listen: EventListenFunction<TPayload>;
-  emit: EventEmitFunction<TPayload>;
-  useListener: EventListenerHook<TPayload>;
+export function makeEventFunctions<TParameters = []>(
+  event: string
+): {
+  listen: EventListenFunction<TParameters>;
+  emit: EventEmitFunction<TParameters>;
+  useListener: EventListenerHook<TParameters>;
 } {
   return {
-    listen: makeListenFunction<TPayload>(event),
-    emit: makeEmitFunction<TPayload>(event),
-    useListener: makeUseListenerFunction<TPayload>(event),
+    listen: makeListenFunction<TParameters>(event),
+    emit: makeEmitFunction<TParameters>(event),
+    useListener: makeUseListenerFunction<TParameters>(event),
   };
 }