react-mirrorstate 0.2.1 → 0.3.0

package/dist/connection-manager.d.ts

@@ -4,11 +4,14 @@ declare class WebSocketConnectionManager {
     private isConnecting;
     private listeners;
     private currentStates;
+    private clientId;
+    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

@@ -1,10 +1,11 @@
-import debug from "debug";
-const logger = debug("mirrorstate:ws-manager");
 class WebSocketConnectionManager {
     ws = null;
     isConnecting = false;
     listeners = new Map();
     currentStates = new Map();
+    clientId = null;
+    lastSeq = new Map();
+    queuedUpdates = new Map();
     async getWebSocketConfig() {
         try {
             const config = await import("virtual:mirrorstate/config");
@@ -22,6 +23,12 @@ class WebSocketConnectionManager {
         const host = window.location.host;
         return `${protocol}//${host}${path}`;
     }
+    cleanup() {
+        this.isConnecting = false;
+        this.ws = null;
+        this.pendingUpdates.forEach((timeout) => clearTimeout(timeout));
+        this.pendingUpdates.clear();
+    }
     async connect() {
         if (this.ws?.readyState === WebSocket.OPEN || this.isConnecting) {
             return;
@@ -33,34 +40,37 @@ class WebSocketConnectionManager {
         this.isConnecting = true;
         const config = await this.getWebSocketConfig();
         const wsUrl = this.buildWebSocketURL(config.WS_PATH);
-        logger(`Connecting to ${wsUrl}`);
         this.ws = new WebSocket(wsUrl);
         this.ws.onopen = () => {
             this.isConnecting = false;
-            logger("WebSocket connected");
         };
         this.ws.onclose = () => {
-            this.isConnecting = false;
-            this.ws = null;
-            logger("WebSocket closed");
+            this.cleanup();
         };
         this.ws.onerror = () => {
-            this.isConnecting = false;
-            this.ws = null;
             console.error("WebSocket error");
+            this.cleanup();
         };
         this.ws.onmessage = (event) => {
             try {
                 const data = JSON.parse(event.data);
-                if (data.type === "initialState") {
-                    this.currentStates.set(data.name, data.state);
-                    this.notifyListeners(data.name, data.state);
-                    logger(`Initial state loaded: ${data.name}`, data.state);
+                if (data.type === "connected") {
+                    this.clientId = data.clientId;
+                    // Flush any queued updates
+                    this.queuedUpdates.forEach((state, name) => {
+                        this.updateState(name, state);
+                    });
+                    this.queuedUpdates.clear();
+                    return;
                 }
                 if (data.type === "fileChange") {
-                    this.currentStates.set(data.name, data.state);
-                    this.notifyListeners(data.name, data.state);
-                    logger(`State updated: ${data.name}`, data.state);
+                    // 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);
+                    }
                 }
             }
             catch (error) {
@@ -75,10 +85,10 @@ class WebSocketConnectionManager {
         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));
-        }
+        // Don't immediately notify with currentStates here - it might be stale
+        // and could revert optimistic updates. The component initializes from
+        // INITIAL_STATES, and the server will send initialState messages when
+        // the connection is established, which will update all subscribers.
         return () => {
             const nameListeners = this.listeners.get(name);
             if (nameListeners) {
@@ -89,10 +99,10 @@ class WebSocketConnectionManager {
             }
         };
     }
-    lastSentState = new Map();
     pendingUpdates = new Map();
     updateState(name, state) {
-        if (this.ws?.readyState !== WebSocket.OPEN) {
+        if (this.ws?.readyState !== WebSocket.OPEN || !this.clientId) {
+            this.queuedUpdates.set(name, state);
             return;
         }
         // Cancel any pending update for this state name
@@ -100,22 +110,18 @@ class WebSocketConnectionManager {
         if (pendingUpdate) {
             clearTimeout(pendingUpdate);
         }
-        // Check if this is actually a different state
-        const lastState = this.lastSentState.get(name);
-        if (lastState === state) {
-            logger(`Skipping duplicate state update for ${name}`);
-            return;
-        }
         // Debounce rapid updates
         const timeout = setTimeout(() => {
-            if (!this.ws) {
+            if (!this.ws || !this.clientId) {
                 return;
             }
-            this.ws.send(JSON.stringify({ name, state }));
+            this.ws.send(JSON.stringify({
+                clientId: this.clientId,
+                name,
+                state
+            }));
             this.currentStates.set(name, state);
-            this.lastSentState.set(name, state);
             this.pendingUpdates.delete(name);
-            logger(`Sent state update for ${name}`);
         }, 10);
         this.pendingUpdates.set(name, timeout);
     }

package/dist/index.js

@@ -3,30 +3,35 @@ 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
+    // This prevents re-renders when users pass inline objects/arrays
+    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
+        // Echo filtering happens in connection-manager using vector clocks
         const unsubscribe = connectionManager.subscribe(name, (newState) => {
             setState(newState);
         });
         // 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);
+        // Send update to connection manager (includes vector clock tracking)
+        connectionManager.updateState(name, newState);
+        // Optimistic local update for immediate UI feedback
+        setState(newState);
     };
     return [state, updateMirrorState];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mirrorstate",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React library for bidirectional state synchronization with MirrorState",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,11 +22,9 @@
     "directory": "packages/react-mirrorstate"
   },
   "dependencies": {
-    "debug": "^4.4.3",
     "immer": "^10.1.3"
   },
   "devDependencies": {
-    "@types/debug": "^4.1.12",
     "@types/react": "^19.2.2",
     "react": "^19.2.0",
     "typescript": "^5.9.3"