@spoosh/react 0.12.0 → 0.13.0

package/dist/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spoosh/react",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "license": "MIT",
   "description": "React hooks for Spoosh API toolkit",
   "keywords": [
@@ -35,12 +35,19 @@
   },
   "peerDependencies": {
     "@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.15.0",
+    "@spoosh/core": "0.16.0",
+    "@spoosh/transport-sse": "0.1.0",
     "@spoosh/test-utils": "0.3.0"
   },
   "scripts": {