@kirill.konshin/react 0.0.4 → 0.0.6

package/dist/keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.js","sources":["../src/keyboard.tsx"],"sourcesContent":["'use client';\n\nimport {\n    useEffect,\n    createContext,\n    useMemo,\n    useState,\n    Dispatch,\n    SetStateAction,\n    useContext,\n    FC,\n    memo,\n    Context,\n} from 'react';\n\nconst isCtrlOrMeta = (e: KeyboardEvent) => e.metaKey || e.ctrlKey;\n\nconst EVENT = 'keydown';\n\nexport type Hotkeys = Record<KeyboardEvent['code'], (e: KeyboardEvent) => void>;\n\nexport type HotkeyContextType = {\n    enabled: boolean;\n    setEnabled: Dispatch<SetStateAction<boolean>>;\n};\n\nexport const HotkeysContext: Context<HotkeyContextType> = createContext<{\n    enabled: boolean;\n    setEnabled: Dispatch<SetStateAction<boolean>>;\n}>(null as never);\n\nexport type HotkeysProviderProps = {\n    children: any;\n};\n\nexport const HotkeysProvider: FC<HotkeysProviderProps> = memo(function HotkeysProvider({ children }) {\n    const [enabled, setEnabled] = useState(true);\n\n    const control = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);\n\n    return <HotkeysContext.Provider value={control}>{children}</HotkeysContext.Provider>;\n});\n\nexport const useHotkeys = (hotkeys: Hotkeys): void => {\n    const { enabled } = useContext(HotkeysContext);\n\n    useEffect(() => {\n        if (typeof document === 'undefined' || !enabled) {\n            return;\n        }\n\n        const ctrl = new AbortController();\n\n        window.addEventListener(\n            EVENT,\n            (e: KeyboardEvent) => {\n                if (!isCtrlOrMeta(e)) return;\n\n                for (const [code, callback] of Object.entries(hotkeys)) {\n                    if (e.code === code) {\n                        callback(e);\n                        return;\n                    }\n                }\n            },\n            { signal: ctrl.signal, capture: true },\n        );\n\n        return () => {\n            ctrl.abort();\n        };\n    }, [hotkeys, enabled]);\n};\n"],"names":["HotkeysProvider"],"mappings":";;;AAeA,MAAM,eAAe,CAAC,MAAqB,EAAE,WAAW,EAAE;AAE1D,MAAM,QAAQ;AASP,MAAM,iBAA6C,cAGvD,IAAa;AAMT,MAAM,kBAA4C,KAAK,SAASA,iBAAgB,EAAE,YAAY;AACjG,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAE3C,QAAM,UAAU,QAAQ,OAAO,EAAE,SAAS,eAAe,CAAC,SAAS,UAAU,CAAC;AAE9E,6BAAQ,eAAe,UAAf,EAAwB,OAAO,SAAU,UAAS;AAC9D,CAAC;AAEM,MAAM,aAAa,CAAC,YAA2B;AAClD,QAAM,EAAE,QAAA,IAAY,WAAW,cAAc;AAE7C,YAAU,MAAM;AACZ,QAAI,OAAO,aAAa,eAAe,CAAC,SAAS;AAC7C;AAAA,IACJ;AAEA,UAAM,OAAO,IAAI,gBAAA;AAEjB,WAAO;AAAA,MACH;AAAA,MACA,CAAC,MAAqB;AAClB,YAAI,CAAC,aAAa,CAAC,EAAG;AAEtB,mBAAW,CAAC,MAAM,QAAQ,KAAK,OAAO,QAAQ,OAAO,GAAG;AACpD,cAAI,EAAE,SAAS,MAAM;AACjB,qBAAS,CAAC;AACV;AAAA,UACJ;AAAA,QACJ;AAAA,MACJ;AAAA,MACA,EAAE,QAAQ,KAAK,QAAQ,SAAS,KAAA;AAAA,IAAK;AAGzC,WAAO,MAAM;AACT,WAAK,MAAA;AAAA,IACT;AAAA,EACJ,GAAG,CAAC,SAAS,OAAO,CAAC;AACzB;"}
+{"version":3,"file":"keyboard.js","names":[],"sources":["../src/keyboard.tsx"],"sourcesContent":["'use client';\n\nimport {\n    useEffect,\n    createContext,\n    useMemo,\n    useState,\n    type Dispatch,\n    type SetStateAction,\n    useContext,\n    type FC,\n    memo,\n    type Context,\n} from 'react';\n\nconst isCtrlOrMeta = (e: KeyboardEvent) => e.metaKey || e.ctrlKey;\n\nconst EVENT = 'keydown';\n\nexport type Hotkeys = Record<KeyboardEvent['code'], (e: KeyboardEvent) => void>;\n\nexport type HotkeyContextType = {\n    enabled: boolean;\n    setEnabled: Dispatch<SetStateAction<boolean>>;\n};\n\nexport const HotkeysContext: Context<HotkeyContextType> = createContext<{\n    enabled: boolean;\n    setEnabled: Dispatch<SetStateAction<boolean>>;\n}>(null as never);\n\nexport type HotkeysProviderProps = {\n    children: any;\n};\n\nexport const HotkeysProvider: FC<HotkeysProviderProps> = memo(function HotkeysProvider({ children }) {\n    const [enabled, setEnabled] = useState(true);\n\n    const control = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);\n\n    return <HotkeysContext.Provider value={control}>{children}</HotkeysContext.Provider>;\n});\n\nexport const useHotkeys = (hotkeys: Hotkeys): void => {\n    const { enabled } = useContext(HotkeysContext);\n\n    useEffect(() => {\n        if (typeof document === 'undefined' || !enabled) {\n            return;\n        }\n\n        const ctrl = new AbortController();\n\n        window.addEventListener(\n            EVENT,\n            (e: KeyboardEvent) => {\n                if (!isCtrlOrMeta(e)) return;\n\n                for (const [code, callback] of Object.entries(hotkeys)) {\n                    if (e.code === code) {\n                        callback(e);\n                        return;\n                    }\n                }\n            },\n            { signal: ctrl.signal, capture: true },\n        );\n\n        return () => {\n            ctrl.abort();\n        };\n    }, [hotkeys, enabled]);\n};\n"],"mappings":";;;;AAeA,IAAM,gBAAgB,MAAqB,EAAE,WAAW,EAAE;AAE1D,IAAM,QAAQ;AASd,IAAa,iBAA6C,cAGvD,IAAa;AAMhB,IAAa,kBAA4C,KAAK,SAAS,gBAAgB,EAAE,YAAY;CACjG,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAE3C,MAAM,UAAU,eAAe;EAAE;EAAS;CAAW,IAAI,CAAC,SAAS,UAAU,CAAC;CAE9E,OAAO,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAAU;CAAkC,CAAA;AACvF,CAAC;AAED,IAAa,cAAc,YAA2B;CAClD,MAAM,EAAE,YAAY,WAAW,cAAc;CAE7C,gBAAgB;EACZ,IAAI,OAAO,aAAa,eAAe,CAAC,SACpC;EAGJ,MAAM,OAAO,IAAI,gBAAgB;EAEjC,OAAO,iBACH,QACC,MAAqB;GAClB,IAAI,CAAC,aAAa,CAAC,GAAG;GAEtB,KAAK,MAAM,CAAC,MAAM,aAAa,OAAO,QAAQ,OAAO,GACjD,IAAI,EAAE,SAAS,MAAM;IACjB,SAAS,CAAC;IACV;GACJ;EAER,GACA;GAAE,QAAQ,KAAK;GAAQ,SAAS;EAAK,CACzC;EAEA,aAAa;GACT,KAAK,MAAM;EACf;CACJ,GAAG,CAAC,SAAS,OAAO,CAAC;AACzB"}

