@ilokesto/utilinent 0.0.14 → 0.0.15

package/dist/components/For.js

@@ -0,0 +1,5 @@
+export function For({ each, children, fallback = null, }) {
+    return (each && each.length > 0)
+        ? each?.map(children)
+        : fallback;
+}

package/dist/components/Observer.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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({
+        threshold,
+        rootMargin,
+        freezeOnceVisible,
+        onChange,
+    });
+    return (_jsx("div", { ref: ref, style: 
+        // fallback이 없고 isIntersecting이 false인 경우
+        !fallback && !isIntersecting
+            ? {
+                minHeight: "1px",
+                minWidth: "1px",
+                flexShrink: 0, // flex 컨테이너에서 축소되지 않도록
+                display: "block", // inline 요소가 되지 않도록
+            }
+            : undefined, children: _jsx(Show, { when: isIntersecting, fallback: fallback, children: typeof children === "function" ? children(isIntersecting) : children }) }));
+}

package/dist/components/OptionalWrapper.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Show } from "./Show";
+export function OptionalWrapper({ when, children, wrapper, fallback }) {
+    return _jsx(Show, { when: when, fallback: fallback ? fallback(children) : children, children: wrapper(children) });
+}

package/dist/components/Repeat.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export function Repeat({ times, children, fallback }) {
+    // times가 0 이하이거나 유효하지 않은 경우 fallback 렌더링
+    if (!times || times <= 0 || !Number.isInteger(times)) {
+        return fallback || null;
+    }
+    return (_jsx(_Fragment, { children: Array.from({ length: times }, (_, index) => children(index)) }));
+}

package/dist/components/Show.js

@@ -0,0 +1,9 @@
+export function Show({ when, children, fallback = null }) {
+    const shouldRender = Array.isArray(when) ? when.every(Boolean) : !!when;
+    return shouldRender
+        ? typeof children === "function"
+            ? children(when)
+            : children
+        : fallback;
+}
+;

package/dist/experimental/Mount.js

@@ -0,0 +1,8 @@
+import { useEffect, useState } from "react";
+export function Mount({ children, fallback = null }) {
+    const [resolvedChildren, setResolvedChildren] = useState(fallback);
+    useEffect(() => {
+        (async () => setResolvedChildren(typeof children === "function" ? await children() : children))();
+    }, [children]);
+    return resolvedChildren;
+}

package/dist/experimental/Slacker.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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", }) {
+    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);
+            }
+        }
+    };
+    return (_jsx(Observer, { threshold: threshold, rootMargin: rootMargin, fallback: fallback, triggerOnce: true, onIntersect: handleIntersect, children: hasLoaded ? children(loadedData) : null }));
+}

package/dist/experimental/Switch.js

@@ -0,0 +1,21 @@
+export function createSwitcher(data) {
+    function Switch({ children, when, fallback = null }) {
+        children.reduce((acc, { type, props }) => {
+            if (type !== Match)
+                throw new Error("Match 컴포넌트만 사용할 수 있습니다.");
+            if (props.case) {
+                if (acc.includes(props.case))
+                    throw new Error(`Duplicate Match key: ${props.case}`);
+                else
+                    acc.push(props.case);
+            }
+            return acc;
+        }, []);
+        return children.find(({ props }) => props.case === data[when]) ?? fallback;
+    }
+    function Match({ children }) {
+        return children(data);
+    }
+    ;
+    return { Switch, Match };
+}

package/dist/hooks/useIntersectionObserver.js

@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+export function useIntersectionObserver({ threshold = 0, root = null, rootMargin = "0%", freezeOnceVisible = false, initialIsIntersecting = false, onChange, } = {}) {
+    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;
+    // Keep callback ref updated
+    useEffect(() => {
+        changeCallbackRef.current = onChange;
+    }, [onChange]);
+    // Ref callback to set the element
+    const ref = useCallback((node) => {
+        setElement(node);
+    }, []);
+    // Main intersection observer effect
+    useEffect(() => {
+        if (!element || !("IntersectionObserver" in window) || isFrozen) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            const [intersectionEntry] = entries;
+            if (!intersectionEntry)
+                return;
+            const thresholds = Array.isArray(observer.thresholds)
+                ? observer.thresholds
+                : [observer.thresholds];
+            const isCurrentlyIntersecting = intersectionEntry.isIntersecting &&
+                thresholds.some((t) => intersectionEntry.intersectionRatio >= t);
+            setIsIntersecting(isCurrentlyIntersecting);
+            setEntry(intersectionEntry);
+            // Call onChange callback if provided
+            changeCallbackRef.current?.(isCurrentlyIntersecting, intersectionEntry);
+        }, 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
+    useEffect(() => {
+        if (!element && !freezeOnceVisible && !isFrozen) {
+            setIsIntersecting(initialIsIntersecting);
+            setEntry(undefined);
+        }
+    }, [element, freezeOnceVisible, isFrozen, initialIsIntersecting]);
+    return useMemo(() => ({
+        ref,
+        isIntersecting,
+        entry,
+    }), [ref, isIntersecting, entry]);
+}

package/dist/index.js

@@ -0,0 +1,9 @@
+export * from './components/For';
+export * from './components/Observer';
+export * from './components/OptionalWrapper';
+export * from './components/Repeat';
+export * from './components/Show';
+export * from './experimental/Mount';
+export * from './experimental/Slacker';
+export * from './experimental/Switch';
+export * from './hooks/useIntersectionObserver';

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilokesto/utilinent",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ilokesto/utilinent.git"
@@ -37,6 +37,6 @@
     "typescript": "^5.4.5"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc --emitDeclarationOnly"
+    "build": "rm -rf dist && tsc"
   }
 }