@gwakko/shared-websocket 0.3.0 → 0.6.2

package/src/SharedSocket.ts

@@ -11,6 +11,8 @@ interface SharedSocketOptions {
   auth?: () => string | Promise<string>;
   authToken?: string;
   authParam?: string;
+  /** Heartbeat payload (default: { type: "ping" }). */
+  pingPayload?: unknown;
 }
 
 export class SharedSocket implements Disposable {
@@ -24,10 +26,11 @@ export class SharedSocket implements Disposable {
   private onMessageFns = new Set<EventHandler>();
   private onStateChangeFns = new Set<(state: SocketState) => void>();
 
-  private readonly opts: Required<Omit<SharedSocketOptions, 'auth' | 'authToken' | 'authParam'>> & {
+  private readonly opts: Required<Omit<SharedSocketOptions, 'auth' | 'authToken' | 'authParam' | 'pingPayload'>> & {
     auth?: () => string | Promise<string>;
     authToken?: string;
     authParam: string;
+    pingPayload: unknown;
   };
 
   constructor(
@@ -43,6 +46,7 @@ export class SharedSocket implements Disposable {
       auth: options.auth,
       authToken: options.authToken,
       authParam: options.authParam ?? 'token',
+      pingPayload: options.pingPayload ?? { type: 'ping' },
     };
   }
 
@@ -152,7 +156,7 @@ export class SharedSocket implements Disposable {
     this.stopHeartbeat();
     this.heartbeatTimer = setInterval(() => {
       if (this.ws?.readyState === WebSocket.OPEN) {
-        this.ws.send(JSON.stringify({ type: 'ping' }));
+        this.ws.send(JSON.stringify(this.opts.pingPayload));
       }
     }, this.opts.heartbeatInterval);
   }

package/src/SharedWebSocket.ts

@@ -5,7 +5,23 @@ import { TabCoordinator } from './TabCoordinator';
 import { SharedSocket } from './SharedSocket';
 import { WorkerSocket } from './WorkerSocket';
 import { SubscriptionManager } from './SubscriptionManager';
-import type { SharedWebSocketOptions, TabRole, Unsubscribe, EventHandler } from './types';
+import type { SharedWebSocketOptions, TabRole, Unsubscribe, EventHandler, Channel, EventProtocol, EventMap, Logger, Middleware } from './types';
+
+const DEFAULT_PROTOCOL: EventProtocol = {
+  eventField: 'event',
+  dataField: 'data',
+  channelJoin: '$channel:join',
+  channelLeave: '$channel:leave',
+  ping: { type: 'ping' },
+  defaultEvent: 'message',
+};
+
+const NOOP_LOGGER: Logger = {
+  debug() {},
+  info() {},
+  warn() {},
+  error() {},
+};
 
 /** Common interface for both SharedSocket and WorkerSocket. */
 interface SocketAdapter {
@@ -21,11 +37,18 @@ interface SocketAdapter {
 /**
  * SharedWebSocket — shares ONE WebSocket connection across browser tabs.
  *
- * One tab becomes the "leader" and holds the WebSocket.
- * Other tabs are "followers" receiving data via BroadcastChannel.
- * If the leader closes, a new leader is elected automatically.
+ * @typeParam TEvents - Event map for type-safe subscriptions.
+ *
+ * @example
+ * // Typed events
+ * type Events = {
+ *   'chat.message': { text: string; userId: string };
+ *   'order.created': { id: string; total: number };
+ * };
+ * const ws = new SharedWebSocket<Events>(url);
+ * ws.on('chat.message', (msg) => msg.text); // ← msg: { text, userId }
  */
-export class SharedWebSocket implements Disposable {
+export class SharedWebSocket<TEvents extends EventMap = EventMap> implements Disposable {
   private bus: MessageBus;
   private coordinator: TabCoordinator;
   private socket: SocketAdapter | null = null;
@@ -34,12 +57,19 @@ export class SharedWebSocket implements Disposable {
   private tabId: string;
   private cleanups: Unsubscribe[] = [];
   private disposed = false;
+  private readonly proto: EventProtocol;
+  private readonly log: Logger;
+  private outgoingMiddleware: Middleware[] = [];
+  private incomingMiddleware: Middleware[] = [];
 
   constructor(
     private readonly url: string,
-    private readonly options: SharedWebSocketOptions = {},
+    private readonly options: SharedWebSocketOptions<TEvents> = {} as SharedWebSocketOptions<TEvents>,
   ) {
+    this.proto = { ...DEFAULT_PROTOCOL, ...options.events };
+    this.log = options.debug ? (options.logger ?? console) : NOOP_LOGGER;
     this.tabId = generateId();
+    this.log.debug('[SharedWS] init', { tabId: this.tabId, url });
     this.bus = new MessageBus('shared-ws', this.tabId);
     this.coordinator = new TabCoordinator(this.bus, this.tabId, {
       electionTimeout: options.electionTimeout,
@@ -58,7 +88,7 @@ export class SharedWebSocket implements Disposable {
     this.cleanups.push(
       this.bus.subscribe<{ event: string; data: unknown }>('ws:send', (msg) => {
         if (this.coordinator.isLeader && this.socket) {
-          this.socket.send({ event: msg.event, data: msg.data });
+          this.socket.send({ [this.proto.eventField]: msg.event, [this.proto.dataField]: msg.data });
         }
       }),
     );
@@ -72,8 +102,37 @@ export class SharedWebSocket implements Disposable {
     );
 
     // Leader lifecycle
-    this.coordinator.onBecomeLeader(() => this.onBecomeLeader());
-    this.coordinator.onLoseLeadership(() => this.onLoseLeadership());
+    this.coordinator.onBecomeLeader(() => {
+      this.handleBecomeLeader();
+      this.bus.broadcast('ws:lifecycle', { type: 'leader', isLeader: true });
+    });
+    this.coordinator.onLoseLeadership(() => {
+      this.handleLoseLeadership();
+      this.bus.broadcast('ws:lifecycle', { type: 'leader', isLeader: false });
+    });
+
+    // Lifecycle events from bus (all tabs receive)
+    this.cleanups.push(
+      this.bus.subscribe<{ type: string; isLeader?: boolean; error?: unknown }>('ws:lifecycle', (msg) => {
+        switch (msg.type) {
+          case 'connect':
+            this.subs.emit('$lifecycle:connect', undefined);
+            break;
+          case 'disconnect':
+            this.subs.emit('$lifecycle:disconnect', undefined);
+            break;
+          case 'reconnecting':
+            this.subs.emit('$lifecycle:reconnecting', undefined);
+            break;
+          case 'leader':
+            this.subs.emit('$lifecycle:leader', msg.isLeader);
+            break;
+          case 'error':
+            this.subs.emit('$lifecycle:error', msg.error);
+            break;
+        }
+      }),
+    );
 
     // Cleanup on tab close
     if (typeof window !== 'undefined') {
@@ -96,12 +155,74 @@ export class SharedWebSocket implements Disposable {
     await this.coordinator.elect();
   }
 
-  /** Subscribe to server events (works in ALL tabs). */
-  on(event: string, handler: EventHandler): Unsubscribe {
+  // ─── Lifecycle Hooks ─────────────────────────────────
+
+  /** Called when WebSocket connection opens (broadcast to all tabs). */
+  onConnect(fn: () => void): Unsubscribe {
+    return this.subs.on('$lifecycle:connect', fn);
+  }
+
+  /** Called when WebSocket connection closes (broadcast to all tabs). */
+  onDisconnect(fn: () => void): Unsubscribe {
+    return this.subs.on('$lifecycle:disconnect', fn);
+  }
+
+  /** Called when WebSocket starts reconnecting (broadcast to all tabs). */
+  onReconnecting(fn: () => void): Unsubscribe {
+    return this.subs.on('$lifecycle:reconnecting', fn);
+  }
+
+  /** Called when this tab becomes leader or loses leadership. */
+  onLeaderChange(fn: (isLeader: boolean) => void): Unsubscribe {
+    return this.subs.on('$lifecycle:leader', fn as EventHandler);
+  }
+
+  /** Called on WebSocket or network error (broadcast to all tabs). */
+  onError(fn: (error: unknown) => void): Unsubscribe {
+    return this.subs.on('$lifecycle:error', fn as EventHandler);
+  }
+
+  // ─── Middleware ───────────────────────────────────────
+
+  /**
+   * Add middleware to transform messages before send or after receive.
+   * Return null from middleware to drop the message.
+   *
+   * @example
+   * // Add timestamp to every outgoing message
+   * ws.use('outgoing', (msg) => ({ ...msg, timestamp: Date.now() }));
+   *
+   * @example
+   * // Decrypt incoming messages
+   * ws.use('incoming', (msg) => ({ ...msg, data: decrypt(msg.data) }));
+   *
+   * @example
+   * // Drop messages from blocked users
+   * ws.use('incoming', (msg) => blockedUsers.has(msg.userId) ? null : msg);
+   */
+  use(direction: 'outgoing' | 'incoming', fn: Middleware): this {
+    if (direction === 'outgoing') {
+      this.outgoingMiddleware.push(fn);
+    } else {
+      this.incomingMiddleware.push(fn);
+    }
+    return this;
+  }
+
+  // ─── Event Subscription ──────────────────────────────
+
+  /** Subscribe to server events (works in ALL tabs). Type-safe with EventMap. */
+  on<K extends string & keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): Unsubscribe;
+  on(event: string, handler: EventHandler<unknown>): Unsubscribe;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  on(event: string, handler: (data: any) => void): Unsubscribe {
     return this.subs.on(event, handler);
   }
 
-  once(event: string, handler: EventHandler): Unsubscribe {
+  once<K extends string & keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): Unsubscribe;
+  once(event: string, handler: EventHandler<unknown>): Unsubscribe;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  once(event: string, handler: (data: any) => void): Unsubscribe {
     return this.subs.once(event, handler);
   }
 
@@ -109,15 +230,31 @@ export class SharedWebSocket implements Disposable {
     this.subs.off(event, handler);
   }
 
-  /** Async generator for consuming events. */
+  /** Async generator for consuming events. Type-safe with EventMap. */
+  stream<K extends string & keyof TEvents>(event: K, signal?: AbortSignal): AsyncGenerator<TEvents[K]>;
+  stream(event: string, signal?: AbortSignal): AsyncGenerator<unknown>;
   stream(event: string, signal?: AbortSignal): AsyncGenerator<unknown> {
     return this.subs.stream(event, signal);
   }
 
-  /** Send message to server (auto-routed through leader). */
+  /** Send message to server (auto-routed through leader). Type-safe with EventMap. */
+  send<K extends string & keyof TEvents>(event: K, data: TEvents[K]): void;
+  send(event: string, data: unknown): void;
   send(event: string, data: unknown): void {
+    let payload: unknown = { [this.proto.eventField]: event, [this.proto.dataField]: data };
+
+    for (const mw of this.outgoingMiddleware) {
+      payload = mw(payload);
+      if (payload === null) {
+        this.log.debug('[SharedWS] ✗ outgoing dropped by middleware', event);
+        return;
+      }
+    }
+
+    this.log.debug('[SharedWS] → send', event, data);
+
     if (this.coordinator.isLeader && this.socket) {
-      this.socket.send({ event, data });
+      this.socket.send(payload);
     } else {
       this.bus.publish('ws:send', { event, data });
     }
@@ -142,6 +279,54 @@ export class SharedWebSocket implements Disposable {
     return this.subs.on(`sync:${key}`, fn as EventHandler);
   }
 
+  /**
+   * Subscribe to a private/scoped channel. Returns a channel handle with
+   * scoped on/send/stream methods. Sends join on subscribe, leave on unsubscribe.
+   *
+   * @example
+   * const chat = ws.channel('chat:room_123');
+   * chat.on('message', (msg) => render(msg));
+   * chat.send('message', { text: 'Hello' });
+   * chat.leave(); // sends leave + unsubscribes
+   *
+   * @example
+   * // Private notifications for tenant
+   * const notifications = ws.channel(`tenant:${tenantId}:notifications`);
+   * notifications.on('alert', (alert) => showToast(alert));
+   */
+  channel(name: string): Channel {
+    // Notify server about channel subscription
+    this.send(this.proto.channelJoin, { channel: name });
+
+    const self = this;
+    const unsubs: Unsubscribe[] = [];
+
+    return {
+      name,
+      on(event: string, handler: EventHandler): Unsubscribe {
+        const unsub = self.subs.on(`${name}:${event}`, handler);
+        unsubs.push(unsub);
+        return unsub;
+      },
+      once(event: string, handler: EventHandler): Unsubscribe {
+        const unsub = self.subs.once(`${name}:${event}`, handler);
+        unsubs.push(unsub);
+        return unsub;
+      },
+      send(event: string, data: unknown): void {
+        self.send(`${name}:${event}`, data);
+      },
+      stream(event: string, signal?: AbortSignal): AsyncGenerator<unknown> {
+        return self.subs.stream(`${name}:${event}`, signal);
+      },
+      leave(): void {
+        self.send(self.proto.channelLeave, { channel: name });
+        for (const unsub of unsubs) unsub();
+        unsubs.length = 0;
+      },
+    };
+  }
+
   disconnect(): void {
     this[Symbol.dispose]();
   }
@@ -153,6 +338,7 @@ export class SharedWebSocket implements Disposable {
       reconnectMaxDelay: this.options.reconnectMaxDelay,
       heartbeatInterval: this.options.heartbeatInterval,
       sendBuffer: this.options.sendBuffer,
+      pingPayload: this.proto.ping,
     };
 
     if (this.options.useWorker) {
@@ -172,24 +358,50 @@ export class SharedWebSocket implements Disposable {
     });
   }
 
-  private onBecomeLeader(): void {
+  private handleBecomeLeader(): void {
+    this.log.info('[SharedWS] 👑 became leader');
     this.socket = this.createSocket();
 
-    this.socket.onMessage((data: any) => {
-      const event = data?.event ?? 'message';
-      const payload = data?.data ?? data;
-      // Broadcast to ALL tabs (including self)
+    this.socket.onMessage((raw: unknown) => {
+      let data: unknown = raw;
+      for (const mw of this.incomingMiddleware) {
+        data = mw(data);
+        if (data === null) {
+          this.log.debug('[SharedWS] ✗ incoming dropped by middleware');
+          return;
+        }
+      }
+
+      const msg = data as Record<string, unknown> | null | undefined;
+      const event = (msg?.[this.proto.eventField] as string) ?? this.proto.defaultEvent;
+      const payload = msg?.[this.proto.dataField] ?? data;
+      this.log.debug('[SharedWS] ← recv', event, payload);
       this.bus.broadcast('ws:message', { event, data: payload });
     });
 
-    // Handle send requests from followers (request/response pattern)
+    this.socket.onStateChange((state: string) => {
+      this.log.info('[SharedWS]', state === 'connected' ? '✓ connected' : state === 'reconnecting' ? '🔄 reconnecting' : `state: ${state}`);
+      switch (state) {
+        case 'connected':
+          this.bus.broadcast('ws:lifecycle', { type: 'connect' });
+          break;
+        case 'closed':
+          this.bus.broadcast('ws:lifecycle', { type: 'disconnect' });
+          break;
+        case 'reconnecting':
+          this.bus.broadcast('ws:lifecycle', { type: 'reconnecting' });
+          break;
+      }
+    });
+
     this.cleanups.push(
       this.bus.respond<{ event: string; data: unknown }, unknown>('ws:request', async (req) => {
         return new Promise((resolve) => {
-          const unsub = this.socket!.onMessage((response: any) => {
-            if (response?.event === req.event || response?.requestId) {
+          const unsub = this.socket!.onMessage((response: unknown) => {
+            const res = response as Record<string, unknown> | undefined;
+            if (res?.[this.proto.eventField] === req.event || res?.requestId) {
               unsub();
-              resolve(response?.data ?? response);
+              resolve(res?.[this.proto.dataField] ?? response);
             }
           });
           this.socket!.send({ event: req.event, data: req.data });
@@ -200,7 +412,7 @@ export class SharedWebSocket implements Disposable {
     this.socket.connect();
   }
 
-  private onLoseLeadership(): void {
+  private handleLoseLeadership(): void {
     if (this.socket) {
       this.socket[Symbol.dispose]();
       this.socket = null;

package/src/adapters/react.ts

@@ -2,13 +2,14 @@ import {
   createContext,
   useContext,
   useEffect,
+  useRef,
   useState,
   useEffectEvent,
   type ReactNode,
   createElement,
 } from 'react';
 import { SharedWebSocket } from '../SharedWebSocket';
-import type { SharedWebSocketOptions, TabRole } from '../types';
+import type { SharedWebSocketOptions, TabRole, SocketLifecycleHandlers, EventHandler } from '../types';
 
 // ─── Context ─────────────────────────────────────────────
 
@@ -115,7 +116,7 @@ export function useSocketEvent<T>(event: string, callback?: (data: T) => void):
   });
 
   useEffect(() => {
-    const unsub = socket.on(event, onEvent);
+    const unsub = socket.on(event, onEvent as EventHandler);
     return unsub;
   }, [socket, event]);
 
@@ -159,7 +160,7 @@ export function useSocketStream<T>(event: string, callback?: (data: T) => void):
 
   useEffect(() => {
     if (!callback) setItems([]);
-    const unsub = socket.on(event, onEvent);
+    const unsub = socket.on(event, onEvent as EventHandler);
     return unsub;
   }, [socket, event]);
 
@@ -237,7 +238,7 @@ export function useSocketCallback<T>(event: string, callback: (data: T) => void)
   });
 
   useEffect(() => {
-    const unsub = socket.on(event, handler);
+    const unsub = socket.on(event, handler as EventHandler);
     return unsub;
   }, [socket, event]);
 }
@@ -269,3 +270,61 @@ export function useSocketStatus(): {
 
   return { connected, tabRole };
 }
+
+/**
+ * Lifecycle hooks — react to connection state changes.
+ *
+ * @example
+ * useSocketLifecycle({
+ *   onConnect: () => console.log('Connected!'),
+ *   onDisconnect: () => console.log('Disconnected'),
+ *   onReconnecting: () => showSpinner(),
+ *   onLeaderChange: (isLeader) => console.log('Leader:', isLeader),
+ *   onError: (err) => reportError(err),
+ * });
+ */
+export function useSocketLifecycle(handlers: SocketLifecycleHandlers): void {
+  const socket = useSharedWebSocket();
+
+  const onConnect = useEffectEvent(() => handlers.onConnect?.());
+  const onDisconnect = useEffectEvent(() => handlers.onDisconnect?.());
+  const onReconnecting = useEffectEvent(() => handlers.onReconnecting?.());
+  const onLeaderChange = useEffectEvent((isLeader: boolean) => handlers.onLeaderChange?.(isLeader));
+  const onError = useEffectEvent((error: unknown) => handlers.onError?.(error));
+
+  useEffect(() => {
+    const unsubs = [
+      socket.onConnect(onConnect),
+      socket.onDisconnect(onDisconnect),
+      socket.onReconnecting(onReconnecting),
+      socket.onLeaderChange(onLeaderChange),
+      socket.onError(onError),
+    ];
+    return () => unsubs.forEach((u) => u());
+  }, [socket]);
+}
+
+/**
+ * Subscribe to a private channel. Auto-joins on mount, leaves on unmount.
+ *
+ * @example
+ * const chat = useChannel('chat:room_123');
+ * const message = useSocketEvent('chat:room_123:message');
+ * chat.send('message', { text: 'Hello' });
+ *
+ * @example
+ * // Tenant notifications
+ * const notifications = useChannel(`tenant:${tenantId}:notifications`);
+ * useSocketCallback(`tenant:${tenantId}:notifications:alert`, showToast);
+ */
+export function useChannel(name: string) {
+  const socket = useSharedWebSocket();
+  const channelRef = useRef(socket.channel(name));
+
+  useEffect(() => {
+    channelRef.current = socket.channel(name);
+    return () => channelRef.current.leave();
+  }, [socket, name]);
+
+  return channelRef.current;
+}

package/src/adapters/vue.ts

@@ -9,7 +9,7 @@ import {
   type App,
 } from 'vue';
 import { SharedWebSocket } from '../SharedWebSocket';
-import type { SharedWebSocketOptions, TabRole } from '../types';
+import type { SharedWebSocketOptions, TabRole, SocketLifecycleHandlers } from '../types';
 
 // ─── Plugin ──────────────────────────────────────────────
 
@@ -78,13 +78,15 @@ export function useSocketEvent<T>(event: string, callback?: (data: T) => void):
   const socket = useSharedWebSocket();
   const value = ref<T | undefined>(undefined) as Ref<T | undefined>;
 
-  const unsub = socket.on(event, (data: T) => {
+  const handler = (data: unknown) => {
+    const typed = data as T;
     if (callback) {
-      callback(data);
+      callback(typed);
     } else {
-      value.value = data;
+      value.value = typed;
     }
-  });
+  };
+  const unsub = socket.on(event, handler);
 
   onUnmounted(unsub);
   return readonly(value) as Ref<T | undefined>;
@@ -117,13 +119,15 @@ export function useSocketStream<T>(event: string, callback?: (data: T) => void):
   const socket = useSharedWebSocket();
   const items = ref<T[]>([]) as Ref<T[]>;
 
-  const unsub = socket.on(event, (data: T) => {
+  const handler = (data: unknown) => {
+    const typed = data as T;
     if (callback) {
-      callback(data);
+      callback(typed);
     } else {
-      items.value = [...items.value, data];
+      items.value = [...items.value, typed];
     }
-  });
+  };
+  const unsub = socket.on(event, handler);
 
   onUnmounted(unsub);
   return readonly(items) as Ref<T[]>;
@@ -178,8 +182,8 @@ export function useSocketSync<T>(key: string, initialValue: T, callback?: (value
 export function useSocketCallback<T>(event: string, callback: (data: T) => void): void {
   const socket = useSharedWebSocket();
 
-  const unsub = socket.on(event, (data: T) => {
-    callback(data);
+  const unsub = socket.on(event, (data: unknown) => {
+    callback(data as T);
   });
 
   onUnmounted(unsub);
@@ -211,3 +215,45 @@ export function useSocketStatus(): {
     tabRole: readonly(tabRole) as Ref<TabRole>,
   };
 }
+
+/**
+ * Lifecycle hooks — react to connection state changes.
+ *
+ * @example
+ * useSocketLifecycle({
+ *   onConnect: () => console.log('Connected!'),
+ *   onDisconnect: () => showOfflineBanner(),
+ *   onReconnecting: () => showSpinner(),
+ *   onLeaderChange: (isLeader) => console.log('Leader:', isLeader),
+ *   onError: (err) => reportError(err),
+ * });
+ */
+export function useSocketLifecycle(handlers: SocketLifecycleHandlers): void {
+  const socket = useSharedWebSocket();
+  const unsubs: (() => void)[] = [];
+
+  if (handlers.onConnect) unsubs.push(socket.onConnect(handlers.onConnect));
+  if (handlers.onDisconnect) unsubs.push(socket.onDisconnect(handlers.onDisconnect));
+  if (handlers.onReconnecting) unsubs.push(socket.onReconnecting(handlers.onReconnecting));
+  if (handlers.onLeaderChange) unsubs.push(socket.onLeaderChange(handlers.onLeaderChange));
+  if (handlers.onError) unsubs.push(socket.onError(handlers.onError));
+
+  onUnmounted(() => unsubs.forEach((u) => u()));
+}
+
+/**
+ * Subscribe to a private channel. Auto-joins on mount, leaves on unmount.
+ *
+ * @example
+ * const chat = useChannel('chat:room_123');
+ * // Listen via useSocketEvent('chat:room_123:message')
+ * // Send via chat.send('message', { text: 'Hello' })
+ */
+export function useChannel(name: string) {
+  const socket = useSharedWebSocket();
+  const channel = socket.channel(name);
+
+  onUnmounted(() => channel.leave());
+
+  return channel;
+}

package/src/index.ts

@@ -1,8 +1,27 @@
+// Core
 export { SharedWebSocket } from './SharedWebSocket';
-export { withSocket, type WithSocketCallback, type WithSocketOptions, type SocketScope } from './withSocket';
+export { withSocket } from './withSocket';
+
+// Internal components (for advanced usage)
 export { MessageBus } from './MessageBus';
 export { TabCoordinator } from './TabCoordinator';
 export { SharedSocket } from './SharedSocket';
 export { WorkerSocket } from './WorkerSocket';
 export { SubscriptionManager } from './SubscriptionManager';
-export type { SharedWebSocketOptions, SocketState, TabRole, Unsubscribe, EventHandler } from './types';
+
+// Types
+export type { WithSocketCallback, WithSocketOptions, SocketScope } from './withSocket';
+export type {
+  SharedWebSocketOptions,
+  SocketState,
+  TabRole,
+  Unsubscribe,
+  EventHandler,
+  Channel,
+  EventProtocol,
+  BusMessage,
+  SocketLifecycleHandlers,
+  EventMap,
+  Logger,
+  Middleware,
+} from './types';