@autoafleveren/ui 1.8.4 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "type": "module",
   "files": [
     "dist/*",

package/src/modules/composables/useEcho/index.ts

@@ -6,6 +6,9 @@ import mitt from 'mitt';
 
 import type { Authorizer, Channel } from 'pusher-js';
 
+type EventHandler<T = any> = (data: T) => unknown;
+type WrappedEventHandler<T = any> = (data: T) => Promise<void>;
+
 interface Listener {
   name: string;
   isListening: boolean;
@@ -16,31 +19,48 @@ interface Caster {
   joining: (callback: CallableFunction) => this;
   whisper: (eventName: string, data: Record<any, any>) => this;
   leaving: (callback: CallableFunction) => this;
+  listenForWhisper?: (event: string, callback: CallableFunction) => void;
 }
 
 const state = {
   listeners: ref<Listener[]>([]),
+
   echo: null as Echo<'pusher'> | null,
-  key: null as string | null,
-  authorizer: null as ((channel: Channel) => Authorizer) | null,
+
   emitter: mitt(),
-  casters: ref<Caster[]>([]),
+
+  casters: {} as Record<string, Caster>,
+
+  /**
+   * Tracks which Echo listeners are already registered.
+   */
+  subscriptions: new Set<string>(),
+
+  /**
+   * Maps original handler -> wrapped handler.
+   */
+  wrappedHandlers: new WeakMap<EventHandler, WrappedEventHandler>(),
 };
 
-export function getOrCreateListener(listerName = 'unique'): Listener {
-  if (!state.listeners.value.some(listener => listener.name === listerName)) {
-    state.listeners.value?.push({
-      name: listerName,
-      // @ts-expect-error refs unwrapped
-      isListening: ref<boolean>(false),
-    });
+export function getOrCreateListener(listenerName = 'unique'): Listener {
+  let listener = state.listeners.value.find(stateListener => stateListener.name === listenerName);
+
+  if (!listener) {
+    listener = {
+      name: listenerName,
+      isListening: false,
+    };
+
+    state.listeners.value.push(listener);
   }
 
-  // @ts-expect-error find always return a listener
-  return state.listeners.value.find(listener => listener.name === listerName);
+  return listener;
 }
 
-export function registerEcho(key: string, authorizer: (channel: Channel) => Authorizer): void {
+export function registerEcho(
+  key: string,
+  authorizer: (channel: Channel) => Authorizer,
+): void {
   state.echo = new Echo({
     broadcaster: 'pusher',
     client: ConnectionManager,
@@ -54,41 +74,52 @@ export function registerEcho(key: string, authorizer: (channel: Channel) => Auth
 }
 
 export function useEcho(listenerName: string | null = null) {
-  const listener: Listener = getOrCreateListener(listenerName ?? undefined);
+  const listener = getOrCreateListener(listenerName ?? undefined);
 
   function join(channel: string): Caster {
-    if (state.echo === null) {
+    if (!state.echo) {
       throw new Error('Echo is not initialized');
     }
 
-    state.casters[channel] = state.echo.join(channel);
+    if (!state.casters[channel]) {
+      state.casters[channel] = state.echo.join(channel) as Caster;
+    }
 
-    return state.casters[channel] as Caster;
+    return state.casters[channel];
   }
 
-  function whisper<T = unknown>(event: string, data: T, channel?: string): void {
-    if (state.echo === null) {
+  function leave(channel: string): void {
+    if (!state.echo) {
       throw new Error('Echo is not initialized');
     }
 
+    state.echo.leave(channel);
+    delete state.casters[channel];
+  }
+
+  function whisper<T = unknown>(
+    event: string,
+    data: T,
+    channel?: string,
+  ): void {
     const channelName = channel ?? Object.keys(state.casters)[0];
 
     try {
-      state.casters[channelName]?.whisper?.(event, data);
+      state.casters[channelName]?.whisper?.(event, data as any);
     } catch {
       //
     }
   }
 
-  function listen<T = unknown>(event: string, callback: (data: T) => void, channel?: string): void {
-    if (state.echo === null) {
-      throw new Error('Echo is not initialized');
-    }
-
+  function listen<T = unknown>(
+    event: string,
+    callback: (data: T) => void,
+    channel?: string,
+  ): void {
     const channelName = channel ?? Object.keys(state.casters)[0];
 
     if (typeof state.casters[channelName]?.listenForWhisper === 'function') {
-      state.casters[channelName]?.listenForWhisper?.(event, callback);
+      state.casters[channelName].listenForWhisper?.(event, callback);
 
       return;
     }
@@ -96,64 +127,79 @@ export function useEcho(listenerName: string | null = null) {
     throw new Error(`Nothing to whisper to on this channel ${event}-${channelName}`);
   }
 
-  function leave(channel: string): void {
-    if (state.echo === null) {
-      throw new Error('Echo is not initialized');
-    }
-
-    state.echo.leave(channel);
-
-    delete state.casters[channel];
-  }
-
-  function on(channel: string, event: string, handler: (data: any) => unknown, privateChannel = true, unique = false): void {
-    if (state.echo === null) {
+  function on(
+    channel: string,
+    event: string,
+    handler: EventHandler,
+    privateChannel = true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/naming-convention
+    _unique = false,
+  ): void {
+    if (!state.echo) {
       throw new Error('Echo is not initialized');
     }
 
-    const channelEventKey = `${channel}.${event}`;
-    const isSubscribed = state.emitter.all.has(channelEventKey);
+    const key = `${channel}.${event}`;
 
-    if (listener) {
-      listener.isListening = true;
-    }
+    listener.isListening = true;
 
-    if (isSubscribed && unique) {
-      return;
-    }
+    if (!state.subscriptions.has(key)) {
+      state.subscriptions.add(key);
 
-    if (!isSubscribed) {
-      const channelConnection = privateChannel
+      const connection = privateChannel
         ? state.echo.private(channel)
         : state.echo.channel(channel);
 
-      channelConnection.listen(`.${event}`, (data: any) => {
-        state.emitter.emit(channelEventKey, data);
+      connection.listen(`.${event}`, (data: any) => {
+        state.emitter.emit(key, data);
       });
     }
 
-    state.emitter.on(channelEventKey, async (data: any) => {
-      const closeOnCompletion = await handler(data) ?? false;
+    const wrappedHandler: WrappedEventHandler = async (data): Promise<void> => {
+      const closeOnCompletion = (await handler(data)) ?? false;
 
-      if (listener) {
-        listener.isListening = false;
-      }
+      listener.isListening = false;
 
       if (closeOnCompletion) {
-        off(channel, event);
+        off(channel, event, handler);
       }
-    });
+    };
+
+    state.wrappedHandlers.set(handler, wrappedHandler);
+    state.emitter.on(key, wrappedHandler);
   }
 
-  function off(channel: string, event: string): void {
-    if (state.echo === null) {
+  function off(
+    channel: string,
+    event: string,
+    handler?: EventHandler,
+  ): void {
+    if (!state.echo) {
       throw new Error('Echo is not initialized');
     }
 
-    state.emitter.off(`${channel}.${event}`);
-    state.emitter.all.delete(`${channel}.${event}`);
+    const key = `${channel}.${event}`;
 
-    state.echo.leave(channel);
+    if (handler) {
+      const wrapped = state.wrappedHandlers.get(handler);
+
+      if (wrapped) {
+        state.emitter.off(key, wrapped as any);
+        state.wrappedHandlers.delete(handler);
+      }
+    } else {
+      state.emitter.off(key);
+    }
+
+    const remainingHandlers = state.emitter.all.get(key);
+
+    if (!remainingHandlers || remainingHandlers.length === 0) {
+      state.subscriptions.delete(key);
+
+      state.emitter.all.delete(key);
+
+      state.echo.leave(channel);
+    }
 
     listener.isListening = false;
   }