@spoosh/react 0.11.0 → 0.13.0

package/dist/index.mjs

@@ -402,13 +402,14 @@ function createUseWrite(options) {
   return useWrite;
 }
 
-// src/useInfiniteRead/index.ts
+// src/usePages/index.ts
 import {
   useRef as useRef3,
   useEffect as useEffect2,
   useSyncExternalStore as useSyncExternalStore3,
   useId as useId3,
-  useState as useState3
+  useState as useState3,
+  useCallback as useCallback3
 } from "react";
 import {
   createInfiniteReadController,
@@ -416,9 +417,9 @@ import {
   resolvePath as resolvePath3,
   resolveTags as resolveTags3
 } from "@spoosh/core";
-function createUseInfiniteRead(options) {
+function createUsePages(options) {
   const { api, stateManager, eventEmitter, pluginExecutor } = options;
-  return function useInfiniteRead(readFn, readOptions) {
+  return function usePages(readFn, readOptions) {
     const {
       enabled = true,
       tags,
@@ -441,7 +442,7 @@ function createUseInfiniteRead(options) {
     const capturedCall = selectorResultRef.current.call;
     if (!capturedCall) {
       throw new Error(
-        'useInfiniteRead requires calling an HTTP method (GET). Example: useInfiniteRead((api) => api("posts").GET())'
+        'usePages requires calling an HTTP method (GET). Example: usePages((api) => api("posts").GET())'
       );
     }
     const requestOptions = capturedCall.options;
@@ -451,12 +452,6 @@ function createUseInfiniteRead(options) {
       params: requestOptions?.params,
       body: requestOptions?.body
     };
-    const baseOptionsForKey = {
-      ...capturedCall.options,
-      query: void 0,
-      params: void 0,
-      body: void 0
-    };
     const resolvedPath = resolvePath3(pathSegments, requestOptions?.params);
     const resolvedTags = resolveTags3({ tags }, resolvedPath);
     const canFetchNextRef = useRef3(canFetchNext);
@@ -472,22 +467,31 @@ function createUseInfiniteRead(options) {
     const queryKey = stateManager.createQueryKey({
       path: capturedCall.path,
       method: capturedCall.method,
-      options: baseOptionsForKey
+      options: capturedCall.options
+    });
+    const lifecycleRef = useRef3({
+      initialized: false,
+      prevContext: null,
+      lastQueryKey: null
     });
     const controllerRef = useRef3(null);
-    if (!controllerRef.current || controllerRef.current.queryKey !== queryKey) {
+    const queryKeyChanged = controllerRef.current !== null && controllerRef.current.queryKey !== queryKey;
+    if (queryKeyChanged) {
+      lifecycleRef.current.prevContext = controllerRef.current.controller.getContext();
+      lifecycleRef.current.initialized = false;
+    }
+    if (!controllerRef.current || queryKeyChanged) {
       controllerRef.current = {
         controller: createInfiniteReadController({
           path: capturedCall.path,
           method: capturedCall.method,
           tags: resolvedTags,
           initialRequest,
-          baseOptionsForKey,
-          canFetchNext: (ctx) => canFetchNextRef.current(ctx),
+          canFetchNext: canFetchNext ? (ctx) => canFetchNextRef.current?.(ctx) ?? false : void 0,
           canFetchPrev: canFetchPrev ? (ctx) => canFetchPrevRef.current?.(ctx) ?? false : void 0,
-          nextPageRequest: (ctx) => nextPageRequestRef.current(ctx),
+          nextPageRequest: nextPageRequest ? (ctx) => nextPageRequestRef.current?.(ctx) ?? {} : void 0,
           prevPageRequest: prevPageRequest ? (ctx) => prevPageRequestRef.current?.(ctx) ?? {} : void 0,
-          merger: (responses) => mergerRef.current(responses),
+          merger: (pages) => mergerRef.current(pages),
           stateManager,
           eventEmitter,
           pluginExecutor,
@@ -497,9 +501,7 @@ function createUseInfiniteRead(options) {
             const method = pathMethods[capturedCall.method];
             const fetchOptions = {
               ...capturedCall.options,
-              query: opts.query,
-              params: opts.params,
-              body: opts.body,
+              ...opts,
               signal
             };
             return method(fetchOptions);
@@ -510,11 +512,12 @@ function createUseInfiniteRead(options) {
     }
     const controller = controllerRef.current.controller;
     controller.setPluginOptions(pluginOpts);
-    const state = useSyncExternalStore3(
-      controller.subscribe,
-      controller.getState,
-      controller.getState
+    const subscribe = useCallback3(
+      (callback) => controller.subscribe(callback),
+      [controller]
     );
+    const getSnapshot = useCallback3(() => controller.getState(), [controller]);
+    const state = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
     const [isPending, setIsPending] = useState3(() => {
       return enabled && state.data === void 0;
     });
@@ -524,10 +527,6 @@ function createUseInfiniteRead(options) {
     const fetchingPrev = fetchingDirection === "prev";
     const hasData = state.data !== void 0;
     const loading = (isPending || fetching) && !hasData;
-    const lifecycleRef = useRef3({
-      initialized: false,
-      prevContext: null
-    });
     const tagsKey = JSON.stringify(tags);
     useEffect2(() => {
       return () => {
@@ -536,8 +535,27 @@ function createUseInfiniteRead(options) {
       };
     }, []);
     useEffect2(() => {
-      controller.mount();
-      lifecycleRef.current.initialized = true;
+      if (!enabled) return;
+      const { initialized, prevContext, lastQueryKey } = lifecycleRef.current;
+      const isQueryKeyChange = lastQueryKey !== null && lastQueryKey !== queryKey;
+      if (!initialized) {
+        controller.mount();
+        lifecycleRef.current.initialized = true;
+        if (prevContext) {
+          controller.update(prevContext);
+          lifecycleRef.current.prevContext = null;
+        }
+      }
+      lifecycleRef.current.lastQueryKey = queryKey;
+      const currentState = controller.getState();
+      const isFetching = controller.getFetchingDirection() !== null;
+      if (isQueryKeyChange) {
+        setIsPending(true);
+        controller.trigger({ force: false }).finally(() => setIsPending(false));
+      } else if (currentState.data === void 0 && !isFetching) {
+        setIsPending(true);
+        controller.fetchNext().finally(() => setIsPending(false));
+      }
       const unsubInvalidate = eventEmitter.on(
         "invalidate",
         (invalidatedTags) => {
@@ -546,41 +564,32 @@ function createUseInfiniteRead(options) {
           );
           if (hasMatch) {
             setIsPending(true);
-            controller.refetch().finally(() => setIsPending(false));
+            controller.trigger().finally(() => setIsPending(false));
           }
         }
       );
       const unsubRefetchAll = eventEmitter.on("refetchAll", () => {
         setIsPending(true);
-        controller.refetch().finally(() => setIsPending(false));
+        controller.trigger().finally(() => setIsPending(false));
       });
       return () => {
+        controller.unmount();
         unsubInvalidate();
         unsubRefetchAll();
       };
-    }, [tagsKey]);
-    useEffect2(() => {
-      if (!lifecycleRef.current.initialized) return;
-      if (enabled) {
-        const currentState = controller.getState();
-        const isFetching = controller.getFetchingDirection() !== null;
-        if (currentState.data === void 0 && !isFetching) {
-          setIsPending(true);
-          controller.fetchNext().finally(() => setIsPending(false));
-        }
-      }
-    }, [enabled]);
+    }, [queryKey, enabled, tagsKey]);
+    const pluginOptsKey = JSON.stringify(pluginOpts);
     useEffect2(() => {
       if (!enabled || !lifecycleRef.current.initialized) return;
       const prevContext = controller.getContext();
       controller.update(prevContext);
-    }, [JSON.stringify(pluginOpts)]);
-    const entry = stateManager.getCache(queryKey);
-    const pluginResultData = entry?.meta ? Object.fromEntries(entry.meta) : {};
+    }, [pluginOptsKey]);
+    const trigger = async (options2) => {
+      await controller.trigger(options2);
+    };
     const result = {
-      meta: pluginResultData,
       data: state.data,
-      allResponses: state.allResponses,
+      pages: state.pages,
       loading,
       fetching,
       fetchingNext,
@@ -589,7 +598,7 @@ function createUseInfiniteRead(options) {
       canFetchPrev: state.canFetchPrev,
       fetchNext: controller.fetchNext,
       fetchPrev: controller.fetchPrev,
-      trigger: controller.refetch,
+      trigger,
       abort: controller.abort,
       error: state.error
     };
@@ -666,32 +675,354 @@ function createUseQueue(options) {
   return useQueue;
 }
 
+// src/useSubscription/index.ts
+import {
+  useSyncExternalStore as useSyncExternalStore5,
+  useRef as useRef5,
+  useEffect as useEffect4,
+  useCallback as useCallback4,
+  useState as useState4
+} from "react";
+import {
+  createSelectorProxy as createSelectorProxy5,
+  createSubscriptionController
+} from "@spoosh/core";
+function createUseSubscription(options) {
+  const { stateManager, eventEmitter, pluginExecutor } = options;
+  function useSubscription(subFn, subOptions) {
+    const { enabled = true, adapter, operationType } = subOptions;
+    const selectorResultRef = useRef5({
+      call: null,
+      selector: null
+    });
+    const selectorProxy = createSelectorProxy5((result) => {
+      selectorResultRef.current = result;
+    });
+    subFn(selectorProxy);
+    const capturedCall = selectorResultRef.current.call;
+    if (!capturedCall) {
+      throw new Error("useSubscription requires calling a method");
+    }
+    const queryKey = stateManager.createQueryKey({
+      path: capturedCall.path,
+      method: capturedCall.method,
+      options: capturedCall.options
+    });
+    const controllerRef = useRef5(null);
+    const subscriptionVersionRef = useRef5(0);
+    const getOrCreateController = useCallback4(() => {
+      if (controllerRef.current) {
+        return controllerRef.current;
+      }
+      const controller = createSubscriptionController({
+        channel: capturedCall.path,
+        baseAdapter: adapter,
+        stateManager,
+        eventEmitter,
+        pluginExecutor,
+        queryKey,
+        operationType,
+        path: capturedCall.path,
+        method: capturedCall.method
+      });
+      controllerRef.current = controller;
+      return controller;
+    }, [
+      queryKey,
+      adapter,
+      operationType,
+      capturedCall.path,
+      capturedCall.method
+    ]);
+    const subscribe = useCallback4(
+      (callback) => {
+        const controller = getOrCreateController();
+        return controller.subscribe(callback);
+      },
+      [getOrCreateController]
+    );
+    const emptyStateRef = useRef5({
+      data: void 0,
+      error: void 0,
+      isConnected: false
+    });
+    const getSnapshot = useCallback4(() => {
+      if (!controllerRef.current) {
+        return emptyStateRef.current;
+      }
+      return controllerRef.current.getState();
+    }, []);
+    const state = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
+    const [isPending, setIsPending] = useState4(enabled);
+    useEffect4(() => {
+      if (!enabled) {
+        return;
+      }
+      setIsPending(true);
+      const controller = getOrCreateController();
+      controller.mount();
+      controller.subscribe();
+      return () => {
+        subscriptionVersionRef.current++;
+        controller.unsubscribe();
+      };
+    }, [queryKey, enabled, getOrCreateController]);
+    useEffect4(() => {
+      if (state.isConnected || state.data !== void 0 || state.error !== void 0) {
+        setIsPending(false);
+      }
+    }, [state.isConnected, state.data, state.error]);
+    const disconnect = useCallback4(() => {
+      subscriptionVersionRef.current++;
+      if (controllerRef.current) {
+        controllerRef.current.unsubscribe();
+      }
+    }, []);
+    const trigger = useCallback4(async () => {
+      setIsPending(true);
+      subscriptionVersionRef.current++;
+      const controller = getOrCreateController();
+      controller.unsubscribe();
+      controller.mount();
+      await controller.subscribe();
+    }, [getOrCreateController]);
+    const loading = isPending;
+    return {
+      meta: {},
+      data: state.data,
+      error: state.error,
+      loading,
+      isConnected: state.isConnected,
+      _queryKey: queryKey,
+      _subscriptionVersion: subscriptionVersionRef.current,
+      trigger,
+      disconnect
+    };
+  }
+  return useSubscription;
+}
+
+// src/useSSE/index.ts
+import { useState as useState5, useRef as useRef6, useEffect as useEffect5, useCallback as useCallback5, useMemo } from "react";
+import { createSelectorProxy as createSelectorProxy6 } from "@spoosh/core";
+import { resolveParser, resolveAccumulator } from "@spoosh/transport-sse";
+function isSSETransport(transport) {
+  return "createSubscriptionAdapter" in transport && typeof transport.createSubscriptionAdapter === "function";
+}
+function createUseSSE(options) {
+  const { eventEmitter, transports, config } = options;
+  const useSubscription = createUseSubscription(options);
+  function useSSE(subFn, sseOptions) {
+    const {
+      enabled = true,
+      events,
+      parse = "auto",
+      accumulate = "replace",
+      maxRetries,
+      retryDelay
+    } = sseOptions ?? {};
+    const transport = transports.get("sse");
+    if (!transport) {
+      throw new Error(
+        "SSE transport not registered. Make sure to register an SSE transport before using useSSE."
+      );
+    }
+    if (!isSSETransport(transport)) {
+      throw new Error(
+        "SSE transport does not implement createSubscriptionAdapter."
+      );
+    }
+    const selectorResultRef = useRef6({
+      call: null,
+      selector: null
+    });
+    const selectorProxy = createSelectorProxy6((result) => {
+      selectorResultRef.current = result;
+    });
+    subFn(selectorProxy);
+    const capturedCall = selectorResultRef.current.call;
+    if (!capturedCall) {
+      throw new Error("useSSE requires calling a method");
+    }
+    const currentOptionsRef = useRef6(
+      capturedCall.options
+    );
+    const adapter = useMemo(
+      () => transport.createSubscriptionAdapter({
+        channel: capturedCall.path,
+        method: capturedCall.method,
+        baseUrl: config.baseUrl,
+        globalHeaders: config.defaultOptions.headers,
+        getRequestOptions: () => currentOptionsRef.current,
+        eventEmitter,
+        devtoolMeta: events ? { listenedEvents: events } : void 0
+      }),
+      [capturedCall.path, capturedCall.method]
+    );
+    const [accumulatedData, setAccumulatedData] = useState5({});
+    const eventSet = useMemo(
+      () => events ? new Set(events) : null,
+      [events?.join(",")]
+    );
+    const parseRef = useRef6(parse);
+    const accumulateRef = useRef6(accumulate);
+    parseRef.current = parse;
+    accumulateRef.current = accumulate;
+    const optionsRef = useRef6({
+      maxRetries,
+      retryDelay
+    });
+    optionsRef.current = { maxRetries, retryDelay };
+    const subscription = useSubscription(subFn, {
+      enabled,
+      adapter,
+      operationType: transport.operationType
+    });
+    const prevVersionRef = useRef6(subscription._subscriptionVersion);
+    const lastMessageIndexRef = useRef6({});
+    useEffect5(() => {
+      if (subscription._subscriptionVersion !== prevVersionRef.current) {
+        setAccumulatedData({});
+        lastMessageIndexRef.current = {};
+      }
+      prevVersionRef.current = subscription._subscriptionVersion;
+    }, [subscription._subscriptionVersion]);
+    useEffect5(() => {
+      const data = subscription.data;
+      if (!data) {
+        return;
+      }
+      if (eventSet && !eventSet.has(data.event)) {
+        return;
+      }
+      const parser = resolveParser(parseRef.current, data.event);
+      let parsed;
+      try {
+        parsed = parser(data.data);
+      } catch {
+        parsed = data.data;
+      }
+      if (parsed === void 0) {
+        return;
+      }
+      const accumulator = 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 = {};
+        }
+        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;
+      });
+    }, [subscription.data, subscription._queryKey, eventSet]);
+    const reset = useCallback5(() => {
+      setAccumulatedData({});
+    }, []);
+    const trigger = useCallback5(
+      async (opts) => {
+        reset();
+        const triggerOpts = {
+          ...opts ?? {},
+          maxRetries: optionsRef.current.maxRetries,
+          retryDelay: optionsRef.current.retryDelay
+        };
+        currentOptionsRef.current = {
+          ...currentOptionsRef.current,
+          ...triggerOpts
+        };
+        await subscription.trigger(triggerOpts);
+      },
+      [subscription.trigger, reset]
+    );
+    return {
+      data: Object.keys(accumulatedData).length ? accumulatedData : void 0,
+      error: subscription.error,
+      isConnected: subscription.isConnected,
+      loading: subscription.loading,
+      meta: {},
+      trigger,
+      disconnect: subscription.disconnect,
+      reset
+    };
+  }
+  return useSSE;
+}
+
 // src/create/index.ts
 function create(instance) {
-  const { api, stateManager, eventEmitter, pluginExecutor } = instance;
+  const { api, stateManager, eventEmitter, pluginExecutor, transports } = instance;
   const useRead = createUseRead({
     api,
     stateManager,
     eventEmitter,
-    pluginExecutor
+    pluginExecutor,
+    transports,
+    config: instance.config
   });
   const useWrite = createUseWrite({
     api,
     stateManager,
     eventEmitter,
-    pluginExecutor
+    pluginExecutor,
+    transports,
+    config: instance.config
   });
-  const useInfiniteRead = createUseInfiniteRead({
+  const usePages = createUsePages({
     api,
     stateManager,
     eventEmitter,
-    pluginExecutor
+    pluginExecutor,
+    transports,
+    config: instance.config
   });
   const useQueue = createUseQueue({
     api,
     stateManager,
     eventEmitter,
-    pluginExecutor
+    pluginExecutor,
+    transports,
+    config: instance.config
+  });
+  const useSubscription = createUseSubscription({
+    api,
+    stateManager,
+    eventEmitter,
+    pluginExecutor,
+    transports,
+    config: instance.config
+  });
+  const useSSE = createUseSSE({
+    api,
+    stateManager,
+    eventEmitter,
+    pluginExecutor,
+    transports,
+    config: instance.config
   });
   const plugins = pluginExecutor.getPlugins();
   const setupContext = {
@@ -720,8 +1051,10 @@ function create(instance) {
   return {
     useRead,
     useWrite,
-    useInfiniteRead,
+    usePages,
     useQueue,
+    useSubscription,
+    useSSE,
     ...instanceApis
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spoosh/react",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "license": "MIT",
   "description": "React hooks for Spoosh API toolkit",
   "keywords": [
@@ -34,14 +34,21 @@
     }
   },
   "peerDependencies": {
-    "@spoosh/core": ">=0.14.0",
+    "@spoosh/core": ">=0.15.0",
+    "@spoosh/transport-sse": ">=0.1.0",
     "react": "^18 || ^19"
   },
+  "peerDependenciesMeta": {
+    "@spoosh/transport-sse": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",
     "jsdom": "^26.0.0",
-    "@spoosh/core": "0.14.0",
-    "@spoosh/test-utils": "0.2.0"
+    "@spoosh/core": "0.16.0",
+    "@spoosh/transport-sse": "0.1.0",
+    "@spoosh/test-utils": "0.3.0"
   },
   "scripts": {
     "dev": "tsup --watch",