@kirill.konshin/react 0.0.3 → 0.0.4

package/.turbo/turbo-build.log

@@ -12,14 +12,19 @@ transforming...
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
-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/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 2092ms.
+src/index.ts:4:15 - error TS2307: Cannot find module './useFetcher' or its corresponding type declarations.
 
-✓ built in 6.76s
+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,11 @@
 # @kirill.konshin/react
 
+## 0.0.4
+
+### Patch Changes
+
+- useFetchAction
+
 ## 0.0.3
 
 ### Patch Changes

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/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.3",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "----- BUILD -----": "",

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/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 };
-}