@ilokesto/utilinent 0.0.24 → 0.0.25

package/dist/{experimental → components}/Slot.js

@@ -40,9 +40,15 @@ export const Slot = forwardRef((props, ref) => {
     const childrenArray = Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
     if (slottable) {
-        const newElement = cloneElement(slottable, {
-            ...mergeProps(slotProps, slottable.props),
-            ref: composeRefs(ref, slottable.ref)
+        // Slottable의 children을 가져와서 병합
+        const slottableChild = slottable.props.children;
+        if (!isValidElement(slottableChild)) {
+            return null;
+        }
+        const newElement = cloneElement(slottableChild, {
+            ...mergeProps(slotProps, slottableChild.props),
+            ref: ref ? composeRefs(ref, slottableChild.ref) : slottableChild.ref,
+            key: slottable.key
         });
         const newChildren = childrenArray.map((child) => {
             if (child === slottable) {
@@ -58,7 +64,7 @@ export const Slot = forwardRef((props, ref) => {
     }
     return cloneElement(child, {
         ...mergeProps(slotProps, child.props),
-        ref: composeRefs(ref, child.ref)
+        ref: ref ? composeRefs(ref, child.ref) : child.ref
     });
 });
 function isSlottable(child) {

package/dist/experimental/Slacker.d.ts

@@ -1,73 +1,2 @@
 import { SlackerProps } from "../types";
-/**
- * Slacker 컴포넌트 - Lazy Loading 전용
- *
- * 뷰포트에 보이지 않을 때는 fallback을 표시하고,
- * 뷰포트에 들어오면 loader를 실행하여 데이터를 로드한 후
- * children 함수에 로드된 데이터를 전달하여 렌더링합니다.
- * 한 번 로드되면 다시 되돌리지 않습니다 (triggerOnce=true).
- *
- * @example
- * ```tsx
- * // 컴포넌트 lazy loading
- * <Slacker
- *   fallback={<ChartSkeleton />}
- *   loader={async () => {
- *     const { HeavyChart } = await import('./HeavyChart');
- *     return HeavyChart;
- *   }}
- * >
- *   {(Component) => <Component data={data} />}
- * </Slacker>
- *
- * // 데이터 lazy loading
- * <Slacker
- *   fallback={<div>Loading data...</div>}
- *   loader={async () => {
- *     const response = await fetch('/api/data');
- *     return response.json();
- *   }}
- * >
- *   {(data) => (
- *     <div>
- *       <h2>{data.title}</h2>
- *       <p>{data.description}</p>
- *     </div>
- *   )}
- * </Slacker>
- *
- * // 라이브러리와 데이터 함께 로딩
- * <Slacker
- *   fallback={<div>Loading chart library...</div>}
- *   loader={async () => {
- *     const [{ Chart }, chartData] = await Promise.all([
- *       import('chart.js'),
- *       fetch('/api/chart-data').then(r => r.json())
- *     ]);
- *     return { Chart, data: chartData };
- *   }}
- * >
- *   {({ Chart, data }) => <Chart data={data} />}
- * </Slacker>
- *
- * // 이미지와 메타데이터 함께 로딩
- * <Slacker
- *   fallback={<ImageSkeleton />}
- *   loader={async () => {
- *     const [imageUrl, metadata] = await Promise.all([
- *       loadHighResImage(id),
- *       fetch(`/api/images/${id}/metadata`).then(r => r.json())
- *     ]);
- *     return { imageUrl, metadata };
- *   }}
- * >
- *   {({ imageUrl, metadata }) => (
- *     <div>
- *       <img src={imageUrl} alt={metadata.title} />
- *       <p>{metadata.description}</p>
- *     </div>
- *   )}
- * </Slacker>
- * ```
- */
-export declare function Slacker({ children, fallback, loader, threshold, rootMargin, }: SlackerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slacker<T = any>({ children, errorFallback, loadingFallback, loader, threshold, rootMargin, onError, maxRetries, retryDelay, }: SlackerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/experimental/Slacker.js

@@ -1,96 +1,62 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Observer } from "../components/Observer";
-/**
- * Slacker 컴포넌트 - Lazy Loading 전용
- *
- * 뷰포트에 보이지 않을 때는 fallback을 표시하고,
- * 뷰포트에 들어오면 loader를 실행하여 데이터를 로드한 후
- * children 함수에 로드된 데이터를 전달하여 렌더링합니다.
- * 한 번 로드되면 다시 되돌리지 않습니다 (triggerOnce=true).
- *
- * @example
- * ```tsx
- * // 컴포넌트 lazy loading
- * <Slacker
- *   fallback={<ChartSkeleton />}
- *   loader={async () => {
- *     const { HeavyChart } = await import('./HeavyChart');
- *     return HeavyChart;
- *   }}
- * >
- *   {(Component) => <Component data={data} />}
- * </Slacker>
- *
- * // 데이터 lazy loading
- * <Slacker
- *   fallback={<div>Loading data...</div>}
- *   loader={async () => {
- *     const response = await fetch('/api/data');
- *     return response.json();
- *   }}
- * >
- *   {(data) => (
- *     <div>
- *       <h2>{data.title}</h2>
- *       <p>{data.description}</p>
- *     </div>
- *   )}
- * </Slacker>
- *
- * // 라이브러리와 데이터 함께 로딩
- * <Slacker
- *   fallback={<div>Loading chart library...</div>}
- *   loader={async () => {
- *     const [{ Chart }, chartData] = await Promise.all([
- *       import('chart.js'),
- *       fetch('/api/chart-data').then(r => r.json())
- *     ]);
- *     return { Chart, data: chartData };
- *   }}
- * >
- *   {({ Chart, data }) => <Chart data={data} />}
- * </Slacker>
- *
- * // 이미지와 메타데이터 함께 로딩
- * <Slacker
- *   fallback={<ImageSkeleton />}
- *   loader={async () => {
- *     const [imageUrl, metadata] = await Promise.all([
- *       loadHighResImage(id),
- *       fetch(`/api/images/${id}/metadata`).then(r => r.json())
- *     ]);
- *     return { imageUrl, metadata };
- *   }}
- * >
- *   {({ imageUrl, metadata }) => (
- *     <div>
- *       <img src={imageUrl} alt={metadata.title} />
- *       <p>{metadata.description}</p>
- *     </div>
- *   )}
- * </Slacker>
- * ```
- */
-export function Slacker({ children, fallback, loader, threshold = 0.1, rootMargin = "50px", }) {
+export function Slacker({ children, errorFallback, loadingFallback, loader, threshold = 0.1, rootMargin = "50px", onError, maxRetries = 0, retryDelay = 1000, }) {
     const [loadedData, setLoadedData] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
-    const [hasLoaded, setHasLoaded] = useState(false);
-    const handleIntersect = async (isIntersecting) => {
-        if (isIntersecting && !hasLoaded) {
-            setIsLoading(true);
-            try {
-                const data = await loader();
-                setLoadedData(data);
-                setHasLoaded(true);
-            }
-            catch (error) {
-                console.error('Slacker loader failed:', error);
-            }
-            finally {
-                setIsLoading(false);
+    const [error, setError] = useState(null);
+    const [retryCount, setRetryCount] = useState(0);
+    const load = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const data = await loader();
+            setLoadedData(data);
+            setRetryCount(0); // 성공 시 재시도 카운트 리셋
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            console.error('Slacker loader failed:', error);
+            onError?.(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [loader, onError]);
+    const retry = useCallback(async () => {
+        if (retryCount < maxRetries) {
+            setRetryCount(prev => prev + 1);
+            if (retryDelay > 0) {
+                await new Promise(resolve => setTimeout(resolve, retryDelay));
             }
+            await load();
+        }
+    }, [retryCount, maxRetries, retryDelay, load]);
+    const handleIntersect = useCallback(async (isIntersecting) => {
+        if (isIntersecting && !isLoading && loadedData === null) {
+            await load();
+        }
+    }, [isLoading, loadedData, load]);
+    // 자동 재시도
+    const shouldAutoRetry = error && maxRetries > 0 && retryCount < maxRetries;
+    if (shouldAutoRetry && !isLoading) {
+        retry();
+    }
+    // 렌더링할 내용 결정
+    const renderContent = () => {
+        if (loadedData !== null) {
+            return children(loadedData);
+        }
+        if (error) {
+            return typeof errorFallback === 'function'
+                ? errorFallback({ isLoading, error, retry })
+                : errorFallback;
+        }
+        if (isLoading) {
+            return loadingFallback;
         }
+        return null;
     };
-    return (_jsx(Observer, { threshold: threshold, rootMargin: rootMargin, fallback: fallback, triggerOnce: true, onIntersect: handleIntersect, children: hasLoaded ? children(loadedData) : null }));
+    return (_jsx(Observer, { threshold: threshold, rootMargin: rootMargin, triggerOnce: true, onIntersect: handleIntersect, children: renderContent() }));
 }

package/dist/experimental.d.ts

@@ -1,4 +1,3 @@
 export * from './experimental/Mount';
 export * from './experimental/Slacker';
 export * from './experimental/Switch';
-export * from './experimental/Slot';

package/dist/experimental.js

@@ -1,4 +1,3 @@
 export * from './experimental/Mount';
 export * from './experimental/Slacker';
 export * from './experimental/Switch';
-export * from './experimental/Slot';

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export * from './components/Observer';
 export * from './components/OptionalWrapper';
 export * from './components/Repeat';
 export * from './components/Show';
+export * from './components/Slot';
 export * from './hooks/useIntersectionObserver';

package/dist/index.js

@@ -3,4 +3,5 @@ export * from './components/Observer';
 export * from './components/OptionalWrapper';
 export * from './components/Repeat';
 export * from './components/Show';
+export * from './components/Slot';
 export * from './hooks/useIntersectionObserver';

package/dist/types/index.d.ts

@@ -32,11 +32,20 @@ export type GetLiteralKeys<T> = {
     [K in keyof T]: T[K] extends string ? string extends T[K] ? never : K : T[K] extends number ? number extends T[K] ? never : K : T[K] extends boolean ? boolean extends T[K] ? never : K : T[K] extends bigint ? bigint extends T[K] ? never : K : T[K] extends symbol ? symbol extends T[K] ? never : K : never;
 }[keyof T];
 export type LiteralKeys<T> = [GetLiteralKeys<T>] extends [never] ? keyof T : GetLiteralKeys<T>;
-export type SlackerProps = {
-    children: (loaded: any) => React.ReactNode;
-    fallback?: React.ReactNode;
+export type SlackerFallbackProps = {
+    isLoading: boolean;
+    error: Error | null;
+    retry: () => void;
+};
+export type SlackerProps<T = any> = {
+    children: (loaded: T) => React.ReactNode;
+    errorFallback?: React.ReactNode | ((props: SlackerFallbackProps) => React.ReactNode);
+    loadingFallback?: React.ReactNode;
     threshold?: number | number[];
     rootMargin?: string;
-    loader: () => Promise<any> | any;
+    loader: () => Promise<T> | T;
+    onError?: (error: Error) => void;
+    maxRetries?: number;
+    retryDelay?: number;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilokesto/utilinent",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ilokesto/utilinent.git"