@ilokesto/utilinent 0.0.14 → 0.0.16

package/dist/components/For.d.ts

@@ -1,2 +1,9 @@
+import { ComponentPropsWithRef } from "react";
 import type { ForProps } from "../types";
-export declare function For<T extends Array<unknown>>({ each, children, fallback, }: ForProps<T>): string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null;
+type ForType = {
+    <T extends Array<unknown>>(props: ForProps<T>): React.ReactNode;
+} & {
+    [K in keyof JSX.IntrinsicElements]: <T extends Array<unknown>>(props: ForProps<T> & ComponentPropsWithRef<K>) => React.ReactNode;
+};
+export declare const For: ForType;
+export {};

package/dist/components/For.js

@@ -0,0 +1,12 @@
+import { createElement } from "react";
+import { htmlTags } from "../constants/htmlTags";
+function BaseFor({ each, children, fallback = null, }) {
+    return each && each.length > 0 ? each.map(children) : fallback;
+}
+const renderForTag = (tag) => ({ each, children, fallback = null, ...props }) => {
+    if (!each || each.length === 0)
+        return fallback;
+    const content = each.map(children);
+    return createElement(tag, props, content);
+};
+export const For = Object.assign(BaseFor, Object.fromEntries(htmlTags.map(tag => [tag, renderForTag(tag)])));

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(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 }));
+}

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.d.ts

@@ -1,2 +1,9 @@
-import type { RepeatProps } from "../types";
-export declare function Repeat({ times, children, fallback }: RepeatProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+import { ComponentPropsWithRef } from "react";
+import { RepeatProps } from "../types";
+type RepeatType = {
+    (props: RepeatProps): React.ReactNode;
+} & {
+    [K in keyof JSX.IntrinsicElements]: (props: RepeatProps & ComponentPropsWithRef<K>) => React.ReactNode;
+};
+export declare const Repeat: RepeatType;
+export {};

package/dist/components/Repeat.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { htmlTags } from "../constants/htmlTags";
+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)) });
+}
+const renderForTag = (tag) => ({ times, children, fallback = null, ...props }) => {
+    if (!times || times <= 0 || !Number.isInteger(times)) {
+        return fallback ?? null;
+    }
+    const content = Array.from({ length: times }, (_, i) => children(i));
+    return createElement(tag, props, content);
+};
+export const Repeat = Object.assign(BaseRepeat, Object.fromEntries(htmlTags.map(tag => [tag, renderForTag(tag)])));

package/dist/components/Show.d.ts

@@ -1,3 +1,13 @@
-import type { ShowProps, ShowPropsArray } from "../types";
-export declare function Show<T extends unknown[]>({ when, children, fallback }: ShowPropsArray<T>): React.ReactNode;
-export declare function Show<T extends unknown>({ when, children, fallback }: ShowProps<T>): React.ReactNode;
+import { ComponentPropsWithRef } from "react";
+import { ShowProps, ShowPropsArray } from "../types";
+type ShowType = {
+    <T extends unknown[]>(props: ShowPropsArray<T>): React.ReactNode;
+    <T extends unknown>(props: ShowProps<T>): React.ReactNode;
+} & {
+    [K in keyof JSX.IntrinsicElements]: {
+        <T extends unknown[]>(props: ShowPropsArray<T> & ComponentPropsWithRef<K>): React.ReactNode;
+        <T extends unknown>(props: ShowProps<T> & ComponentPropsWithRef<K>): React.ReactNode;
+    };
+};
+export declare const Show: ShowType;
+export {};

package/dist/components/Show.js

@@ -0,0 +1,18 @@
+import { createElement } from "react";
+import { htmlTags } from "../constants/htmlTags";
+const BaseShow = ({ when, children, fallback = null }) => {
+    const shouldRender = Array.isArray(when) ? when.every(Boolean) : !!when;
+    return shouldRender
+        ? typeof children === "function"
+            ? children(when)
+            : children
+        : fallback;
+};
+const renderForTag = (tag) => ({ when, children, fallback = null, ...props }) => {
+    const shouldRender = Array.isArray(when) ? when.every(Boolean) : !!when;
+    if (!shouldRender)
+        return fallback;
+    const content = typeof children === "function" ? children(when) : children;
+    return createElement(tag, props, content);
+};
+export const Show = Object.assign(BaseShow, Object.fromEntries(htmlTags.map(tag => [tag, renderForTag(tag)])));

