@kirill.konshin/react 0.0.2 → 0.0.4

package/.turbo/turbo-build.log

@@ -12,14 +12,19 @@ transforming...
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
-dist/useFetch.js     0.57 kB │ map: 1.69 kB
-dist/index.js        0.67 kB │ map: 0.10 kB
-dist/apiCall.js      0.69 kB │ map: 1.45 kB
-dist/useFetcher.js   1.18 kB │ map: 2.62 kB
-dist/keyboard.js     1.27 kB │ map: 2.81 kB
-dist/form/client.js  1.58 kB │ map: 3.88 kB
-dist/form/form.js    2.89 kB │ map: 7.94 kB
-[vite:dts] Declaration files built in 1853ms.
+src/index.ts:4:15 - error TS2307: Cannot find module './useFetcher' or its corresponding type declarations.
 
-✓ built in 5.02s
+4 export * from './useFetcher';
+                ~~~~~~~~~~~~~~
+
+dist/index.js           0.68 kB │ map: 0.10 kB
+dist/apiCall.js         0.69 kB │ map: 1.45 kB
+dist/useFetchAction.js  0.79 kB │ map: 1.90 kB
+dist/keyboard.js        1.27 kB │ map: 2.81 kB
+dist/form/client.js     1.58 kB │ map: 3.88 kB
+dist/useFetch.js        2.04 kB │ map: 5.62 kB
+dist/form/form.js       2.89 kB │ map: 7.94 kB
+[vite:dts] Declaration files built in 2074ms.
+
+✓ built in 6.65s
 Updated package.json with exports

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kirill.konshin/react
 
+## 0.0.4
+
+### Patch Changes
+
+- useFetchAction
+
+## 0.0.3
+
+### Patch Changes
+
+- Minor fixes
+
 ## 0.0.2
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,56 @@
+# `useFetch`
+
+```tsx
+import { useEffect } from 'react';
+import { useFetch } from '@kirill.konshin/react';
+
+const [data, actionFn, isPending, error] = useFetch(async (args) => {
+    return callToBackend(args);
+}, defaultValue);
+
+useEffect(() => {
+    actionFn({ id: 1 });
+}, []);
+```
+
+```tsx
+import { useEffect } from 'react';
+import { useFetch } from '@kirill.konshin/react';
+
+const dataRef = useRef(data);
+
+const [data, actionFn, isPending, error] = useFetch(async (args) => {
+    const data = await callToBackend(args);
+    return [...dataRef.current, data];
+}, defaultValue);
+
+useEffect(() => {
+    dataRef.current = value;
+}, [data]);
+
+useEffect(async () => {
+    await actionFn({ id: 1 });
+    await actionFn({ id: 2 });
+    await actionFn({ id: 3 });
+}, []);
+```
+
+```tsx
+import { useEffect } from 'react';
+import { useFetch } from '@kirill.konshin/react';
+
+const [data, actionFn, isPending, error] = useFetch(
+    // first function has to be synchronous, second can be async
+    (args) => async (oldData) => {
+        const data = await callToBackend(args);
+        return [...oldData, data];
+    },
+    defaultValue,
+);
+
+useEffect(async () => {
+    await actionFn({ id: 1 });
+    await actionFn({ id: 2 });
+    await actionFn({ id: 3 });
+}, []);
+```

package/dist/index.js

@@ -1,7 +1,7 @@
 import { apiCall, jsonContentType } from "./apiCall.js";
 import { HotkeysContext, HotkeysProvider, useHotkeys } from "./keyboard.js";
 import { useFetch } from "./useFetch.js";
