@ilokesto/utilinent 0.0.23 → 0.0.25

package/dist/components/For.js

@@ -1,14 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createElement, forwardRef } from "react";
 import { htmlTags } from "../constants/htmlTags";
 function BaseFor({ each, children, fallback = null, }) {
-    return each && each.length > 0 ? each.map(children) : fallback;
+    return _jsx(_Fragment, { children: each && each.length > 0 ? each.map(children) : fallback });
 }
 const renderForTag = (tag) => 
 // forward ref so consumers can attach a ref to the underlying DOM element
 forwardRef(({ each, children, fallback = null, ...props }, ref) => {
-    if (!each || each.length === 0)
-        return fallback;
-    const content = each.map(children);
+    const content = each && each.length > 0 ? each.map(children) : fallback;
     return createElement(tag, { ...props, ref }, content);
 });
 const tagEntries = htmlTags.reduce((acc, tag) => {

package/dist/components/Observer.d.ts

@@ -1,2 +1,4 @@
 import type { ObserverProps } from "../types";
-export declare function Observer({ children, fallback, threshold, rootMargin, triggerOnce: freezeOnceVisible, onIntersect: onChange, }: ObserverProps): import("react/jsx-runtime").JSX.Element;
+export declare const Observer: import("react").ForwardRefExoticComponent<ObserverProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Observer.js

@@ -1,21 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
 import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
 import { Show } from "./Show";
-export function Observer({ children, fallback = null, threshold = 0, rootMargin = "0px", triggerOnce: freezeOnceVisible = false, onIntersect: onChange, }) {
-    const { ref, isIntersecting } = useIntersectionObserver({
+export const Observer = forwardRef(function Observer({ children, fallback = null, threshold = 0, rootMargin = "0px", triggerOnce: freezeOnceVisible = false, onIntersect: onChange, style, ...props }, forwardedRef) {
+    const { ref: observerRef, isIntersecting } = useIntersectionObserver({
         threshold,
         rootMargin,
         freezeOnceVisible,
         onChange,
     });
-    return (_jsx(Show.div, { ref: ref, style: 
-        // fallback이 없고 isIntersecting이 false인 경우
-        !fallback && !isIntersecting
-            ? {
-                minHeight: "1px",
-                minWidth: "1px",
-                flexShrink: 0, // flex 컨테이너에서 축소되지 않도록
-                display: "block", // inline 요소가 되지 않도록
-            }
-            : undefined, when: isIntersecting, fallback: fallback, children: typeof children === "function" ? children(isIntersecting) : children }));
-}
+    const mergedRef = useCallback((node) => {
+        // Set observer ref
+        observerRef(node);
+        // Handle forwarded ref
+        if (typeof forwardedRef === "function") {
+            forwardedRef(node);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [observerRef, forwardedRef]);
+    return (_jsx(Show.div, { ref: mergedRef, when: isIntersecting, fallback: fallback, style: {
+            ...style,
+            minHeight: style?.minHeight ?? "1px",
+            minWidth: style?.minWidth ?? "1px",
+            display: style?.display ?? "block",
+        }, ...props, children: typeof children === "function" ? children(isIntersecting) : children }));
+});

package/dist/components/Repeat.js

@@ -1,19 +1,19 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement, forwardRef } from "react";
 import { htmlTags } from "../constants/htmlTags";
+import { For } from "./For";
 function BaseRepeat({ times, children, fallback = null }) {
     if (!times || times <= 0 || !Number.isInteger(times)) {
         return fallback ?? null;
     }
-    return _jsx(_Fragment, { children: Array.from({ length: times }, (_, i) => children(i)) });
+    return _jsx(For, { each: Array.from({ length: times }, (_, i) => i), children: children });
 }
 const renderForTag = (tag) => 
 // forward ref so consumers can attach a ref to the underlying DOM element
 forwardRef(({ times, children, fallback = null, ...props }, ref) => {
-    if (!times || times <= 0 || !Number.isInteger(times)) {
-        return fallback ?? null;
-    }
-    const content = Array.from({ length: times }, (_, i) => children(i));
+    const content = times && times > 0 && Number.isInteger(times)
+        ? Array.from({ length: times }, (_, i) => children(i))
+        : fallback ?? null;
     return createElement(tag, { ...props, ref }, content);
 });
 const tagEntries = htmlTags.reduce((acc, tag) => {

package/dist/components/Show.js

@@ -12,9 +12,11 @@ const renderForTag = (tag) =>
 // forward ref so consumers like Observer can pass a ref to the real DOM element
 forwardRef(function Render({ when, children, fallback = null, ...props }, ref) {
     const shouldRender = Array.isArray(when) ? when.every(Boolean) : !!when;
-    if (!shouldRender)
-        return fallback;
-    const content = typeof children === "function" ? children(when) : children;
+    const content = shouldRender
+        ? typeof children === "function"
+            ? children(when)
+            : children
+        : fallback;
     return createElement(tag, { ...props, ref }, content);
 });
 const tagEntries = htmlTags.reduce((acc, tag) => {

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/hooks/useIntersectionObserver.js

@@ -3,26 +3,26 @@ export function useIntersectionObserver({ threshold = 0, root = null, rootMargin
     const [element, setElement] = useState(null);
     const [isIntersecting, setIsIntersecting] = useState(initialIsIntersecting);
     const [entry, setEntry] = useState();
-    const observerRef = useRef(null);
-    const changeCallbackRef = useRef(onChange);
-    // Memoize options to prevent unnecessary observer recreation
-    const observerOptions = useMemo(() => ({
-        threshold,
-        root,
-        rootMargin,
-    }), [threshold, root, rootMargin]);
-    const isFrozen = freezeOnceVisible && isIntersecting;
+    const onChangeRef = useRef(onChange);
+    const isFirstCallbackRef = useRef(true);
+    const isFrozen = useRef(false);
     // Keep callback ref updated
     useEffect(() => {
-        changeCallbackRef.current = onChange;
+        onChangeRef.current = onChange;
     }, [onChange]);
+    // Memoize options
+    const observerOptions = useMemo(() => ({ threshold, root, rootMargin }), [threshold, root, rootMargin]);
     // Ref callback to set the element
     const ref = useCallback((node) => {
         setElement(node);
     }, []);
     // Main intersection observer effect
     useEffect(() => {
-        if (!element || !("IntersectionObserver" in window) || isFrozen) {
+        if (!element || !("IntersectionObserver" in window)) {
+            return;
+        }
+        // If frozen (triggerOnce + already intersected), skip observation
+        if (isFrozen.current) {
             return;
         }
         const observer = new IntersectionObserver((entries) => {
@@ -34,28 +34,38 @@ export function useIntersectionObserver({ threshold = 0, root = null, rootMargin
                 : [observer.thresholds];
             const isCurrentlyIntersecting = intersectionEntry.isIntersecting &&
                 thresholds.some((t) => intersectionEntry.intersectionRatio >= t);
+            // Update state
             setIsIntersecting(isCurrentlyIntersecting);
             setEntry(intersectionEntry);
-            // Call onChange callback if provided
-            changeCallbackRef.current?.(isCurrentlyIntersecting, intersectionEntry);
+            // Skip the first callback (initial observation)
+            if (isFirstCallbackRef.current) {
+                isFirstCallbackRef.current = false;
+                return;
+            }
+            // Call onChange callback
+            onChangeRef.current?.(isCurrentlyIntersecting, intersectionEntry);
+            // Freeze if triggerOnce and now intersecting
+            if (freezeOnceVisible && isCurrentlyIntersecting) {
+                isFrozen.current = true;
+                // Immediately disconnect to stop further observations
+                observer.disconnect();
+            }
         }, observerOptions);
         observer.observe(element);
-        observerRef.current = observer;
         return () => {
             observer.disconnect();
-            observerRef.current = null;
         };
-    }, [element, observerOptions, isFrozen]);
-    // Reset state when element is removed and not frozen
+    }, [element, observerOptions, freezeOnceVisible]);
+    // Reset when element is removed
     useEffect(() => {
-        if (!element && !freezeOnceVisible && !isFrozen) {
+        if (!element) {
             setIsIntersecting(initialIsIntersecting);
             setEntry(undefined);
+            isFirstCallbackRef.current = true;
+            if (!freezeOnceVisible) {
+                isFrozen.current = false;
+            }
         }
-    }, [element, freezeOnceVisible, isFrozen, initialIsIntersecting]);
-    return useMemo(() => ({
-        ref,
-        isIntersecting,
-        entry,
-    }), [ref, isIntersecting, entry]);
+    }, [element, freezeOnceVisible, initialIsIntersecting]);
+    return useMemo(() => ({ ref, isIntersecting, entry }), [ref, isIntersecting, entry]);
 }

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.23",
+  "version": "0.0.25",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ilokesto/utilinent.git"