package/dist/constants/htmlTags.d.ts

@@ -0,0 +1 @@
+export declare const htmlTags: string[];

package/dist/constants/htmlTags.js

@@ -0,0 +1,3 @@
+export const htmlTags = [
+    "a", "abbr", "address", "article", "aside", "b", "bdi", "bdo", "blockquote", "button", "canvas", "cite", "code", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hr", "i", "img", "input", "ins", "kbd", "label", "legend", "li", "main", "map", "mark", "menu", "meter", "nav", "ol", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "section", "select", "small", "span", "strong", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "tr", "u", "ul", "var", "video"
+];

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/Slot.d.ts

@@ -0,0 +1,4 @@
+export declare const Slot: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export declare const Slottable: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/experimental/Slot.js

@@ -0,0 +1,69 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement } from 'react';
+function mergeProps(slotProps, childProps) {
+    const merged = { ...childProps };
+    for (const propName in slotProps) {
+        const slotProp = slotProps[propName];
+        const childProp = merged[propName];
+        if (/^on[A-Z]/.test(propName) && typeof slotProp === 'function' && typeof childProp === 'function') {
+            merged[propName] = (...args) => {
+                childProp(...args);
+                slotProp(...args);
+            };
+        }
+        else if (propName === 'style' && typeof slotProp === 'object' && typeof childProp === 'object') {
+            merged[propName] = { ...childProp, ...slotProp };
+        }
+        else if (propName === 'className' && typeof slotProp === 'string' && typeof childProp === 'string') {
+            merged[propName] = [childProp, slotProp].filter(Boolean).join(' ');
+        }
+        else {
+            merged[propName] = slotProp;
+        }
+    }
+    return merged;
+}
+function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref != null) {
+                ref.current = node;
+            }
+        }
+    };
+}
+export const Slot = forwardRef((props, ref) => {
+    const { children, ...slotProps } = props;
+    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)
+        });
+        const newChildren = childrenArray.map((child) => {
+            if (child === slottable) {
+                return newElement;
+            }
+            return child;
+        });
+        return _jsx(_Fragment, { children: newChildren });
+    }
+    const [child] = childrenArray;
+    if (!isValidElement(child)) {
+        return null;
+    }
+    return cloneElement(child, {
+        ...mergeProps(slotProps, child.props),
+        ref: composeRefs(ref, child.ref)
+    });
+});
+function isSlottable(child) {
+    return isValidElement(child) && child.type === Slottable;
+}
+export const Slottable = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};

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/experimental.d.ts

@@ -0,0 +1,5 @@
+export * from './experimental/Mount';
+export * from './experimental/Slacker';
+export * from './experimental/Switch';
+export * from './experimental/Slot';
+export * from './hooks/useIntersectionObserver';

package/dist/experimental.js

@@ -0,0 +1,5 @@
+export * from './experimental/Mount';
+export * from './experimental/Slacker';
+export * from './experimental/Switch';
+export * from './experimental/Slot';
+export * from './hooks/useIntersectionObserver';

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.d.ts

@@ -3,7 +3,3 @@ 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/index.js

@@ -0,0 +1,5 @@
+export * from './components/For';
+export * from './components/Observer';
+export * from './components/OptionalWrapper';
+export * from './components/Repeat';
+export * from './components/Show';

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.16",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ilokesto/utilinent.git"
@@ -8,6 +8,16 @@
   "sideEffects": false,
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./experimental": {
+      "import": "./dist/experimental.js",
+      "types": "./dist/experimental.d.ts"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -37,6 +47,6 @@
     "typescript": "^5.4.5"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc --emitDeclarationOnly"
+    "build": "rm -rf dist && tsc"
   }
 }