@spoosh/react 0.15.2 → 0.15.4

package/dist/index.js

@@ -688,6 +688,7 @@ function createUseSubscription(options) {
     });
     const controllerRef = (0, import_react5.useRef)(null);
     const subscriptionVersionRef = (0, import_react5.useRef)(0);
+    const prevQueryKeyRef = (0, import_react5.useRef)(queryKey);
     const queryKeyChanged = controllerRef.current && controllerRef.current.queryKey !== queryKey;
     if (!controllerRef.current || queryKeyChanged) {
       const controller2 = (0, import_core5.createSubscriptionController)({
@@ -716,14 +717,18 @@ function createUseSubscription(options) {
     const state = (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
     const [isPending, setIsPending] = (0, import_react5.useState)(enabled);
     (0, import_react5.useEffect)(() => {
+      const queryKeyChanged2 = prevQueryKeyRef.current !== queryKey;
+      prevQueryKeyRef.current = queryKey;
       if (!enabled) {
         return;
       }
+      if (queryKeyChanged2) {
+        subscriptionVersionRef.current++;
+      }
       setIsPending(true);
       controller.mount();
       controller.subscribe();
       return () => {
-        subscriptionVersionRef.current++;
         controller.unsubscribe();
       };
     }, [queryKey, enabled, controller]);
@@ -733,7 +738,6 @@ function createUseSubscription(options) {
       }
     }, [state.isConnected, state.data, state.error]);
     const disconnect = (0, import_react5.useCallback)(() => {
-      subscriptionVersionRef.current++;
       controller.unsubscribe();
     }, [controller]);
     const trigger = (0, import_react5.useCallback)(async () => {
@@ -744,6 +748,7 @@ function createUseSubscription(options) {
       await controller.subscribe();
     }, [controller]);
     const loading = isPending;
+    const stateWithQueue = state;
     return {
       meta: {},
       data: state.data,
@@ -752,6 +757,8 @@ function createUseSubscription(options) {
       isConnected: state.isConnected,
       _queryKey: queryKey,
       _subscriptionVersion: subscriptionVersionRef.current,
+      _messageQueue: stateWithQueue._messageQueue,
+      _queueIndex: stateWithQueue._queueIndex ?? 0,
       trigger,
       disconnect
     };
@@ -844,72 +851,82 @@ function createUseSSE(options) {
     });
     const prevVersionRef = (0, import_react6.useRef)(subscription._subscriptionVersion);
     const lastMessageIndexRef = (0, import_react6.useRef)({});
+    const lastProcessedQueueIndexRef = (0, import_react6.useRef)(0);
     (0, import_react6.useEffect)(() => {
       if (subscription._subscriptionVersion !== prevVersionRef.current) {
         setAccumulatedData({});
         lastMessageIndexRef.current = {};
+        lastProcessedQueueIndexRef.current = 0;
       }
       prevVersionRef.current = subscription._subscriptionVersion;
     }, [subscription._subscriptionVersion]);
+    const subscriptionState = subscription;
+    const messageQueue = subscriptionState._messageQueue ?? [];
+    const queueIndex = subscriptionState._queueIndex ?? 0;
     (0, import_react6.useEffect)(() => {
-      const data = subscription.data;
-      if (!data) {
-        return;
-      }
-      if (eventSet && !eventSet.has(data.event)) {
+      if (queueIndex <= lastProcessedQueueIndexRef.current) {
         return;
       }
-      const parser = transport.utils.resolveParser(
-        parseRef.current,
-        data.event
-      );
-      let parsed;
-      try {
-        parsed = parser(data.data);
-      } catch {
-        parsed = data.data;
-      }
-      if (parsed === void 0) {
-        return;
-      }
-      const accumulator = transport.utils.resolveAccumulator(
-        accumulateRef.current,
-        data.event
-      );
-      const parsedObj = parsed;
-      const messageIndex = typeof parsedObj?.index === "number" ? parsedObj.index : void 0;
-      if (messageIndex !== void 0) {
-        const lastIndex = lastMessageIndexRef.current[data.event];
-        if (lastIndex !== void 0 && messageIndex < lastIndex) {
-          setAccumulatedData({});
-          lastMessageIndexRef.current = {};
+      const startIndex = lastProcessedQueueIndexRef.current;
+      const messagesToProcess = messageQueue.slice(startIndex);
+      lastProcessedQueueIndexRef.current = queueIndex;
+      for (const data of messagesToProcess) {
+        if (!data) continue;
+        if (eventSet && !eventSet.has(data.event)) {
+          continue;
         }
-        lastMessageIndexRef.current[data.event] = messageIndex;
-      }
-      setAccumulatedData((prev) => {
-        const previousEventData = prev[data.event];
-        let newEventData;
+        const parser = transport.utils.resolveParser(
+          parseRef.current,
+          data.event
+        );
+        let parsed;
         try {
-          newEventData = accumulator(previousEventData, parsed);
+          parsed = parser(data.data);
         } catch {
-          newEventData = parsed;
+          parsed = data.data;
         }
-        const newAccumulated = {
-          ...prev,
-          [data.event]: newEventData
-        };
-        eventEmitter?.emit(
-          "spoosh:subscription:accumulate",
-          {
-            queryKey: subscription._queryKey,
-            eventType: data.event,
-            accumulatedData: newAccumulated,
-            timestamp: Date.now()
-          }
+        if (parsed === void 0) {
+          continue;
+        }
+        const accumulator = transport.utils.resolveAccumulator(
+          accumulateRef.current,
+          data.event
         );
-        return newAccumulated;
-      });
-    }, [subscription.data, subscription._queryKey, eventSet]);
+        const parsedObj = parsed;
+        const messageIndex = typeof parsedObj?.index === "number" ? parsedObj.index : void 0;
+        if (messageIndex !== void 0) {
+          const lastIndex = lastMessageIndexRef.current[data.event];
+          if (lastIndex !== void 0 && messageIndex < lastIndex) {
+            setAccumulatedData({});
+            lastMessageIndexRef.current = {};
+          }
+          lastMessageIndexRef.current[data.event] = messageIndex;
+        }
+        setAccumulatedData((prev) => {
+          const previousEventData = prev[data.event];
+          let newEventData;
+          try {
+            newEventData = accumulator(previousEventData, parsed);
+          } catch {
+            newEventData = parsed;
+          }
+          const newAccumulated = {
+            ...prev,
+            [data.event]: newEventData
+          };
+          eventEmitter?.emit(
+            "spoosh:subscription:accumulate",
+            {
+              queryKey: subscription._queryKey,
+              eventType: data.event,
+              accumulatedData: newAccumulated,
+              timestamp: Date.now()
+            }
+          );
+          return newAccumulated;
+        });
+      }
+    }, [queueIndex, subscription._queryKey, eventSet]);
     const reset = (0, import_react6.useCallback)(() => {
       setAccumulatedData({});
     }, []);

package/dist/index.mjs

@@ -712,6 +712,7 @@ function createUseSubscription(options) {
     });
     const controllerRef = useRef5(null);
     const subscriptionVersionRef = useRef5(0);
+    const prevQueryKeyRef = useRef5(queryKey);
     const queryKeyChanged = controllerRef.current && controllerRef.current.queryKey !== queryKey;
     if (!controllerRef.current || queryKeyChanged) {
       const controller2 = createSubscriptionController({
@@ -740,14 +741,18 @@ function createUseSubscription(options) {
     const state = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
     const [isPending, setIsPending] = useState4(enabled);
     useEffect4(() => {
+      const queryKeyChanged2 = prevQueryKeyRef.current !== queryKey;
+      prevQueryKeyRef.current = queryKey;
       if (!enabled) {
         return;
       }
+      if (queryKeyChanged2) {
+        subscriptionVersionRef.current++;
+      }
       setIsPending(true);
       controller.mount();
       controller.subscribe();
       return () => {
-        subscriptionVersionRef.current++;
         controller.unsubscribe();
       };
     }, [queryKey, enabled, controller]);
@@ -757,7 +762,6 @@ function createUseSubscription(options) {
       }
     }, [state.isConnected, state.data, state.error]);
     const disconnect = useCallback4(() => {
-      subscriptionVersionRef.current++;
       controller.unsubscribe();
     }, [controller]);
     const trigger = useCallback4(async () => {
@@ -768,6 +772,7 @@ function createUseSubscription(options) {
       await controller.subscribe();
     }, [controller]);
     const loading = isPending;
+    const stateWithQueue = state;
     return {
       meta: {},
       data: state.data,
@@ -776,6 +781,8 @@ function createUseSubscription(options) {
       isConnected: state.isConnected,
       _queryKey: queryKey,
       _subscriptionVersion: subscriptionVersionRef.current,
+      _messageQueue: stateWithQueue._messageQueue,
+      _queueIndex: stateWithQueue._queueIndex ?? 0,
       trigger,
       disconnect
     };
@@ -868,72 +875,82 @@ function createUseSSE(options) {
     });
     const prevVersionRef = useRef6(subscription._subscriptionVersion);
     const lastMessageIndexRef = useRef6({});
+    const lastProcessedQueueIndexRef = useRef6(0);
     useEffect5(() => {
       if (subscription._subscriptionVersion !== prevVersionRef.current) {
         setAccumulatedData({});
         lastMessageIndexRef.current = {};
+        lastProcessedQueueIndexRef.current = 0;
       }
       prevVersionRef.current = subscription._subscriptionVersion;
     }, [subscription._subscriptionVersion]);
+    const subscriptionState = subscription;
+    const messageQueue = subscriptionState._messageQueue ?? [];
+    const queueIndex = subscriptionState._queueIndex ?? 0;
     useEffect5(() => {
-      const data = subscription.data;
-      if (!data) {
-        return;
-      }
-      if (eventSet && !eventSet.has(data.event)) {
+      if (queueIndex <= lastProcessedQueueIndexRef.current) {
         return;
       }
-      const parser = transport.utils.resolveParser(
-        parseRef.current,
-        data.event
-      );
-      let parsed;
-      try {
-        parsed = parser(data.data);
-      } catch {
-        parsed = data.data;
-      }
-      if (parsed === void 0) {
-        return;
-      }
-      const accumulator = transport.utils.resolveAccumulator(
-        accumulateRef.current,
-        data.event
-      );
-      const parsedObj = parsed;
-      const messageIndex = typeof parsedObj?.index === "number" ? parsedObj.index : void 0;
-      if (messageIndex !== void 0) {
-        const lastIndex = lastMessageIndexRef.current[data.event];
-        if (lastIndex !== void 0 && messageIndex < lastIndex) {
-          setAccumulatedData({});
-          lastMessageIndexRef.current = {};
+      const startIndex = lastProcessedQueueIndexRef.current;
+      const messagesToProcess = messageQueue.slice(startIndex);
+      lastProcessedQueueIndexRef.current = queueIndex;
+      for (const data of messagesToProcess) {
+        if (!data) continue;
+        if (eventSet && !eventSet.has(data.event)) {
+          continue;
         }
-        lastMessageIndexRef.current[data.event] = messageIndex;
-      }
-      setAccumulatedData((prev) => {
-        const previousEventData = prev[data.event];
-        let newEventData;
+        const parser = transport.utils.resolveParser(
+          parseRef.current,
+          data.event
+        );
+        let parsed;
         try {
-          newEventData = accumulator(previousEventData, parsed);
+          parsed = parser(data.data);
         } catch {
-          newEventData = parsed;
+          parsed = data.data;
         }
-        const newAccumulated = {
-          ...prev,
-          [data.event]: newEventData
-        };
-        eventEmitter?.emit(
-          "spoosh:subscription:accumulate",
-          {
-            queryKey: subscription._queryKey,
-            eventType: data.event,
-            accumulatedData: newAccumulated,
-            timestamp: Date.now()
-          }
+        if (parsed === void 0) {
+          continue;
+        }
+        const accumulator = transport.utils.resolveAccumulator(
+          accumulateRef.current,
+          data.event
         );
-        return newAccumulated;
-      });
-    }, [subscription.data, subscription._queryKey, eventSet]);
+        const parsedObj = parsed;
+        const messageIndex = typeof parsedObj?.index === "number" ? parsedObj.index : void 0;
+        if (messageIndex !== void 0) {
+          const lastIndex = lastMessageIndexRef.current[data.event];
+          if (lastIndex !== void 0 && messageIndex < lastIndex) {
+            setAccumulatedData({});
+            lastMessageIndexRef.current = {};
+          }
+          lastMessageIndexRef.current[data.event] = messageIndex;
+        }
+        setAccumulatedData((prev) => {
+          const previousEventData = prev[data.event];
+          let newEventData;
+          try {
+            newEventData = accumulator(previousEventData, parsed);
+          } catch {
+            newEventData = parsed;
+          }
+          const newAccumulated = {
+            ...prev,
+            [data.event]: newEventData
+          };
+          eventEmitter?.emit(
+            "spoosh:subscription:accumulate",
+            {
+              queryKey: subscription._queryKey,
+              eventType: data.event,
+              accumulatedData: newAccumulated,
+              timestamp: Date.now()
+            }
+          );
+          return newAccumulated;
+        });
+      }
+    }, [queueIndex, subscription._queryKey, eventSet]);
     const reset = useCallback5(() => {
       setAccumulatedData({});
     }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spoosh/react",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "license": "MIT",
   "description": "React hooks for Spoosh API toolkit",
   "keywords": [
@@ -34,7 +34,7 @@
     }
   },
   "peerDependencies": {
-    "@spoosh/core": ">=0.18.2",
+    "@spoosh/core": ">=0.18.3",
     "@spoosh/transport-sse": ">=0.1.0",
     "react": "^18 || ^19"
   },
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@testing-library/react": "^16.0.0",
     "jsdom": "^26.0.0",
-    "@spoosh/core": "0.18.2",
+    "@spoosh/core": "0.18.3",
     "@spoosh/transport-sse": "0.1.2",
     "@spoosh/test-utils": "0.3.0"
   },