react-mirrorstate 0.3.0 → 0.4.0

package/dist/connection-manager.d.ts

@@ -4,7 +4,6 @@ declare class WebSocketConnectionManager {
     private isConnecting;
     private listeners;
     private currentStates;
-    private clientId;
     private lastSeq;
     private queuedUpdates;
     private getWebSocketConfig;

package/dist/connection-manager.js

@@ -3,7 +3,6 @@ class WebSocketConnectionManager {
     isConnecting = false;
     listeners = new Map();
     currentStates = new Map();
-    clientId = null;
     lastSeq = new Map();
     queuedUpdates = new Map();
     async getWebSocketConfig() {
@@ -43,38 +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 === "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") {
-                    // 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);
-                    }
-                }
+                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);
+                }
             }
         };
     }
@@ -83,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();
-        // 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) {
@@ -101,7 +93,9 @@ class WebSocketConnectionManager {
     }
     pendingUpdates = new Map();
     updateState(name, state) {
-        if (this.ws?.readyState !== WebSocket.OPEN || !this.clientId) {
+        // Immediately update currentStates so subsequent reads get the latest value
+        this.currentStates.set(name, state);
+        if (this.ws?.readyState !== WebSocket.OPEN) {
             this.queuedUpdates.set(name, state);
             return;
         }
@@ -110,17 +104,15 @@ class WebSocketConnectionManager {
         if (pendingUpdate) {
             clearTimeout(pendingUpdate);
         }
-        // Debounce rapid updates
+        // Debounce rapid WebSocket sends
         const timeout = setTimeout(() => {
-            if (!this.ws || !this.clientId) {
+            if (!this.ws) {
                 return;
             }
             this.ws.send(JSON.stringify({
-                clientId: this.clientId,
                 name,
-                state
+                state,
             }));
-            this.currentStates.set(name, state);
             this.pendingUpdates.delete(name);
         }, 10);
         this.pendingUpdates.set(name, timeout);

package/dist/index.js

@@ -2,15 +2,47 @@ import { useEffect, useState, useRef } from "react";
 import { produce } from "immer";
 import { connectionManager } from "./connection-manager";
 import { INITIAL_STATES } from "virtual:mirrorstate/initial-states";
+// 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;
+    }
+    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;
+        }
+        // Apply all queued updates in sequence
+        // Get current state from connection manager, falling back to INITIAL_STATES
+        let currentState = connectionManager.getCurrentState(name) ??
+            INITIAL_STATES?.[name];
+        // Apply each update sequentially, handling both object mutations and primitive returns
+        let newState = currentState;
+        queue.forEach((updater) => {
+            newState = produce(newState, updater);
+        });
+        // Clear the queue
+        batchQueues.set(name, []);
+        batchPending.set(name, false);
+        // Update connection manager and notify all callbacks
+        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
-    // 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);
         });
@@ -26,12 +58,17 @@ export function useMirrorState(name, initialValue) {
         };
     }, [name]);
     const updateMirrorState = (updater) => {
-        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);
+        // 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);
     };
     return [state, updateMirrorState];
 }

package/package.json

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