@spoosh/react 0.11.0 → 0.13.0

package/dist/index.js

@@ -404,12 +404,12 @@ function createUseWrite(options) {
   return useWrite;
 }
 
-// src/useInfiniteRead/index.ts
+// src/usePages/index.ts
 var import_react3 = require("react");
 var import_core3 = require("@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,
@@ -432,7 +432,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;
@@ -442,12 +442,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 = (0, import_core3.resolvePath)(pathSegments, requestOptions?.params);
     const resolvedTags = (0, import_core3.resolveTags)({ tags }, resolvedPath);
     const canFetchNextRef = (0, import_react3.useRef)(canFetchNext);
@@ -463,22 +457,31 @@ function createUseInfiniteRead(options) {
     const queryKey = stateManager.createQueryKey({
       path: capturedCall.path,
       method: capturedCall.method,
-      options: baseOptionsForKey
+      options: capturedCall.options
+    });
+    const lifecycleRef = (0, import_react3.useRef)({
+      initialized: false,
+      prevContext: null,
+      lastQueryKey: null
     });
     const controllerRef = (0, import_react3.useRef)(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: (0, import_core3.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,
@@ -488,9 +491,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);
@@ -501,11 +502,12 @@ function createUseInfiniteRead(options) {
     }
     const controller = controllerRef.current.controller;
     controller.setPluginOptions(pluginOpts);
-    const state = (0, import_react3.useSyncExternalStore)(
-      controller.subscribe,
-      controller.getState,
-      controller.getState
+    const subscribe = (0, import_react3.useCallback)(
+      (callback) => controller.subscribe(callback),
+      [controller]
     );
+    const getSnapshot = (0, import_react3.useCallback)(() => controller.getState(), [controller]);
+    const state = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
     const [isPending, setIsPending] = (0, import_react3.useState)(() => {
       return enabled && state.data === void 0;
     });
@@ -515,10 +517,6 @@ function createUseInfiniteRead(options) {
     const fetchingPrev = fetchingDirection === "prev";
     const hasData = state.data !== void 0;
     const loading = (isPending || fetching) && !hasData;
-    const lifecycleRef = (0, import_react3.useRef)({
-      initialized: false,
-      prevContext: null
-    });
     const tagsKey = JSON.stringify(tags);
     (0, import_react3.useEffect)(() => {
       return () => {
@@ -527,8 +525,27 @@ function createUseInfiniteRead(options) {
       };
     }, []);
     (0, import_react3.useEffect)(() => {
-      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) => {
@@ -537,41 +554,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]);
-    (0, import_react3.useEffect)(() => {
-      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);
     (0, import_react3.useEffect)(() => {
       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,
@@ -580,7 +588,7 @@ function createUseInfiniteRead(options) {
       canFetchPrev: state.canFetchPrev,
       fetchNext: controller.fetchNext,
       fetchPrev: controller.fetchPrev,
-      trigger: controller.refetch,
+      trigger,
       abort: controller.abort,
       error: state.error
     };
@@ -654,32 +662,345 @@ function createUseQueue(options) {
   return useQueue;
 }
 
+// src/useSubscription/index.ts
+var import_react5 = require("react");
+var import_core5 = require("@spoosh/core");
+function createUseSubscription(options) {
+  const { stateManager, eventEmitter, pluginExecutor } = options;
+  function useSubscription(subFn, subOptions) {
+    const { enabled = true, adapter, operationType } = subOptions;
+    const selectorResultRef = (0, import_react5.useRef)({
+      call: null,
+      selector: null
+    });
+    const selectorProxy = (0, import_core5.createSelectorProxy)((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 = (0, import_react5.useRef)(null);
+    const subscriptionVersionRef = (0, import_react5.useRef)(0);
+    const getOrCreateController = (0, import_react5.useCallback)(() => {
+      if (controllerRef.current) {
+        return controllerRef.current;
+      }
+      const controller = (0, import_core5.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 = (0, import_react5.useCallback)(
+      (callback) => {
+        const controller = getOrCreateController();
+        return controller.subscribe(callback);
+      },
+      [getOrCreateController]
+    );
+    const emptyStateRef = (0, import_react5.useRef)({
+      data: void 0,
+      error: void 0,
+      isConnected: false
+    });
+    const getSnapshot = (0, import_react5.useCallback)(() => {
+      if (!controllerRef.current) {
+        return emptyStateRef.current;
+      }
+      return controllerRef.current.getState();
+    }, []);
+    const state = (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    const [isPending, setIsPending] = (0, import_react5.useState)(enabled);
+    (0, import_react5.useEffect)(() => {
+      if (!enabled) {
+        return;
+      }
+      setIsPending(true);
+      const controller = getOrCreateController();
+      controller.mount();
+      controller.subscribe();
+      return () => {
+        subscriptionVersionRef.current++;
+        controller.unsubscribe();
+      };
+    }, [queryKey, enabled, getOrCreateController]);
+    (0, import_react5.useEffect)(() => {
+      if (state.isConnected || state.data !== void 0 || state.error !== void 0) {
+        setIsPending(false);
+      }
+    }, [state.isConnected, state.data, state.error]);
+    const disconnect = (0, import_react5.useCallback)(() => {
+      subscriptionVersionRef.current++;
+      if (controllerRef.current) {
+        controllerRef.current.unsubscribe();
+      }
+    }, []);
+    const trigger = (0, import_react5.useCallback)(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
+var import_react6 = require("react");
+var import_core6 = require("@spoosh/core");
+var import_transport_sse = require("@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 = (0, import_react6.useRef)({
+      call: null,
+      selector: null
+    });
+    const selectorProxy = (0, import_core6.createSelectorProxy)((result) => {
+      selectorResultRef.current = result;
+    });
+    subFn(selectorProxy);
+    const capturedCall = selectorResultRef.current.call;
+    if (!capturedCall) {
+      throw new Error("useSSE requires calling a method");
+    }
+    const currentOptionsRef = (0, import_react6.useRef)(
+      capturedCall.options
+    );
+    const adapter = (0, import_react6.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] = (0, import_react6.useState)({});
+    const eventSet = (0, import_react6.useMemo)(
+      () => events ? new Set(events) : null,
+      [events?.join(",")]
+    );
+    const parseRef = (0, import_react6.useRef)(parse);
+    const accumulateRef = (0, import_react6.useRef)(accumulate);
+    parseRef.current = parse;
+    accumulateRef.current = accumulate;
+    const optionsRef = (0, import_react6.useRef)({
+      maxRetries,
+      retryDelay
+    });
+    optionsRef.current = { maxRetries, retryDelay };
+    const subscription = useSubscription(subFn, {
+      enabled,
+      adapter,
+      operationType: transport.operationType
+    });
+    const prevVersionRef = (0, import_react6.useRef)(subscription._subscriptionVersion);
+    const lastMessageIndexRef = (0, import_react6.useRef)({});
+    (0, import_react6.useEffect)(() => {
+      if (subscription._subscriptionVersion !== prevVersionRef.current) {
+        setAccumulatedData({});
+        lastMessageIndexRef.current = {};
+      }
+      prevVersionRef.current = subscription._subscriptionVersion;
+    }, [subscription._subscriptionVersion]);
+    (0, import_react6.useEffect)(() => {
+      const data = subscription.data;
+      if (!data) {
+        return;
+      }
+      if (eventSet && !eventSet.has(data.event)) {
+        return;
+      }
+      const parser = (0, import_transport_sse.resolveParser)(parseRef.current, data.event);
+      let parsed;
+      try {
+        parsed = parser(data.data);
+      } catch {
+        parsed = data.data;
+      }
+      if (parsed === void 0) {
+        return;
+      }
+      const accumulator = (0, import_transport_sse.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 = (0, import_react6.useCallback)(() => {
+      setAccumulatedData({});
+    }, []);
+    const trigger = (0, import_react6.useCallback)(
+      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 = {
@@ -708,8 +1029,10 @@ function create(instance) {
   return {
     useRead,
     useWrite,
-    useInfiniteRead,
+    usePages,
     useQueue,
+    useSubscription,
+    useSSE,
     ...instanceApis
   };
 }