@chromahq/store 1.0.20 → 1.0.21

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 {
+  // ~1 frame at 60fps
   constructor(bridge, initialState, storeName = "default", readyCallbacks = /* @__PURE__ */ new Set()) {
     this.listeners = /* @__PURE__ */ new Set();
     this.currentState = null;
@@ -121,6 +122,12 @@ class BridgeStore {
     this.maxInitializationAttempts = 10;
     this.initializationTimer = null;
     this.isInitializing = false;
+    // Store handler references for cleanup (prevents memory leaks)
+    this.reconnectHandler = null;
+    this.stateChangedHandler = null;
+    // Debounce timer for state sync (optimization for rapid updates)
+    this.stateSyncDebounceTimer = null;
+    this.stateSyncDebounceMs = 16;
     this.initialize = async () => {
       if (this.isInitializing) {
         return;
@@ -228,6 +235,20 @@ class BridgeStore {
         clearTimeout(this.initializationTimer);
         this.initializationTimer = null;
       }
+      if (this.stateSyncDebounceTimer) {
+        clearTimeout(this.stateSyncDebounceTimer);
+        this.stateSyncDebounceTimer = null;
+      }
+      if (this.bridge.off) {
+        if (this.reconnectHandler) {
+          this.bridge.off("bridge:connected", this.reconnectHandler);
+          this.reconnectHandler = null;
+        }
+        if (this.stateChangedHandler) {
+          this.bridge.off(`store:${this.storeName}:stateChanged`, this.stateChangedHandler);
+          this.stateChangedHandler = null;
+        }
+      }
       if (this.listeners) {
         this.listeners.clear();
       }
@@ -333,36 +354,47 @@ class BridgeStore {
   }
   setupReconnectListener() {
     if (this.bridge.on) {
-      this.bridge.on("bridge:connected", () => {
+      this.reconnectHandler = () => {
         if (STORE_ENABLE_LOGS) {
           console.log(`BridgeStore[${this.storeName}]: Bridge reconnected, re-initializing...`);
         }
         this.forceInitialize();
-      });
+      };
+      this.bridge.on("bridge:connected", this.reconnectHandler);
+    }
+  }
+  fetchAndApplyState() {
+    if (this.pendingStateSync) {
+      return;
     }
+    this.pendingStateSync = true;
+    const currentSequence = ++this.stateSyncSequence;
+    this.bridge.send(`store:${this.storeName}:getState`).then((newState) => {
+      if (currentSequence === this.stateSyncSequence) {
+        this.previousState = this.currentState;
+        this.currentState = newState;
+        this.notifyListeners();
+      }
+    }).catch((error) => {
+      if (STORE_ENABLE_LOGS) {
+        console.error(`BridgeStore[${this.storeName}]: Failed to sync state:`, error);
+      }
+    }).finally(() => {
+      this.pendingStateSync = false;
+    });
   }
   setupStateSync() {
     if (this.bridge.on) {
-      this.bridge.on(`store:${this.storeName}:stateChanged`, () => {
-        if (this.pendingStateSync) {
-          return;
+      this.stateChangedHandler = () => {
+        if (this.stateSyncDebounceTimer) {
+          clearTimeout(this.stateSyncDebounceTimer);
         }
-        this.pendingStateSync = true;
-        const currentSequence = ++this.stateSyncSequence;
-        this.bridge.send(`store:${this.storeName}:getState`).then((newState) => {
-          if (currentSequence === this.stateSyncSequence) {
-            this.previousState = this.currentState;
-            this.currentState = newState;
-            this.notifyListeners();
-          }
-        }).catch((error) => {
-          if (STORE_ENABLE_LOGS) {
-            console.error(`BridgeStore[${this.storeName}]: Failed to sync state:`, error);
-          }
-        }).finally(() => {
-          this.pendingStateSync = false;
-        });
-      });
+        this.stateSyncDebounceTimer = setTimeout(() => {
+          this.stateSyncDebounceTimer = null;
+          this.fetchAndApplyState();
+        }, this.stateSyncDebounceMs);
+      };
+      this.bridge.on(`store:${this.storeName}:stateChanged`, this.stateChangedHandler);
     } else {
       if (STORE_ENABLE_LOGS) {
         console.warn(`BridgeStore[${this.storeName}]: Bridge does not support event listening`);
@@ -378,9 +410,7 @@ class BridgeStore {
         }
         return;
       }
-      if (globalThis.__CHROMA_ENABLE_LOGS__ !== false) {
-        console.warn("BridgeStore: Cannot execute function update, state not initialized");
-      }
+      actualUpdate = partial(this.currentState);
     } else {
       actualUpdate = partial;
     }
@@ -390,11 +420,6 @@ class BridgeStore {
           `BridgeStore[${this.storeName}]: Bridge disconnected, state update queued locally only`
         );
       }
-      if (globalThis.__CHROMA_ENABLE_LOGS__ !== false) {
-        console.warn(
-          `BridgeStore[${this.storeName}]: Bridge disconnected, state update queued locally only`
-        );
-      }
     }
     const stateBeforeUpdate = this.currentState ? { ...this.currentState } : null;
     this.applyOptimisticUpdate(actualUpdate, replace);

package/dist/index.d.ts

@@ -72,11 +72,16 @@ declare class BridgeStore<T> implements CentralStore<T> {
     private readonly maxInitializationAttempts;
     private initializationTimer;
     private isInitializing;
+    private reconnectHandler;
+    private stateChangedHandler;
+    private stateSyncDebounceTimer;
+    private readonly stateSyncDebounceMs;
     constructor(bridge: BridgeWithEvents, initialState?: T, storeName?: string, readyCallbacks?: Set<() => void>);
     private setupReconnectListener;
     initialize: () => Promise<void>;
     private stateSyncSequence;
     private pendingStateSync;
+    private fetchAndApplyState;
     private setupStateSync;
     private notifyListeners;
     getState: () => T;

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 {
+  // ~1 frame at 60fps
   constructor(bridge, initialState, storeName = "default", readyCallbacks = /* @__PURE__ */ new Set()) {
     this.listeners = /* @__PURE__ */ new Set();
     this.currentState = null;
@@ -101,6 +102,12 @@ class BridgeStore {
     this.maxInitializationAttempts = 10;
     this.initializationTimer = null;
     this.isInitializing = false;
+    // Store handler references for cleanup (prevents memory leaks)
+    this.reconnectHandler = null;
+    this.stateChangedHandler = null;
+    // Debounce timer for state sync (optimization for rapid updates)
+    this.stateSyncDebounceTimer = null;
+    this.stateSyncDebounceMs = 16;
     this.initialize = async () => {
       if (this.isInitializing) {
         return;
@@ -208,6 +215,20 @@ class BridgeStore {
         clearTimeout(this.initializationTimer);
         this.initializationTimer = null;
       }
+      if (this.stateSyncDebounceTimer) {
+        clearTimeout(this.stateSyncDebounceTimer);
+        this.stateSyncDebounceTimer = null;
+      }
+      if (this.bridge.off) {
+        if (this.reconnectHandler) {
+          this.bridge.off("bridge:connected", this.reconnectHandler);
+          this.reconnectHandler = null;
+        }
+        if (this.stateChangedHandler) {
+          this.bridge.off(`store:${this.storeName}:stateChanged`, this.stateChangedHandler);
+          this.stateChangedHandler = null;
+        }
+      }
       if (this.listeners) {
         this.listeners.clear();
       }
@@ -313,36 +334,47 @@ class BridgeStore {
   }
   setupReconnectListener() {
     if (this.bridge.on) {
-      this.bridge.on("bridge:connected", () => {
+      this.reconnectHandler = () => {
         if (STORE_ENABLE_LOGS) {
           console.log(`BridgeStore[${this.storeName}]: Bridge reconnected, re-initializing...`);
         }
         this.forceInitialize();
-      });
+      };
+      this.bridge.on("bridge:connected", this.reconnectHandler);
+    }
+  }
+  fetchAndApplyState() {
+    if (this.pendingStateSync) {
+      return;
     }
+    this.pendingStateSync = true;
+    const currentSequence = ++this.stateSyncSequence;
+    this.bridge.send(`store:${this.storeName}:getState`).then((newState) => {
+      if (currentSequence === this.stateSyncSequence) {
+        this.previousState = this.currentState;
+        this.currentState = newState;
+        this.notifyListeners();
+      }
+    }).catch((error) => {
+      if (STORE_ENABLE_LOGS) {
+        console.error(`BridgeStore[${this.storeName}]: Failed to sync state:`, error);
+      }
+    }).finally(() => {
+      this.pendingStateSync = false;
+    });
   }
   setupStateSync() {
     if (this.bridge.on) {
-      this.bridge.on(`store:${this.storeName}:stateChanged`, () => {
-        if (this.pendingStateSync) {
-          return;
+      this.stateChangedHandler = () => {
+        if (this.stateSyncDebounceTimer) {
+          clearTimeout(this.stateSyncDebounceTimer);
         }
-        this.pendingStateSync = true;
-        const currentSequence = ++this.stateSyncSequence;
-        this.bridge.send(`store:${this.storeName}:getState`).then((newState) => {
-          if (currentSequence === this.stateSyncSequence) {
-            this.previousState = this.currentState;
-            this.currentState = newState;
-            this.notifyListeners();
-          }
-        }).catch((error) => {
-          if (STORE_ENABLE_LOGS) {
-            console.error(`BridgeStore[${this.storeName}]: Failed to sync state:`, error);
-          }
-        }).finally(() => {
-          this.pendingStateSync = false;
-        });
-      });
+        this.stateSyncDebounceTimer = setTimeout(() => {
+          this.stateSyncDebounceTimer = null;
+          this.fetchAndApplyState();
+        }, this.stateSyncDebounceMs);
+      };
+      this.bridge.on(`store:${this.storeName}:stateChanged`, this.stateChangedHandler);
     } else {
       if (STORE_ENABLE_LOGS) {
         console.warn(`BridgeStore[${this.storeName}]: Bridge does not support event listening`);
@@ -358,9 +390,7 @@ class BridgeStore {
         }
         return;
       }
-      if (globalThis.__CHROMA_ENABLE_LOGS__ !== false) {
-        console.warn("BridgeStore: Cannot execute function update, state not initialized");
-      }
+      actualUpdate = partial(this.currentState);
     } else {
       actualUpdate = partial;
     }
@@ -370,11 +400,6 @@ class BridgeStore {
           `BridgeStore[${this.storeName}]: Bridge disconnected, state update queued locally only`
         );
       }
-      if (globalThis.__CHROMA_ENABLE_LOGS__ !== false) {
-        console.warn(
-          `BridgeStore[${this.storeName}]: Bridge disconnected, state update queued locally only`
-        );
-      }
     }
     const stateBeforeUpdate = this.currentState ? { ...this.currentState } : null;
     this.applyOptimisticUpdate(actualUpdate, replace);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromahq/store",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "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",