react-realtime-hooks 1.2.1 → 1.3.0

package/dist/index.cjs

@@ -444,6 +444,11 @@ var createReconnectAttempt = (attempt, trigger, options, lastDelayMs, config = {
     trigger
   };
 };
+var useStableCallback = (callback) => {
+  const callbackRef = react.useRef(callback);
+  callbackRef.current = callback;
+  return react.useCallback((...args) => callbackRef.current(...args), []);
+};
 
 // src/hooks/useReconnect.ts
 var createInitialState = (enabled) => ({
@@ -467,20 +472,20 @@ var useReconnect = (options = {}) => {
       setState(resolved);
     });
   };
-  const runAttempt = react.useEffectEvent((attempt) => {
+  const runAttempt = useStableCallback((attempt) => {
     commitState({
       attempt,
       nextDelayMs: null,
       status: "running"
     });
   });
-  const emitSchedule = react.useEffectEvent((attempt) => {
+  const emitSchedule = useStableCallback((attempt) => {
     normalizedOptions.onSchedule?.(attempt);
   });
-  const emitCancel = react.useEffectEvent(() => {
+  const emitCancel = useStableCallback(() => {
     normalizedOptions.onCancel?.();
   });
-  const emitReset = react.useEffectEvent(() => {
+  const emitReset = useStableCallback(() => {
     normalizedOptions.onReset?.();
   });
   react.useEffect(() => {
@@ -503,7 +508,7 @@ var useReconnect = (options = {}) => {
   react.useEffect(() => () => {
     timeoutRef.current.cancel();
   }, []);
-  const schedule = (trigger = "manual") => {
+  const schedule = useStableCallback((trigger = "manual") => {
     const current = stateRef.current;
     const nextAttempt = current.attempt + 1;
     const attempt = createReconnectAttempt(
@@ -531,8 +536,8 @@ var useReconnect = (options = {}) => {
       status: "scheduled"
     });
     emitSchedule(attempt);
-  };
-  const cancel = () => {
+  });
+  const cancel = useStableCallback(() => {
     const current = stateRef.current;
     const shouldEmitCancel = timeoutRef.current.isActive() || current.status === "scheduled" || current.status === "running";
     timeoutRef.current.cancel();
@@ -544,14 +549,14 @@ var useReconnect = (options = {}) => {
     if (shouldEmitCancel) {
       emitCancel();
     }
-  };
-  const reset = () => {
+  });
+  const reset = useStableCallback(() => {
     timeoutRef.current.cancel();
     lastDelayRef.current = null;
     commitState(createInitialState(normalizedOptions.enabled));
     emitReset();
-  };
-  const markConnected = () => {
+  });
+  const markConnected = useStableCallback(() => {
     timeoutRef.current.cancel();
     if (normalizedOptions.resetOnSuccess) {
       lastDelayRef.current = null;
@@ -564,7 +569,7 @@ var useReconnect = (options = {}) => {
       nextDelayMs: null,
       status: normalizedOptions.enabled ? "idle" : "stopped"
     }));
-  };
+  });
   return {
     attempt: state.attempt,
     cancel,
@@ -600,14 +605,14 @@ var useHeartbeat = (options) => {
     stateRef.current = resolved;
     setState(resolved);
   };
-  const handleTimeout = react.useEffectEvent(() => {
+  const handleTimeout = useStableCallback(() => {
     commitState((current) => ({
       ...current,
       hasTimedOut: true
     }));
     options.onTimeout?.();
   });
-  const scheduleTimeout = react.useEffectEvent(() => {
+  const scheduleTimeout = useStableCallback(() => {
     if (options.timeoutMs === void 0) {
       timeoutRef.current.cancel();
       return;
@@ -616,7 +621,7 @@ var useHeartbeat = (options) => {
       handleTimeout();
     }, options.timeoutMs);
   });
-  const handleBeatSuccess = react.useEffectEvent((performedAt) => {
+  const handleBeatSuccess = useStableCallback((performedAt) => {
     commitState((current) => ({
       ...current,
       hasTimedOut: false,
@@ -625,11 +630,11 @@ var useHeartbeat = (options) => {
     scheduleTimeout();
     options.onBeat?.();
   });
-  const handleBeatError = react.useEffectEvent((error) => {
+  const handleBeatError = useStableCallback((error) => {
     timeoutRef.current.cancel();
     options.onError?.(error);
   });
-  const runBeat = react.useEffectEvent(() => {
+  const runBeat = useStableCallback(() => {
     const generation = generationRef.current;
     const completeBeat = (result) => {
       if (generation !== generationRef.current || result === false) {
@@ -654,7 +659,7 @@ var useHeartbeat = (options) => {
       failBeat(error);
     }
   });
-  const start = () => {
+  const start = useStableCallback(() => {
     if (!enabled) {
       return;
     }
@@ -668,20 +673,20 @@ var useHeartbeat = (options) => {
       hasTimedOut: false,
       isRunning: true
     }));
-  };
-  const stop = () => {
+  });
+  const stop = useStableCallback(() => {
     generationRef.current += 1;
     intervalRef.current.cancel();
     timeoutRef.current.cancel();
     commitState(createInitialState2(false));
-  };
-  const beat = () => {
+  });
+  const beat = useStableCallback(() => {
     if (!enabled) {
       return;
     }
     runBeat();
-  };
-  const notifyAck = (message) => {
+  });
+  const notifyAck = useStableCallback((message) => {
     if (stateRef.current.lastBeatAt === null) {
       return false;
     }
@@ -698,7 +703,7 @@ var useHeartbeat = (options) => {
       latencyMs: current.lastBeatAt === null ? null : acknowledgedAt - current.lastBeatAt
     }));
     return true;
-  };
+  });
   react.useEffect(() => {
     if (!enabled) {
       stop();
@@ -710,7 +715,7 @@ var useHeartbeat = (options) => {
     }
     stop();
     return void 0;
-  }, [enabled, options.intervalMs, startOnMount]);
+  }, [enabled, options.intervalMs, start, startOnMount, stop]);
   react.useEffect(() => () => {
     generationRef.current += 1;
     intervalRef.current.cancel();
@@ -774,6 +779,17 @@ var createConnectionStateSnapshot = (status, config = {}) => {
   }
 };
 
+// src/core/errors.ts
+var RealtimeErrorEvent = class extends Event {
+  cause;
+  kind;
+  constructor(type, init) {
+    super(type, init);
+    this.cause = init.cause;
+    this.kind = init.kind;
+  }
+};
+
 // src/core/url.ts
 var normalizeResolvedUrl = (value) => {
   if (value === null) {
@@ -815,8 +831,9 @@ var toProtocolsDependency = (protocols) => {
   if (protocols === void 0) {
     return "";
   }
-  return Array.isArray(protocols) ? protocols.join("|") : protocols;
+  return JSON.stringify(protocols);
 };
+var parseProtocolsDependency = (protocolsDependency) => protocolsDependency === "" ? void 0 : JSON.parse(protocolsDependency);
 var toHeartbeatConfig = (heartbeat) => heartbeat === void 0 || heartbeat === false ? null : heartbeat;
 var isSocketActive = (socket) => socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING;
 var useWebSocket = (options) => {
@@ -824,6 +841,10 @@ var useWebSocket = (options) => {
   const supported = isWebSocketSupported();
   const resolvedUrl = react.useMemo(() => resolveUrlProvider(options.url), [options.url]);
   const protocolsDependency = toProtocolsDependency(options.protocols);
+  const protocols = react.useMemo(
+    () => parseProtocolsDependency(protocolsDependency),
+    [protocolsDependency]
+  );
   const socketRef = react.useRef(null);
   const socketKeyRef = react.useRef(null);
   const activeSocketEpochRef = react.useRef(null);
@@ -893,14 +914,19 @@ var useWebSocket = (options) => {
     heartbeatHookOptions.onTimeout = () => {
       applyHeartbeatAction(
         heartbeatConfig.timeoutAction ?? defaultHeartbeatAction,
-        new Event("heartbeat-timeout"),
+        new RealtimeErrorEvent("heartbeat-timeout", {
+          kind: "heartbeat-timeout"
+        }),
         "heartbeat-timeout"
       );
       onTimeout?.();
     };
     const onError = heartbeatConfig.onError;
     heartbeatHookOptions.onError = (error) => {
-      const event = error instanceof Event ? error : new Event("heartbeat-error");
+      const event = new RealtimeErrorEvent("heartbeat-error", {
+        cause: error,
+        kind: "heartbeat-error"
+      });
       applyHeartbeatAction(
         heartbeatConfig.errorAction ?? heartbeatConfig.timeoutAction ?? defaultHeartbeatAction,
         event,
@@ -912,18 +938,18 @@ var useWebSocket = (options) => {
   const heartbeat = useHeartbeat(
     heartbeatHookOptions
   );
-  const commitState = (next) => {
+  const commitState = useStableCallback((next) => {
     const resolved = typeof next === "function" ? next(stateRef.current) : next;
     stateRef.current = resolved;
     setState(resolved);
-  };
-  const isActiveSocketEvent = react.useEffectEvent((socketEpoch) => {
+  });
+  const isActiveSocketEvent = useStableCallback((socketEpoch) => {
     return activeSocketEpochRef.current === socketEpoch;
   });
-  const shouldHandleSocketClose = react.useEffectEvent((socketEpoch) => {
+  const shouldHandleSocketClose = useStableCallback((socketEpoch) => {
     return activeSocketEpochRef.current === socketEpoch || closingSocketEpochRef.current === socketEpoch;
   });
-  const closeSocket = react.useEffectEvent(
+  const closeSocket = useStableCallback(
     (config = {}) => {
       const socket2 = socketRef.current;
       const socketEpoch = activeSocketEpochRef.current;
@@ -939,7 +965,7 @@ var useWebSocket = (options) => {
       }
     }
   );
-  const applyHeartbeatAction = react.useEffectEvent(
+  const applyHeartbeatAction = useStableCallback(
     (action, error, reconnectTrigger) => {
       heartbeat.stop();
       options.onError?.(error);
@@ -976,17 +1002,17 @@ var useWebSocket = (options) => {
       closeSocket({ trackClose: true });
     }
   );
-  const parseMessage = react.useEffectEvent((event) => {
+  const parseMessage = useStableCallback((event) => {
     const parser = options.parseMessage ?? defaultParseMessage;
     return parser(event);
   });
-  const updateBufferedAmount = react.useEffectEvent(() => {
+  const updateBufferedAmount = useStableCallback(() => {
     commitState((current) => ({
       ...current,
       bufferedAmount: socketRef.current?.bufferedAmount ?? 0
     }));
   });
-  const handleOpen = react.useEffectEvent((event, socket2) => {
+  const handleOpen = useStableCallback((event, socket2) => {
     manualCloseRef.current = false;
     manualOpenRef.current = false;
     suppressReconnectRef.current = false;
@@ -1001,7 +1027,7 @@ var useWebSocket = (options) => {
     }));
     options.onOpen?.(event, socket2);
   });
-  const handleMessage = react.useEffectEvent((event) => {
+  const handleMessage = useStableCallback((event) => {
     try {
       const message = parseMessage(event);
       heartbeat.notifyAck(message);
@@ -1012,8 +1038,11 @@ var useWebSocket = (options) => {
         lastMessageEvent: event
       }));
       options.onMessage?.(message, event);
-    } catch {
-      const parseError = new Event("error");
+    } catch (error) {
+      const parseError = new RealtimeErrorEvent("error", {
+        cause: error,
+        kind: "parse-error"
+      });
       terminalErrorRef.current = parseError;
       manualOpenRef.current = false;
       skipCloseReconnectRef.current = true;
@@ -1034,7 +1063,7 @@ var useWebSocket = (options) => {
       });
     }
   });
-  const handleError = react.useEffectEvent((event, socketEpoch) => {
+  const handleError = useStableCallback((event, socketEpoch) => {
     if (!isActiveSocketEvent(socketEpoch)) {
       return;
     }
@@ -1047,7 +1076,7 @@ var useWebSocket = (options) => {
     }));
     options.onError?.(event);
   });
-  const handleClose = react.useEffectEvent((event, socketEpoch) => {
+  const handleClose = useStableCallback((event, socketEpoch) => {
     if (!shouldHandleSocketClose(socketEpoch)) {
       return;
     }
@@ -1107,15 +1136,15 @@ var useWebSocket = (options) => {
       suppressReconnectRef.current = false;
     }
   });
-  const open = () => {
+  const open = useStableCallback(() => {
     manualCloseRef.current = false;
     manualOpenRef.current = true;
     suppressReconnectRef.current = false;
     terminalErrorRef.current = null;
     reconnect.cancel();
     setOpenNonce((current) => current + 1);
-  };
-  const reconnectNow = () => {
+  });
+  const reconnectNow = useStableCallback(() => {
     manualCloseRef.current = false;
     manualOpenRef.current = true;
     skipCloseReconnectRef.current = true;
@@ -1125,8 +1154,8 @@ var useWebSocket = (options) => {
     closeSocket();
     suppressReconnectRef.current = false;
     reconnect.schedule("manual");
-  };
-  const close = (code, reason) => {
+  });
+  const close = useStableCallback((code, reason) => {
     manualCloseRef.current = true;
     manualOpenRef.current = false;
     suppressReconnectRef.current = true;
@@ -1143,8 +1172,8 @@ var useWebSocket = (options) => {
       reason,
       trackClose: true
     });
-  };
-  const send = (message) => {
+  });
+  const send = useStableCallback((message) => {
     const socket2 = socketRef.current;
     if (socket2 === null || socket2.readyState !== WebSocket.OPEN) {
       return false;
@@ -1153,7 +1182,7 @@ var useWebSocket = (options) => {
     socket2.send(serializer(message));
     updateBufferedAmount();
     return true;
-  };
+  });
   react.useEffect(() => {
     if (!supported) {
       socketKeyRef.current = null;
@@ -1193,7 +1222,7 @@ var useWebSocket = (options) => {
     if (socketRef.current !== null) {
       return;
     }
-    const socket2 = new WebSocket(resolvedUrl, options.protocols);
+    const socket2 = new WebSocket(resolvedUrl, protocols);
     const socketEpoch = nextSocketEpochRef.current + 1;
     socketRef.current = socket2;
     socketKeyRef.current = nextSocketKey;
@@ -1236,9 +1265,17 @@ var useWebSocket = (options) => {
       socket2.removeEventListener("close", handleSocketClose);
     };
   }, [
+    closeSocket,
+    commitState,
     connect,
+    handleClose,
+    handleError,
+    handleMessage,
+    handleOpen,
+    isActiveSocketEvent,
     openNonce,
     options.binaryType,
+    protocols,
     protocolsDependency,
     reconnect.status,
     resolvedUrl,
@@ -1259,11 +1296,12 @@ var useWebSocket = (options) => {
       socket2.close();
     }
   }, []);
+  const stopHeartbeat = heartbeat.stop;
   react.useEffect(() => {
     if (state.status !== "open") {
-      heartbeat.stop();
+      stopHeartbeat();
     }
-  }, [state.status]);
+  }, [state.status, stopHeartbeat]);
   const status = (reconnect.status === "scheduled" || reconnect.status === "running") && state.status !== "open" ? "reconnecting" : state.status;
   const snapshot = createConnectionStateSnapshot(status, {
     isSupported: supported,
@@ -1319,29 +1357,27 @@ var createInitialState4 = (status = "idle") => ({
   status
 });
 var defaultParseMessage2 = (event) => event.data;
-var toEventsDependency = (events) => {
-  if (events === void 0 || events.length === 0) {
-    return "";
-  }
-  return [...new Set(events)].sort().join("|");
-};
 var normalizeNamedEvents = (events) => {
   if (events === void 0 || events.length === 0) {
     return [];
   }
-  return [...new Set(events)].filter((eventName) => eventName !== "message");
+  return [...new Set(events)].filter((eventName) => eventName !== "message").sort();
 };
+var toEventsDependency = (events) => JSON.stringify(normalizeNamedEvents(events));
+var parseEventsDependency = (eventsDependency) => JSON.parse(eventsDependency);
 var useEventSource = (options) => {
   const connect = options.connect ?? true;
   const supported = isEventSourceSupported();
   const resolvedUrl = react.useMemo(() => resolveUrlProvider(options.url), [options.url]);
   const eventsDependency = toEventsDependency(options.events);
   const namedEvents = react.useMemo(
-    () => normalizeNamedEvents(options.events),
+    () => parseEventsDependency(eventsDependency),
     [eventsDependency]
   );
   const eventSourceRef = react.useRef(null);
   const eventSourceKeyRef = react.useRef(null);
+  const activeEventSourceEpochRef = react.useRef(null);
+  const nextEventSourceEpochRef = react.useRef(0);
   const manualCloseRef = react.useRef(false);
   const manualOpenRef = react.useRef(false);
   const skipErrorReconnectRef = react.useRef(false);
@@ -1360,25 +1396,29 @@ var useEventSource = (options) => {
       enabled: reconnectEnabled && (options.reconnect?.enabled ?? true)
     }
   );
-  const commitState = (next) => {
+  const commitState = useStableCallback((next) => {
     const resolved = typeof next === "function" ? next(stateRef.current) : next;
     stateRef.current = resolved;
     setState(resolved);
-  };
-  const closeEventSource = react.useEffectEvent(() => {
+  });
+  const closeEventSource = useStableCallback(() => {
     const source = eventSourceRef.current;
     if (source === null) {
       return;
     }
     eventSourceRef.current = null;
     eventSourceKeyRef.current = null;
+    activeEventSourceEpochRef.current = null;
     source.close();
   });
-  const parseMessage = react.useEffectEvent((event) => {
+  const isActiveEventSourceEvent = useStableCallback((sourceEpoch) => {
+    return activeEventSourceEpochRef.current === sourceEpoch;
+  });
+  const parseMessage = useStableCallback((event) => {
     const parser = options.parseMessage ?? defaultParseMessage2;
     return parser(event);
   });
-  const handleOpen = react.useEffectEvent((event, source) => {
+  const handleOpen = useStableCallback((event, source) => {
     manualCloseRef.current = false;
     manualOpenRef.current = false;
     suppressReconnectRef.current = false;
@@ -1391,7 +1431,7 @@ var useEventSource = (options) => {
     }));
     options.onOpen?.(event, source);
   });
-  const commitParsedMessage = react.useEffectEvent(
+  const commitParsedMessage = useStableCallback(
     (eventName, event, isNamedEvent) => {
       try {
         const message = parseMessage(event);
@@ -1406,8 +1446,11 @@ var useEventSource = (options) => {
           return;
         }
         options.onMessage?.(message, event);
-      } catch {
-        const parseError = new Event("error");
+      } catch (error) {
+        const parseError = new RealtimeErrorEvent("error", {
+          cause: error,
+          kind: "parse-error"
+        });
         terminalErrorRef.current = parseError;
         manualOpenRef.current = false;
         suppressReconnectRef.current = true;
@@ -1423,7 +1466,10 @@ var useEventSource = (options) => {
       }
     }
   );
-  const handleError = react.useEffectEvent((event, source) => {
+  const handleError = useStableCallback((event, source, sourceEpoch) => {
+    if (!isActiveEventSourceEvent(sourceEpoch)) {
+      return;
+    }
     const terminalError = terminalErrorRef.current;
     if (terminalError !== null) {
       suppressReconnectRef.current = false;
@@ -1438,12 +1484,11 @@ var useEventSource = (options) => {
     const skipErrorReconnect = skipErrorReconnectRef.current;
     skipErrorReconnectRef.current = false;
     const shouldReconnect = !suppressReconnectRef.current && !skipErrorReconnect && reconnectEnabled && (options.shouldReconnect?.(event) ?? true);
-    const readyState = source.readyState;
     commitState((current) => ({
       ...current,
       lastChangedAt: Date.now(),
       lastError: event,
-      status: readyState === EventSource.OPEN ? "open" : shouldReconnect ? "reconnecting" : "closed"
+      status: shouldReconnect ? "reconnecting" : "closed"
     }));
     options.onError?.(event);
     if (!shouldReconnect) {
@@ -1451,21 +1496,18 @@ var useEventSource = (options) => {
       closeEventSource();
       return;
     }
-    if (readyState === EventSource.CLOSED) {
-      eventSourceRef.current = null;
-      eventSourceKeyRef.current = null;
-      reconnect.schedule("error");
-    }
+    closeEventSource();
+    reconnect.schedule("error");
   });
-  const open = () => {
+  const open = useStableCallback(() => {
     manualCloseRef.current = false;
     manualOpenRef.current = true;
     suppressReconnectRef.current = false;
     terminalErrorRef.current = null;
     reconnect.cancel();
     setOpenNonce((current) => current + 1);
-  };
-  const reconnectNow = () => {
+  });
+  const reconnectNow = useStableCallback(() => {
     manualCloseRef.current = false;
     manualOpenRef.current = true;
     skipErrorReconnectRef.current = true;
@@ -1474,8 +1516,8 @@ var useEventSource = (options) => {
     closeEventSource();
     suppressReconnectRef.current = false;
     reconnect.schedule("manual");
-  };
-  const close = () => {
+  });
+  const close = useStableCallback(() => {
     manualCloseRef.current = true;
     manualOpenRef.current = false;
     suppressReconnectRef.current = true;
@@ -1487,7 +1529,7 @@ var useEventSource = (options) => {
       lastChangedAt: Date.now(),
       status: "closed"
     }));
-  };
+  });
   react.useEffect(() => {
     if (!supported) {
       eventSourceKeyRef.current = null;
@@ -1506,7 +1548,7 @@ var useEventSource = (options) => {
       }));
       return;
     }
-    const shouldConnect = terminalErrorRef.current === null && (connect && !manualCloseRef.current || manualOpenRef.current || reconnect.status === "running");
+    const shouldConnect = terminalErrorRef.current === null && (reconnect.status === "running" || reconnect.status !== "scheduled" && (connect && !manualCloseRef.current || manualOpenRef.current));
     const nextEventSourceKey = [
       resolvedUrl,
       options.withCredentials ? "credentials" : "anonymous",
@@ -1534,27 +1576,39 @@ var useEventSource = (options) => {
     const source = new EventSource(resolvedUrl, {
       withCredentials: options.withCredentials ?? false
     });
+    const sourceEpoch = nextEventSourceEpochRef.current + 1;
     eventSourceRef.current = source;
     eventSourceKeyRef.current = nextEventSourceKey;
+    activeEventSourceEpochRef.current = sourceEpoch;
+    nextEventSourceEpochRef.current = sourceEpoch;
     commitState((current) => ({
       ...current,
       lastChangedAt: Date.now(),
       status: reconnect.status === "running" || reconnect.status === "scheduled" ? "reconnecting" : "connecting"
     }));
     const handleSourceOpen = (event) => {
+      if (!isActiveEventSourceEvent(sourceEpoch)) {
+        return;
+      }
       handleOpen(event, source);
     };
     const handleSourceMessage = (event) => {
+      if (!isActiveEventSourceEvent(sourceEpoch)) {
+        return;
+      }
       commitParsedMessage("message", event, false);
     };
     const namedEventHandlers = /* @__PURE__ */ new Map();
     const handleSourceError = (event) => {
-      handleError(event, source);
+      handleError(event, source, sourceEpoch);
     };
     source.addEventListener("open", handleSourceOpen);
     source.addEventListener("message", handleSourceMessage);
     for (const eventName of namedEvents) {
       const handler = (event) => {
+        if (!isActiveEventSourceEvent(sourceEpoch)) {
+          return;
+        }
         commitParsedMessage(eventName, event, true);
       };
       namedEventHandlers.set(eventName, handler);
@@ -1570,8 +1624,14 @@ var useEventSource = (options) => {
       source.removeEventListener("error", handleSourceError);
     };
   }, [
+    closeEventSource,
+    commitParsedMessage,
+    commitState,
     connect,
     eventsDependency,
+    handleError,
+    handleOpen,
+    isActiveEventSourceEvent,
     namedEvents,
     openNonce,
     options.withCredentials,
@@ -1582,6 +1642,7 @@ var useEventSource = (options) => {
   react.useEffect(() => () => {
     suppressReconnectRef.current = true;
     eventSourceKeyRef.current = null;
+    activeEventSourceEpochRef.current = null;
     terminalErrorRef.current = null;
     const source = eventSourceRef.current;
     eventSourceRef.current = null;
@@ -1626,6 +1687,7 @@ var useEventSource = (options) => {
   };
 };
 
+exports.RealtimeErrorEvent = RealtimeErrorEvent;
 exports.useConnectionGate = useConnectionGate;
 exports.useEventSource = useEventSource;
 exports.useHeartbeat = useHeartbeat;