@spoosh/react 0.5.0 → 0.6.0

package/dist/index.js

@@ -24,6 +24,7 @@ var src_exports = {};
 __export(src_exports, {
   createReactSpoosh: () => createReactSpoosh,
   createUseInfiniteRead: () => createUseInfiniteRead,
+  createUseLazyRead: () => createUseLazyRead,
   createUseRead: () => createUseRead,
   createUseWrite: () => createUseWrite
 });
@@ -34,15 +35,19 @@ var import_react = require("react");
 var import_core = require("@spoosh/core");
 function createUseRead(options) {
   const { api, stateManager, eventEmitter, pluginExecutor } = options;
-  return function useRead(readFn, readOptions) {
-    const { enabled = true, tags, ...pluginOpts } = readOptions ?? {};
+  function useRead(readFn, readOptions) {
+    const {
+      enabled = true,
+      tags,
+      ...pluginOpts
+    } = readOptions ?? {};
     const hookId = (0, import_react.useId)();
     const selectorResultRef = (0, import_react.useRef)({
       call: null,
       selector: null
     });
-    const selectorProxy = (0, import_core.createSelectorProxy)((result2) => {
-      selectorResultRef.current = result2;
+    const selectorProxy = (0, import_core.createSelectorProxy)((result) => {
+      selectorResultRef.current = result;
     });
     readFn(selectorProxy);
     const capturedCall = selectorResultRef.current.call;
@@ -102,6 +107,7 @@ function createUseRead(options) {
     const abortRef = (0, import_react.useRef)(controller.abort);
     abortRef.current = controller.abort;
     const pluginOptsKey = JSON.stringify(pluginOpts);
+    const tagsKey = JSON.stringify(tags);
     const executeWithTracking = (0, import_react.useCallback)(
       async (force = false) => {
         setRequestState((prev) => ({ ...prev, isPending: true }));
@@ -157,7 +163,7 @@ function createUseRead(options) {
         unsubRefetch();
         unsubInvalidate();
       };
-    }, [queryKey, enabled]);
+    }, [queryKey, enabled, tagsKey]);
     (0, import_react.useEffect)(() => {
       if (!enabled || !lifecycleRef.current.initialized) return;
       const prevContext = controller.getContext();
@@ -166,7 +172,7 @@ function createUseRead(options) {
     const abort = (0, import_react.useCallback)(() => {
       abortRef.current();
     }, []);
-    const refetch = (0, import_react.useCallback)(() => {
+    const trigger = (0, import_react.useCallback)(() => {
       return executeWithTracking(true);
     }, [executeWithTracking]);
     const entry = stateManager.getCache(queryKey);
@@ -186,7 +192,8 @@ function createUseRead(options) {
     const hasData = state.data !== void 0;
     const loading = requestState.isPending && !hasData;
     const fetching = requestState.isPending;
-    const result = {
+    return {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       meta: pluginResultData,
       ...inputField,
       data: state.data,
@@ -194,10 +201,10 @@ function createUseRead(options) {
       loading,
       fetching,
       abort,
-      refetch
+      trigger
     };
-    return result;
-  };
+  }
+  return useRead;
 }
 
 // src/useWrite/index.ts
@@ -205,14 +212,14 @@ var import_react2 = require("react");
 var import_core2 = require("@spoosh/core");
 function createUseWrite(options) {
   const { api, stateManager, pluginExecutor, eventEmitter } = options;
-  return function useWrite(writeFn) {
+  function useWrite(writeFn) {
     const hookId = (0, import_react2.useId)();
     const selectorResultRef = (0, import_react2.useRef)({
       call: null,
       selector: null
     });
-    const selectorProxy = (0, import_core2.createSelectorProxy)((result2) => {
-      selectorResultRef.current = result2;
+    const selectorProxy = (0, import_core2.createSelectorProxy)((result) => {
+      selectorResultRef.current = result;
     });
     writeFn(selectorProxy);
     const selectedEndpoint = selectorResultRef.current.selector;
@@ -256,10 +263,6 @@ function createUseWrite(options) {
     );
     const [lastTriggerOptions, setLastTriggerOptions] = (0, import_react2.useState)(void 0);
     const [requestState, setRequestState] = (0, import_react2.useState)({ isPending: false, error: void 0 });
-    const reset = (0, import_react2.useCallback)(() => {
-      stateManager.deleteCache(queryKey);
-      setRequestState({ isPending: false, error: void 0 });
-    }, [queryKey]);
     const abort = (0, import_react2.useCallback)(() => {
       controller.abort();
     }, []);
@@ -303,23 +306,156 @@ function createUseWrite(options) {
     }
     const inputField = Object.keys(inputInner).length > 0 ? { input: inputInner } : {};
     const loading = requestState.isPending;
-    const result = {
+    return {
       trigger,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       meta: pluginResultData,
       ...inputField,
       data: state.data,
       error: requestState.error ?? state.error,
       loading,
-      reset,
       abort
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     };
-    return result;
-  };
+  }
+  return useWrite;
 }
 
-// src/useInfiniteRead/index.ts
+// src/useLazyRead/index.ts
 var import_react3 = require("react");
 var import_core3 = require("@spoosh/core");
+function createUseLazyRead(options) {
+  const { api, stateManager, pluginExecutor, eventEmitter } = options;
+  function useLazyRead(readFn) {
+    const hookId = (0, import_react3.useId)();
+    const selectorResultRef = (0, import_react3.useRef)({
+      call: null,
+      selector: null
+    });
+    const selectorProxy = (0, import_core3.createSelectorProxy)((result) => {
+      selectorResultRef.current = result;
+    });
+    readFn(selectorProxy);
+    const selectedEndpoint = selectorResultRef.current.selector;
+    if (!selectedEndpoint) {
+      throw new Error(
+        'useLazyRead requires selecting an HTTP method (GET). Example: useLazyRead((api) => api("posts").GET)'
+      );
+    }
+    if (selectedEndpoint.method !== "GET") {
+      throw new Error(
+        "useLazyRead only supports GET method. Use useWrite for POST, PUT, PATCH, DELETE methods."
+      );
+    }
+    const pathSegments = selectedEndpoint.path.split("/").filter(Boolean);
+    const controllerRef = (0, import_react3.useRef)(null);
+    const emptyStateRef = (0, import_react3.useRef)({ data: void 0, error: void 0 });
+    const [currentQueryKey, setCurrentQueryKey] = (0, import_react3.useState)(null);
+    const [, forceUpdate] = (0, import_react3.useState)(0);
+    const getOrCreateController = (0, import_react3.useCallback)(
+      (triggerOptions) => {
+        const queryKey = stateManager.createQueryKey({
+          path: pathSegments,
+          method: selectedEndpoint.method,
+          options: triggerOptions
+        });
+        if (controllerRef.current?.queryKey === queryKey) {
+          return { controller: controllerRef.current.controller, queryKey };
+        }
+        const controller2 = (0, import_core3.createOperationController)({
+          operationType: "read",
+          path: pathSegments,
+          method: "GET",
+          tags: [],
+          stateManager,
+          eventEmitter,
+          pluginExecutor,
+          hookId,
+          requestOptions: triggerOptions,
+          fetchFn: async (fetchOpts) => {
+            const pathMethods = api(selectedEndpoint.path);
+            const method = pathMethods[selectedEndpoint.method];
+            return method(fetchOpts);
+          }
+        });
+        controllerRef.current = { controller: controller2, queryKey };
+        setCurrentQueryKey(queryKey);
+        forceUpdate((n) => n + 1);
+        return { controller: controller2, queryKey };
+      },
+      [pathSegments, selectedEndpoint.method, selectedEndpoint.path, hookId]
+    );
+    const controller = controllerRef.current?.controller;
+    const subscribe = (0, import_react3.useCallback)(
+      (callback) => {
+        if (!controller) return () => {
+        };
+        return controller.subscribe(callback);
+      },
+      [controller]
+    );
+    const getSnapshot = (0, import_react3.useCallback)(() => {
+      if (!controller) return emptyStateRef.current;
+      return controller.getState();
+    }, [controller]);
+    const state = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    const [lastTriggerOptions, setLastTriggerOptions] = (0, import_react3.useState)(void 0);
+    const [requestState, setRequestState] = (0, import_react3.useState)({ isPending: false, error: void 0 });
+    const abort = (0, import_react3.useCallback)(() => {
+      controllerRef.current?.controller.abort();
+    }, []);
+    const trigger = (0, import_react3.useCallback)(
+      async (triggerOptions) => {
+        setLastTriggerOptions(triggerOptions);
+        setRequestState((prev) => ({ ...prev, isPending: true }));
+        const params = triggerOptions?.params;
+        (0, import_core3.resolvePath)(pathSegments, params);
+        const { controller: ctrl } = getOrCreateController(triggerOptions);
+        ctrl.setPluginOptions(triggerOptions);
+        try {
+          const response = await ctrl.execute(triggerOptions);
+          if (response.error) {
+            setRequestState({ isPending: false, error: response.error });
+          } else {
+            setRequestState({ isPending: false, error: void 0 });
+          }
+          return response;
+        } catch (err) {
+          setRequestState({ isPending: false, error: err });
+          throw err;
+        }
+      },
+      [pathSegments, getOrCreateController]
+    );
+    const opts = lastTriggerOptions;
+    const inputInner = {};
+    if (opts?.query !== void 0) {
+      inputInner.query = opts.query;
+    }
+    if (opts?.body !== void 0) {
+      inputInner.body = opts.body;
+    }
+    if (opts?.params !== void 0) {
+      inputInner.params = opts.params;
+    }
+    const inputField = Object.keys(inputInner).length > 0 ? { input: inputInner } : {};
+    const loading = requestState.isPending;
+    return {
+      trigger,
+      ...inputField,
+      data: state.data,
+      error: requestState.error ?? state.error,
+      loading,
+      abort
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    };
+  }
+  return useLazyRead;
+}
+
+// src/useInfiniteRead/index.ts
+var import_react4 = require("react");
+var import_core4 = require("@spoosh/core");
 function createUseInfiniteRead(options) {
   const { api, stateManager, eventEmitter, pluginExecutor } = options;
   return function useInfiniteRead(readFn, readOptions) {
@@ -333,12 +469,12 @@ function createUseInfiniteRead(options) {
       prevPageRequest,
       ...pluginOpts
     } = readOptions;
-    const hookId = (0, import_react3.useId)();
-    const selectorResultRef = (0, import_react3.useRef)({
+    const hookId = (0, import_react4.useId)();
+    const selectorResultRef = (0, import_react4.useRef)({
       call: null,
       selector: null
     });
-    const selectorProxy = (0, import_core3.createSelectorProxy)((result2) => {
+    const selectorProxy = (0, import_core4.createSelectorProxy)((result2) => {
       selectorResultRef.current = result2;
     });
     readFn(selectorProxy);
@@ -361,13 +497,13 @@ function createUseInfiniteRead(options) {
       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);
-    const canFetchPrevRef = (0, import_react3.useRef)(canFetchPrev);
-    const nextPageRequestRef = (0, import_react3.useRef)(nextPageRequest);
-    const prevPageRequestRef = (0, import_react3.useRef)(prevPageRequest);
-    const mergerRef = (0, import_react3.useRef)(merger);
+    const resolvedPath = (0, import_core4.resolvePath)(pathSegments, requestOptions?.params);
+    const resolvedTags = (0, import_core4.resolveTags)({ tags }, resolvedPath);
+    const canFetchNextRef = (0, import_react4.useRef)(canFetchNext);
+    const canFetchPrevRef = (0, import_react4.useRef)(canFetchPrev);
+    const nextPageRequestRef = (0, import_react4.useRef)(nextPageRequest);
+    const prevPageRequestRef = (0, import_react4.useRef)(prevPageRequest);
+    const mergerRef = (0, import_react4.useRef)(merger);
     canFetchNextRef.current = canFetchNext;
     canFetchPrevRef.current = canFetchPrev;
     nextPageRequestRef.current = nextPageRequest;
@@ -378,10 +514,10 @@ function createUseInfiniteRead(options) {
       method: capturedCall.method,
       options: baseOptionsForKey
     });
-    const controllerRef = (0, import_react3.useRef)(null);
+    const controllerRef = (0, import_react4.useRef)(null);
     if (!controllerRef.current || controllerRef.current.queryKey !== queryKey) {
       controllerRef.current = {
-        controller: (0, import_core3.createInfiniteReadController)({
+        controller: (0, import_core4.createInfiniteReadController)({
           path: pathSegments,
           method: capturedCall.method,
           tags: resolvedTags,
@@ -414,12 +550,12 @@ function createUseInfiniteRead(options) {
     }
     const controller = controllerRef.current.controller;
     controller.setPluginOptions(pluginOpts);
-    const state = (0, import_react3.useSyncExternalStore)(
+    const state = (0, import_react4.useSyncExternalStore)(
       controller.subscribe,
       controller.getState,
       controller.getState
     );
-    const [isPending, setIsPending] = (0, import_react3.useState)(() => {
+    const [isPending, setIsPending] = (0, import_react4.useState)(() => {
       return enabled && state.data === void 0;
     });
     const fetchingDirection = controller.getFetchingDirection();
@@ -428,17 +564,18 @@ function createUseInfiniteRead(options) {
     const fetchingPrev = fetchingDirection === "prev";
     const hasData = state.data !== void 0;
     const loading = (isPending || fetching) && !hasData;
-    const lifecycleRef = (0, import_react3.useRef)({
+    const lifecycleRef = (0, import_react4.useRef)({
       initialized: false,
       prevContext: null
     });
-    (0, import_react3.useEffect)(() => {
+    const tagsKey = JSON.stringify(tags);
+    (0, import_react4.useEffect)(() => {
       return () => {
         controllerRef.current?.controller.unmount();
         lifecycleRef.current.initialized = false;
       };
     }, []);
-    (0, import_react3.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       controller.mount();
       lifecycleRef.current.initialized = true;
       const unsubInvalidate = eventEmitter.on(
@@ -456,8 +593,8 @@ function createUseInfiniteRead(options) {
       return () => {
         unsubInvalidate();
       };
-    }, []);
-    (0, import_react3.useEffect)(() => {
+    }, [tagsKey]);
+    (0, import_react4.useEffect)(() => {
       if (!lifecycleRef.current.initialized) return;
       if (enabled) {
         const currentState = controller.getState();
@@ -468,7 +605,7 @@ function createUseInfiniteRead(options) {
         }
       }
     }, [enabled]);
-    (0, import_react3.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       if (!enabled || !lifecycleRef.current.initialized) return;
       const prevContext = controller.getContext();
       controller.update(prevContext);
@@ -487,7 +624,7 @@ function createUseInfiniteRead(options) {
       canFetchPrev: state.canFetchPrev,
       fetchNext: controller.fetchNext,
       fetchPrev: controller.fetchPrev,
-      refetch: controller.refetch,
+      trigger: controller.refetch,
       abort: controller.abort,
       error: state.error
     };
@@ -510,6 +647,12 @@ function createReactSpoosh(instance) {
     eventEmitter,
     pluginExecutor
   });
+  const useLazyRead = createUseLazyRead({
+    api,
+    stateManager,
+    eventEmitter,
+    pluginExecutor
+  });
   const useInfiniteRead = createUseInfiniteRead({
     api,
     stateManager,
@@ -535,6 +678,7 @@ function createReactSpoosh(instance) {
   return {
     useRead,
     useWrite,
+    useLazyRead,
     useInfiniteRead,
     ...instanceApis
   };