package/dist/useFetch.js

@@ -1,66 +1,85 @@
 "use client";
-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 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]
-  );
-  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];
+import { useCallback, useEffect, useRef, useState, useTransition } from "react";
+//#region src/useFetch.ts
+var 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>
+*/
+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 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]);
+	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
-};
-//# sourceMappingURL=useFetch.js.map
+//#endregion
+export { useFetch };
+
+//# sourceMappingURL=useFetch.js.map

package/dist/useFetch.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"useFetch.js","names":[],"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"],"mappings":";;;AAIA,IAAM,eAAe;;;;;;;;;;;;;;;;;;;;AAqBrB,SAAgB,SACZ,IACA,cACA,EACI,eAAe,OACf,oBAAoB,UAIpB,CAAC,GAQP;CAGE,MAAM,CAAC,WAAW,mBAAmB,cAAc;CACnD,MAAM,CAAC,MAAM,WAAW,SAAY,YAAY;CAChD,MAAM,CAAC,OAAO,YAAY,SAAgB;CAC1C,MAAM,CAAC,SAAS,cAAc,SAAS,YAAY;CACnD,MAAM,YAAY,OAAO,KAAK;CAC9B,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,uBAAuB,OAAO,iBAAiB;CAErD,MAAM,WAAW,aACZ,GAAG,SAAgC;EAChC,MAAM,MAAM,GAAG,GAAG,IAAI;EAEtB,MAAM,UAAsB,OAAO,QAAQ,aAAc,IAAY,QAAQ,OAAO,IAAK;EAGzF,gBAAgB,YAAY;GACxB,IAAI;IACA,MAAM,UAAU,MAAM;IACtB,IAAI,CAAC,UAAU,SAAS;KACpB,IAAI,qBAAqB,SAAS,MAAM,IAAI,MAAM,YAAY;KAC9D;IACJ;IACA,QAAQ,UAAU;IAClB,QAAQ,OAAO;IACf,SAAS,KAAA,CAAS;GACtB,SAAS,GAAG;IACR,IAAI,CAAC,UAAU,SAAS;KACpB,IAAI,qBAAqB,SACrB,IAAI,EAAE,YAAY,cAAc,MAAM,IAAI,MAAM,0BAA0B,EAAE,OAAO,EAAE,CAAC;UACjF,MAAM;KAEf;IACJ;IACA,SAAS,CAAC;GACd,UAAU;IACN,IAAI,UAAU,SACV,WAAW,KAAK;GAExB;EACJ,CAAC;EAED,OAAO;CACX,GACA,CAAC,EAAE,CACP;CAEA,gBAAgB;EACZ,IAAI,CAAC,cAAc;EACnB,SAAS,CAAC,CAAC,OAAO,MAAM,QAAQ,MAAM,yBAAyB,CAAC,CAAC;CACrE,GAAG;EAAC;EAAc;EAAI;CAAQ,CAAC;CAE/B,gBAAgB;EACZ,qBAAqB,UAAU;CACnC,GAAG,CAAC,iBAAiB,CAAC;CAEtB,gBAAgB;EACZ,UAAU,UAAU;EACpB,aAAa;GACT,UAAU,UAAU;EACxB;CACJ,CAAC;CAED,OAAO;EAAC;EAAM;EAAU,aAAa;EAAS;CAAK;AACvD"}

