react-mirrorstate 0.2.3 → 0.3.1

package/dist/connection-manager.d.ts

@@ -4,12 +4,13 @@ declare class WebSocketConnectionManager {
     private isConnecting;
     private listeners;
     private currentStates;
+    private lastSeq;
+    private queuedUpdates;
     private getWebSocketConfig;
     private buildWebSocketURL;
     private cleanup;
     connect(): Promise<void>;
     subscribe(name: string, listener: StateListener): () => void;
-    private lastSentState;
     private pendingUpdates;
     updateState(name: string, state: any): void;
     getCurrentState(name: string): any;

package/dist/connection-manager.js

@@ -3,6 +3,8 @@ class WebSocketConnectionManager {
     isConnecting = false;
     listeners = new Map();
     currentStates = new Map();
+    lastSeq = new Map();
+    queuedUpdates = new Map();
     async getWebSocketConfig() {
         try {
             const config = await import("virtual:mirrorstate/config");
@@ -40,28 +42,36 @@ class WebSocketConnectionManager {
         this.ws = new WebSocket(wsUrl);
         this.ws.onopen = () => {
             this.isConnecting = false;
+            // Flush any queued updates
+            this.queuedUpdates.forEach((state, name) => {
+                this.updateState(name, state);
+            });
+            this.queuedUpdates.clear();
         };
         this.ws.onclose = () => {
             this.cleanup();
         };
-        this.ws.onerror = () => {
-            console.error("WebSocket error");
+        this.ws.onerror = (e) => {
+            console.error("WebSocket error", e);
             this.cleanup();
         };
         this.ws.onmessage = (event) => {
+            let data;
             try {
-                const data = JSON.parse(event.data);
-                if (data.type === "initialState") {
-                    this.currentStates.set(data.name, data.state);
-                    this.notifyListeners(data.name, data.state);
-                }
-                if (data.type === "fileChange") {
-                    this.currentStates.set(data.name, data.state);
-                    this.notifyListeners(data.name, data.state);
-                }
+                data = JSON.parse(event.data);
             }
             catch (error) {
                 console.error("Error handling server message:", error);
+                return;
+            }
+            if (data.type === "fileChange") {
+                // Only apply updates with a higher sequence number
+                const currentSeq = this.lastSeq.get(data.name) ?? -1;
+                if (data.seq !== undefined && data.seq > currentSeq) {
+                    this.lastSeq.set(data.name, data.seq);
+                    this.currentStates.set(data.name, data.state);
+                    this.notifyListeners(data.name, data.state);
+                }
             }
         };
     }
@@ -70,12 +80,7 @@ class WebSocketConnectionManager {
             this.listeners.set(name, new Set());
         }
         this.listeners.get(name).add(listener);
-        // Connect if not already connected (dev mode)
         this.connect();
-        // If we already have state for this name, notify immediately
-        if (this.currentStates.has(name)) {
-            listener(this.currentStates.get(name));
-        }
         return () => {
             const nameListeners = this.listeners.get(name);
             if (nameListeners) {
@@ -86,10 +91,10 @@ class WebSocketConnectionManager {
             }
         };
     }
-    lastSentState = new Map();
     pendingUpdates = new Map();
     updateState(name, state) {
         if (this.ws?.readyState !== WebSocket.OPEN) {
+            this.queuedUpdates.set(name, state);
             return;
         }
         // Cancel any pending update for this state name
@@ -97,19 +102,16 @@ class WebSocketConnectionManager {
         if (pendingUpdate) {
             clearTimeout(pendingUpdate);
         }
-        // Check if this is actually a different state
-        const lastState = this.lastSentState.get(name);
-        if (lastState === state) {
-            return;
-        }
         // Debounce rapid updates
         const timeout = setTimeout(() => {
             if (!this.ws) {
                 return;
             }
-            this.ws.send(JSON.stringify({ name, state }));
+            this.ws.send(JSON.stringify({
+                name,
+                state,
+            }));
             this.currentStates.set(name, state);
-            this.lastSentState.set(name, state);
             this.pendingUpdates.delete(name);
         }, 10);
         this.pendingUpdates.set(name, timeout);

package/dist/index.js

@@ -3,7 +3,9 @@ import { produce } from "immer";
 import { connectionManager } from "./connection-manager";
 import { INITIAL_STATES } from "virtual:mirrorstate/initial-states";
 export function useMirrorState(name, initialValue) {
-    const [state, setState] = useState(() => INITIAL_STATES?.[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 hasCreatedFile = useRef(false);
     useEffect(() => {
         // Subscribe to state changes for this name
@@ -12,21 +14,20 @@ export function useMirrorState(name, initialValue) {
         });
         // If file doesn't exist and initialValue was provided, create it
         if (INITIAL_STATES?.[name] === undefined &&
-            initialValue !== undefined &&
+            initialValueRef.current !== undefined &&
             !hasCreatedFile.current) {
             hasCreatedFile.current = true;
-            connectionManager.updateState(name, initialValue);
+            connectionManager.updateState(name, initialValueRef.current);
         }
         return () => {
             unsubscribe();
         };
-    }, [name, initialValue]);
+    }, [name]);
     const updateMirrorState = (updater) => {
-        setState((prevState) => {
-            const newState = produce(prevState, updater);
-            connectionManager.updateState(name, newState);
-            return newState;
-        });
+        const currentState = connectionManager.getCurrentState(name) ?? state;
+        const newState = produce(currentState, updater);
+        connectionManager.updateState(name, newState);
+        setState(newState);
     };
     return [state, updateMirrorState];
 }

package/package.json

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