feat(js): Com 208 improve the dx of the novu on function to return the cleanup

packages/js/src/event-emitter/novu-event-emitter.ts

@@ -8,8 +8,12 @@ export class NovuEventEmitter {
     this.#mittEmitter = mitt();
   }
 
-  on<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): void {
+  on<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): () => void {
     this.#mittEmitter.on(eventName, listener);
+
+    return () => {
+      this.off(eventName, listener);
+    };
   }
 
   off<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): void {

packages/js/src/notifications/notification.ts

@@ -3,7 +3,7 @@ import { EventHandler, EventNames, Events, NovuEventEmitter } from '../event-emi
 import { ActionTypeEnum, InboxNotification, Result } from '../types';
 import { archive, completeAction, read, revertAction, unarchive, unread } from './helpers';
 
-export class Notification implements Pick<NovuEventEmitter, 'on' | 'off'>, InboxNotification {
+export class Notification implements Pick<NovuEventEmitter, 'on'>, InboxNotification {
   #emitter: NovuEventEmitter;
   #inboxService: InboxService;
 
@@ -146,10 +146,18 @@ export class Notification implements Pick<NovuEventEmitter, 'on' | 'off'>, Inbox
     });
   }
 
-  on<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): void {
-    this.#emitter.on(eventName, listener);
+  on<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): () => void {
+    const cleanup = this.#emitter.on(eventName, listener);
+
+    return () => {
+      cleanup();
+    };
   }
 
+  /**
+   * @deprecated
+   * Use the cleanup function returned by the "on" method instead.
+   */
   off<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): void {
     this.#emitter.off(eventName, listener);
   }

packages/js/src/novu.ts

@@ -14,15 +14,19 @@ const version = PACKAGE_VERSION;
 const name = PACKAGE_NAME;
 const userAgent = `${name}@${version}`;
 
