@chromahq/react 1.0.15 → 1.0.16

package/dist/index.d.ts

@@ -1,9 +1,11 @@
+import { FC, ReactNode } from 'react';
+
 type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error' | 'reconnecting';
 interface Bridge {
     send: <Req = unknown, Res = unknown>(key: string, payload?: Req, timeoutDuration?: number) => Promise<Res>;
-    broadcast: (key: string, payload: any) => void;
-    on: (key: string, handler: (payload: any) => void) => void;
-    off: (key: string, handler: (payload: any) => void) => void;
+    broadcast: (key: string, payload: unknown) => void;
+    on: (key: string, handler: (payload: unknown) => void) => void;
+    off: (key: string, handler: (payload: unknown) => void) => void;
     isConnected: boolean;
     ping: () => Promise<boolean>;
 }
@@ -14,16 +16,24 @@ interface BridgeContextValue {
     reconnect: () => void;
     isServiceWorkerAlive: boolean;
 }
-interface Props {
-    children: React.ReactNode;
+interface BridgeProviderProps {
+    children: ReactNode;
+    /** Base delay for retry attempts in ms. Default: 1000 */
     retryAfter?: number;
+    /** Maximum number of retry attempts. Default: 10 */
     maxRetries?: number;
+    /** How often to ping the service worker in ms. Default: 5000 */
     pingInterval?: number;
+    /** How long to wait before resetting retry count in ms. Default: 30000 */
     maxRetryCooldown?: number;
+    /** Default timeout for messages in ms. Default: 10000 */
+    defaultTimeout?: number;
+    /** Callback when connection status changes */
     onConnectionChange?: (status: ConnectionStatus) => void;
+    /** Callback when an error occurs */
     onError?: (error: Error) => void;
 }
-declare const BridgeProvider: React.FC<Props>;
+declare const BridgeProvider: FC<BridgeProviderProps>;
 
 /**
  * Custom hook to access the bridge context.

package/dist/index.js

@@ -1,14 +1,192 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
 
+const CONFIG = {
+  RETRY_AFTER: 1e3,
+  MAX_RETRIES: 10,
+  PING_INTERVAL: 5e3,
+  MAX_RETRY_COOLDOWN: 3e4,
+  DEFAULT_TIMEOUT: 1e4,
+  MAX_RETRY_DELAY: 3e4,
+  PING_TIMEOUT: 2e3,
+  ERROR_CHECK_INTERVAL: 100,
+  MAX_ERROR_CHECKS: 10,
+  CONSECUTIVE_FAILURE_THRESHOLD: 2,
+  RECONNECT_DELAY: 100,
+  PORT_NAME: "chroma-bridge"
+};
+const calculateBackoffDelay = (attempt, baseDelay, maxDelay) => Math.min(baseDelay * Math.pow(2, attempt - 1), maxDelay);
+const clearTimeoutSafe = (ref) => {
+  if (ref.current) {
+    clearTimeout(ref.current);
+    ref.current = null;
+  }
+};
+const clearIntervalSafe = (ref) => {
+  if (ref.current) {
+    clearInterval(ref.current);
+    ref.current = null;
+  }
+};
+const consumeRuntimeError = () => {
+  const error = chrome.runtime.lastError?.message;
+  void chrome.runtime.lastError;
+  return error;
+};
 const BridgeContext = createContext(null);
+function createBridgeInstance(deps) {
+  const {
+    portRef,
+    pendingRequestsRef,
+    eventListenersRef,
+    messageIdRef,
+    isConnectedRef,
+    consecutiveTimeoutsRef,
+    defaultTimeout,
+    onReconnectNeeded
+  } = deps;
+  const rejectAllPending = (message) => {
+    pendingRequestsRef.current.forEach(({ reject, timeout }) => {
+      clearTimeout(timeout);
+      reject(new Error(message));
+    });
+    pendingRequestsRef.current.clear();
+  };
+  const send = (key, payload, timeoutDuration = defaultTimeout) => {
+    return new Promise((resolve, reject) => {
+      if (!portRef.current) {
+        reject(new Error("Bridge disconnected"));
+        return;
+      }
+      const id = `msg_${++messageIdRef.current}`;
+      const timeout = setTimeout(() => {
+        if (!pendingRequestsRef.current.has(id)) return;
+        pendingRequestsRef.current.delete(id);
+        consecutiveTimeoutsRef.current++;
+        console.warn(`[Bridge] Request timed out: ${key} (${timeoutDuration}ms)`);
+        if (consecutiveTimeoutsRef.current >= CONFIG.CONSECUTIVE_FAILURE_THRESHOLD) {
+          console.warn(
+            `[Bridge] ${consecutiveTimeoutsRef.current} consecutive timeouts, reconnecting...`
+          );
+          rejectAllPending("Bridge reconnecting due to timeouts");
+          consecutiveTimeoutsRef.current = 0;
+          onReconnectNeeded();
+        }
+        reject(new Error(`Request timed out: ${key}`));
+      }, timeoutDuration);
+      pendingRequestsRef.current.set(id, {
+        resolve,
+        reject,
+        timeout
+      });
+      try {
+        portRef.current.postMessage({ id, key, payload });
+        setTimeout(() => {
+          const errorMessage = consumeRuntimeError();
+          if (errorMessage && pendingRequestsRef.current.has(id)) {
+            const pending = pendingRequestsRef.current.get(id);
+            if (pending) {
+              clearTimeout(pending.timeout);
+              pendingRequestsRef.current.delete(id);
+              reject(new Error(errorMessage));
+            }
+          }
+        }, 0);
+        const immediateError = consumeRuntimeError();
+        if (immediateError) {
+          throw new Error(immediateError);
+        }
+      } catch (e) {
+        const pending = pendingRequestsRef.current.get(id);
+        if (pending) {
+          clearTimeout(pending.timeout);
+          pendingRequestsRef.current.delete(id);
+        }
+        reject(e instanceof Error ? e : new Error("Send failed"));
+      }
+    });
+  };
+  const broadcast = (key, payload) => {
+    if (!portRef.current) {
+      console.warn("[Bridge] Cannot broadcast - disconnected");
+      return;
+    }
+    try {
+      portRef.current.postMessage({ type: "broadcast", key, payload });
+    } catch (e) {
+      console.warn("[Bridge] Broadcast failed:", e);
+    }
+  };
+  const on = (key, handler) => {
+    if (!eventListenersRef.current.has(key)) {
+      eventListenersRef.current.set(key, /* @__PURE__ */ new Set());
+    }
+    eventListenersRef.current.get(key).add(handler);
+  };
+  const off = (key, handler) => {
+    const listeners = eventListenersRef.current.get(key);
+    if (listeners) {
+      listeners.delete(handler);
+      if (listeners.size === 0) {
+        eventListenersRef.current.delete(key);
+      }
+    }
+  };
+  const bridge = {
+    send,
+    broadcast,
+    on,
+    off,
+    get isConnected() {
+      return portRef.current !== null && isConnectedRef.current;
+    },
+    ping: async () => {
+      try {
+        await send("__ping__", void 0, CONFIG.PING_TIMEOUT);
+        return true;
+      } catch {
+        return false;
+      }
+    }
+  };
+  return bridge;
+}
+function startHealthMonitor(deps) {
+  const {
+    bridge,
+    pingIntervalRef,
+    consecutivePingFailuresRef,
+    pingInterval,
+    setIsServiceWorkerAlive,
+    onReconnectNeeded
+  } = deps;
+  clearIntervalSafe(pingIntervalRef);
+  consecutivePingFailuresRef.current = 0;
+  pingIntervalRef.current = setInterval(async () => {
+    if (!bridge.isConnected) return;
+    const alive = await bridge.ping();
+    if (!pingIntervalRef.current) return;
+    setIsServiceWorkerAlive(alive);
+    if (alive) {
+      consecutivePingFailuresRef.current = 0;
+      return;
+    }
+    consecutivePingFailuresRef.current++;
+    console.warn(`[Bridge] Ping failed (${consecutivePingFailuresRef.current}x)`);
+    if (consecutivePingFailuresRef.current >= CONFIG.CONSECUTIVE_FAILURE_THRESHOLD) {
+      console.warn("[Bridge] Service worker unresponsive, reconnecting...");
+      consecutivePingFailuresRef.current = 0;
+      onReconnectNeeded();
+    }
+  }, pingInterval);
+}
 const BridgeProvider = ({
   children,
-  retryAfter = 1e3,
-  maxRetries = 10,
-  pingInterval = 5e3,
-  maxRetryCooldown = 3e4,
-  // Reset retry count after 30s of max retries
+  retryAfter = CONFIG.RETRY_AFTER,
+  maxRetries = CONFIG.MAX_RETRIES,
+  pingInterval = CONFIG.PING_INTERVAL,
+  maxRetryCooldown = CONFIG.MAX_RETRY_COOLDOWN,
+  defaultTimeout = CONFIG.DEFAULT_TIMEOUT,
   onConnectionChange,
   onError
 }) => {
@@ -17,19 +195,27 @@ const BridgeProvider = ({
   const [error, setError] = useState(null);
   const [isServiceWorkerAlive, setIsServiceWorkerAlive] = useState(false);
   const portRef = useRef(null);
-  const maxRetryCooldownRef = useRef(null);
-  const consecutivePingFailuresRef = useRef(0);
-  const pendingRef = useRef(
-    /* @__PURE__ */ new Map()
-  );
-  const eventListenersRef = useRef(/* @__PURE__ */ new Map());
-  const uidRef = useRef(0);
-  const reconnectTimeoutRef = useRef(null);
-  const retryCountRef = useRef(0);
+  const isConnectedRef = useRef(false);
   const isConnectingRef = useRef(false);
-  const errorCheckIntervalRef = useRef(null);
+  const retryCountRef = useRef(0);
+  const reconnectTimeoutRef = useRef(null);
+  const maxRetryCooldownRef = useRef(null);
   const pingIntervalRef = useRef(null);
+  const errorCheckIntervalRef = useRef(null);
+  const consecutivePingFailuresRef = useRef(0);
   const consecutiveTimeoutsRef = useRef(0);
+  const pendingRequestsRef = useRef(/* @__PURE__ */ new Map());
+  const eventListenersRef = useRef(/* @__PURE__ */ new Map());
+  const messageIdRef = useRef(0);
+  const statusRef = useRef(status);
+  const bridgeRef = useRef(bridge);
+  const isMountedRef = useRef(true);
+  useEffect(() => {
+    statusRef.current = status;
+  }, [status]);
+  useEffect(() => {
+    bridgeRef.current = bridge;
+  }, [bridge]);
   const updateStatus = useCallback(
     (newStatus) => {
       setStatus(newStatus);
@@ -46,356 +232,215 @@ const BridgeProvider = ({
     [onError, updateStatus]
   );
   const cleanup = useCallback(() => {
-    if (reconnectTimeoutRef.current) {
-      clearTimeout(reconnectTimeoutRef.current);
-      reconnectTimeoutRef.current = null;
-    }
-    if (errorCheckIntervalRef.current) {
-      clearInterval(errorCheckIntervalRef.current);
-      errorCheckIntervalRef.current = null;
-    }
-    if (pingIntervalRef.current) {
-      clearInterval(pingIntervalRef.current);
-      pingIntervalRef.current = null;
-    }
+    clearTimeoutSafe(reconnectTimeoutRef);
+    clearIntervalSafe(errorCheckIntervalRef);
+    clearIntervalSafe(pingIntervalRef);
     if (portRef.current) {
       try {
         portRef.current.disconnect();
-      } catch (e) {
+      } catch {
       }
       portRef.current = null;
     }
-    pendingRef.current.forEach(({ reject, timeout }) => {
+    pendingRequestsRef.current.forEach(({ reject, timeout }) => {
       clearTimeout(timeout);
       reject(new Error("Bridge disconnected"));
     });
-    pendingRef.current.clear();
+    pendingRequestsRef.current.clear();
     eventListenersRef.current.clear();
     setIsServiceWorkerAlive(false);
     setBridge(null);
     isConnectingRef.current = false;
+    isConnectedRef.current = false;
+  }, []);
+  const handleMessage = useCallback((message) => {
+    if (message.id && pendingRequestsRef.current.has(message.id)) {
+      const pending = pendingRequestsRef.current.get(message.id);
+      clearTimeout(pending.timeout);
+      consecutiveTimeoutsRef.current = 0;
+      if (message.error) {
+        pending.reject(new Error(message.error));
+      } else {
+        pending.resolve(message.data);
+      }
+      pendingRequestsRef.current.delete(message.id);
+      return;
+    }
+    if (message.type === "broadcast" && message.key) {
+      eventListenersRef.current.get(message.key)?.forEach((handler) => {
+        try {
+          handler(message.payload);
+        } catch (err) {
+          console.warn("[Bridge] Event handler error:", err);
+        }
+      });
+    }
   }, []);
+  const scheduleReconnect = useCallback(
+    (connectFn) => {
+      if (retryCountRef.current < maxRetries) {
+        retryCountRef.current++;
+        const delay = calculateBackoffDelay(
+          retryCountRef.current,
+          retryAfter,
+          CONFIG.MAX_RETRY_DELAY
+        );
+        console.log(`[Bridge] Reconnecting in ${delay}ms (${retryCountRef.current}/${maxRetries})`);
+        updateStatus("reconnecting");
+        reconnectTimeoutRef.current = setTimeout(connectFn, delay);
+      } else {
+        console.warn(`[Bridge] Max retries reached. Cooldown: ${maxRetryCooldown}ms`);
+        clearTimeoutSafe(maxRetryCooldownRef);
+        maxRetryCooldownRef.current = setTimeout(() => {
+          console.log("[Bridge] Cooldown complete, reconnecting...");
+          retryCountRef.current = 0;
+          connectFn();
+        }, maxRetryCooldown);
+      }
+    },
+    [maxRetries, retryAfter, maxRetryCooldown, updateStatus]
+  );
   const connect = useCallback(() => {
-    if (isConnectingRef.current || retryCountRef.current >= maxRetries) {
-      console.warn("[Bridge] Already connecting or max retries reached");
+    if (isConnectingRef.current) return;
+    if (retryCountRef.current >= maxRetries) {
+      console.warn("[Bridge] Waiting for cooldown...");
       return;
     }
     isConnectingRef.current = true;
     cleanup();
     if (!chrome?.runtime?.connect) {
       handleError(new Error("Chrome runtime not available"));
+      isConnectingRef.current = false;
       return;
     }
     try {
-      const port = chrome.runtime.connect({ name: "chroma-bridge" });
-      if (chrome.runtime.lastError) {
-        throw new Error(chrome.runtime.lastError.message || "Failed to connect to extension");
-      }
+      const port = chrome.runtime.connect({ name: CONFIG.PORT_NAME });
+      const immediateError = consumeRuntimeError();
+      if (immediateError) throw new Error(immediateError);
       portRef.current = port;
-      let errorCheckCount = 0;
-      const maxErrorChecks = 10;
+      let errorChecks = 0;
       errorCheckIntervalRef.current = setInterval(() => {
-        errorCheckCount++;
-        if (chrome.runtime.lastError) {
-          const errorMessage = chrome.runtime.lastError.message;
-          console.warn("[Bridge] Runtime error detected:", errorMessage);
-          chrome.runtime.lastError;
-          if (errorCheckIntervalRef.current) {
-            clearInterval(errorCheckIntervalRef.current);
-            errorCheckIntervalRef.current = null;
-          }
-          if (errorMessage?.includes("Receiving end does not exist")) {
-            console.warn("[Bridge] Background script not ready, will retry connection");
+        errorChecks++;
+        const err = consumeRuntimeError();
+        if (err) {
+          clearIntervalSafe(errorCheckIntervalRef);
+          if (err.includes("Receiving end does not exist")) {
+            console.warn("[Bridge] Background not ready, retrying...");
             cleanup();
             isConnectingRef.current = false;
-            if (retryCountRef.current < maxRetries) {
-              retryCountRef.current++;
-              const delay = retryAfter * Math.pow(2, retryCountRef.current - 1);
-              reconnectTimeoutRef.current = setTimeout(connect, delay);
-            }
-          }
-        }
-        if (errorCheckCount >= maxErrorChecks) {
-          if (errorCheckIntervalRef.current) {
-            clearInterval(errorCheckIntervalRef.current);
-            errorCheckIntervalRef.current = null;
+            scheduleReconnect(connect);
           }
+          return;
         }
-      }, 100);
-      port.onMessage.addListener((msg) => {
-        if (msg.id && pendingRef.current.has(msg.id)) {
-          const pending = pendingRef.current.get(msg.id);
-          clearTimeout(pending.timeout);
-          consecutiveTimeoutsRef.current = 0;
-          if (msg.error) {
-            pending.reject(new Error(msg.error));
-          } else {
-            pending.resolve(msg.data);
-          }
-          pendingRef.current.delete(msg.id);
-        } else if (msg.type === "broadcast" && msg.key) {
-          const listeners = eventListenersRef.current.get(msg.key);
-          if (listeners) {
-            listeners.forEach((handler) => {
-              try {
-                handler(msg.payload);
-              } catch (error2) {
-                console.warn("[Bridge] Error in event handler:", error2);
-              }
-            });
-          }
+        if (errorChecks >= CONFIG.MAX_ERROR_CHECKS) {
+          clearIntervalSafe(errorCheckIntervalRef);
         }
-      });
+      }, CONFIG.ERROR_CHECK_INTERVAL);
+      port.onMessage.addListener(handleMessage);
       port.onDisconnect.addListener(() => {
-        console.warn("[Bridge] disconnected");
+        console.warn("[Bridge] Disconnected");
         isConnectingRef.current = false;
-        if (chrome.runtime.lastError) {
-          handleError(
-            new Error(chrome.runtime.lastError.message || "Port disconnected with error")
-          );
-          chrome.runtime.lastError;
+        const disconnectError = consumeRuntimeError();
+        if (disconnectError) {
+          handleError(new Error(disconnectError));
         } else {
           updateStatus("disconnected");
         }
         cleanup();
-        if (retryCountRef.current < maxRetries) {
-          retryCountRef.current++;
-          const delay = Math.min(retryAfter * Math.pow(2, retryCountRef.current - 1), 3e4);
-          console.log(
-            `[Bridge] Reconnecting in ${delay}ms (attempt ${retryCountRef.current}/${maxRetries})`
-          );
-          updateStatus("reconnecting");
-          reconnectTimeoutRef.current = setTimeout(connect, delay);
-        } else {
-          console.warn(
-            `[Bridge] Max retries (${maxRetries}) reached. Will retry after ${maxRetryCooldown}ms cooldown.`
-          );
-          if (maxRetryCooldownRef.current) {
-            clearTimeout(maxRetryCooldownRef.current);
-          }
-          maxRetryCooldownRef.current = setTimeout(() => {
-            console.log(
-              "[Bridge] Cooldown complete, resetting retry count and attempting reconnection..."
-            );
-            retryCountRef.current = 0;
-            connect();
-          }, maxRetryCooldown);
-        }
+        scheduleReconnect(connect);
       });
-      const bridgeInstance = {
-        send: (key, payload, timeoutDuration = 1e4) => {
-          return new Promise((resolve, reject) => {
-            if (!portRef.current) {
-              reject(new Error("Bridge disconnected"));
-              return;
-            }
-            const id = `msg${uidRef.current++}`;
-            const timeout = setTimeout(() => {
-              if (pendingRef.current.has(id)) {
-                pendingRef.current.delete(id);
-                consecutiveTimeoutsRef.current++;
-                const errorMessage = `Request timed out after ${timeoutDuration}ms for key: ${key} (id: ${id})`;
-                console.warn(`[Bridge] ${errorMessage}`);
-                if (consecutiveTimeoutsRef.current >= 2 && status !== "reconnecting") {
-                  console.warn(
-                    `[Bridge] ${consecutiveTimeoutsRef.current} consecutive timeouts detected, service worker may be unresponsive. Reconnecting...`
-                  );
-                  setIsServiceWorkerAlive(false);
-                  updateStatus("reconnecting");
-                  pendingRef.current.forEach(
-                    ({ reject: pendingReject, timeout: pendingTimeout }, pendingId) => {
-                      if (pendingId !== id) {
-                        clearTimeout(pendingTimeout);
-                        pendingReject(new Error("Bridge reconnecting due to consecutive timeouts"));
-                      }
-                    }
-                  );
-                  pendingRef.current.clear();
-                  retryCountRef.current = 0;
-                  isConnectingRef.current = false;
-                  consecutiveTimeoutsRef.current = 0;
-                  setTimeout(() => {
-                    cleanup();
-                    connect();
-                  }, 100);
-                }
-                reject(new Error(errorMessage));
-              }
-            }, timeoutDuration);
-            pendingRef.current.set(id, { resolve, reject, timeout });
-            try {
-              portRef.current.postMessage({ id, key, payload });
-              setTimeout(() => {
-                if (chrome.runtime.lastError) {
-                  const errorMessage = chrome.runtime.lastError.message;
-                  console.warn("[Bridge] Async runtime error after postMessage:", errorMessage);
-                  chrome.runtime.lastError;
-                  if (pendingRef.current.has(id)) {
-                    const pending = pendingRef.current.get(id);
-                    if (pending) clearTimeout(pending.timeout);
-                    pendingRef.current.delete(id);
-                    reject(new Error(errorMessage || "Async send failed"));
-                  }
-                }
-              }, 0);
-              if (chrome.runtime.lastError) {
-                throw new Error(chrome.runtime.lastError.message || "Failed to send message");
-              }
-            } catch (e) {
-              const pending = pendingRef.current.get(id);
-              if (pending) clearTimeout(pending.timeout);
-              pendingRef.current.delete(id);
-              if (chrome.runtime.lastError) {
-                console.warn(
-                  "[Bridge] Runtime error during postMessage:",
-                  chrome.runtime.lastError.message
-                );
-                chrome.runtime.lastError;
-              }
-              reject(e instanceof Error ? e : new Error("Send failed"));
-            }
-          });
-        },
-        broadcast: (key, payload) => {
-          if (!portRef.current) {
-            console.warn("[Bridge] Cannot broadcast - disconnected");
-            return;
-          }
-          try {
-            portRef.current.postMessage({ type: "broadcast", key, payload });
-          } catch (e) {
-            console.warn("[Bridge] Broadcast failed:", e);
-          }
-        },
-        on: (key, handler) => {
-          let listeners = eventListenersRef.current.get(key);
-          if (!listeners) {
-            listeners = /* @__PURE__ */ new Set();
-            eventListenersRef.current.set(key, listeners);
-          }
-          listeners.add(handler);
-        },
-        off: (key, handler) => {
-          const listeners = eventListenersRef.current.get(key);
-          if (listeners) {
-            listeners.delete(handler);
-            if (listeners.size === 0) {
-              eventListenersRef.current.delete(key);
-            }
-          }
-        },
-        ping: async () => {
-          try {
-            await bridgeInstance.send("__ping__", void 0, 2e3);
-            return true;
-          } catch {
-            return false;
-          }
-        },
-        get isConnected() {
-          return portRef.current !== null && status === "connected";
-        }
+      const triggerReconnect = () => {
+        setIsServiceWorkerAlive(false);
+        updateStatus("reconnecting");
+        retryCountRef.current = 0;
+        isConnectingRef.current = false;
+        setTimeout(() => {
+          cleanup();
+          connect();
+        }, CONFIG.RECONNECT_DELAY);
       };
+      const bridgeInstance = createBridgeInstance({
+        portRef,
+        pendingRequestsRef,
+        eventListenersRef,
+        messageIdRef,
+        isConnectedRef,
+        consecutiveTimeoutsRef,
+        defaultTimeout,
+        onReconnectNeeded: triggerReconnect
+      });
       setBridge(bridgeInstance);
+      isConnectedRef.current = true;
       updateStatus("connected");
       setIsServiceWorkerAlive(true);
       setError(null);
       retryCountRef.current = 0;
       consecutiveTimeoutsRef.current = 0;
       isConnectingRef.current = false;
-      if (pingIntervalRef.current) {
-        clearInterval(pingIntervalRef.current);
-      }
-      consecutivePingFailuresRef.current = 0;
-      pingIntervalRef.current = setInterval(async () => {
-        if (bridgeInstance && portRef.current) {
-          const alive = await bridgeInstance.ping();
-          setIsServiceWorkerAlive(alive);
-          if (!alive) {
-            consecutivePingFailuresRef.current++;
-            console.warn(
-              `[Bridge] Service worker ping failed (${consecutivePingFailuresRef.current} consecutive failures)`
-            );
-            if (consecutivePingFailuresRef.current >= 2) {
-              console.warn("[Bridge] Auto-reconnecting due to unresponsive service worker...");
-              consecutivePingFailuresRef.current = 0;
-              retryCountRef.current = 0;
-              isConnectingRef.current = false;
-              updateStatus("reconnecting");
-              cleanup();
-              connect();
-            }
-          } else {
-            consecutivePingFailuresRef.current = 0;
-          }
-        }
-      }, pingInterval);
+      startHealthMonitor({
+        bridge: bridgeInstance,
+        pingIntervalRef,
+        consecutivePingFailuresRef,
+        pingInterval,
+        setIsServiceWorkerAlive,
+        onReconnectNeeded: triggerReconnect
+      });
     } catch (e) {
       isConnectingRef.current = false;
-      const error2 = e instanceof Error ? e : new Error("Connection failed");
-      handleError(error2);
-      if (retryCountRef.current < maxRetries) {
-        retryCountRef.current++;
-        reconnectTimeoutRef.current = setTimeout(connect, retryAfter);
-      }
+      handleError(e instanceof Error ? e : new Error("Connection failed"));
+      scheduleReconnect(connect);
     }
-  }, [retryAfter, maxRetries, pingInterval, handleError, updateStatus, cleanup]);
+  }, [
+    maxRetries,
+    cleanup,
+    handleError,
+    handleMessage,
+    scheduleReconnect,
+    defaultTimeout,
+    updateStatus,
+    pingInterval
+  ]);
   const reconnect = useCallback(() => {
     retryCountRef.current = 0;
     consecutiveTimeoutsRef.current = 0;
     updateStatus("connecting");
     connect();
   }, [connect, updateStatus]);
-  const statusRef = useRef(status);
-  const bridgeRef = useRef(bridge);
-  useEffect(() => {
-    statusRef.current = status;
-  }, [status]);
-  useEffect(() => {
-    bridgeRef.current = bridge;
-  }, [bridge]);
   useEffect(() => {
     connect();
     const handleVisibilityChange = () => {
-      if (document.visibilityState === "visible") {
-        const currentStatus = statusRef.current;
-        const currentBridge = bridgeRef.current;
-        if (currentStatus === "disconnected" || currentStatus === "error") {
-          console.log("[Bridge] Tab became visible, attempting reconnection...");
-          retryCountRef.current = 0;
-          connect();
-        } else if (currentStatus === "connected" && currentBridge) {
-          currentBridge.ping().then((alive) => {
-            if (!alive) {
-              console.warn(
-                "[Bridge] Tab became visible but service worker unresponsive, reconnecting..."
-              );
-              retryCountRef.current = 0;
-              isConnectingRef.current = false;
-              cleanup();
-              connect();
-            }
-          });
-        }
+      if (document.visibilityState !== "visible") return;
+      if (!isMountedRef.current) return;
+      if (isConnectingRef.current) return;
+      const currentStatus = statusRef.current;
+      const currentBridge = bridgeRef.current;
+      if (currentStatus === "disconnected" || currentStatus === "error") {
+        console.log("[Bridge] Tab visible, reconnecting...");
+        retryCountRef.current = 0;
+        connect();
+      } else if (currentStatus === "connected" && currentBridge) {
+        currentBridge.ping().then((alive) => {
+          if (!isMountedRef.current) return;
+          if (!alive) {
+            console.warn("[Bridge] Tab visible but unresponsive, reconnecting...");
+            retryCountRef.current = 0;
+            isConnectingRef.current = false;
+            cleanup();
+            connect();
+          }
+        });
       }
     };
     document.addEventListener("visibilitychange", handleVisibilityChange);
     return () => {
+      isMountedRef.current = false;
       document.removeEventListener("visibilitychange", handleVisibilityChange);
-      if (maxRetryCooldownRef.current) {
-        clearTimeout(maxRetryCooldownRef.current);
-      }
+      clearTimeoutSafe(maxRetryCooldownRef);
       cleanup();
     };
   }, [connect, cleanup]);
   const contextValue = useMemo(
-    () => ({
-      bridge,
-      status,
-      error,
-      reconnect,
-      isServiceWorkerAlive
-    }),
+    () => ({ bridge, status, error, reconnect, isServiceWorkerAlive }),
     [bridge, status, error, reconnect, isServiceWorkerAlive]
   );
   return /* @__PURE__ */ jsx(BridgeContext.Provider, { value: contextValue, children });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromahq/react",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "React bindings for the Chroma Chrome extension framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",