-import { useFetcher } from "./useFetcher.js";
+import { useFetchAction } from "./useFetchAction.js";
 import { createClient } from "./form/client.js";
 import { Field, Form, FormContext, Hint, create, isRequired, maxLength, minLength, stringRequired } from "./form/form.js";
 export {
@@ -20,7 +20,7 @@ export {
   minLength,
   stringRequired,
   useFetch,
-  useFetcher,
+  useFetchAction,
   useHotkeys
 };
 //# sourceMappingURL=index.js.map

package/dist/useFetch.d.ts

@@ -1,2 +1,29 @@
-export declare function useFetch<R>(fn: (...args: any[]) => Promise<R>, defaultValue?: R | null): [R | null, typeof fn, boolean, Error | undefined];
+/**
+ * TODO useFetch https://use-http.com
+ * TODO SWR?
+ * TODO Tanstack Query?
+ *
+ * Uses same return array patterns as useActionState https://react.dev/reference/react/useActionState + error,
+ * reason: simple var rename
+ *
+ * Function can be async, then it will be awaited and result set to state.
+ *
+ * Function can be sync, then it will be called args, and it should return another function,which will be called with
+ * old data and result set to state. This is useful for pagination and merging data.
+ *
+ * @param {(...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R))} fn
+ * @param {any} defaultValue
+ * @param fetchOnMount
+ * @param throwAfterUnmount - throw if component is unmounted after fetch completed
+ * @returns {[R, (...args: any[]) => Promise<R>, boolean, Error | undefined]} //, ReturnType<typeof useState>, ReturnType<typeof useState>
+ */
+export declare function useFetch<R>(fn: (...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R), defaultValue: R, { fetchOnMount, throwAfterUnmount, }?: {
+    fetchOnMount?: boolean;
+    throwAfterUnmount?: boolean;
+}): [
+    R,
+    (...args: Parameters<typeof fn>) => Promise<R>,
+    boolean,
+    Error | undefined
+];
 //# sourceMappingURL=useFetch.d.ts.map

package/dist/useFetch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFetch.d.ts","sourceRoot":"","sources":["../src/useFetch.ts"],"names":[],"mappings":"AAOA,wBAAgB,QAAQ,CAAC,CAAC,EACtB,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EAClC,YAAY,GAAE,CAAC,GAAG,IAAW,GAC9B,CAAC,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,GAAG,SAAS,CAAC,CAkBnD"}
+{"version":3,"file":"useFetch.d.ts","sourceRoot":"","sources":["../src/useFetch.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACtB,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EACzE,YAAY,EAAE,CAAC,EACf,EACI,YAAoB,EACpB,iBAAyB,GAC5B,GAAE;IACC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC1B,GACP;IACC,CAAC;IACD,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC;IAC9C,OAAO;IACP,KAAK,GAAG,SAAS;CAGpB,CAkEA"}

package/dist/useFetch.js

@@ -1,18 +1,64 @@
 "use client";
-import { useTransition, useState, useCallback } from "react";
-function useFetch(fn, defaultValue = null) {
+import { useTransition, useState, useRef, useCallback, useEffect } from "react";
+const unmountError = "Component is unmounted after fetch completed";
+function useFetch(fn, defaultValue, {
+  fetchOnMount = false,
+  throwAfterUnmount = false
+} = {}) {
   const [isPending, startTransition] = useTransition();
   const [data, setData] = useState(defaultValue);
   const [error, setError] = useState();
+  const [loading, setLoading] = useState(fetchOnMount);
+  const isMounted = useRef(false);
+  const oldData = useRef(data);
+  const throwAfterUnmountRef = useRef(throwAfterUnmount);
   const actionFn = useCallback(
     (...args) => {
-      const promise = fn(...args);
-      startTransition(() => promise.then(setData).catch(setError));
+      const res = fn(...args);
+      const promise = typeof res === "function" ? res(oldData.current) : res;
+      startTransition(async () => {
+        try {
+          const newData = await promise;
+          if (!isMounted.current) {
+            if (throwAfterUnmountRef.current) throw new Error(unmountError);
+            return;
+          }
+          oldData.current = newData;
+          setData(newData);
+          setError(void 0);
+        } catch (e) {
+          if (!isMounted.current) {
+            if (throwAfterUnmountRef.current) {
+              if (e.message !== unmountError) throw new Error("Component is unmounted", { cause: e });
+              else throw e;
+            }
+            return;
+          }
+          setError(e);
+        } finally {
+          if (isMounted.current) {
+            setLoading(false);
+          }
+        }
+      });
       return promise;
     },
     [fn]
   );
-  return [data, actionFn, isPending, error];
+  useEffect(() => {
+    if (!fetchOnMount) return;
+    actionFn().catch((e) => console.error("Fetch on mount failed", e));
+  }, [fetchOnMount, fn, actionFn]);
+  useEffect(() => {
+    throwAfterUnmountRef.current = throwAfterUnmount;
+  }, [throwAfterUnmount]);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  });
+  return [data, actionFn, isPending || loading, error];
 }
 export {
   useFetch

package/dist/useFetch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFetch.js","sources":["../src/useFetch.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useState, useTransition } from 'react';\n\n//TODO useFetch https://use-http.com\n//TODO SWR?\n//TODO Tanstack Query?\nexport function useFetch<R>(\n    fn: (...args: any[]) => Promise<R>,\n    defaultValue: R | null = null,\n): [R | null, typeof fn, boolean, Error | undefined] {\n    // An async function was passed to useActionState, but it was dispatched outside of an action context.\n    // This is likely not what you intended. Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`\n    const [isPending, startTransition] = useTransition();\n    const [data, setData] = useState<R | null>(defaultValue);\n    const [error, setError] = useState<Error>();\n\n    const actionFn = useCallback(\n        (...args: Parameters<typeof fn>) => {\n            const promise = fn(...args);\n            // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n            startTransition(() => promise.then(setData).catch(setError)); //FIXME sub-chain...\n            return promise;\n        },\n        [fn],\n    );\n\n    return [data, actionFn, isPending, error];\n}\n"],"names":[],"mappings":";;AAOO,SAAS,SACZ,IACA,eAAyB,MACwB;AAGjD,QAAM,CAAC,WAAW,eAAe,IAAI,cAAA;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,YAAY;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAA;AAE1B,QAAM,WAAW;AAAA,IACb,IAAI,SAAgC;AAChC,YAAM,UAAU,GAAG,GAAG,IAAI;AAE1B,sBAAgB,MAAM,QAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC3D,aAAO;AAAA,IACX;AAAA,IACA,CAAC,EAAE;AAAA,EAAA;AAGP,SAAO,CAAC,MAAM,UAAU,WAAW,KAAK;AAC5C;"}
+{"version":3,"file":"useFetch.js","sources":["../src/useFetch.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState, useTransition } from 'react';\n\nconst unmountError = 'Component is unmounted after fetch completed';\n\n/**\n * TODO useFetch https://use-http.com\n * TODO SWR?\n * TODO Tanstack Query?\n *\n * Uses same return array patterns as useActionState https://react.dev/reference/react/useActionState + error,\n * reason: simple var rename\n *\n * Function can be async, then it will be awaited and result set to state.\n *\n * Function can be sync, then it will be called args, and it should return another function,which will be called with\n * old data and result set to state. This is useful for pagination and merging data.\n *\n * @param {(...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R))} fn\n * @param {any} defaultValue\n * @param fetchOnMount\n * @param throwAfterUnmount - throw if component is unmounted after fetch completed\n * @returns {[R, (...args: any[]) => Promise<R>, boolean, Error | undefined]} //, ReturnType<typeof useState>, ReturnType<typeof useState>\n */\nexport function useFetch<R>(\n    fn: (...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R),\n    defaultValue: R,\n    {\n        fetchOnMount = false,\n        throwAfterUnmount = false,\n    }: {\n        fetchOnMount?: boolean;\n        throwAfterUnmount?: boolean;\n    } = {},\n): [\n    R,\n    (...args: Parameters<typeof fn>) => Promise<R>,\n    boolean,\n    Error | undefined,\n    // ReturnType<typeof useState<R>>[1],\n    // ReturnType<typeof useState<Error>>[1],\n] {\n    // An async function was passed to useActionState, but it was dispatched outside of an action context.\n    // This is likely not what you intended. Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`\n    const [isPending, startTransition] = useTransition();\n    const [data, setData] = useState<R>(defaultValue);\n    const [error, setError] = useState<Error>();\n    const [loading, setLoading] = useState(fetchOnMount);\n    const isMounted = useRef(false);\n    const oldData = useRef(data);\n    const throwAfterUnmountRef = useRef(throwAfterUnmount);\n\n    const actionFn = useCallback(\n        (...args: Parameters<typeof fn>) => {\n            const res = fn(...args);\n\n            const promise: Promise<R> = typeof res === 'function' ? (res as any)(oldData.current) : (res as Promise<R>);\n\n            // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n            startTransition(async () => {\n                try {\n                    const newData = await promise;\n                    if (!isMounted.current) {\n                        if (throwAfterUnmountRef.current) throw new Error(unmountError);\n                        return;\n                    }\n                    oldData.current = newData;\n                    setData(newData);\n                    setError(undefined);\n                } catch (e) {\n                    if (!isMounted.current) {\n                        if (throwAfterUnmountRef.current) {\n                            if (e.message !== unmountError) throw new Error('Component is unmounted', { cause: e });\n                            else throw e;\n                        }\n                        return;\n                    }\n                    setError(e);\n                } finally {\n                    if (isMounted.current) {\n                        setLoading(false);\n                    }\n                }\n            });\n\n            return promise;\n        },\n        [fn],\n    );\n\n    useEffect(() => {\n        if (!fetchOnMount) return;\n        actionFn().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen\n    }, [fetchOnMount, fn, actionFn]);\n\n    useEffect(() => {\n        throwAfterUnmountRef.current = throwAfterUnmount;\n    }, [throwAfterUnmount]);\n\n    useEffect(() => {\n        isMounted.current = true;\n        return () => {\n            isMounted.current = false;\n        };\n    });\n\n    return [data, actionFn, isPending || loading, error]; // , setData, setError\n}\n"],"names":[],"mappings":";;AAIA,MAAM,eAAe;AAqBd,SAAS,SACZ,IACA,cACA;AAAA,EACI,eAAe;AAAA,EACf,oBAAoB;AACxB,IAGI,IAQN;AAGE,QAAM,CAAC,WAAW,eAAe,IAAI,cAAA;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAY,YAAY;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAA;AAC1B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AACnD,QAAM,YAAY,OAAO,KAAK;AAC9B,QAAM,UAAU,OAAO,IAAI;AAC3B,QAAM,uBAAuB,OAAO,iBAAiB;AAErD,QAAM,WAAW;AAAA,IACb,IAAI,SAAgC;AAChC,YAAM,MAAM,GAAG,GAAG,IAAI;AAEtB,YAAM,UAAsB,OAAO,QAAQ,aAAc,IAAY,QAAQ,OAAO,IAAK;AAGzF,sBAAgB,YAAY;AACxB,YAAI;AACA,gBAAM,UAAU,MAAM;AACtB,cAAI,CAAC,UAAU,SAAS;AACpB,gBAAI,qBAAqB,QAAS,OAAM,IAAI,MAAM,YAAY;AAC9D;AAAA,UACJ;AACA,kBAAQ,UAAU;AAClB,kBAAQ,OAAO;AACf,mBAAS,MAAS;AAAA,QACtB,SAAS,GAAG;AACR,cAAI,CAAC,UAAU,SAAS;AACpB,gBAAI,qBAAqB,SAAS;AAC9B,kBAAI,EAAE,YAAY,aAAc,OAAM,IAAI,MAAM,0BAA0B,EAAE,OAAO,GAAG;AAAA,kBACjF,OAAM;AAAA,YACf;AACA;AAAA,UACJ;AACA,mBAAS,CAAC;AAAA,QACd,UAAA;AACI,cAAI,UAAU,SAAS;AACnB,uBAAW,KAAK;AAAA,UACpB;AAAA,QACJ;AAAA,MACJ,CAAC;AAED,aAAO;AAAA,IACX;AAAA,IACA,CAAC,EAAE;AAAA,EAAA;AAGP,YAAU,MAAM;AACZ,QAAI,CAAC,aAAc;AACnB,aAAA,EAAW,MAAM,CAAC,MAAM,QAAQ,MAAM,yBAAyB,CAAC,CAAC;AAAA,EACrE,GAAG,CAAC,cAAc,IAAI,QAAQ,CAAC;AAE/B,YAAU,MAAM;AACZ,yBAAqB,UAAU;AAAA,EACnC,GAAG,CAAC,iBAAiB,CAAC;AAEtB,YAAU,MAAM;AACZ,cAAU,UAAU;AACpB,WAAO,MAAM;AACT,gBAAU,UAAU;AAAA,IACxB;AAAA,EACJ,CAAC;AAED,SAAO,CAAC,MAAM,UAAU,aAAa,SAAS,KAAK;AACvD;"}

package/dist/useFetch.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useFetch.test.d.ts.map

package/dist/useFetch.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetch.test.d.ts","sourceRoot":"","sources":["../src/useFetch.test.tsx"],"names":[],"mappings":""}

package/dist/useFetchAction.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @param {(state: Awaited<R>, payload?: any) => Promise<R> | R} action
+ * @param {R} defaultValue
+ * @param {boolean} fetchOnMount
+ * @param {string} permalink
+ * @returns {[R, (payload?: P) => Promise<R> | R, boolean]}>
+ */
+export declare function useFetchAction<S, P = undefined>(action: (state: Awaited<S>, payload?: P) => S | Promise<S>, defaultValue: Awaited<S>, { fetchOnMount, permalink, }?: {
+    fetchOnMount?: boolean;
+    permalink?: string;
+}): [S, (payload: P) => void, boolean];
+//# sourceMappingURL=useFetchAction.d.ts.map

package/dist/useFetchAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchAction.d.ts","sourceRoot":"","sources":["../src/useFetchAction.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,EAC3C,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAC1D,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,EACI,YAAoB,EACpB,SAAqB,GACxB,GAAE;IACC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACjB,GACP,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,EAAE,OAAO,CAAC,CAoBpC"}

package/dist/useFetchAction.js

@@ -0,0 +1,27 @@
+"use client";
+import { useActionState, useState, useCallback, startTransition, useEffect } from "react";
+function useFetchAction(action, defaultValue, {
+  fetchOnMount = false,
+  permalink = void 0
+} = {}) {
+  const [data, dispatchAction, isPending] = useActionState(action, defaultValue, permalink);
+  const [loading, setLoading] = useState(fetchOnMount);
+  const dispatch = useCallback(
+    (payload) => {
+      startTransition(() => {
+        dispatchAction(payload);
+        setLoading(false);
+      });
+    },
+    [dispatchAction]
+  );
+  useEffect(() => {
+    if (!fetchOnMount || !loading) return;
+    dispatch(void 0);
+  }, [fetchOnMount, dispatch, loading]);
+  return [data, dispatch, isPending || loading];
+}
+export {
+  useFetchAction
+};
+//# sourceMappingURL=useFetchAction.js.map

package/dist/useFetchAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchAction.js","sources":["../src/useFetchAction.ts"],"sourcesContent":["'use client';\n\nimport { useActionState, useCallback, useEffect, useState, startTransition } from 'react';\n\n/**\n * @param {(state: Awaited<R>, payload?: any) => Promise<R> | R} action\n * @param {R} defaultValue\n * @param {boolean} fetchOnMount\n * @param {string} permalink\n * @returns {[R, (payload?: P) => Promise<R> | R, boolean]}>\n */\nexport function useFetchAction<S, P = undefined>(\n    action: (state: Awaited<S>, payload?: P) => S | Promise<S>,\n    defaultValue: Awaited<S>,\n    {\n        fetchOnMount = false,\n        permalink = undefined,\n    }: {\n        fetchOnMount?: boolean;\n        permalink?: string;\n    } = {},\n): [S, (payload: P) => void, boolean] {\n    const [data, dispatchAction, isPending] = useActionState<S, P | undefined>(action, defaultValue, permalink);\n    const [loading, setLoading] = useState(fetchOnMount);\n\n    const dispatch = useCallback(\n        (payload?: P) => {\n            startTransition(() => {\n                dispatchAction(payload);\n                setLoading(false);\n            });\n        },\n        [dispatchAction],\n    );\n\n    useEffect(() => {\n        if (!fetchOnMount || !loading) return;\n        dispatch(undefined);\n    }, [fetchOnMount, dispatch, loading]);\n\n    return [data, dispatch, isPending || loading];\n}\n"],"names":[],"mappings":";;AAWO,SAAS,eACZ,QACA,cACA;AAAA,EACI,eAAe;AAAA,EACf,YAAY;AAChB,IAGI,IAC8B;AAClC,QAAM,CAAC,MAAM,gBAAgB,SAAS,IAAI,eAAiC,QAAQ,cAAc,SAAS;AAC1G,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AAEnD,QAAM,WAAW;AAAA,IACb,CAAC,YAAgB;AACb,sBAAgB,MAAM;AAClB,uBAAe,OAAO;AACtB,mBAAW,KAAK;AAAA,MACpB,CAAC;AAAA,IACL;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAGnB,YAAU,MAAM;AACZ,QAAI,CAAC,gBAAgB,CAAC,QAAS;AAC/B,aAAS,MAAS;AAAA,EACtB,GAAG,CAAC,cAAc,UAAU,OAAO,CAAC;AAEpC,SAAO,CAAC,MAAM,UAAU,aAAa,OAAO;AAChD;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kirill.konshin/react",
   "description": "Utilities",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "----- BUILD -----": "",
@@ -24,7 +24,13 @@
   },
   "devDependencies": {
     "@kirill.konshin/utils-private": "*",
-    "react": "^19.1.1"
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react-dom": "^19",
+    "jsdom": "^29.0.1",
+    "react": "^19.1.1",
+    "react-dom": "19.1.1"
   },
   "peerDependencies": {
     "react": "^19"
@@ -35,7 +41,8 @@
     }
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "author": "Kirill Konshin <kirill@konshin.org> (https://konshin.org)",
   "license": "MIT",