package/dist/useFetchAction.js

@@ -1,27 +1,37 @@
 "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];
+import { startTransition, useActionState, useCallback, useEffect, useState } from "react";
+//#region src/useFetchAction.ts
+/**
+* @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]}>
+*/
+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
+//#endregion
+export { useFetchAction };
+
+//# sourceMappingURL=useFetchAction.js.map

package/dist/useFetchAction.js.map

@@ -1 +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;"}
+{"version":3,"file":"useFetchAction.js","names":[],"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"],"mappings":";;;;;;;;;;AAWA,SAAgB,eACZ,QACA,cACA,EACI,eAAe,OACf,YAAY,KAAA,MAIZ,CAAC,GAC6B;CAClC,MAAM,CAAC,MAAM,gBAAgB,aAAa,eAAiC,QAAQ,cAAc,SAAS;CAC1G,MAAM,CAAC,SAAS,cAAc,SAAS,YAAY;CAEnD,MAAM,WAAW,aACZ,YAAgB;EACb,sBAAsB;GAClB,eAAe,OAAO;GACtB,WAAW,KAAK;EACpB,CAAC;CACL,GACA,CAAC,cAAc,CACnB;CAEA,gBAAgB;EACZ,IAAI,CAAC,gBAAgB,CAAC,SAAS;EAC/B,SAAS,KAAA,CAAS;CACtB,GAAG;EAAC;EAAc;EAAU;CAAO,CAAC;CAEpC,OAAO;EAAC;EAAM;EAAU,aAAa;CAAO;AAChD"}

package/package.json

@@ -1,18 +1,16 @@
 {
   "name": "@kirill.konshin/react",
   "description": "Utilities",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "----- BUILD -----": "",
     "clean": "rm -rf dist .tscache tsconfig.tsbuildinfo",
     "build": "vite build",
-    "build:index": "ctix build",
-    "build:check-types": "attw --pack .",
     "start": "yarn build --watch",
     "wait": "wait-on ./dist/index.js",
     "----- TEST -----": "",
-    "test:disabled": "vitest run --coverage",
+    "test": "vitest run --coverage",
     "test:watch": "vitest watch --coverage",
     "----- STORYBOOK -----": "",
     "storybook:start": "storybook dev -p 6006",
@@ -41,8 +39,7 @@
     }
   },
   "publishConfig": {
-    "access": "public",
-    "provenance": true
+    "access": "public"
   },
   "author": "Kirill Konshin <kirill@konshin.org> (https://konshin.org)",
   "license": "MIT",
@@ -67,5 +64,13 @@
     "type": "git",
     "url": "https://github.com/kirill-konshin/utils.git",
     "directory": "packages/react"
-  }
+  },
+  "nx": {
+    "tags": [
+      "platform:react"
+    ]
+  },
+  "files": [
+    "dist"
+  ]
 }

package/.ctirc

