@sohanemon/utils 5.2.2 → 5.2.4

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 export { Icon as Iconify } from '@iconify/react';
-export * from './html-injector';
-export * from './media-wrapper';
+export { HtmlInjector } from './html-injector';
+export { MediaWrapper } from './media-wrapper';
 export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from './responsive-indicator';
-export * from './scrollable-marker';
+export { ScrollableMarker } from './scrollable-marker';

package/dist/components/index.js

@@ -1,6 +1,7 @@
 'use client';
+//NOTE: It's currently unsupported to use "export *" in a client boundary
 export { Icon as Iconify } from '@iconify/react';
-export * from './html-injector';
-export * from './media-wrapper';
+export { HtmlInjector } from './html-injector';
+export { MediaWrapper } from './media-wrapper';
 export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from './responsive-indicator';
-export * from './scrollable-marker';
+export { ScrollableMarker } from './scrollable-marker';

package/dist/hooks/async.d.ts

@@ -1,17 +1,30 @@
-interface UseAsyncOptions<T extends (...args: any) => any> {
-    initialArgs?: Parameters<T>[0];
-    callback?: {
-        onSuccess?: (result: T) => void;
-        onError?: (error: Error) => void;
-        onExecute?: () => void;
-        onSettle?: () => void;
-    };
-    mode?: 'onLoad' | 'onTrigger';
+import * as React from 'react';
+type AsyncStatus = 'idle' | 'pending' | 'success' | 'error';
+type OnSuccess<TData> = (data: TData) => void | Promise<void>;
+type OnError<TError extends Error = Error> = (error: TError) => void | Promise<void>;
+type OnSettled<TData, TError extends Error = Error> = (data: TData | undefined, error: TError | undefined) => void | Promise<void>;
+interface UseAsyncOptions<TData = unknown, TError extends Error = Error> {
+    mode?: 'auto' | 'manual';
+    deps?: React.DependencyList;
+    onSuccess?: OnSuccess<TData>;
+    onError?: OnError<TError>;
+    onSettled?: OnSettled<TData, TError>;
 }
-export declare const useAsync: <T extends (...args: any) => any>(fn: T, opts?: UseAsyncOptions<T>) => {
-    execute: (args: Parameters<T>[0]) => Promise<void>;
-    isLoading: boolean;
-    result: Awaited<ReturnType<T>>;
-    error: Error;
-};
+interface UseAsyncReturn<TData, TError extends Error = Error> {
+    data: TData | undefined;
+    error: TError | undefined;
+    status: AsyncStatus;
+    isIdle: boolean;
+    isPending: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    execute: () => Promise<TData>;
+}
+/**
+ * A fully typesafe async hook inspired by TanStack Query
+ * @param asyncFn - Async function that returns data
+ * @param options - Configuration options including callbacks
+ * @returns Object with data, error, status and helper methods
+ */
+export declare function useAsync<TData, TError extends Error = Error>(asyncFn: () => Promise<TData>, options?: UseAsyncOptions<TData, TError>): UseAsyncReturn<TData, TError>;
 export {};

package/dist/hooks/async.js

@@ -1,44 +1,72 @@
-import { useCallback, useState, useTransition } from 'react';
-import { useIsomorphicEffect } from '.';
-export const useAsync = (fn, opts = {}) => {
-    const { initialArgs, callback = {}, mode = 'onTrigger' } = opts;
-    const { onSuccess, onError, onExecute, onSettle } = callback;
-    const [isLoading, setIsLoading] = useState(false);
-    const [result, setValue] = useState(null);
-    const [error, setError] = useState(null);
-    const [isPending, startTransition] = useTransition();
-    const execute = useCallback(async (args) => {
-        setIsLoading(true);
-        setValue(null);
-        setError(null);
-        onExecute?.();
+'use client';
+import * as React from 'react';
+/**
+ * A fully typesafe async hook inspired by TanStack Query
+ * @param asyncFn - Async function that returns data
+ * @param options - Configuration options including callbacks
+ * @returns Object with data, error, status and helper methods
+ */
+export function useAsync(asyncFn, options = {}) {
+    const { mode = 'manual', deps, onSuccess, onError, onSettled } = options;
+    const [data, setData] = React.useState(undefined);
+    const [error, setError] = React.useState(undefined);
+    const [status, setStatus] = React.useState('idle');
+    const isMountedRef = React.useRef(true);
+    const memoizedOnSuccess = React.useCallback(onSuccess || (() => { }), [
+        onSuccess,
+    ]);
+    const memoizedOnError = React.useCallback(onError || (() => { }), [onError]);
+    const memoizedOnSettled = React.useCallback(onSettled || (() => { }), [
+        onSettled,
+    ]);
+    const execute = React.useCallback(async () => {
+        setStatus('pending');
+        setError(undefined);
         try {
-            startTransition(() => {
-                (async () => {
-                    const response = await fn(args);
-                    setValue(response);
-                    onSuccess?.(response);
-                })();
-            });
+            const result = await asyncFn();
+            if (isMountedRef.current) {
+                setData(result);
+                setStatus('success');
+                await memoizedOnSuccess(result);
+                await memoizedOnSettled(result, undefined);
+            }
+            return result;
         }
-        catch (error) {
-            setError(error);
-            onError?.(error);
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            const typedError = error;
+            if (isMountedRef.current) {
+                setError(typedError);
+                setStatus('error');
+                await memoizedOnError(typedError);
+                await memoizedOnSettled(undefined, typedError);
+            }
+            throw error;
         }
-        finally {
-            setIsLoading(false);
-            onSettle?.();
-        }
-    }, [fn, onExecute, onSuccess, onError, onSettle]);
-    useIsomorphicEffect(() => {
-        if (mode === 'onLoad') {
-            execute(initialArgs);
+    }, [asyncFn, memoizedOnSuccess, memoizedOnError, memoizedOnSettled]);
+    React.useEffect(() => {
+        if (mode === 'auto') {
+            execute();
         }
+    }, [asyncFn, mode, execute]);
+    React.useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
+        };
     }, []);
+    React.useEffect(() => {
+        if (deps && mode === 'auto') {
+            execute();
+        }
+    }, deps ? deps : []);
     return {
-        execute,
-        isLoading: isLoading || isPending,
-        result,
+        data,
         error,
+        status,
+        isIdle: status === 'idle',
+        isPending: status === 'pending',
+        isSuccess: status === 'success',
+        isError: status === 'error',
+        execute,
     };
-};
+}

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export * from './action';
+export * from './async';
 export * from './schedule';
 /**
  * Hook to detect clicks outside of a referenced element.

package/dist/hooks/index.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { copyToClipboard } from '../functions';
 export * from './action';
+export * from './async';
 export * from './schedule';
 /**
  * Hook to detect clicks outside of a referenced element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "5.2.2",
+  "version": "5.2.4",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",

package/dist/context/scrollable-marker.d.ts

@@ -1 +0,0 @@
-export declare function ScrollableMarker(): any;

package/dist/context/scrollable-marker.js

@@ -1,56 +0,0 @@
-'use client';
-import { useScheduledEffect } from '../hooks/schedule';
-export function ScrollableMarker() {
-    useScheduledEffect(() => {
-        const root = document.body;
-        if (!root)
-            return;
-        const isScrollable = (el) => {
-            const style = getComputedStyle(el);
-            if (style.overflow === 'hidden' &&
-                style.overflowY === 'hidden' &&
-                style.overflowX === 'hidden')
-                return false;
-            const canScrollY = (style.overflowY === 'auto' || style.overflowY === 'scroll') &&
-                el.scrollHeight > el.clientHeight;
-            const canScrollX = (style.overflowX === 'auto' || style.overflowX === 'scroll') &&
-                el.scrollWidth > el.clientWidth;
-            return canScrollY || canScrollX;
-        };
-        const markScrollable = (el) => {
-            if (isScrollable(el))
-                el.dataset.scrollable = 'true';
-            else
-                delete el.dataset.scrollable;
-        };
-        const scanTree = (node) => {
-            markScrollable(node);
-            for (let i = 0; i < node.children.length; i++) {
-                const child = node.children[i];
-                scanTree(child);
-            }
-        };
-        requestIdleCallback(() => scanTree(root));
-        const observer = new MutationObserver((mutations) => {
-            for (const m of mutations) {
-                if (m.type === 'childList') {
-                    m.addedNodes.forEach((n) => {
-                        if (n instanceof HTMLElement)
-                            scanTree(n);
-                    });
-                }
-                else if (m.type === 'attributes' && m.target instanceof HTMLElement) {
-                    markScrollable(m.target);
-                }
-            }
-        });
-        observer.observe(root, {
-            subtree: true,
-            childList: true,
-            attributes: true,
-            attributeFilter: ['style', 'class'],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return null;
-}