@ilokesto/utilinent 0.0.13 → 0.0.14

package/dist/components/For.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import type { ForProps } from "./types";
+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;

package/dist/components/Observer.d.ts

@@ -1,2 +1,2 @@
-import type { ObserverProps } from "./types";
-export declare function Observer({ children, fallback, threshold, rootMargin, triggerOnce, onIntersect, }: ObserverProps): import("react/jsx-runtime").JSX.Element;
+import type { ObserverProps } from "../types";
+export declare function Observer({ children, fallback, threshold, rootMargin, triggerOnce: freezeOnceVisible, onIntersect: onChange, }: ObserverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/OptionalWrapper.d.ts

@@ -1,7 +1,2 @@
-/// <reference types="react" />
-import { React.ReactNode } from "./types";
-export declare function OptionalWrapper({ when, children, wrapper, }: {
-    when: boolean;
-    children: React.ReactNode;
-    wrapper: (children: React.ReactNode) => React.ReactNode;
-}): React.ReactNode;
+import { OptionalWrapperProps } from "../types";
+export declare function OptionalWrapper({ when, children, wrapper, fallback }: OptionalWrapperProps): React.ReactNode;

package/dist/components/Repeat.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import type { RepeatProps } from "./types";
+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;

package/dist/components/Show.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import type { ShowProps } from "./types";
-export declare function Show<T>({ when, children, fallback }: ShowProps<T>): import("react").ReactNode;
+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;

package/dist/{components → experimental}/Mount.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import type { MountProps } from "./types";
+import type { MountProps } from "../types";
 export declare function Mount({ children, fallback }: MountProps): import("react").ReactNode;

package/dist/{components → experimental}/Slacker.d.ts

@@ -1,4 +1,4 @@
-import { SlackerProps } from "./types";
+import { SlackerProps } from "../types";
 /**
  * Slacker 컴포넌트 - Lazy Loading 전용
  *

package/dist/{components → experimental}/Switch.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { ExtractByKeyValue, ExtractValues, LiteralKeys, SwitchProps } from "./types";
+import type { ExtractByKeyValue, ExtractValues, LiteralKeys, SwitchProps } from "../types";
 export declare function createSwitcher<T, K extends LiteralKeys<T>>(data: T): {
     Switch: ({ children, when, fallback }: SwitchProps<T, K>) => string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null;
     Match: <V extends ExtractValues<T, K>>({ children }: {

package/dist/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,15 @@
+interface UseIntersectionObserverOptions {
+    threshold?: number | number[];
+    root?: Element | null;
+    rootMargin?: string;
+    freezeOnceVisible?: boolean;
+    initialIsIntersecting?: boolean;
+    onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
+}
+interface UseIntersectionObserverResult {
+    ref: (node: HTMLElement | null) => void;
+    isIntersecting: boolean;
+    entry: IntersectionObserverEntry | undefined;
+}
+export declare function useIntersectionObserver({ threshold, root, rootMargin, freezeOnceVisible, initialIsIntersecting, onChange, }?: UseIntersectionObserverOptions): UseIntersectionObserverResult;
+export {};

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export * from './components/For';
-export * from './components/Show';
-export * from './components/Switch';
-export * from './components/Mount';
-export * from './components/Repeat';
 export * from './components/Observer';
-export * from './components/Slacker';
 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/{components/types.d.ts → types/index.d.ts}

@@ -1,43 +1,53 @@
-import type { ReactElement, React.ReactNode } from "react";
-export { React.ReactNode };
-type Fallback = {
+import type { ReactElement } from "react";
+interface Fallback {
     fallback?: React.ReactNode;
+}
+export type NonNullableElements<T extends readonly any[]> = {
+    -readonly [P in keyof T]: NonNullable<T[P]>;
 };
-export type ShowProps<T> = {
+export interface ShowPropsArray<T extends unknown[]> extends Fallback {
+    when: T;
+    children: React.ReactNode | ((item: NonNullableElements<T>) => React.ReactNode);
+}
+export interface ShowProps<T = unknown> extends Fallback {
     when: T;
     children: React.ReactNode | ((item: NonNullable<T>) => React.ReactNode);
-} & Fallback;
-export type ForProps<T extends Array<unknown>> = {
+}
+export interface ForProps<T extends Array<unknown>> extends Fallback {
     each: T | null | undefined;
-    fallback?: React.ReactNode;
     children: (item: T[number], index: number) => React.ReactNode;
-};
-export type ExtractValues<T, K extends keyof T> = T extends any ? T[K] : never;
-type IsUnion<T, U = T> = T extends any ? [U] extends [T] ? false : true : false;
-export type ExtractByKeyValue<T, K extends keyof T, V> = T extends any ? IsUnion<T> extends true ? T[K] extends V ? T : never : V extends T[K] ? T : never : never;
-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 SwitchProps<T, K extends LiteralKeys<T>> = {
-    children: Array<ReactElement>;
-    when: K;
-} & Fallback;
-export type MountProps = {
-    children: React.ReactNode | (() => React.ReactNode | Promise<ReactNode>);
-} & Fallback;
-export type RepeatProps = {
+}
+export interface OptionalWrapperProps {
+    when: boolean;
+    children: React.ReactNode;
+    wrapper: (children: React.ReactNode) => React.ReactNode;
+    fallback?: (children: React.ReactNode) => React.ReactNode;
+}
+export interface RepeatProps extends Fallback {
     times: number;
     children: (index: number) => React.ReactNode;
-} & Fallback;
-export type ObserverProps = {
+}
+export interface ObserverProps extends Fallback {
     children?: React.ReactNode | ((isIntersecting: boolean) => React.ReactNode);
-    fallback?: React.ReactNode;
     threshold?: number | number[];
     rootMargin?: string;
     triggerOnce?: boolean;
     onIntersect?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
-};
+}
+export interface SwitchProps<T, K extends LiteralKeys<T>> extends Fallback {
+    children: Array<ReactElement>;
+    when: K;
+}
+export interface MountProps extends Fallback {
+    children: React.ReactNode | (() => React.ReactNode | Promise<React.ReactNode>);
+}
+export type ExtractValues<T, K extends keyof T> = T extends any ? T[K] : never;
+type IsUnion<T, U = T> = T extends any ? [U] extends [T] ? false : true : false;
+export type ExtractByKeyValue<T, K extends keyof T, V> = T extends any ? IsUnion<T> extends true ? T[K] extends V ? T : never : V extends T[K] ? T : never : never;
+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;
@@ -45,3 +55,4 @@ export type SlackerProps = {
     rootMargin?: string;
     loader: () => Promise<any> | any;
 };
+export {};

package/package.json

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

package/dist/components/For.js

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

package/dist/components/Mount.js

@@ -1,8 +0,0 @@
-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/components/Observer.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Show } from "./Show";
-export function Observer({ children, fallback, threshold = 0, rootMargin = "0px", triggerOnce = false, onIntersect, }) {
-    const [isIntersecting, setIsIntersecting] = useState(false);
-    const [hasTriggered, setHasTriggered] = useState(false);
-    const [entry, setEntry] = useState();
-    const elementRef = useRef(null);
-    useEffect(() => {
-        const element = elementRef.current;
-        // 요소가 없으면 관찰하지 않음
-        if (!element) {
-            return;
-        }
-        // triggerOnce가 true이고 이미 트리거되었으면 관찰하지 않음
-        if (triggerOnce && hasTriggered) {
-            return;
-        }
-        // IntersectionObserver가 지원되지 않는 브라우저에서는 항상 intersecting으로 처리
-        if (!window.IntersectionObserver) {
-            setIsIntersecting(true);
-            return;
-        }
-        const observer = new window.IntersectionObserver((entries) => {
-            const [entry] = entries;
-            const isCurrentlyIntersecting = entry.isIntersecting;
-            setIsIntersecting(isCurrentlyIntersecting);
-            setEntry(entry);
-            // onIntersect 콜백 호출
-            if (onIntersect) {
-                onIntersect(isCurrentlyIntersecting, entry);
-            }
-            // triggerOnce가 true이고 교차가 시작되면 더 이상 관찰하지 않음
-            if (triggerOnce && isCurrentlyIntersecting) {
-                setHasTriggered(true);
-                observer.unobserve(element);
-            }
-        }, {
-            threshold,
-            rootMargin,
-        });
-        observer.observe(element);
-        // cleanup
-        return () => {
-            observer.unobserve(element);
-        };
-    }, [threshold, rootMargin, triggerOnce, hasTriggered, onIntersect]);
-    const content = typeof children === 'function'
-        ? children(isIntersecting)
-        : children;
-    return (_jsx("div", { ref: elementRef, 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: content }) }));
-}

package/dist/components/OptionalWrapper.js

@@ -1,3 +0,0 @@
-export function OptionalWrapper({ when, children, wrapper, }) {
-    return when ? wrapper(children) : children;
-}

package/dist/components/Repeat.js

@@ -1,8 +0,0 @@
-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

@@ -1,4 +0,0 @@
-export function Show({ when, children, fallback = null }) {
-    return when ? typeof children === "function" ? children(when) : children : fallback;
-}
-;

package/dist/components/Slacker.js

@@ -1,96 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { Observer } from "./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/components/Switch.js

@@ -1,21 +0,0 @@
-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/components/types.js

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

package/dist/index.js

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