@@ -55,5 +62,10 @@
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kirill-konshin/utils.git",
+    "directory": "packages/react"
+  }
 }

package/src/index.ts

@@ -1,5 +1,5 @@
 export * from './apiCall';
 export * from './keyboard';
 export * from './useFetch';
-export * from './useFetcher';
+export * from './useFetchAction';
 export * from './form';

package/src/useFetch.test.tsx

@@ -0,0 +1,424 @@
+import { expect, describe, test, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useFetch } from './useFetch';
+import { act } from 'react';
+
+describe('useFetch', () => {
+    test('initializes with default value', () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        const [data, actionFn, isPending, error] = result.current;
+
+        expect(data).toBe('default');
+        expect(typeof actionFn).toBe('function');
+        expect(isPending).toBe(false);
+        expect(error).toBeUndefined();
+    });
+
+    test('executes function and updates data on success', async () => {
+        const mockFn = vi.fn(async () => 'success');
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[2]).toBe(false); // isPending becomes false
+        });
+
+        expect(result.current[0]).toBe('success');
+        expect(result.current[3]).toBeUndefined();
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    test('handles function arguments', async () => {
+        const mockFn = vi.fn(async (a: number, b: string) => `${a}-${b}`);
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1](42, 'test');
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('42-test');
+        });
+
+        expect(mockFn).toHaveBeenCalledWith(42, 'test');
+    });
+
+    test('sets isPending to true during execution', async () => {
+        let resolvePromise: (value: string) => void;
+        const promise = new Promise<string>((resolve) => {
+            resolvePromise = resolve;
+        });
+        const mockFn = vi.fn(async () => promise);
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        act(() => {
+            result.current[1]();
+        });
+
+        // Should be pending immediately
+        expect(result.current[2]).toBe(true);
+
+        await act(async () => {
+            resolvePromise!('resolved');
+            await promise;
+        });
+
+        await waitFor(() => {
+            expect(result.current[2]).toBe(false);
+        });
+
+        expect(result.current[0]).toBe('resolved');
+    });
+
+    test('captures and stores errors', async () => {
+        const error = new Error('Test error');
+        const mockFn = vi.fn(async () => {
+            throw error;
+        });
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[3]).toBe(error);
+        });
+
+        expect(result.current[0]).toBe('default'); // data remains unchanged
+        expect(result.current[2]).toBe(false); // isPending becomes false
+    });
+
+    test('does not update data if component unmounts before resolution', async () => {
+        let resolvePromise: (value: string) => void;
+        const promise = new Promise<string>((resolve) => {
+            resolvePromise = resolve;
+        });
+        const mockFn = vi.fn(async () => promise);
+        const { result, unmount } = renderHook(() => useFetch(mockFn, 'default'));
+
+        act(() => {
+            result.current[1]();
+        });
+
+        unmount();
+
+        await act(async () => {
+            resolvePromise!('resolved');
+            await promise;
+        });
+
+        // No assertions needed - just verifying no errors on unmount
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    test('returns the promise from actionFn', async () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        let returnedPromise: Promise<string>;
+        await act(async () => {
+            returnedPromise = result.current[1]();
+        });
+
+        await expect(returnedPromise!).resolves.toBe('result');
+    });
+
+    test('handles multiple sequential calls', async () => {
+        const mockFn = vi.fn(async (n: number) => `result-${n}`);
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1](1);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result-1');
+        });
+
+        await act(async () => {
+            result.current[1](2);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result-2');
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    test('preserves actionFn reference when fn dependency does not change', () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { result, rerender } = renderHook(() => useFetch(mockFn, 'default'));
+
+        const firstActionFn = result.current[1];
+
+        rerender();
+
+        const secondActionFn = result.current[1];
+
+        expect(firstActionFn).toBe(secondActionFn);
+    });
+
+    test('updates actionFn when fn dependency changes', async () => {
+        const mockFn1 = vi.fn(async () => 'result1');
+        const mockFn2 = vi.fn(async () => 'result2');
+
+        const { result, rerender } = renderHook(({ fn }) => useFetch(fn, 'default'), {
+            initialProps: { fn: mockFn1 },
+        });
+
+        const firstActionFn = result.current[1];
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result1');
+        });
+
+        // Change the function
+        rerender({ fn: mockFn2 });
+
+        const secondActionFn = result.current[1];
+
+        expect(firstActionFn).not.toBe(secondActionFn);
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result2');
+        });
+
+        expect(mockFn1).toHaveBeenCalledTimes(1);
+        expect(mockFn2).toHaveBeenCalledTimes(1);
+    });
+
+    test('does not trigger execution on rerender', () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { rerender } = renderHook(() => useFetch(mockFn, 'default'));
+
+        rerender();
+        rerender();
+        rerender();
+
+        expect(mockFn).not.toHaveBeenCalled();
+    });
+
+    test('handles concurrent calls correctly', async () => {
+        let callCount = 0;
+        const mockFn = vi.fn(async () => {
+            callCount++;
+            const currentCall = callCount;
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            return `result-${currentCall}`;
+        });
+
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        // Fire multiple calls at once
+        await act(async () => {
+            result.current[1]();
+            result.current[1]();
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[2]).toBe(false);
+        });
+
+        // Last call should win
+        expect(mockFn).toHaveBeenCalledTimes(3);
+        expect(['result-1', 'result-2', 'result-3']).toContain(result.current[0]);
+    });
+
+    test('maintains separate state for different hook instances', async () => {
+        const mockFn1 = vi.fn(async () => 'result1');
+        const mockFn2 = vi.fn(async () => 'result2');
+
+        const { result: result1 } = renderHook(() => useFetch(mockFn1, 'default1'));
+        const { result: result2 } = renderHook(() => useFetch(mockFn2, 'default2'));
+
+        expect(result1.current[0]).toBe('default1');
+        expect(result2.current[0]).toBe('default2');
+
+        await act(async () => {
+            result1.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result1.current[0]).toBe('result1');
+        });
+
+        expect(result2.current[0]).toBe('default2'); // unchanged
+
+        await act(async () => {
+            result2.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result2.current[0]).toBe('result2');
+        });
+
+        expect(result1.current[0]).toBe('result1'); // still unchanged
+    });
+
+    test('handles closure over external state', async () => {
+        let externalValue = 10;
+
+        const { result, rerender } = renderHook(() => {
+            const mockFn = async () => `value-${externalValue}`;
+            return useFetch(mockFn, 'default');
+        });
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('value-10');
+        });
+
+        // Change external value and rerender
+        externalValue = 20;
+        rerender();
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('value-20');
+        });
+    });
+
+    test('clears error on successful subsequent call', async () => {
+        const error = new Error('Test error');
+        let shouldError = true;
+
+        const mockFn = vi.fn(async () => {
+            if (shouldError) {
+                throw error;
+            }
+            return 'success';
+        });
+
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        // First call errors
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[3]).toBe(error);
+        });
+
+        // Second call succeeds
+        shouldError = false;
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('success');
+        });
+
+        // Error is cleared automatically
+        expect(result.current[3]).toBe(undefined);
+    });
+
+    test('handles callback that returns a function with old value', async () => {
+        const mockFn = vi.fn((increment: number) => (oldValue: number) => oldValue + increment);
+        const { result } = renderHook(() => useFetch(mockFn, 0));
+
+        // First call - should call the function with oldValue (0) and get 0 + 5 = 5
+        await act(async () => {
+            result.current[1](5);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(5);
+        });
+
+        // Second call - should call the function with oldValue (5) and get 5 + 10 = 15
+        await act(async () => {
+            result.current[1](10);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(15);
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    test('handles multiple calls with old value pattern', async () => {
+        const mockFn = vi.fn(
+            (operation: string, value: number) => (oldValue: string) => `${oldValue}-${operation}${value}`,
+        );
+        const { result } = renderHook(() => useFetch(mockFn, 'initial'));
+
+        // First call
+        await act(async () => {
+            result.current[1]('add', 1);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('initial-add1');
+        });
+
+        // Second call - should use the updated value
+        await act(async () => {
+            result.current[1]('multiply', 2);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('initial-add1-multiply2');
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    test('handles counter pattern with old value', async () => {
+        const increment = vi.fn(() => (prev: number) => prev + 1);
+        const { result } = renderHook(() => useFetch(increment, 0));
+
+        // First increment: 0 + 1 = 1
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(1);
+        });
+
+        // Second increment: 1 + 1 = 2
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(2);
+        });
+
+        // Third increment: 2 + 1 = 3
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(3);
+        });
+
+        expect(increment).toHaveBeenCalledTimes(3);
+    });
+});

