react-mirrorstate 0.4.0 → 0.6.0

package/dist/connection-manager.d.ts

@@ -6,6 +6,9 @@ declare class WebSocketConnectionManager {
     private currentStates;
     private lastSeq;
     private queuedUpdates;
+    private getStorageObject;
+    private saveToLocalStorage;
+    loadFromLocalStorage(name: string): any | undefined;
     private getWebSocketConfig;
     private buildWebSocketURL;
     private cleanup;
@@ -14,6 +17,7 @@ declare class WebSocketConnectionManager {
     private pendingUpdates;
     updateState(name: string, state: any): void;
     getCurrentState(name: string): any;
+    getStatesHash(): string;
     private notifyListeners;
 }
 export declare const connectionManager: WebSocketConnectionManager;

package/dist/connection-manager.js

@@ -1,3 +1,5 @@
+import { STATES_HASH, PROJECT_NAME } from "virtual:mirrorstate/initial-states";
+const LOCALSTORAGE_KEY = `mirrorstate:${PROJECT_NAME}`;
 class WebSocketConnectionManager {
     ws = null;
     isConnecting = false;
@@ -5,6 +7,51 @@ class WebSocketConnectionManager {
     currentStates = new Map();
     lastSeq = new Map();
     queuedUpdates = new Map();
+    getStorageObject() {
+        if (typeof window === "undefined" || !window.localStorage) {
+            return null;
+        }
+        try {
+            const stored = window.localStorage.getItem(LOCALSTORAGE_KEY);
+            if (stored !== null) {
+                const obj = JSON.parse(stored);
+                // Check hash - if mismatch, discard and return null
+                if (obj.__hash__ !== STATES_HASH) {
+                    window.localStorage.removeItem(LOCALSTORAGE_KEY);
+                    return null;
+                }
+                return obj;
+            }
+        }
+        catch {
+            // Ignore parse errors
+        }
+        return null;
+    }
+    saveToLocalStorage(name, state) {
+        if (typeof window === "undefined" || !window.localStorage) {
+            return;
+        }
+        try {
+            // Load existing object or create new one
+            let obj = this.getStorageObject();
+            if (!obj) {
+                obj = { __hash__: STATES_HASH };
+            }
+            obj[name] = state;
+            window.localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(obj));
+        }
+        catch {
+            // Ignore localStorage errors (quota exceeded, etc.)
+        }
+    }
+    loadFromLocalStorage(name) {
+        const obj = this.getStorageObject();
+        if (obj && name in obj) {
+            return obj[name];
+        }
+        return undefined;
+    }
     async getWebSocketConfig() {
         try {
             const config = await import("virtual:mirrorstate/config");
@@ -95,6 +142,13 @@ class WebSocketConnectionManager {
     updateState(name, state) {
         // Immediately update currentStates so subsequent reads get the latest value
         this.currentStates.set(name, state);
+        // Notify all local subscribers immediately (for same-page component sync)
+        this.notifyListeners(name, state);
+        // In production, persist to localStorage instead of WebSocket
+        if (process.env.NODE_ENV === "production") {
+            this.saveToLocalStorage(name, state);
+            return;
+        }
         if (this.ws?.readyState !== WebSocket.OPEN) {
             this.queuedUpdates.set(name, state);
             return;
@@ -120,6 +174,9 @@ class WebSocketConnectionManager {
     getCurrentState(name) {
         return this.currentStates.get(name);
     }
+    getStatesHash() {
+        return STATES_HASH;
+    }
     notifyListeners(name, state) {
         const nameListeners = this.listeners.get(name);
         if (nameListeners) {

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-import { Draft } from "immer";
+import { produce, type Draft } from "immer";
+export { type Draft, type Immutable } from "immer";
+export { produce };
 export declare function useMirrorState<T>(name: string): [T | undefined, (updater: (draft: Draft<T>) => void) => void];
 export declare function useMirrorState<T>(name: string, initialValue: T): [T, (updater: (draft: Draft<T>) => void) => void];
 export default useMirrorState;

package/dist/index.js

@@ -2,10 +2,10 @@ import { useEffect, useState, useRef } from "react";
 import { produce } from "immer";
 import { connectionManager } from "./connection-manager";
 import { INITIAL_STATES } from "virtual:mirrorstate/initial-states";
+export { produce };
 // Batching state for each mirror state name
 const batchQueues = new Map();
 const batchPending = new Map();
-const batchCallbacks = new Map();
 function scheduleBatchFlush(name) {
     if (batchPending.get(name)) {
         return;
@@ -13,7 +13,6 @@ function scheduleBatchFlush(name) {
     batchPending.set(name, true);
     queueMicrotask(() => {
         const queue = batchQueues.get(name);
-        const callbacks = batchCallbacks.get(name);
         if (!queue || queue.length === 0) {
             batchPending.set(name, false);
             return;
@@ -30,16 +29,24 @@ function scheduleBatchFlush(name) {
         // Clear the queue
         batchQueues.set(name, []);
         batchPending.set(name, false);
-        // Update connection manager and notify all callbacks
+        // Update connection manager (which notifies all subscribers)
         connectionManager.updateState(name, newState);
-        callbacks?.forEach((callback) => callback(newState));
-        batchCallbacks.set(name, new Set());
     });
 }
 export function useMirrorState(name, initialValue) {
     // Capture initialValue once on first render to make it stable
     const initialValueRef = useRef(initialValue);
-    const [state, setState] = useState(() => INITIAL_STATES?.[name] ?? initialValueRef.current);
+    const [state, setState] = useState(() => {
+        // In production, check localStorage first for persisted state
+        if (process.env.NODE_ENV === "production") {
+            const storedState = connectionManager.loadFromLocalStorage(name);
+            if (storedState !== undefined) {
+                return storedState;
+            }
+        }
+        // Fall back to build-time initial states or user-provided initialValue
+        return INITIAL_STATES?.[name] ?? initialValueRef.current;
+    });
     const hasCreatedFile = useRef(false);
     useEffect(() => {
         // Subscribe to state changes for this name
@@ -61,12 +68,9 @@ export function useMirrorState(name, initialValue) {
         // Initialize batch queue for this name if needed
         if (!batchQueues.has(name)) {
             batchQueues.set(name, []);
-            batchCallbacks.set(name, new Set());
         }
         // Add updater to batch queue
         batchQueues.get(name).push(updater);
-        // Add setState to callbacks
-        batchCallbacks.get(name).add(setState);
         // Schedule batch flush
         scheduleBatchFlush(name);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mirrorstate",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "React library for bidirectional state synchronization with MirrorState",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",