@spoosh/react 0.1.0-beta.0

package/dist/index.js

@@ -0,0 +1,549 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createReactSpoosh: () => createReactSpoosh,
+  createUseInfiniteRead: () => createUseInfiniteRead,
+  createUseRead: () => createUseRead,
+  createUseWrite: () => createUseWrite
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/useRead/index.ts
+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,
+      additionalTags,
+      ...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;
+    });
+    readFn(selectorProxy);
+    const capturedCall = selectorResultRef.current.call;
+    if (!capturedCall) {
+      throw new Error(
+        "useRead requires calling an HTTP method ($get). Example: useRead((api) => api.posts.$get())"
+      );
+    }
+    const requestOptions = capturedCall.options;
+    const resolvedPath = (0, import_core.resolvePath)(capturedCall.path, requestOptions?.params);
+    const resolvedTags = (0, import_core.resolveTags)({ tags, additionalTags }, resolvedPath);
+    const queryKey = stateManager.createQueryKey({
+      path: capturedCall.path,
+      method: capturedCall.method,
+      options: capturedCall.options
+    });
+    const controllerRef = (0, import_react.useRef)(null);
+    const lifecycleRef = (0, import_react.useRef)({
+      initialized: false,
+      prevContext: null
+    });
+    if (controllerRef.current && controllerRef.current.queryKey !== queryKey) {
+      lifecycleRef.current.prevContext = controllerRef.current.controller.getContext();
+    }
+    if (!controllerRef.current || controllerRef.current.queryKey !== queryKey) {
+      const controller2 = (0, import_core.createOperationController)({
+        operationType: "read",
+        path: capturedCall.path,
+        method: capturedCall.method,
+        tags: resolvedTags,
+        requestOptions: capturedCall.options,
+        stateManager,
+        eventEmitter,
+        pluginExecutor,
+        hookId,
+        fetchFn: async (fetchOpts) => {
+          let current = api;
+          for (const segment of resolvedPath) {
+            current = current[segment];
+          }
+          const method = current[capturedCall.method];
+          return method(fetchOpts);
+        }
+      });
+      controllerRef.current = { controller: controller2, queryKey };
+    }
+    const controller = controllerRef.current.controller;
+    controller.setPluginOptions(pluginOpts);
+    const state = (0, import_react.useSyncExternalStore)(
+      controller.subscribe,
+      controller.getState,
+      controller.getState
+    );
+    const [requestState, setRequestState] = (0, import_react.useState)({ isPending: false, error: void 0 });
+    const abortRef = (0, import_react.useRef)(controller.abort);
+    abortRef.current = controller.abort;
+    const pluginOptsKey = JSON.stringify(pluginOpts);
+    const executeWithTracking = (0, import_react.useCallback)(
+      async (force = false) => {
+        setRequestState((prev) => ({ ...prev, isPending: true }));
+        try {
+          const response = await controller.execute(void 0, { force });
+          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;
+        }
+      },
+      [controller]
+    );
+    (0, import_react.useEffect)(() => {
+      return () => {
+        controllerRef.current?.controller.unmount();
+        lifecycleRef.current.initialized = false;
+      };
+    }, []);
+    (0, import_react.useEffect)(() => {
+      if (!enabled) return;
+      const { initialized, prevContext } = lifecycleRef.current;
+      if (!initialized) {
+        controller.mount();
+        lifecycleRef.current.initialized = true;
+      } else if (prevContext) {
+        controller.update(prevContext);
+        lifecycleRef.current.prevContext = null;
+      }
+      executeWithTracking(false);
+      const unsubRefetch = eventEmitter.on("refetch", (event) => {
+        if (event.queryKey === queryKey) {
+          executeWithTracking(true);
+        }
+      });
+      const unsubInvalidate = eventEmitter.on(
+        "invalidate",
+        (invalidatedTags) => {
+          const hasMatch = invalidatedTags.some(
+            (tag) => resolvedTags.includes(tag)
+          );
+          if (hasMatch) {
+            executeWithTracking(true);
+          }
+        }
+      );
+      return () => {
+        unsubRefetch();
+        unsubInvalidate();
+      };
+    }, [queryKey, enabled]);
+    (0, import_react.useEffect)(() => {
+      if (!enabled || !lifecycleRef.current.initialized) return;
+      const prevContext = controller.getContext();
+      controller.update(prevContext);
+    }, [pluginOptsKey]);
+    const abort = (0, import_react.useCallback)(() => {
+      abortRef.current();
+    }, []);
+    const refetch = (0, import_react.useCallback)(() => {
+      return executeWithTracking(true);
+    }, [executeWithTracking]);
+    const entry = stateManager.getCache(queryKey);
+    const pluginResultData = entry?.pluginResult ? Object.fromEntries(entry.pluginResult) : {};
+    const opts = capturedCall.options;
+    const inputInner = {};
+    if (opts?.query !== void 0) {
+      inputInner.query = opts.query;
+    }
+    if (opts?.body !== void 0) {
+      inputInner.body = opts.body;
+    }
+    if (opts?.formData !== void 0) {
+      inputInner.formData = opts.formData;
+    }
+    if (opts?.params !== void 0) {
+      inputInner.params = opts.params;
+    }
+    const inputField = Object.keys(inputInner).length > 0 ? { input: inputInner } : {};
+    const hasData = state.data !== void 0;
+    const loading = requestState.isPending && !hasData;
+    const fetching = requestState.isPending;
+    const result = {
+      ...pluginResultData,
+      ...inputField,
+      data: state.data,
+      error: requestState.error ?? state.error,
+      loading,
+      fetching,
+      abort,
+      refetch
+    };
+    return result;
+  };
+}
+
+// src/useWrite/index.ts
+var import_react2 = require("react");
+var import_core2 = require("@spoosh/core");
+function createUseWrite(options) {
+  const { api, stateManager, pluginExecutor, eventEmitter } = options;
+  return 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;
+    });
+    writeFn(selectorProxy);
+    const selectedEndpoint = selectorResultRef.current.selector;
+    if (!selectedEndpoint) {
+      throw new Error(
+        "useWrite requires selecting an HTTP method ($post, $put, $patch, $delete). Example: useWrite((api) => api.posts.$post)"
+      );
+    }
+    const queryKey = stateManager.createQueryKey({
+      path: selectedEndpoint.path,
+      method: selectedEndpoint.method,
+      options: void 0
+    });
+    const controllerRef = (0, import_react2.useRef)(null);
+    if (!controllerRef.current || controllerRef.current.queryKey !== queryKey) {
+      controllerRef.current = {
+        controller: (0, import_core2.createOperationController)({
+          operationType: "write",
+          path: selectedEndpoint.path,
+          method: selectedEndpoint.method,
+          tags: [],
+          stateManager,
+          eventEmitter,
+          pluginExecutor,
+          hookId,
+          fetchFn: async (fetchOpts) => {
+            const params = fetchOpts?.params;
+            const resolvedPath = (0, import_core2.resolvePath)(selectedEndpoint.path, params);
+            let current = api;
+            for (const segment of resolvedPath) {
+              current = current[segment];
+            }
+            const method = current[selectedEndpoint.method];
+            return method(fetchOpts);
+          }
+        }),
+        queryKey
+      };
+    }
+    const controller = controllerRef.current.controller;
+    const state = (0, import_react2.useSyncExternalStore)(
+      controller.subscribe,
+      controller.getState,
+      controller.getState
+    );
+    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();
+    }, []);
+    const trigger = (0, import_react2.useCallback)(
+      async (triggerOptions) => {
+        setLastTriggerOptions(triggerOptions);
+        setRequestState((prev) => ({ ...prev, isPending: true }));
+        const params = triggerOptions?.params;
+        const resolvedPath = (0, import_core2.resolvePath)(selectedEndpoint.path, params);
+        const tags = (0, import_core2.resolveTags)(triggerOptions, resolvedPath);
+        controller.setPluginOptions({ ...triggerOptions, tags });
+        try {
+          const response = await controller.execute(triggerOptions, {
+            force: true
+          });
+          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;
+        }
+      },
+      [selectedEndpoint.path]
+    );
+    const entry = stateManager.getCache(queryKey);
+    const pluginResultData = entry?.pluginResult ? Object.fromEntries(entry.pluginResult) : {};
+    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?.formData !== void 0) {
+      inputInner.formData = opts.formData;
+    }
+    if (opts?.params !== void 0) {
+      inputInner.params = opts.params;
+    }
+    const inputField = Object.keys(inputInner).length > 0 ? { input: inputInner } : {};
+    const loading = requestState.isPending;
+    const result = {
+      trigger,
+      ...pluginResultData,
+      ...inputField,
+      data: state.data,
+      error: requestState.error ?? state.error,
+      loading,
+      reset,
+      abort
+    };
+    return result;
+  };
+}
+
+// src/useInfiniteRead/index.ts
+var import_react3 = require("react");
+var import_core3 = require("@spoosh/core");
+function createUseInfiniteRead(options) {
+  const { api, stateManager, eventEmitter, pluginExecutor } = options;
+  return function useInfiniteRead(readFn, readOptions) {
+    const {
+      enabled = true,
+      tags,
+      additionalTags,
+      canFetchNext,
+      nextPageRequest,
+      merger,
+      canFetchPrev,
+      prevPageRequest,
+      ...pluginOpts
+    } = readOptions;
+    const hookId = (0, import_react3.useId)();
+    const selectorResultRef = (0, import_react3.useRef)({
+      call: null,
+      selector: null
+    });
+    const selectorProxy = (0, import_core3.createSelectorProxy)((result2) => {
+      selectorResultRef.current = result2;
+    });
+    readFn(selectorProxy);
+    const capturedCall = selectorResultRef.current.call;
+    if (!capturedCall) {
+      throw new Error(
+        "useInfiniteRead requires calling an HTTP method ($get). Example: useInfiniteRead((api) => api.posts.$get())"
+      );
+    }
+    const requestOptions = capturedCall.options;
+    const initialRequest = {
+      query: requestOptions?.query,
+      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)(capturedCall.path, requestOptions?.params);
+    const resolvedTags = (0, import_core3.resolveTags)({ tags, additionalTags }, 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);
+    canFetchNextRef.current = canFetchNext;
+    canFetchPrevRef.current = canFetchPrev;
+    nextPageRequestRef.current = nextPageRequest;
+    prevPageRequestRef.current = prevPageRequest;
+    mergerRef.current = merger;
+    const queryKey = stateManager.createQueryKey({
+      path: capturedCall.path,
+      method: capturedCall.method,
+      options: baseOptionsForKey
+    });
+    const controllerRef = (0, import_react3.useRef)(null);
+    if (!controllerRef.current || controllerRef.current.queryKey !== queryKey) {
+      controllerRef.current = {
+        controller: (0, import_core3.createInfiniteReadController)({
+          path: capturedCall.path,
+          method: capturedCall.method,
+          tags: resolvedTags,
+          initialRequest,
+          baseOptionsForKey,
+          canFetchNext: (ctx) => canFetchNextRef.current(ctx),
+          canFetchPrev: canFetchPrev ? (ctx) => canFetchPrevRef.current?.(ctx) ?? false : void 0,
+          nextPageRequest: (ctx) => nextPageRequestRef.current(ctx),
+          prevPageRequest: prevPageRequest ? (ctx) => prevPageRequestRef.current?.(ctx) ?? {} : void 0,
+          merger: (responses) => mergerRef.current(responses),
+          stateManager,
+          eventEmitter,
+          pluginExecutor,
+          hookId,
+          fetchFn: async (opts, signal) => {
+            const fetchPath = (0, import_core3.resolvePath)(capturedCall.path, opts.params);
+            let current = api;
+            for (const segment of fetchPath) {
+              current = current[segment];
+            }
+            const method = current[capturedCall.method];
+            const fetchOptions = {
+              ...capturedCall.options,
+              query: opts.query,
+              params: opts.params,
+              body: opts.body,
+              signal
+            };
+            return method(fetchOptions);
+          }
+        }),
+        queryKey
+      };
+    }
+    const controller = controllerRef.current.controller;
+    controller.setPluginOptions(pluginOpts);
+    const state = (0, import_react3.useSyncExternalStore)(
+      controller.subscribe,
+      controller.getState,
+      controller.getState
+    );
+    const fetchingDirection = controller.getFetchingDirection();
+    const fetching = fetchingDirection !== null;
+    const fetchingNext = fetchingDirection === "next";
+    const fetchingPrev = fetchingDirection === "prev";
+    const loading = fetching && state.data === void 0;
+    const lifecycleRef = (0, import_react3.useRef)({
+      initialized: false,
+      prevContext: null
+    });
+    (0, import_react3.useEffect)(() => {
+      return () => {
+        controllerRef.current?.controller.unmount();
+        lifecycleRef.current.initialized = false;
+      };
+    }, []);
+    (0, import_react3.useEffect)(() => {
+      controller.mount();
+      lifecycleRef.current.initialized = true;
+      const unsubInvalidate = eventEmitter.on(
+        "invalidate",
+        (invalidatedTags) => {
+          const hasMatch = invalidatedTags.some(
+            (tag) => resolvedTags.includes(tag)
+          );
+          if (hasMatch) {
+            controller.refetch();
+          }
+        }
+      );
+      return () => {
+        unsubInvalidate();
+      };
+    }, []);
+    (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) {
+          controller.fetchNext();
+        }
+      }
+    }, [enabled]);
+    (0, import_react3.useEffect)(() => {
+      if (!enabled || !lifecycleRef.current.initialized) return;
+      const prevContext = controller.getContext();
+      controller.update(prevContext);
+    }, [JSON.stringify(pluginOpts)]);
+    const result = {
+      data: state.data,
+      allResponses: state.allResponses,
+      loading,
+      fetching,
+      fetchingNext,
+      fetchingPrev,
+      canFetchNext: state.canFetchNext,
+      canFetchPrev: state.canFetchPrev,
+      fetchNext: controller.fetchNext,
+      fetchPrev: controller.fetchPrev,
+      refetch: controller.refetch,
+      abort: controller.abort,
+      error: state.error
+    };
+    return result;
+  };
+}
+
+// src/createReactSpoosh/index.ts
+function createReactSpoosh(instance) {
+  const { api, stateManager, eventEmitter, pluginExecutor } = instance;
+  const useRead = createUseRead({
+    api,
+    stateManager,
+    eventEmitter,
+    pluginExecutor
+  });
+  const useWrite = createUseWrite({
+    api,
+    stateManager,
+    eventEmitter,
+    pluginExecutor
+  });
+  const useInfiniteRead = createUseInfiniteRead({
+    api,
+    stateManager,
+    eventEmitter,
+    pluginExecutor
+  });
+  const instanceApiContext = {
+    api,
+    stateManager,
+    eventEmitter,
+    pluginExecutor
+  };
+  const plugins = pluginExecutor.getPlugins();
+  const instanceApis = plugins.reduce(
+    (acc, plugin) => {
+      if (plugin.instanceApi) {
+        return { ...acc, ...plugin.instanceApi(instanceApiContext) };
+      }
+      return acc;
+    },
+    {}
+  );
+  return {
+    useRead,
+    useWrite,
+    useInfiniteRead,
+    ...instanceApis
+  };
+}