@spoosh/react 0.12.0 → 0.13.0

package/dist/index.js

@@ -662,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 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 = {
@@ -718,6 +1031,8 @@ function create(instance) {
     useWrite,
     usePages,
     useQueue,
+    useSubscription,
+    useSSE,
     ...instanceApis
   };
 }