@chromahq/store 1.0.45 → 1.0.47

package/dist/index.cjs.js

@@ -110,6 +110,7 @@ function useStoreReset(store) {
 
 const STORE_ENABLE_LOGS = typeof globalThis !== "undefined" && globalThis.__CHROMA_ENABLE_LOGS__ === false ? false : true;
 class BridgeStore {
+  // Consider state stale after 30s hidden
   constructor(bridge, initialState, storeName = "default", readyCallbacks = /* @__PURE__ */ new Set()) {
     this.listeners = /* @__PURE__ */ new Set();
     this.currentState = null;
@@ -127,10 +128,14 @@ class BridgeStore {
     this.stateChangedHandler = null;
     // Debounce timer for state sync (optimization for rapid updates)
     this.stateSyncDebounceTimer = null;
-    this.stateSyncDebounceMs = 100;
-    // Increased to 100ms to reduce burst traffic on Windows
+    this.stateSyncDebounceMs = 50;
+    // Reduced to 50ms for faster reactivity
     // Reconnect delay timer (to allow SW to bootstrap before re-initializing)
     this.reconnectDelayTimer = null;
+    // Visibility change handling - refresh state when tab becomes visible
+    this.visibilityHandler = null;
+    this.lastVisibleAt = Date.now();
+    this.staleThresholdMs = 3e4;
     this.initialize = async () => {
       if (this.isInitializing) {
         return;
@@ -260,6 +265,10 @@ class BridgeStore {
           this.stateChangedHandler = null;
         }
       }
+      if (this.visibilityHandler && typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", this.visibilityHandler);
+        this.visibilityHandler = null;
+      }
       if (this.listeners) {
         this.listeners.clear();
       }
@@ -353,6 +362,23 @@ class BridgeStore {
         maxInitializationAttempts: this.maxInitializationAttempts
       };
     };
+    /**
+     * Update the bridge reference and re-register all event listeners.
+     * Called when createBridgeStore receives a new bridge object (e.g., after React remount).
+     * This is critical for React StrictMode which causes double-mounting.
+     */
+    this.updateBridge = (newBridge) => {
+      if (this.bridge === newBridge) {
+        return;
+      }
+      if (STORE_ENABLE_LOGS) {
+        console.log(
+          `BridgeStore[${this.storeName}]: Updating bridge reference and re-registering listeners`
+        );
+      }
+      this.bridge = newBridge;
+      this.reregisterEventListeners();
+    };
     this.bridge = bridge;
     this.currentState = initialState || null;
     this.previousState = initialState || null;
@@ -361,6 +387,7 @@ class BridgeStore {
     this.readyCallbacks = readyCallbacks;
     this.setupStateSync();
     this.setupReconnectListener();
+    this.setupVisibilityListener();
     this.initialize();
   }
   setupReconnectListener() {
@@ -372,30 +399,71 @@ class BridgeStore {
           );
         }
         this.ready = false;
+        if (this.stateSyncDebounceTimer) {
+          clearTimeout(this.stateSyncDebounceTimer);
+          this.stateSyncDebounceTimer = null;
+        }
+        this.pendingStateSync = false;
+        this.isInitializing = false;
+        if (this.initializationTimer) {
+          clearTimeout(this.initializationTimer);
+          this.initializationTimer = null;
+        }
       };
       this.bridge.on("bridge:disconnected", this.disconnectHandler);
       this.reconnectHandler = () => {
         if (STORE_ENABLE_LOGS) {
           console.log(
-            `BridgeStore[${this.storeName}]: Bridge reconnected, waiting for SW to initialize...`
+            `BridgeStore[${this.storeName}]: Bridge reconnected, re-registering listeners and re-initializing...`
           );
         }
         if (this.reconnectDelayTimer) {
           clearTimeout(this.reconnectDelayTimer);
           this.reconnectDelayTimer = null;
         }
-        this.reconnectDelayTimer = setTimeout(() => {
-          this.reconnectDelayTimer = null;
+        this.reregisterEventListeners();
+        this.forceInitialize();
+      };
+      this.bridge.on("bridge:connected", this.reconnectHandler);
+    }
+  }
+  /**
+   * Re-register all event listeners on the bridge
+   * Called after reconnection because React StrictMode may have created a new eventListenersRef
+   */
+  reregisterEventListeners() {
+    if (!this.bridge.on) return;
+    const eventKey = `store:${this.storeName}:stateChanged`;
+    if (this.stateChangedHandler) {
+      if (STORE_ENABLE_LOGS) {
+        console.log(`BridgeStore[${this.storeName}]: Re-registering listener for '${eventKey}'`);
+      }
+      this.bridge.on(eventKey, this.stateChangedHandler);
+    }
+    if (this.disconnectHandler) {
+      this.bridge.on("bridge:disconnected", this.disconnectHandler);
+    }
+    if (this.reconnectHandler) {
+      this.bridge.on("bridge:connected", this.reconnectHandler);
+    }
+  }
+  setupVisibilityListener() {
+    if (typeof document === "undefined") return;
+    this.visibilityHandler = () => {
+      if (document.visibilityState === "visible") {
+        const hiddenDuration = Date.now() - this.lastVisibleAt;
+        if (hiddenDuration > this.staleThresholdMs && this.ready && this.bridge.isConnected) {
           if (STORE_ENABLE_LOGS) {
             console.log(
-              `BridgeStore[${this.storeName}]: Re-initializing after SW startup delay...`
+              `BridgeStore[${this.storeName}]: Tab visible after ${Math.round(hiddenDuration / 1e3)}s, refreshing state`
             );
           }
-          this.forceInitialize();
-        }, 1500);
-      };
-      this.bridge.on("bridge:connected", this.reconnectHandler);
-    }
+          this.fetchAndApplyState();
+        }
+        this.lastVisibleAt = Date.now();
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityHandler);
   }
   /**
    * Apply state directly from broadcast payload (no round-trip)
@@ -407,6 +475,11 @@ class BridgeStore {
       }
       return;
     }
+    if (STORE_ENABLE_LOGS) {
+      console.log(
+        `BridgeStore[${this.storeName}]: \u{1F4E6} Applying broadcast state, notifying ${this.listeners?.size ?? 0} listeners`
+      );
+    }
     this.previousState = this.currentState;
     this.currentState = newState;
     this.notifyListeners();
@@ -437,6 +510,12 @@ class BridgeStore {
   setupStateSync() {
     if (this.bridge.on) {
       this.stateChangedHandler = (payload) => {
+        if (STORE_ENABLE_LOGS) {
+          console.log(`BridgeStore[${this.storeName}]: \u{1F4E1} Received stateChanged broadcast`, {
+            hasPayload: !!payload,
+            payloadType: typeof payload
+          });
+        }
         if (this.stateSyncDebounceTimer) {
           clearTimeout(this.stateSyncDebounceTimer);
         }
@@ -449,7 +528,11 @@ class BridgeStore {
           }
         }, this.stateSyncDebounceMs);
       };
-      this.bridge.on(`store:${this.storeName}:stateChanged`, this.stateChangedHandler);
+      const eventKey = `store:${this.storeName}:stateChanged`;
+      if (STORE_ENABLE_LOGS) {
+        console.log(`BridgeStore[${this.storeName}]: Registering listener for '${eventKey}'`);
+      }
+      this.bridge.on(eventKey, this.stateChangedHandler);
     } else {
       if (STORE_ENABLE_LOGS) {
         console.warn(`BridgeStore[${this.storeName}]: Bridge does not support event listening`);
@@ -514,6 +597,7 @@ function createBridgeStore(bridge, initialState, storeName = "default", readyCal
     if (STORE_ENABLE_LOGS) {
       console.log(`BridgeStore[${storeName}]: Returning cached instance (singleton)`);
     }
+    cached.updateBridge(bridge);
     readyCallbacks.forEach((cb) => cached.onReady(cb));
     return cached;
   }

package/dist/index.d.ts

@@ -78,8 +78,17 @@ declare class BridgeStore<T> implements CentralStore<T> {
     private stateSyncDebounceTimer;
     private readonly stateSyncDebounceMs;
     private reconnectDelayTimer;
+    private visibilityHandler;
+    private lastVisibleAt;
+    private readonly staleThresholdMs;
     constructor(bridge: BridgeWithEvents, initialState?: T, storeName?: string, readyCallbacks?: Set<() => void>);
     private setupReconnectListener;
+    /**
+     * Re-register all event listeners on the bridge
+     * Called after reconnection because React StrictMode may have created a new eventListenersRef
+     */
+    private reregisterEventListeners;
+    private setupVisibilityListener;
     initialize: () => Promise<void>;
     private stateSyncSequence;
     private pendingStateSync;
