@chromahq/react 1.0.12 → 1.0.13

package/dist/index.d.ts

@@ -19,6 +19,7 @@ interface Props {
     retryAfter?: number;
     maxRetries?: number;
     pingInterval?: number;
+    maxRetryCooldown?: number;
     onConnectionChange?: (status: ConnectionStatus) => void;
     onError?: (error: Error) => void;
 }
@@ -30,22 +31,42 @@ declare const BridgeProvider: React.FC<Props>;
  */
 declare const useBridge: () => BridgeContextValue;
 
-/**
- * Custom hook to send a query to the bridge and return the response.
- * @param key
- * @param payload
- * @returns { data: Res | undefined, loading: boolean, error: unknown }
- */
-declare function useBridgeQuery<Res = unknown>(key: string, payload?: any): {
+interface UseBridgeQueryOptions {
+    /** Whether to automatically refetch when bridge reconnects. Default: true */
+    refetchOnReconnect?: boolean;
+    /** Whether to skip the query entirely. Default: false */
+    skip?: boolean;
+    /** Timeout duration in ms. Default: 10000 */
+    timeout?: number;
+}
+interface UseBridgeQueryResult<Res> {
     data: Res | undefined;
     loading: boolean;
     error: unknown;
-};
+    refetch: () => Promise<void>;
+}
+/**
+ * Custom hook to send a query to the bridge and return the response.
+ * Automatically waits for bridge connection and retries on reconnect.
+ * @param key The message key to send
+ * @param payload Optional payload to send with the message
+ * @param options Query options
+ * @returns { data, loading, error, refetch }
+ */
+declare function useBridgeQuery<Res = unknown>(key: string, payload?: any, options?: UseBridgeQueryOptions): UseBridgeQueryResult<Res>;
 
-declare const useConnectionStatus: () => {
-    status: ("connecting" | "connected" | "disconnected" | "error" | "reconnecting") | undefined;
+interface ConnectionStatusResult {
+    /** Current connection status: 'connecting' | 'connected' | 'disconnected' | 'error' | 'reconnecting' */
+    status: 'connecting' | 'connected' | 'disconnected' | 'error' | 'reconnecting' | undefined;
+    /** Whether the bridge port is connected */
+    isConnected: boolean;
+    /** Whether the service worker is responding to pings */
     isServiceWorkerAlive: boolean;
+    /** Manually trigger a reconnection */
     reconnect: (() => void) | undefined;
-};
+    /** Any connection error */
+    error: Error | null | undefined;
+}
+declare const useConnectionStatus: () => ConnectionStatusResult;
 
 export { BridgeProvider, useBridge, useBridgeQuery, useConnectionStatus };

package/dist/index.js

@@ -7,6 +7,8 @@ const BridgeProvider = ({
   retryAfter = 1e3,
   maxRetries = 10,
   pingInterval = 5e3,
+  maxRetryCooldown = 3e4,
+  // Reset retry count after 30s of max retries
   onConnectionChange,
   onError
 }) => {
@@ -15,6 +17,8 @@ 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()
   );
@@ -156,8 +160,26 @@ const BridgeProvider = ({
         cleanup();
         if (retryCountRef.current < maxRetries) {
           retryCountRef.current++;
-          const delay = retryAfter * Math.pow(2, retryCountRef.current - 1);
+          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);
         }
       });
       const bridgeInstance = {
@@ -172,22 +194,32 @@ const BridgeProvider = ({
               if (pendingRef.current.has(id)) {
                 pendingRef.current.delete(id);
                 consecutiveTimeoutsRef.current++;
-                if (consecutiveTimeoutsRef.current >= 2) {
+                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] Multiple timeouts detected, service worker may be unresponsive. Reconnecting..."
+                    `[Bridge] ${consecutiveTimeoutsRef.current} consecutive timeouts detected, service worker may be unresponsive. Reconnecting...`
                   );
                   setIsServiceWorkerAlive(false);
                   updateStatus("reconnecting");
-                  cleanup();
+                  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;
-                  setTimeout(connect, 500);
+                  consecutiveTimeoutsRef.current = 0;
+                  setTimeout(() => {
+                    cleanup();
+                    connect();
+                  }, 100);
                 }
-                reject(
-                  new Error(
-                    `Request timed out after ${timeoutDuration} ms for key: ${key} with id: ${id}`
-                  )
-                );
+                reject(new Error(errorMessage));
               }
             }, timeoutDuration);
             pendingRef.current.set(id, { resolve, reject, timeout });
@@ -260,7 +292,9 @@ const BridgeProvider = ({
             return false;
           }
         },
-        isConnected: true
+        get isConnected() {
+          return portRef.current !== null && status === "connected";
+        }
       };
       setBridge(bridgeInstance);
       updateStatus("connected");