package/src/useFetch.ts

@@ -1,29 +1,109 @@
 'use client';
 
-import { useCallback, useState, useTransition } from 'react';
+import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
 
-//TODO useFetch https://use-http.com
-//TODO SWR?
-//TODO Tanstack Query?
+const unmountError = 'Component is unmounted after fetch completed';
+
+/**
+ * TODO useFetch https://use-http.com
+ * TODO SWR?
+ * TODO Tanstack Query?
+ *
+ * Uses same return array patterns as useActionState https://react.dev/reference/react/useActionState + error,
+ * reason: simple var rename
+ *
+ * Function can be async, then it will be awaited and result set to state.
+ *
+ * Function can be sync, then it will be called args, and it should return another function,which will be called with
+ * old data and result set to state. This is useful for pagination and merging data.
+ *
+ * @param {(...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R))} fn
+ * @param {any} defaultValue
+ * @param fetchOnMount
+ * @param throwAfterUnmount - throw if component is unmounted after fetch completed
+ * @returns {[R, (...args: any[]) => Promise<R>, boolean, Error | undefined]} //, ReturnType<typeof useState>, ReturnType<typeof useState>
+ */
 export function useFetch<R>(
-    fn: (...args: any[]) => Promise<R>,
-    defaultValue: R | null = null,
-): [R | null, typeof fn, boolean, Error | undefined] {
+    fn: (...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R),
+    defaultValue: R,
+    {
+        fetchOnMount = false,
+        throwAfterUnmount = false,
+    }: {
+        fetchOnMount?: boolean;
+        throwAfterUnmount?: boolean;
+    } = {},
+): [
+    R,
+    (...args: Parameters<typeof fn>) => Promise<R>,
+    boolean,
+    Error | undefined,
+    // ReturnType<typeof useState<R>>[1],
+    // ReturnType<typeof useState<Error>>[1],
+] {
     // An async function was passed to useActionState, but it was dispatched outside of an action context.
     // This is likely not what you intended. Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`
     const [isPending, startTransition] = useTransition();
-    const [data, setData] = useState<R | null>(defaultValue);
+    const [data, setData] = useState<R>(defaultValue);
     const [error, setError] = useState<Error>();
+    const [loading, setLoading] = useState(fetchOnMount);
+    const isMounted = useRef(false);
+    const oldData = useRef(data);
+    const throwAfterUnmountRef = useRef(throwAfterUnmount);
 
     const actionFn = useCallback(
         (...args: Parameters<typeof fn>) => {
-            const promise = fn(...args);
+            const res = fn(...args);
+
+            const promise: Promise<R> = typeof res === 'function' ? (res as any)(oldData.current) : (res as Promise<R>);
+
             // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition
-            startTransition(() => promise.then(setData).catch(setError)); //FIXME sub-chain...
+            startTransition(async () => {
+                try {
+                    const newData = await promise;
+                    if (!isMounted.current) {
+                        if (throwAfterUnmountRef.current) throw new Error(unmountError);
+                        return;
+                    }
+                    oldData.current = newData;
+                    setData(newData);
+                    setError(undefined);
+                } catch (e) {
+                    if (!isMounted.current) {
+                        if (throwAfterUnmountRef.current) {
+                            if (e.message !== unmountError) throw new Error('Component is unmounted', { cause: e });
+                            else throw e;
+                        }
+                        return;
+                    }
+                    setError(e);
+                } finally {
+                    if (isMounted.current) {
+                        setLoading(false);
+                    }
+                }
+            });
+
             return promise;
         },
         [fn],
     );
 
-    return [data, actionFn, isPending, error];
+    useEffect(() => {
+        if (!fetchOnMount) return;
+        actionFn().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen
+    }, [fetchOnMount, fn, actionFn]);
+
+    useEffect(() => {
+        throwAfterUnmountRef.current = throwAfterUnmount;
+    }, [throwAfterUnmount]);
+
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    });
+
+    return [data, actionFn, isPending || loading, error]; // , setData, setError
 }