@@ -122,6 +131,12 @@ declare class BridgeStore<T> implements CentralStore<T> {
         initializationAttempts: number;
         maxInitializationAttempts: number;
     };
+    /**
+     * Update the bridge reference and re-register all event listeners.
+     * Called when createBridgeStore receives a new bridge object (e.g., after React remount).
+     * This is critical for React StrictMode which causes double-mounting.
+     */
+    updateBridge: (newBridge: BridgeWithEvents) => void;
 }
 declare function createBridgeStore<T>(bridge: BridgeWithEvents, initialState?: T, storeName?: string, readyCallbacks?: Set<() => void>): CentralStore<T>;
 declare function clearStoreCache(): void;

package/dist/index.es.js

@@ -90,6 +90,7 @@ function useStoreReset(store) {
 
 const STORE_ENABLE_LOGS = typeof globalThis !== "undefined" && globalThis.__CHROMA_ENABLE_LOGS__ === false ? false : true;
 class BridgeStore {
+  // Consider state stale after 30s hidden
   constructor(bridge, initialState, storeName = "default", readyCallbacks = /* @__PURE__ */ new Set()) {
     this.listeners = /* @__PURE__ */ new Set();
     this.currentState = null;
@@ -107,10 +108,14 @@ class BridgeStore {
     this.stateChangedHandler = null;
     // Debounce timer for state sync (optimization for rapid updates)
     this.stateSyncDebounceTimer = null;
-    this.stateSyncDebounceMs = 100;
-    // Increased to 100ms to reduce burst traffic on Windows
+    this.stateSyncDebounceMs = 50;
+    // Reduced to 50ms for faster reactivity
     // Reconnect delay timer (to allow SW to bootstrap before re-initializing)
     this.reconnectDelayTimer = null;
+    // Visibility change handling - refresh state when tab becomes visible
+    this.visibilityHandler = null;
+    this.lastVisibleAt = Date.now();
+    this.staleThresholdMs = 3e4;
     this.initialize = async () => {
       if (this.isInitializing) {
         return;
@@ -240,6 +245,10 @@ class BridgeStore {
           this.stateChangedHandler = null;
         }
       }
+      if (this.visibilityHandler && typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", this.visibilityHandler);
+        this.visibilityHandler = null;
+      }
       if (this.listeners) {
         this.listeners.clear();
       }
@@ -333,6 +342,23 @@ class BridgeStore {
         maxInitializationAttempts: this.maxInitializationAttempts
       };
     };
+    /**
+     * Update the bridge reference and re-register all event listeners.
+     * Called when createBridgeStore receives a new bridge object (e.g., after React remount).
+     * This is critical for React StrictMode which causes double-mounting.
+     */
+    this.updateBridge = (newBridge) => {
+      if (this.bridge === newBridge) {
+        return;
+      }
+      if (STORE_ENABLE_LOGS) {
+        console.log(
+          `BridgeStore[${this.storeName}]: Updating bridge reference and re-registering listeners`
+        );
+      }
+      this.bridge = newBridge;
+      this.reregisterEventListeners();
+    };
     this.bridge = bridge;
     this.currentState = initialState || null;
     this.previousState = initialState || null;
@@ -341,6 +367,7 @@ class BridgeStore {
     this.readyCallbacks = readyCallbacks;
     this.setupStateSync();
     this.setupReconnectListener();
+    this.setupVisibilityListener();
     this.initialize();
   }
   setupReconnectListener() {
@@ -352,30 +379,71 @@ class BridgeStore {
           );
         }
         this.ready = false;
+        if (this.stateSyncDebounceTimer) {
+          clearTimeout(this.stateSyncDebounceTimer);
+          this.stateSyncDebounceTimer = null;
+        }
+        this.pendingStateSync = false;
+        this.isInitializing = false;
+        if (this.initializationTimer) {
+          clearTimeout(this.initializationTimer);
+          this.initializationTimer = null;
+        }
       };
       this.bridge.on("bridge:disconnected", this.disconnectHandler);
       this.reconnectHandler = () => {
         if (STORE_ENABLE_LOGS) {
           console.log(
-            `BridgeStore[${this.storeName}]: Bridge reconnected, waiting for SW to initialize...`
+            `BridgeStore[${this.storeName}]: Bridge reconnected, re-registering listeners and re-initializing...`
           );
         }
         if (this.reconnectDelayTimer) {
           clearTimeout(this.reconnectDelayTimer);
           this.reconnectDelayTimer = null;
         }
-        this.reconnectDelayTimer = setTimeout(() => {
-          this.reconnectDelayTimer = null;
+        this.reregisterEventListeners();
+        this.forceInitialize();
+      };
+      this.bridge.on("bridge:connected", this.reconnectHandler);
+    }
+  }
+  /**
+   * Re-register all event listeners on the bridge
+   * Called after reconnection because React StrictMode may have created a new eventListenersRef
+   */
+  reregisterEventListeners() {
+    if (!this.bridge.on) return;
+    const eventKey = `store:${this.storeName}:stateChanged`;
+    if (this.stateChangedHandler) {
+      if (STORE_ENABLE_LOGS) {
+        console.log(`BridgeStore[${this.storeName}]: Re-registering listener for '${eventKey}'`);
+      }
+      this.bridge.on(eventKey, this.stateChangedHandler);
+    }
+    if (this.disconnectHandler) {
+      this.bridge.on("bridge:disconnected", this.disconnectHandler);
+    }
+    if (this.reconnectHandler) {
+      this.bridge.on("bridge:connected", this.reconnectHandler);
+    }
+  }
+  setupVisibilityListener() {
+    if (typeof document === "undefined") return;
+    this.visibilityHandler = () => {
+      if (document.visibilityState === "visible") {
+        const hiddenDuration = Date.now() - this.lastVisibleAt;
+        if (hiddenDuration > this.staleThresholdMs && this.ready && this.bridge.isConnected) {
           if (STORE_ENABLE_LOGS) {
             console.log(
-              `BridgeStore[${this.storeName}]: Re-initializing after SW startup delay...`
+              `BridgeStore[${this.storeName}]: Tab visible after ${Math.round(hiddenDuration / 1e3)}s, refreshing state`
             );
           }
-          this.forceInitialize();
-        }, 1500);
-      };
-      this.bridge.on("bridge:connected", this.reconnectHandler);
-    }
+          this.fetchAndApplyState();
+        }
+        this.lastVisibleAt = Date.now();
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityHandler);
   }
   /**
    * Apply state directly from broadcast payload (no round-trip)
@@ -387,6 +455,11 @@ class BridgeStore {
       }
       return;
     }
+    if (STORE_ENABLE_LOGS) {
+      console.log(
+        `BridgeStore[${this.storeName}]: \u{1F4E6} Applying broadcast state, notifying ${this.listeners?.size ?? 0} listeners`
+      );
+    }
     this.previousState = this.currentState;
     this.currentState = newState;
     this.notifyListeners();
@@ -417,6 +490,12 @@ class BridgeStore {
   setupStateSync() {
     if (this.bridge.on) {
       this.stateChangedHandler = (payload) => {
+        if (STORE_ENABLE_LOGS) {
+          console.log(`BridgeStore[${this.storeName}]: \u{1F4E1} Received stateChanged broadcast`, {
+            hasPayload: !!payload,
+            payloadType: typeof payload
+          });
+        }
         if (this.stateSyncDebounceTimer) {
           clearTimeout(this.stateSyncDebounceTimer);
         }
@@ -429,7 +508,11 @@ class BridgeStore {
           }
         }, this.stateSyncDebounceMs);
       };
-      this.bridge.on(`store:${this.storeName}:stateChanged`, this.stateChangedHandler);
+      const eventKey = `store:${this.storeName}:stateChanged`;
+      if (STORE_ENABLE_LOGS) {
+        console.log(`BridgeStore[${this.storeName}]: Registering listener for '${eventKey}'`);
+      }
+      this.bridge.on(eventKey, this.stateChangedHandler);
     } else {
       if (STORE_ENABLE_LOGS) {
         console.warn(`BridgeStore[${this.storeName}]: Bridge does not support event listening`);
@@ -494,6 +577,7 @@ function createBridgeStore(bridge, initialState, storeName = "default", readyCal
     if (STORE_ENABLE_LOGS) {
       console.log(`BridgeStore[${storeName}]: Returning cached instance (singleton)`);
     }
+    cached.updateBridge(bridge);
     readyCallbacks.forEach((cb) => cached.onReady(cb));
     return cached;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromahq/store",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "description": "Centralized, persistent store for Chrome extensions using zustand, accessible from service workers and React, with chrome.storage.local persistence.",
   "type": "module",
   "main": "dist/index.cjs.js",