@chromahq/react 1.0.22 → 1.0.24

package/dist/index.d.ts

@@ -76,7 +76,19 @@ interface ConnectionStatusResult {
     reconnect: (() => void) | undefined;
     /** Any connection error */
     error: Error | null | undefined;
+    /** Whether the system is fully ready (bridge connected + optional store ready) */
+    isReady: boolean;
+    /** Whether the system is loading (bridge connecting/reconnecting OR store not ready) */
+    isLoading: boolean;
 }
-declare const useConnectionStatus: () => ConnectionStatusResult;
+interface StoreReadyMethods {
+    onReady: (callback: () => void) => () => void;
+    isReady: () => boolean;
+}
+/**
+ * Hook to get unified connection status
+ * @param store Optional store to include in readiness check
+ */
+declare const useConnectionStatus: (store?: StoreReadyMethods) => ConnectionStatusResult;
 
 export { BridgeProvider, useBridge, useBridgeQuery, useConnectionStatus };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext, useSyncExternalStore } from 'react';
 
 const BRIDGE_ENABLE_LOGS = true;
 const CONFIG = {
@@ -46,6 +46,7 @@ function createBridgeInstance(deps) {
     messageIdRef,
     isConnectedRef,
     consecutiveTimeoutsRef,
+    reconnectionGracePeriodRef,
     defaultTimeout,
     onReconnectNeeded
   } = deps;
@@ -66,11 +67,15 @@ function createBridgeInstance(deps) {
       const timeout = setTimeout(() => {
         if (!pendingRequestsRef.current.has(id)) return;
         pendingRequestsRef.current.delete(id);
-        consecutiveTimeoutsRef.current++;
+        if (!reconnectionGracePeriodRef.current) {
+          consecutiveTimeoutsRef.current++;
+        }
         {
-          console.warn(`[Bridge] Request timed out: ${key} (${timeoutDuration}ms)`);
+          console.warn(
+            `[Bridge] Request timed out: ${key} (${timeoutDuration}ms)${reconnectionGracePeriodRef.current ? " [grace period]" : ""}`
+          );
         }
-        if (consecutiveTimeoutsRef.current >= CONFIG.CONSECUTIVE_FAILURE_THRESHOLD) {
+        if (!reconnectionGracePeriodRef.current && consecutiveTimeoutsRef.current >= CONFIG.CONSECUTIVE_FAILURE_THRESHOLD) {
           {
             console.warn(
               `[Bridge] ${consecutiveTimeoutsRef.current} consecutive timeouts, reconnecting...`
@@ -230,12 +235,19 @@ const BridgeProvider = ({
   const errorCheckIntervalRef = useRef(null);
   const consecutivePingFailuresRef = useRef(0);
   const consecutiveTimeoutsRef = useRef(0);
+  const reconnectionGracePeriodRef = useRef(false);
   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(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
   useEffect(() => {
     statusRef.current = status;
   }, [status]);
@@ -465,6 +477,7 @@ const BridgeProvider = ({
         messageIdRef,
         isConnectedRef,
         consecutiveTimeoutsRef,
+        reconnectionGracePeriodRef,
         defaultTimeout,
         onReconnectNeeded: triggerReconnect
       });
@@ -477,6 +490,13 @@ const BridgeProvider = ({
       swRestartRetryCountRef.current = 0;
       consecutiveTimeoutsRef.current = 0;
       isConnectingRef.current = false;
+      reconnectionGracePeriodRef.current = true;
+      setTimeout(() => {
+        reconnectionGracePeriodRef.current = false;
+        if (BRIDGE_ENABLE_LOGS) {
+          console.log("[Bridge] Grace period ended, timeout monitoring active");
+        }
+      }, 3e3);
       eventListenersRef.current.get("bridge:connected")?.forEach((handler) => {
         try {
           handler({ timestamp: Date.now() });
@@ -549,7 +569,6 @@ const BridgeProvider = ({
     };
     document.addEventListener("visibilitychange", handleVisibilityChange);
     return () => {
-      isMountedRef.current = false;
       document.removeEventListener("visibilitychange", handleVisibilityChange);
       clearTimeoutSafe(maxRetryCooldownRef);
       cleanup();
@@ -696,14 +715,26 @@ function useBridgeMutation(key, options = {}) {
   return { mutate, data, loading, error, reset };
 }
 
-const useConnectionStatus = () => {
+const useConnectionStatus = (store) => {
   const context = useContext(BridgeContext);
+  const storeReady = useSyncExternalStore(
+    store?.onReady ?? (() => () => {
+    }),
+    store?.isReady ?? (() => true),
+    () => false
+    // Server-side fallback
+  );
+  const bridgeConnected = context?.status === "connected";
+  const isReady = bridgeConnected && storeReady;
+  const isLoading = !isReady && (context?.status === "connecting" || context?.status === "reconnecting" || bridgeConnected && !storeReady);
   return {
     status: context?.status,
-    isConnected: context?.status === "connected",
+    isConnected: bridgeConnected,
     isServiceWorkerAlive: context?.isServiceWorkerAlive ?? false,
     reconnect: context?.reconnect,
-    error: context?.error
+    error: context?.error,
+    isReady,
+    isLoading
   };
 };
 

package/package.json

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