package/src/useFetchAction.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import { useActionState, useCallback, useEffect, useState, startTransition } from 'react';
+
+/**
+ * @param {(state: Awaited<R>, payload?: any) => Promise<R> | R} action
+ * @param {R} defaultValue
+ * @param {boolean} fetchOnMount
+ * @param {string} permalink
+ * @returns {[R, (payload?: P) => Promise<R> | R, boolean]}>
+ */
+export function useFetchAction<S, P = undefined>(
+    action: (state: Awaited<S>, payload?: P) => S | Promise<S>,
+    defaultValue: Awaited<S>,
+    {
+        fetchOnMount = false,
+        permalink = undefined,
+    }: {
+        fetchOnMount?: boolean;
+        permalink?: string;
+    } = {},
+): [S, (payload: P) => void, boolean] {
+    const [data, dispatchAction, isPending] = useActionState<S, P | undefined>(action, defaultValue, permalink);
+    const [loading, setLoading] = useState(fetchOnMount);
+
+    const dispatch = useCallback(
+        (payload?: P) => {
+            startTransition(() => {
+                dispatchAction(payload);
+                setLoading(false);
+            });
+        },
+        [dispatchAction],
+    );
+
+    useEffect(() => {
+        if (!fetchOnMount || !loading) return;
+        dispatch(undefined);
+    }, [fetchOnMount, dispatch, loading]);
+
+    return [data, dispatch, isPending || loading];
+}

