@web-ts-toolkit/access-router-react 0.5.0

package/index.mjs

@@ -0,0 +1,583 @@
+// src/create-model-hook.ts
+import { useState, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
+
+// src/fetch.ts
+import { useEffect, useRef, useCallback } from "react";
+function isAbortError(err) {
+  return err instanceof DOMException && err.name === "AbortError";
+}
+function useAbortManager() {
+  const ref = useRef(null);
+  const replace = useCallback((next) => {
+    ref.current?.abort();
+    ref.current = next;
+  }, []);
+  useEffect(() => {
+    return () => {
+      ref.current?.abort();
+      ref.current = null;
+    };
+  }, []);
+  return { replace };
+}
+function stableStringify(value) {
+  if (value == null) return "";
+  if (typeof value !== "object") return JSON.stringify(value);
+  if (Array.isArray(value)) return `[${value.map(stableStringify).join(",")}]`;
+  const keys = Object.keys(value).sort();
+  return `{${keys.map((k) => `${JSON.stringify(k)}:${stableStringify(value[k])}`).join(",")}}`;
+}
+function useMountRef() {
+  const ref = useRef(true);
+  useEffect(() => {
+    ref.current = true;
+    return () => {
+      ref.current = false;
+    };
+  }, []);
+  return ref;
+}
+
+// src/create-model-hook.ts
+function useAutoQuery({
+  doFetch,
+  applyResult,
+  shouldFetch,
+  deps,
+  onSuccess,
+  onError,
+  onSettled
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isFetching, setIsFetching] = useState(false);
+  const [error, setError] = useState(null);
+  const manager = useAbortManager();
+  const mountRef = useMountRef();
+  const fetchAndSet = useCallback2(
+    async (signal) => {
+      setIsFetching(true);
+      setError(null);
+      try {
+        return await doFetch(signal);
+      } catch (err) {
+        if (!isAbortError(err)) setError(err);
+        throw err;
+      } finally {
+        if (!signal?.aborted) setIsFetching(false);
+      }
+    },
+    [doFetch]
+  );
+  const doFetchWithCallbacks = useCallback2(
+    async (signal) => {
+      const res = await fetchAndSet(signal);
+      if (!signal?.aborted) {
+        applyResult(res);
+        onSuccess?.(res);
+        onSettled?.(res, null);
+      }
+      return res;
+    },
+    [fetchAndSet, applyResult, onSuccess, onSettled]
+  );
+  useEffect2(() => {
+    if (!shouldFetch) return;
+    mountRef.current = true;
+    setIsLoading(true);
+    const controller = new AbortController();
+    manager.replace(controller);
+    doFetchWithCallbacks(controller.signal).catch((err) => {
+      if (!mountRef.current || controller.signal.aborted) return;
+      onError?.(err);
+      onSettled?.(null, err);
+    }).finally(() => {
+      if (mountRef.current && !controller.signal.aborted) setIsLoading(false);
+    });
+    return () => {
+      mountRef.current = false;
+      controller.abort();
+    };
+  }, deps);
+  const refetch = useCallback2(() => {
+    setIsLoading(true);
+    const controller = new AbortController();
+    manager.replace(controller);
+    doFetchWithCallbacks(controller.signal).catch(() => {
+    }).finally(() => {
+      if (!controller.signal.aborted) setIsLoading(false);
+    });
+  }, [doFetchWithCallbacks, manager]);
+  return { isLoading, isFetching, error, setError, refetch, manager, mountRef };
+}
+function useMutation(execute, options) {
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState(null);
+  const mountRef = useMountRef();
+  const { onSuccess, onSettled } = options ?? {};
+  const executeMutate = useCallback2(
+    async (...args) => {
+      setIsPending(true);
+      setError(null);
+      try {
+        const result = await execute(...args);
+        if (mountRef.current) {
+          onSuccess?.(result);
+          onSettled?.(result, null);
+        }
+        return result;
+      } catch (err) {
+        const svcErr = err;
+        if (mountRef.current) {
+          setError(svcErr);
+          onSettled?.(null, svcErr);
+        }
+        throw svcErr;
+      } finally {
+        if (mountRef.current) setIsPending(false);
+      }
+    },
+    [execute, mountRef, onSuccess, onSettled]
+  );
+  const reset = useCallback2(() => setError(null), []);
+  return { isPending, error, executeMutate, reset };
+}
+function createModelHooks(config) {
+  const { modelService } = config;
+  function useRead(options = {}) {
+    const {
+      id,
+      advanced,
+      select,
+      populate,
+      sort,
+      include,
+      tasks,
+      basicOptions,
+      advancedOptions,
+      enabled = true,
+      initialData = null,
+      requestConfig,
+      onSuccess,
+      onError,
+      onSettled
+    } = options;
+    const [data, setData] = useState(initialData);
+    const applyResult = useCallback2((res) => {
+      setData(res.data);
+    }, []);
+    const doFetchById = useCallback2(
+      async (targetId, signal) => {
+        if (advanced) {
+          return await modelService.readAdvanced(
+            targetId,
+            { select, populate, sort, include, tasks },
+            advancedOptions,
+            { ...requestConfig, signal }
+          ).exec();
+        }
+        return await modelService.read(targetId, basicOptions, { ...requestConfig, signal }).exec();
+      },
+      [modelService, advanced, select, populate, sort, include, tasks, basicOptions, advancedOptions, requestConfig]
+    );
+    const doFetch = useCallback2(
+      (signal) => {
+        if (!id) throw new Error("useRead: id is required");
+        return doFetchById(id, signal);
+      },
+      [doFetchById, id]
+    );
+    const shouldFetch = Boolean(id && enabled);
+    const { isLoading, isFetching, error, refetch } = useAutoQuery({
+      doFetch,
+      applyResult,
+      shouldFetch,
+      deps: [id, enabled, advanced, select, populate, sort, include, tasks, basicOptions, advancedOptions],
+      onSuccess,
+      onError,
+      onSettled
+    });
+    const query = useCallback2(
+      async (readId) => {
+        const res = await doFetchById(readId);
+        applyResult(res);
+        onSuccess?.(res);
+        onSettled?.(res, null);
+        return res;
+      },
+      [doFetchById, applyResult, onSuccess, onSettled]
+    );
+    const reset = useCallback2(() => {
+      setData(initialData);
+    }, [initialData]);
+    return { data, isLoading, isFetching, error, query, refetch, reset };
+  }
+  function useList(options = {}) {
+    const {
+      listParams,
+      filter,
+      advanced,
+      sort,
+      select,
+      populate,
+      include,
+      tasks,
+      basicOptions,
+      advancedOptions,
+      enabled = true,
+      keepPreviousData = false,
+      initialData,
+      requestConfig,
+      onSuccess,
+      onError,
+      onSettled
+    } = options;
+    const [data, setData] = useState(initialData ?? []);
+    const [previousData, setPreviousData] = useState(void 0);
+    const [totalCount, setTotalCount] = useState(0);
+    const latestDataRef = useRef2(data);
+    latestDataRef.current = data;
+    const applyResult = useCallback2((res) => {
+      setData(res.data);
+      setTotalCount(res.totalCount);
+      setPreviousData(void 0);
+    }, []);
+    const baseFetch = useCallback2(
+      async (args, signal) => {
+        if (keepPreviousData) {
+          setPreviousData(latestDataRef.current);
+        }
+        if (advanced) {
+          return await modelService.listAdvanced(
+            filter ?? {},
+            { sort, select, populate, include, tasks, ...args },
+            advancedOptions,
+            { ...requestConfig, signal }
+          ).exec();
+        }
+        return await modelService.list(args ?? listParams, basicOptions, { ...requestConfig, signal }).exec();
+      },
+      [
+        modelService,
+        advanced,
+        filter,
+        sort,
+        select,
+        populate,
+        include,
+        tasks,
+        listParams,
+        basicOptions,
+        advancedOptions,
+        requestConfig,
+        keepPreviousData,
+        latestDataRef
+      ]
+    );
+    const doFetch = useCallback2((signal) => baseFetch(listParams, signal), [baseFetch, listParams]);
+    const listParamsKey = stableStringify(listParams);
+    const filterKey = stableStringify(filter);
+    const sortKey = stableStringify(sort);
+    const shouldFetch = Boolean((listParams || advanced) && enabled);
+    const { isLoading, isFetching, error, refetch } = useAutoQuery({
+      doFetch,
+      applyResult,
+      shouldFetch,
+      deps: [
+        listParamsKey,
+        filterKey,
+        advanced,
+        enabled,
+        select,
+        populate,
+        sortKey,
+        include,
+        tasks,
+        basicOptions,
+        advancedOptions
+      ],
+      onSuccess,
+      onError,
+      onSettled
+    });
+    const query = useCallback2(
+      async (args) => {
+        const res = await baseFetch(args);
+        applyResult(res);
+        onSuccess?.(res);
+        onSettled?.(res, null);
+        return res;
+      },
+      [baseFetch, applyResult, onSuccess, onSettled]
+    );
+    const reset = useCallback2(() => {
+      setData(initialData ?? []);
+      setPreviousData(void 0);
+      setTotalCount(0);
+    }, [initialData]);
+    return { data, previousData, totalCount, isLoading, isFetching, error, query, refetch, reset };
+  }
+  function useCreate(options = {}) {
+    const {
+      advanced,
+      select,
+      populate,
+      tasks,
+      basicOptions,
+      advancedOptions,
+      requestConfig,
+      onSuccess,
+      onError,
+      onSettled
+    } = options;
+    const [data, setData] = useState(null);
+    const mountRef = useMountRef();
+    const execute = useCallback2(
+      async (createData) => {
+        let res;
+        if (advanced) {
+          res = await modelService.createAdvanced(
+            createData,
+            { select, populate, tasks },
+            advancedOptions,
+            requestConfig
+          ).exec();
+        } else {
+          res = await modelService.create(createData, basicOptions, requestConfig).exec();
+        }
+        if (mountRef.current) setData(res.data);
+        return res;
+      },
+      [modelService, advanced, select, populate, tasks, basicOptions, advancedOptions, requestConfig, mountRef]
+    );
+    const { isPending, error, executeMutate, reset: resetError } = useMutation(execute, { onSuccess, onSettled });
+    const mutate = useCallback2(
+      async (createData) => {
+        try {
+          return await executeMutate(createData);
+        } catch (err) {
+          onError?.(err);
+          throw err;
+        }
+      },
+      [executeMutate, onError]
+    );
+    const reset = useCallback2(() => {
+      setData(null);
+      resetError();
+    }, [resetError]);
+    return { data, isPending, error, mutate, reset };
+  }
+  function useUpdate(options = {}) {
+    const {
+      advanced,
+      select,
+      populate,
+      tasks,
+      basicOptions,
+      advancedOptions,
+      requestConfig,
+      onSuccess,
+      onError,
+      onSettled
+    } = options;
+    const [data, setData] = useState(null);
+    const mountRef = useMountRef();
+    const execute = useCallback2(
+      async (updateId, updateData) => {
+        let res;
+        if (advanced) {
+          res = await modelService.updateAdvanced(
+            updateId,
+            updateData,
+            { select, populate, tasks },
+            advancedOptions,
+            requestConfig
+          ).exec();
+        } else {
+          res = await modelService.update(updateId, updateData, basicOptions, requestConfig).exec();
+        }
+        if (mountRef.current) setData(res.data);
+        return res;
+      },
+      [modelService, advanced, select, populate, tasks, basicOptions, advancedOptions, requestConfig, mountRef]
+    );
+    const { isPending, error, executeMutate, reset: resetError } = useMutation(execute, { onSuccess, onSettled });
+    const mutate = useCallback2(
+      async (updateId, updateData) => {
+        try {
+          return await executeMutate(updateId, updateData);
+        } catch (err) {
+          onError?.(err);
+          throw err;
+        }
+      },
+      [executeMutate, onError]
+    );
+    const reset = useCallback2(() => {
+      setData(null);
+      resetError();
+    }, [resetError]);
+    return { data, isPending, error, mutate, reset };
+  }
+  function useUpsert(options = {}) {
+    const {
+      advanced,
+      select,
+      populate,
+      tasks,
+      basicOptions,
+      advancedOptions,
+      requestConfig,
+      onSuccess,
+      onError,
+      onSettled
+    } = options;
+    const [data, setData] = useState(null);
+    const mountRef = useMountRef();
+    const execute = useCallback2(
+      async (upsertData) => {
+        let res;
+        if (advanced) {
+          res = await modelService.upsertAdvanced(
+            upsertData,
+            { select, populate, tasks },
+            advancedOptions,
+            requestConfig
+          ).exec();
+        } else {
+          res = await modelService.upsert(upsertData, basicOptions, requestConfig).exec();
+        }
+        if (mountRef.current) setData(res.data);
+        return res;
+      },
+      [modelService, advanced, select, populate, tasks, basicOptions, advancedOptions, requestConfig, mountRef]
+    );
+    const { isPending, error, executeMutate, reset: resetError } = useMutation(execute, { onSuccess, onSettled });
+    const mutate = useCallback2(
+      async (upsertData) => {
+        try {
+          return await executeMutate(upsertData);
+        } catch (err) {
+          onError?.(err);
+          throw err;
+        }
+      },
+      [executeMutate, onError]
+    );
+    const reset = useCallback2(() => {
+      setData(null);
+      resetError();
+    }, [resetError]);
+    return { data, isPending, error, mutate, reset };
+  }
+  function useDelete(options = {}) {
+    const { requestConfig, onSuccess, onError, onSettled } = options;
+    const execute = useCallback2(
+      async (deleteId) => {
+        const res = await modelService.delete(deleteId, requestConfig).exec();
+        return res;
+      },
+      [modelService, requestConfig]
+    );
+    const { isPending, error, executeMutate, reset } = useMutation(execute, { onSuccess, onSettled });
+    const mutate = useCallback2(
+      async (deleteId) => {
+        try {
+          return await executeMutate(deleteId);
+        } catch (err) {
+          onError?.(err);
+          throw err;
+        }
+      },
+      [executeMutate, onError]
+    );
+    return { isPending, error, mutate, reset };
+  }
+  function useCount(options = {}) {
+    const { advanced, filter, enabled = true, requestConfig, onSuccess, onError, onSettled } = options;
+    const [data, setData] = useState(null);
+    const applyResult = useCallback2((res) => {
+      setData(res.data);
+    }, []);
+    const doFetch = useCallback2(
+      async (signal) => {
+        if (advanced) {
+          return await modelService.countAdvanced(filter ?? {}, void 0, { ...requestConfig, signal }).exec();
+        }
+        return await modelService.count({ ...requestConfig, signal }).exec();
+      },
+      [modelService, advanced, filter, requestConfig]
+    );
+    const filterKey = stableStringify(filter);
+    const { isLoading, error, refetch } = useAutoQuery({
+      doFetch,
+      applyResult,
+      shouldFetch: enabled,
+      deps: [enabled, advanced, filterKey],
+      onSuccess,
+      onError,
+      onSettled
+    });
+    const query = useCallback2(async () => {
+      const res = await doFetch();
+      applyResult(res);
+      onSuccess?.(res);
+      onSettled?.(res, null);
+      return res;
+    }, [doFetch, applyResult, onSuccess, onSettled]);
+    const reset = useCallback2(() => {
+      setData(null);
+    }, []);
+    return { data, isLoading, error, query, refetch, reset };
+  }
+  function useDistinct(options) {
+    const { field, conditions, enabled = true, requestConfig, onSuccess, onError, onSettled } = options;
+    const [data, setData] = useState(null);
+    const applyResult = useCallback2((res) => {
+      setData(res.data);
+    }, []);
+    const doFetch = useCallback2(
+      async (signal) => {
+        if (conditions && Object.keys(conditions).length > 0) {
+          return await modelService.distinctAdvanced(field, conditions, { ...requestConfig, signal }).exec();
+        }
+        return await modelService.distinct(field, { ...requestConfig, signal }).exec();
+      },
+      [modelService, field, conditions, requestConfig]
+    );
+    const conditionsKey = stableStringify(conditions);
+    const { isLoading, error, refetch } = useAutoQuery({
+      doFetch,
+      applyResult,
+      shouldFetch: enabled,
+      deps: [enabled, field, conditionsKey],
+      onSuccess,
+      onError,
+      onSettled
+    });
+    const query = useCallback2(async () => {
+      const res = await doFetch();
+      applyResult(res);
+      onSuccess?.(res);
+      onSettled?.(res, null);
+      return res;
+    }, [doFetch, applyResult, onSuccess, onSettled]);
+    const reset = useCallback2(() => {
+      setData(null);
+    }, []);
+    return { data, isLoading, error, query, refetch, reset };
+  }
+  return {
+    useRead,
+    useList,
+    useCreate,
+    useUpdate,
+    useUpsert,
+    useDelete,
+    useCount,
+    useDistinct
+  };
+}
+export {
+  createModelHooks
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@web-ts-toolkit/access-router-react",
+  "description": "React hooks for @web-ts-toolkit/access-router-client model services",
+  "homepage": "https://web-ts-toolkit.pages.dev/docs/packages/access-router-react",
+  "version": "0.5.0",
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "hooks",
+    "typescript",
+    "crud",
+    "access-router",
+    "model"
+  ],
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "require": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "@web-ts-toolkit/access-router-client": "0.5.0"
+  },
+  "author": "Junmin Ahn",
+  "bugs": {
+    "url": "https://github.com/egose/web-ts-toolkit/issues"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/egose/web-ts-toolkit.git",
+    "directory": "packages/access-router-react"
+  }
+}