@chromahq/react 1.0.28 → 1.0.29

package/dist/index.d.ts

@@ -124,8 +124,9 @@ declare const useConnectionStatus: (store?: StoreReadyMethods) => ConnectionStat
  *   </ServiceWorkerHealthProvider>
  * </BridgeProvider>
  *
- * // In any component, use the hook:
- * const { isHealthy, isRecovering } = useServiceWorkerHealth();
+ * // In any component, use the hook (optionally pass your store instance):
+ * import { appStore } from './stores/app';
+ * const { isHealthy, isRecovering } = useServiceWorkerHealth({ store: appStore });
  *
  * if (!isHealthy) {
  *   return <Spinner message="Reconnecting..." />;
@@ -148,6 +149,10 @@ interface ServiceWorkerHealthContextValue {
     /** Force a reconnection attempt */
     forceReconnect: () => void;
 }
+interface ServiceWorkerHealthResult extends ServiceWorkerHealthContextValue {
+    /** Optional readiness state for attached store */
+    storeReady: boolean;
+}
 interface ServiceWorkerHealthProviderProps {
     children: ReactNode;
     /**
@@ -156,6 +161,9 @@ interface ServiceWorkerHealthProviderProps {
      */
     onHealthChange?: (status: HealthStatus, isHealthy: boolean) => void;
 }
+interface ServiceWorkerHealthOptions {
+    store?: StoreReadyMethods;
+}
 type HealthSubscriber = (status: HealthStatus, isHealthy: boolean) => void;
 /**
  * Subscribe to health status changes from outside React.
@@ -192,7 +200,7 @@ declare const ServiceWorkerHealthProvider: FC<ServiceWorkerHealthProviderProps>;
  * @example
  * ```tsx
  * function App() {
- *   const { isHealthy, isRecovering } = useServiceWorkerHealth();
+ *   const { isHealthy, isRecovering } = useServiceWorkerHealth({ store: appStore });
  *
  *   if (!isHealthy) {
  *     return (
@@ -207,7 +215,7 @@ declare const ServiceWorkerHealthProvider: FC<ServiceWorkerHealthProviderProps>;
  * }
  * ```
  */
-declare function useServiceWorkerHealth(): ServiceWorkerHealthContextValue;
+declare function useServiceWorkerHealth(options?: ServiceWorkerHealthOptions): ServiceWorkerHealthResult;
 /**
  * Lightweight hook that directly consumes BridgeContext without needing
  * ServiceWorkerHealthProvider. Use this for simple cases where you don't
@@ -222,11 +230,12 @@ declare function useServiceWorkerHealth(): ServiceWorkerHealthContextValue;
  * }
  * ```
  */
-declare function useServiceWorkerHealthSimple(): {
+declare function useServiceWorkerHealthSimple(options?: ServiceWorkerHealthOptions): {
     isHealthy: boolean;
     isRecovering: boolean;
     isLoading: boolean;
     reconnect: () => void;
+    storeReady: boolean;
 };
 
 export { BridgeProvider, ServiceWorkerHealthProvider, getHealthStatus, subscribeToHealth, useBridge, useBridgeQuery, useConnectionStatus, useServiceWorkerHealth, useServiceWorkerHealthSimple };

package/dist/index.js

@@ -5,15 +5,17 @@ const BRIDGE_ENABLE_LOGS = true;
 const CONFIG = {
   RETRY_AFTER: 1e3,
   MAX_RETRIES: 10,
-  PING_INTERVAL: 2e3,
-  // Check every 2s for faster SW death detection
+  PING_INTERVAL: 3e3,
+  // Check every 3s (balance between responsiveness and false positives)
   MAX_RETRY_COOLDOWN: 3e4,
   DEFAULT_TIMEOUT: 1e4,
   MAX_RETRY_DELAY: 3e4,
-  PING_TIMEOUT: 2e3,
+  PING_TIMEOUT: 5e3,
+  // Give SW 5s to respond (handles busy periods)
   ERROR_CHECK_INTERVAL: 100,
   MAX_ERROR_CHECKS: 10,
-  CONSECUTIVE_FAILURE_THRESHOLD: 2,
+  CONSECUTIVE_FAILURE_THRESHOLD: 3,
+  // Require 3 consecutive failures (9s total) before reconnecting
   RECONNECT_DELAY: 100,
   PORT_NAME: "chroma-bridge",
   // Service worker restart retry settings (indefinite retries)
@@ -275,7 +277,8 @@ const BridgeProvider = ({
     [onError, updateStatus]
   );
   const cleanup = useCallback((emitDisconnect = true) => {
-    if (emitDisconnect) {
+    const wasConnected = isConnectedRef.current || portRef.current !== null;
+    if (emitDisconnect && wasConnected) {
       eventListenersRef.current.get("bridge:disconnected")?.forEach((handler) => {
         try {
           handler(void 0);
@@ -411,7 +414,7 @@ const BridgeProvider = ({
       return;
     }
     isConnectingRef.current = true;
-    cleanup();
+    cleanup(false);
     if (!chrome?.runtime?.connect) {
       handleError(new Error("Chrome runtime not available"));
       isConnectingRef.current = false;
@@ -438,7 +441,7 @@ const BridgeProvider = ({
             if (BRIDGE_ENABLE_LOGS) {
               console.warn("[Bridge] Service worker not ready (may be restarting)...");
             }
-            cleanup();
+            cleanup(false);
             isConnectingRef.current = false;
             scheduleSwRestartReconnect(connect);
           }
@@ -481,7 +484,7 @@ const BridgeProvider = ({
         clearTimeoutSafe(triggerReconnectTimeoutRef);
         triggerReconnectTimeoutRef.current = setTimeout(() => {
           if (!isMountedRef.current) return;
-          cleanup();
+          cleanup(false);
           connect();
         }, CONFIG.RECONNECT_DELAY);
       };
@@ -762,6 +765,17 @@ const useConnectionStatus = (store) => {
   };
 };
 
+const noopSubscribe = () => () => {
+};
+const alwaysTrue = () => true;
+const ssrFallback = () => false;
+function useStoreReady(store) {
+  return useSyncExternalStore(
+    store?.onReady ?? noopSubscribe,
+    store?.isReady ?? alwaysTrue,
+    ssrFallback
+  );
+}
 const globalSubscribers = /* @__PURE__ */ new Set();
 function subscribeToHealth(callback) {
   globalSubscribers.add(callback);
@@ -832,24 +846,33 @@ const ServiceWorkerHealthProvider = ({
   );
   return /* @__PURE__ */ jsx(ServiceWorkerHealthContext.Provider, { value, children });
 };
-function useServiceWorkerHealth() {
+function useServiceWorkerHealth(options) {
   const context = useContext(ServiceWorkerHealthContext);
   if (!context) {
     throw new Error(
       "useServiceWorkerHealth must be used within a ServiceWorkerHealthProvider. Wrap your app with <ServiceWorkerHealthProvider> inside <BridgeProvider>."
     );
   }
-  return context;
+  const storeReady = useStoreReady(options?.store);
+  const combinedHealthy = context.isHealthy && (options?.store ? storeReady : true);
+  const combinedLoading = context.isLoading || (options?.store ? !storeReady : false);
+  return {
+    ...context,
+    isHealthy: combinedHealthy,
+    isLoading: combinedLoading,
+    storeReady
+  };
 }
-function useServiceWorkerHealthSimple() {
+function useServiceWorkerHealthSimple(options) {
   const bridgeContext = useContext(BridgeContext);
-  const isHealthy = bridgeContext?.status === "connected" && bridgeContext?.isServiceWorkerAlive === true;
+  const storeReady = useStoreReady(options?.store);
+  const isHealthy = bridgeContext?.status === "connected" && bridgeContext?.isServiceWorkerAlive === true && (options?.store ? storeReady : true);
   const isRecovering = bridgeContext?.status === "reconnecting" || bridgeContext?.status === "connecting";
-  const isLoading = !isHealthy && (isRecovering || !bridgeContext);
+  const isLoading = !isHealthy && (isRecovering || !bridgeContext) || (options?.store ? !storeReady : false);
   const reconnect = useCallback(() => {
     bridgeContext?.reconnect();
   }, [bridgeContext]);
-  return { isHealthy, isRecovering, isLoading, reconnect };
+  return { isHealthy, isRecovering, isLoading, reconnect, storeReady };
 }
 
 export { BridgeProvider, ServiceWorkerHealthProvider, getHealthStatus, subscribeToHealth, useBridge, useBridgeMutation, useBridgeQuery, useConnectionStatus, useServiceWorkerHealth, useServiceWorkerHealthSimple };

package/package.json

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