package/dist/useFetcher.d.ts

@@ -1,10 +0,0 @@
-export declare function useFetcher<T = any>(cb: any, { fetchOnMount, onError }?: {
-    fetchOnMount?: boolean;
-    onError?: (e: Error) => void;
-}): {
-    loading: boolean;
-    error: Error | null;
-    data: T | null;
-    trigger: (...args: any[]) => Promise<any>;
-};
-//# sourceMappingURL=useFetcher.d.ts.map

package/dist/useFetcher.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFetcher.d.ts","sourceRoot":"","sources":["../src/useFetcher.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,CAAC,CAAC,GAAG,GAAG,EAC9B,EAAE,EAAE,GAAG,EAEP,EAAE,YAAoB,EAAE,OAAO,EAAE,GAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;CAAO,GACjG;IACC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7C,CA0CA"}

package/dist/useFetcher.js

@@ -1,43 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from "react";
-function useFetcher(cb, { fetchOnMount = false, onError } = {}) {
-  const [loading, setLoading] = useState(fetchOnMount);
-  const [error, setError] = useState(null);
-  const [data, setData] = useState(null);
-  const isMounted = useRef(false);
-  const trigger = useCallback(
-    async (...args) => {
-      try {
-        setLoading(true);
-        setError(null);
-        const res = await cb(args);
-        if (!isMounted.current) return;
-        setData(res);
-        return res;
-      } catch (e) {
-        console.error("Fetch failed", e);
-        if (!isMounted.current) return;
-        setError(e);
-        onError?.(e);
-      } finally {
-        if (isMounted.current) setLoading(false);
-      }
-    },
-    [cb, onError]
-  );
-  useEffect(() => {
-    if (fetchOnMount) {
-      trigger().catch((e) => console.error("Fetch on mount failed", e));
-    }
-  }, [fetchOnMount, cb, trigger]);
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  });
-  return { loading, error, data, trigger };
-}
-export {
-  useFetcher
-};
-//# sourceMappingURL=useFetcher.js.map

