react-mirrorstate 0.3.1 → 0.5.0

package/dist/connection-manager.js

@@ -93,6 +93,10 @@ class WebSocketConnectionManager {
     }
     pendingUpdates = new Map();
     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);
         if (this.ws?.readyState !== WebSocket.OPEN) {
             this.queuedUpdates.set(name, state);
             return;
@@ -102,7 +106,7 @@ class WebSocketConnectionManager {
         if (pendingUpdate) {
             clearTimeout(pendingUpdate);
         }
-        // Debounce rapid updates
+        // Debounce rapid WebSocket sends
         const timeout = setTimeout(() => {
             if (!this.ws) {
                 return;
@@ -111,7 +115,6 @@ class WebSocketConnectionManager {
                 name,
                 state,
             }));
-            this.currentStates.set(name, state);
             this.pendingUpdates.delete(name);
         }, 10);
         this.pendingUpdates.set(name, timeout);

package/dist/index.js

@@ -2,6 +2,36 @@ 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();
+function scheduleBatchFlush(name) {
+    if (batchPending.get(name)) {
+        return;
+    }
+    batchPending.set(name, true);
+    queueMicrotask(() => {
+        const queue = batchQueues.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 (which notifies all subscribers)
+        connectionManager.updateState(name, newState);
+    });
+}
 export function useMirrorState(name, initialValue) {
     // Capture initialValue once on first render to make it stable
     const initialValueRef = useRef(initialValue);
@@ -24,10 +54,14 @@ export function useMirrorState(name, initialValue) {
         };
     }, [name]);
     const updateMirrorState = (updater) => {
-        const currentState = connectionManager.getCurrentState(name) ?? state;
-        const newState = produce(currentState, updater);
-        connectionManager.updateState(name, newState);
-        setState(newState);
+        // Initialize batch queue for this name if needed
+        if (!batchQueues.has(name)) {
+            batchQueues.set(name, []);
+        }
+        // Add updater to batch queue
+        batchQueues.get(name).push(updater);
+        // Schedule batch flush
+        scheduleBatchFlush(name);
     };
     return [state, updateMirrorState];
 }

package/package.json

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