@spoosh/react 0.1.0-beta.0

package/dist/index.mjs

@@ -0,0 +1,555 @@
+"use client";
+"use client";
+
+// src/useRead/index.ts
+import {
+  useSyncExternalStore,
+  useRef,
+  useEffect,
+  useCallback,
+  useId,
+  useState
+} from "react";
+import {
+  createOperationController,
+  createSelectorProxy,
+  resolvePath,
+  resolveTags
+} from "@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 = useId();
+    const selectorResultRef = useRef({
+      call: null,
+      selector: null
+    });
+    const selectorProxy = 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 = resolvePath(capturedCall.path, requestOptions?.params);
+    const resolvedTags = resolveTags({ tags, additionalTags }, resolvedPath);
+    const queryKey = stateManager.createQueryKey({
+      path: capturedCall.path,
+      method: capturedCall.method,
+      options: capturedCall.options
+    });
+    const controllerRef = useRef(null);
+    const lifecycleRef = 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 = 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 = useSyncExternalStore(
+      controller.subscribe,
+      controller.getState,
+      controller.getState
+    );
+    const [requestState, setRequestState] = useState({ isPending: false, error: void 0 });
+    const abortRef = useRef(controller.abort);
+    abortRef.current = controller.abort;
+    const pluginOptsKey = JSON.stringify(pluginOpts);
+    const executeWithTracking = 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]
+    );
+    useEffect(() => {
+      return () => {
+        controllerRef.current?.controller.unmount();
+        lifecycleRef.current.initialized = false;
+      };
+    }, []);
+    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]);
+    useEffect(() => {
+      if (!enabled || !lifecycleRef.current.initialized) return;
+      const prevContext = controller.getContext();
+      controller.update(prevContext);
+    }, [pluginOptsKey]);
+    const abort = useCallback(() => {
+      abortRef.current();
+    }, []);
+    const refetch = 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
+import {
+  useSyncExternalStore as useSyncExternalStore2,
+  useRef as useRef2,
+  useCallback as useCallback2,
+  useState as useState2,
+  useId as useId2
+} from "react";
+import {
+  createOperationController as createOperationController2,
+  createSelectorProxy as createSelectorProxy2,
+  resolvePath as resolvePath2,
+  resolveTags as resolveTags2
+} from "@spoosh/core";
+function createUseWrite(options) {
+  const { api, stateManager, pluginExecutor, eventEmitter } = options;
+  return function useWrite(writeFn) {
+    const hookId = useId2();
+    const selectorResultRef = useRef2({
+      call: null,
+      selector: null
+    });
+    const selectorProxy = createSelectorProxy2((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 = useRef2(null);
+    if (!controllerRef.current || controllerRef.current.queryKey !== queryKey) {
+      controllerRef.current = {
+        controller: createOperationController2({
+          operationType: "write",
+          path: selectedEndpoint.path,
+          method: selectedEndpoint.method,
+          tags: [],
+          stateManager,
+          eventEmitter,
+          pluginExecutor,
+          hookId,
+          fetchFn: async (fetchOpts) => {
+            const params = fetchOpts?.params;
+            const resolvedPath = resolvePath2(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 = useSyncExternalStore2(
+      controller.subscribe,
+      controller.getState,
+      controller.getState
+    );
+    const [lastTriggerOptions, setLastTriggerOptions] = useState2(void 0);
+    const [requestState, setRequestState] = useState2({ isPending: false, error: void 0 });
+    const reset = useCallback2(() => {
+      stateManager.deleteCache(queryKey);
+      setRequestState({ isPending: false, error: void 0 });
+    }, [queryKey]);
+    const abort = useCallback2(() => {
+      controller.abort();
+    }, []);
+    const trigger = useCallback2(
+      async (triggerOptions) => {
+        setLastTriggerOptions(triggerOptions);
+        setRequestState((prev) => ({ ...prev, isPending: true }));
+        const params = triggerOptions?.params;
+        const resolvedPath = resolvePath2(selectedEndpoint.path, params);
+        const tags = resolveTags2(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
+import { useRef as useRef3, useEffect as useEffect2, useSyncExternalStore as useSyncExternalStore3, useId as useId3 } from "react";
+import {
+  createInfiniteReadController,
+  createSelectorProxy as createSelectorProxy3,
+  resolvePath as resolvePath3,
+  resolveTags as resolveTags3
+} from "@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 = useId3();
+    const selectorResultRef = useRef3({
+      call: null,
+      selector: null
+    });
+    const selectorProxy = createSelectorProxy3((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 = resolvePath3(capturedCall.path, requestOptions?.params);
+    const resolvedTags = resolveTags3({ tags, additionalTags }, resolvedPath);
+    const canFetchNextRef = useRef3(canFetchNext);
+    const canFetchPrevRef = useRef3(canFetchPrev);
+    const nextPageRequestRef = useRef3(nextPageRequest);
+    const prevPageRequestRef = useRef3(prevPageRequest);
+    const mergerRef = useRef3(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 = useRef3(null);
+    if (!controllerRef.current || controllerRef.current.queryKey !== queryKey) {
+      controllerRef.current = {
+        controller: 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 = resolvePath3(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 = useSyncExternalStore3(
+      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 = useRef3({
+      initialized: false,
+      prevContext: null
+    });
+    useEffect2(() => {
+      return () => {
+        controllerRef.current?.controller.unmount();
+        lifecycleRef.current.initialized = false;
+      };
+    }, []);
+    useEffect2(() => {
+      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();
+      };
+    }, []);
+    useEffect2(() => {
+      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]);
+    useEffect2(() => {
+      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
+  };
+}
+export {
+  createReactSpoosh,
+  createUseInfiniteRead,
+  createUseRead,
+  createUseWrite
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@spoosh/react",
+  "version": "0.1.0-beta.0",
+  "license": "MIT",
+  "description": "React hooks for Spoosh API client",
+  "keywords": [
+    "spoosh",
+    "react",
+    "hooks",
+    "api-client",
+    "useQuery",
+    "useMutation"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nxnom/spoosh.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/nxnom/spoosh/issues"
+  },
+  "homepage": "https://spoosh.dev/docs/integrations/react",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@spoosh/core": "0.1.0-beta.0"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --max-warnings 0",
+    "format": "prettier --write 'src/**/*.ts'"
+  }
+}