package/dist/useFetcher.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFetcher.js","sources":["../src/useFetcher.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport function useFetcher<T = any>(\n    cb: any,\n\n    { fetchOnMount = false, onError }: { fetchOnMount?: boolean; onError?: (e: Error) => void } = {},\n): {\n    loading: boolean;\n    error: Error | null;\n    data: T | null;\n    trigger: (...args: any[]) => Promise<any>;\n} {\n    const [loading, setLoading] = useState(fetchOnMount);\n    const [error, setError] = useState<Error | null>(null);\n    const [data, setData] = useState<T | null>(null);\n\n    const isMounted = useRef(false);\n\n    const trigger = useCallback(\n        async (...args: any[]): Promise<any> => {\n            try {\n                setLoading(true);\n                setError(null);\n                const res = await cb(args);\n                if (!isMounted.current) return;\n                setData(res);\n                return res;\n            } catch (e) {\n                console.error('Fetch failed', e);\n                if (!isMounted.current) return;\n                setError(e);\n                (onError as any)?.(e);\n            } finally {\n                if (isMounted.current) setLoading(false);\n            }\n        },\n        [cb, onError],\n    );\n\n    useEffect(() => {\n        if (fetchOnMount) {\n            trigger().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen\n        }\n    }, [fetchOnMount, cb, trigger]);\n\n    useEffect(() => {\n        isMounted.current = true;\n        return () => {\n            isMounted.current = false;\n        };\n    });\n\n    return { loading, error, data, trigger };\n}\n"],"names":[],"mappings":";AAEO,SAAS,WACZ,IAEA,EAAE,eAAe,OAAO,QAAA,IAAsE,IAMhG;AACE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,IAAI;AACrD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,IAAI;AAE/C,QAAM,YAAY,OAAO,KAAK;AAE9B,QAAM,UAAU;AAAA,IACZ,UAAU,SAA8B;AACpC,UAAI;AACA,mBAAW,IAAI;AACf,iBAAS,IAAI;AACb,cAAM,MAAM,MAAM,GAAG,IAAI;AACzB,YAAI,CAAC,UAAU,QAAS;AACxB,gBAAQ,GAAG;AACX,eAAO;AAAA,MACX,SAAS,GAAG;AACR,gBAAQ,MAAM,gBAAgB,CAAC;AAC/B,YAAI,CAAC,UAAU,QAAS;AACxB,iBAAS,CAAC;AACT,kBAAkB,CAAC;AAAA,MACxB,UAAA;AACI,YAAI,UAAU,QAAS,YAAW,KAAK;AAAA,MAC3C;AAAA,IACJ;AAAA,IACA,CAAC,IAAI,OAAO;AAAA,EAAA;AAGhB,YAAU,MAAM;AACZ,QAAI,cAAc;AACd,cAAA,EAAU,MAAM,CAAC,MAAM,QAAQ,MAAM,yBAAyB,CAAC,CAAC;AAAA,IACpE;AAAA,EACJ,GAAG,CAAC,cAAc,IAAI,OAAO,CAAC;AAE9B,YAAU,MAAM;AACZ,cAAU,UAAU;AACpB,WAAO,MAAM;AACT,gBAAU,UAAU;AAAA,IACxB;AAAA,EACJ,CAAC;AAED,SAAO,EAAE,SAAS,OAAO,MAAM,QAAA;AACnC;"}