@@ -1,20 +0,0 @@
-{
-  "options": [
-    {
-      "mode": "create",
-      "project": "tsconfig.json",
-      "include": "src/**/*.{ts,tsx}",
-      "exclude": [
-        "**/*.stories.*",
-        "**/*.test.*",
-        "**/*.fixture.*"
-      ],
-      "startFrom": "src",
-      "backup": false,
-      "overwrite": true,
-      "generationStyle": "default-alias-named-star",
-      "output": "src",
-      "verbose": true
-    }
-  ]
-}

package/.turbo/turbo-build.log

@@ -1,30 +0,0 @@
-vite v7.0.6 building SSR bundle for production...
-- ctix 'create' mode start, ...
-✔ /home/runner/work/utils/utils/packages/react/tsconfig.json loading complete!
-✔ analysis export statements completed!
-- build "index.ts" file start
-- output file exists check, ...
-
-
-✔ ctix 'create' mode complete!
-transforming...
-✓ 8 modules transformed.
-rendering chunks...
-
-[vite:dts] Start generate declaration files...
-src/index.ts:4:15 - error TS2307: Cannot find module './useFetcher' or its corresponding type declarations.
-
-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,20 +0,0 @@
-# @kirill.konshin/react
-
-## 0.0.4
-
-### Patch Changes
-
-- useFetchAction
-
-## 0.0.3
-
-### Patch Changes
-
-- Minor fixes
-
-## 0.0.2
-
-### Patch Changes
-
-- 63fdba8: Agent-assisted refactoring
-- 63fdba8: Divided core to browser/node/worker-specific packages, CTIX upgrade, etc.

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/src/apiCall.ts

@@ -1,25 +0,0 @@
-export const jsonContentType = 'application/json';
-
-export type DataResponse<R> = Response & { data?: R };
-
-export async function apiCall<R>(url: string, init?: RequestInit): Promise<DataResponse<R>> {
-    const useBodyAsIs = !init?.body || init?.body instanceof FormData || typeof init?.body === 'string';
-
-    const res: DataResponse<R> = await fetch(url, {
-        method: 'POST',
-        ...init,
-        body: useBodyAsIs ? init?.body : JSON.stringify(init.body),
-        headers: {
-            ...init?.headers,
-            ...(useBodyAsIs ? {} : { 'Content-Type': jsonContentType }),
-        },
-    });
-
-    if (res.headers.get('Content-Type')?.includes(jsonContentType)) {
-        res.data = await res.json();
-    }
-
-    if (!res.ok) throw new Error(res.statusText, { cause: res });
-
-    return res;
-}

package/src/form/client.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import { useActionState, useCallback, useState, useTransition } from 'react';
-import { create, MaybeTypeOf, Validation } from './form';
-import { z } from 'zod';
-
-const FORM_DEBUG = process.env.NEXT_PUBLIC_FORM_DEBUG === 'true';
-
-export function createClient<S extends z.ZodObject<any>>(
-    schema: S,
-): {
-    useValidation: (
-        actionFn: (data: FormData) => Promise<Validation<S>>,
-        initialData?: MaybeTypeOf<S>,
-    ) => [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean];
-    useValidationTransition: (
-        actionFn: (data: FormData) => Promise<Validation<S>>,
-        initialData?: MaybeTypeOf<S>,
-    ) => [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean];
-} {
-    const { validate } = create(schema);
-
-    function useValidationCallback(
-        actionFn: (data: FormData) => Promise<Validation<S>>,
-    ): (formData: FormData) => Promise<Validation<S>> {
-        return useCallback(
-            async (formData: FormData) => {
-                const clientRes = validate(formData);
-                console.log('Client validation', FORM_DEBUG ? 'ignored' : 'active', clientRes);
-                if (!clientRes.success && !FORM_DEBUG) return clientRes;
-
-                const serverRes = await actionFn(formData);
-                console.log('Server validation', serverRes);
-                return serverRes;
-            },
-            [actionFn],
-        );
-    }
-
-    function useValidation(
-        actionFn: (data: FormData) => Promise<Validation<S>>,
-        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,
-    ): [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean] {
-        const cb = useValidationCallback(actionFn);
-
-        return useActionState<Validation<S>, FormData>(async (_, data) => cb(data), {
-            success: false,
-            data: initialData,
-        });
-    }
-
-    function useValidationTransition(
-        actionFn: (data: FormData) => Promise<Validation<S>>,
-        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,
-    ): [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean] {
-        const [isPending, startTransition] = useTransition();
-        const [state, setState] = useState<Validation<S>>({ success: false, data: initialData });
-        const cb = useValidationCallback(actionFn);
-
-        const wrappedCb = useCallback(
-            (formData: FormData) => {
-                const promise = cb(formData);
-                startTransition(() => promise.then(setState));
-                return promise;
-            },
-            [cb, startTransition],
-        );
-
-        return [state, wrappedCb, isPending];
-    }
-
-    return { useValidation, useValidationTransition };
-}