-export class Novu implements Pick<NovuEventEmitter, 'on' | 'off'> {
+export class Novu implements Pick<NovuEventEmitter, 'on'> {
   #emitter: NovuEventEmitter;
   #session: Session;
   #socket: Socket;
   #inboxService: InboxService;
 
   public readonly notifications: Notifications;
   public readonly preferences: Preferences;
-  public on: <Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>) => void;
+  public on: <Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>) => () => void;
+  /**
+   * @deprecated
+   * Use the cleanup function returned by the "on" method instead.
+   */
   public off: <Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>) => void;
 
   constructor(options: NovuOptions) {
@@ -61,7 +65,11 @@ export class Novu implements Pick<NovuEventEmitter, 'on' | 'off'> {
       if (this.#socket.isSocketEvent(eventName)) {
         this.#socket.initialize();
       }
-      this.#emitter.on(eventName, listener);
+      const cleanup = this.#emitter.on(eventName, listener);
+
+      return () => {
+        cleanup();
+      };
     };
 
     this.off = (eventName, listener) => {

packages/js/src/ui/api/hooks/useNotifications.ts

@@ -28,9 +28,9 @@ export const useNotificationsInfiniteScroll = (props: UseNotificationsInfiniteSc
       mutate({ data: data.notifications, hasMore: data.hasMore });
     };
 
-    novu.on('notifications.list.updated', listener);
+    const cleanup = novu.on('notifications.list.updated', listener);
 
-    onCleanup(() => novu.off('notifications.list.updated', listener));
+    onCleanup(() => cleanup());
   });
 
   createEffect(() => {

packages/js/src/ui/api/hooks/usePreferences.ts

@@ -27,9 +27,9 @@ export const usePreferences = (options?: FetchPreferencesArgs) => {
       mutate(data);
     };
 
-    novu.on('preferences.list.updated', listener);
+    const cleanup = novu.on('preferences.list.updated', listener);
 
-    onCleanup(() => novu.off('preferences.list.updated', listener));
+    onCleanup(() => cleanup());
   });
 
   createEffect(() => {

packages/js/src/ui/helpers/useNovuEvent.ts

@@ -12,10 +12,10 @@ export const useNovuEvent = <E extends EventNames>({
   const novu = useNovu();
 
   onMount(() => {
-    novu.on(event, eventHandler);
+    const cleanup = novu.on(event, eventHandler);
 
     onCleanup(() => {
-      novu.off(event, eventHandler);
+      cleanup();
     });
   });
 };

packages/js/src/ui/helpers/useWebSocketEvent.ts

@@ -20,12 +20,15 @@ export const useWebSocketEvent = <E extends SocketEventNames>({
   };
 
   onMount(() => {
+    let cleanup: () => void;
     const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {
-      novu.on(webSocketEvent, updateReadCount);
+      cleanup = novu.on(webSocketEvent, updateReadCount);
     });
 
     onCleanup(() => {
-      novu.off(webSocketEvent, updateReadCount);
+      if (cleanup) {
+        cleanup();
+      }
       resolveLock();
     });
   });

packages/react/src/hooks/internal/useWebsocketEvent.ts

@@ -20,12 +20,16 @@ export const useWebSocketEvent = <E extends SocketEventNames>({
   };
 
   useEffect(() => {
+    let cleanup: () => void;
     const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {
-      novu.on(webSocketEvent, updateReadCount);
+      cleanup = novu.on(webSocketEvent, updateReadCount);
     });
 
     return () => {
-      novu.off(webSocketEvent, updateReadCount);
+      if (cleanup) {
+        cleanup();
+      }
+
       resolveLock();
     };
   }, []);

packages/react/src/hooks/useNotifications.ts

@@ -14,7 +14,7 @@ export type UseNotificationsProps = {
 export const useNotifications = (props?: UseNotificationsProps) => {
   const { tags, read, archived = false, limit, onSuccess, onError } = props || {};
   const filterRef = useRef<NotificationFilter | undefined>(undefined);
-  const { notifications, on, off } = useNovu();
+  const { notifications, on } = useNovu();
   const [data, setData] = useState<Array<Notification>>();
   const [error, setError] = useState<NovuError>();
   const [isLoading, setIsLoading] = useState(true);
@@ -32,10 +32,10 @@ export const useNotifications = (props?: UseNotificationsProps) => {
   };
 
   useEffect(() => {
-    on('notifications.list.updated', sync);
+    const cleanup = on('notifications.list.updated', sync);
 
     return () => {
-      off('notifications.list.updated', sync);
+      cleanup();
     };
   }, []);
 

packages/react/src/hooks/usePreferences.ts

@@ -19,7 +19,7 @@ type UsePreferencesResult = {
 export const usePreferences = (props?: UsePreferencesProps): UsePreferencesResult => {
   const { onSuccess, onError } = props || {};
   const [data, setData] = useState<Preference[]>();
-  const { preferences, on, off } = useNovu();
+  const { preferences, on } = useNovu();
   const [error, setError] = useState<NovuError>();
   const [isLoading, setIsLoading] = useState(true);
   const [isFetching, setIsFetching] = useState(false);
@@ -34,14 +34,14 @@ export const usePreferences = (props?: UsePreferencesProps): UsePreferencesResul
   useEffect(() => {
     fetchPreferences();
 
-    on('preferences.list.updated', sync);
-    on('preferences.list.pending', sync);
-    on('preferences.list.resolved', sync);
+    const listUpdatedCleanup = on('preferences.list.updated', sync);
+    const listPendingCleanup = on('preferences.list.pending', sync);
+    const listResolvedCleanup = on('preferences.list.resolved', sync);
 
     return () => {
-      off('preferences.list.updated', sync);
-      off('preferences.list.pending', sync);
-      off('preferences.list.resolved', sync);
+      listUpdatedCleanup();
+      listPendingCleanup();
+      listResolvedCleanup();
     };
   }, []);