package/src/useFetcher.ts

@@ -1,54 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-export function useFetcher<T = any>(
-    cb: any,
-
-    { fetchOnMount = false, onError }: { fetchOnMount?: boolean; onError?: (e: Error) => void } = {},
-): {
-    loading: boolean;
-    error: Error | null;
-    data: T | null;
-    trigger: (...args: any[]) => Promise<any>;
-} {
-    const [loading, setLoading] = useState(fetchOnMount);
-    const [error, setError] = useState<Error | null>(null);
-    const [data, setData] = useState<T | null>(null);
-
-    const isMounted = useRef(false);
-
-    const trigger = useCallback(
-        async (...args: any[]): Promise<any> => {
-            try {
-                setLoading(true);
-                setError(null);
-                const res = await cb(args);
-                if (!isMounted.current) return;
-                setData(res);
-                return res;
-            } catch (e) {
-                console.error('Fetch failed', e);
-                if (!isMounted.current) return;
-                setError(e);
-                (onError as any)?.(e);
-            } finally {
-                if (isMounted.current) setLoading(false);
-            }
-        },
-        [cb, onError],
-    );
-
-    useEffect(() => {
-        if (fetchOnMount) {
-            trigger().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen
-        }
-    }, [fetchOnMount, cb, trigger]);
-
-    useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    });
-
-    return { loading, error, data, trigger };
-}