@@ -272,12 +306,27 @@ const BridgeProvider = ({
       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) {
-            console.warn("[Bridge] Service worker ping failed, may be unresponsive");
+            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);
@@ -299,8 +348,36 @@ const BridgeProvider = ({
   }, [connect, updateStatus]);
   useEffect(() => {
     connect();
-    return cleanup;
-  }, [connect, cleanup]);
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        if (status === "disconnected" || status === "error") {
+          console.log("[Bridge] Tab became visible, attempting reconnection...");
+          retryCountRef.current = 0;
+          connect();
+        } else if (status === "connected" && bridge) {
+          bridge.ping().then((alive) => {
+            if (!alive) {
+              console.warn(
+                "[Bridge] Tab became visible but service worker unresponsive, reconnecting..."
+              );
+              retryCountRef.current = 0;
+              isConnectingRef.current = false;
+              cleanup();
+              connect();
+            }
+          });
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      if (maxRetryCooldownRef.current) {
+        clearTimeout(maxRetryCooldownRef.current);
+      }
+      cleanup();
+    };
+  }, [connect, cleanup, status, bridge]);
   const contextValue = useMemo(
     () => ({
       bridge,
@@ -322,25 +399,141 @@ const useBridge = () => {
   return context;
 };
 
-function useBridgeQuery(key, payload) {
-  const { bridge } = useBridge();
+function useBridgeQuery(key, payload, options = {}) {
+  const { refetchOnReconnect = true, skip = false, timeout } = options;
+  const { bridge, status } = useBridge();
   const [data, setData] = useState();
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(!skip);
   const [error, setError] = useState();
-  useEffect(() => {
-    let mounted = true;
+  const prevStatusRef = useRef(status);
+  const fetchIdRef = useRef(0);
+  const executeQuery = useCallback(async () => {
+    if (skip) {
+      setLoading(false);
+      return;
+    }
+    if (!bridge || !bridge.isConnected) {
+      return;
+    }
+    const currentFetchId = ++fetchIdRef.current;
     setLoading(true);
-    if (!bridge) {
-      setError(new Error("Bridge is not initialized"));
+    setError(void 0);
+    try {
+      const res = await bridge.send(key, payload, timeout);
+      if (currentFetchId === fetchIdRef.current) {
+        setData(res);
+        setError(void 0);
+      }
+    } catch (e) {
+      if (currentFetchId === fetchIdRef.current) {
+        setError(e);
+      }
+    } finally {
+      if (currentFetchId === fetchIdRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [bridge, key, payload, skip, timeout]);
+  useEffect(() => {
+    if (skip) {
       setLoading(false);
       return;
     }
-    bridge.send(key, payload).then((res) => mounted && setData(res)).catch((e) => mounted && setError(e)).finally(() => mounted && setLoading(false));
-    return () => {
-      mounted = false;
-    };
-  }, [key, JSON.stringify(payload)]);
-  return { data, loading, error };
+    if (status === "connected" && bridge?.isConnected) {
+      executeQuery();
+    } else if (status === "connecting") {
+      setLoading(true);
+    } else if (status === "disconnected" || status === "error") {
+      setLoading(false);
+    }
+  }, [status, bridge?.isConnected, key, JSON.stringify(payload), skip, executeQuery]);
+  useEffect(() => {
+    const wasDisconnected = prevStatusRef.current === "disconnected" || prevStatusRef.current === "error" || prevStatusRef.current === "reconnecting";
+    const isNowConnected = status === "connected";
+    if (refetchOnReconnect && wasDisconnected && isNowConnected && !skip) {
+      executeQuery();
+    }
+    prevStatusRef.current = status;
+  }, [status, refetchOnReconnect, skip, executeQuery]);
+  const refetch = useCallback(async () => {
+    await executeQuery();
+  }, [executeQuery]);
+  return { data, loading, error, refetch };
+}
+
+function useBridgeMutation(key, options = {}) {
+  const { timeout, onSuccess, onError, retries = 0, retryDelay = 1e3 } = options;
+  const { bridge, status } = useBridge();
+  const [data, setData] = useState();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const mutationIdRef = useRef(0);
+  const mutate = useCallback(
+    async (payload) => {
+      if (!bridge) {
+        const err = new Error("Bridge is not initialized");
+        setError(err);
+        onError?.(err);
+        throw err;
+      }
+      if (!bridge.isConnected) {
+        const err = new Error("Bridge is not connected");
+        setError(err);
+        onError?.(err);
+        throw err;
+      }
+      const currentMutationId = ++mutationIdRef.current;
+      setLoading(true);
+      setError(void 0);
+      let lastError;
+      let attempts = 0;
+      while (attempts <= retries) {
+        try {
+          const result = await bridge.send(key, payload, timeout);
+          if (currentMutationId === mutationIdRef.current) {
+            setData(result);
+            setError(void 0);
+            setLoading(false);
+            onSuccess?.(result);
+          }
+          return result;
+        } catch (e) {
+          lastError = e instanceof Error ? e : new Error(String(e));
+          attempts++;
+          if (attempts <= retries && bridge.isConnected) {
+            console.warn(
+              `[Bridge] Mutation "${key}" failed (attempt ${attempts}/${retries + 1}), retrying in ${retryDelay}ms...`
+            );
+            await new Promise((resolve) => setTimeout(resolve, retryDelay));
+          }
+        }
+      }
+      if (currentMutationId === mutationIdRef.current) {
+        setError(lastError);
+        setLoading(false);
+        onError?.(lastError);
+      }
+      throw lastError;
+    },
+    [bridge, key, timeout, onSuccess, onError, retries, retryDelay]
+  );
+  const reset = useCallback(() => {
+    setData(void 0);
+    setError(void 0);
+    setLoading(false);
+  }, []);
+  return { mutate, data, loading, error, reset };
 }
 
-export { BridgeProvider, useBridge, useBridgeQuery };
+const useConnectionStatus = () => {
+  const context = useContext(BridgeContext);
+  return {
+    status: context?.status,
+    isConnected: context?.status === "connected",
+    isServiceWorkerAlive: context?.isServiceWorkerAlive ?? false,
+    reconnect: context?.reconnect,
+    error: context?.error
+  };
+};
+
+export { BridgeProvider, useBridge, useBridgeMutation, useBridgeQuery, useConnectionStatus };

package/package.json

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