@ilokesto/utilinent 0.0.13 → 0.0.15

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/For.js

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

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/Observer.js

@@ -1,61 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
 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: 
+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',
+                minHeight: "1px",
+                minWidth: "1px",
                 flexShrink: 0, // flex 컨테이너에서 축소되지 않도록
-                display: 'block' // inline 요소가 되지 않도록
+                display: "block", // inline 요소가 되지 않도록
             }
-            : undefined, children: _jsx(Show, { when: isIntersecting, fallback: fallback, children: content }) }));
+            : undefined, children: _jsx(Show, { when: isIntersecting, fallback: fallback, children: typeof children === "function" ? children(isIntersecting) : children }) }));
 }

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/OptionalWrapper.js

@@ -1,3 +1,5 @@
-export function OptionalWrapper({ when, children, wrapper, }) {
-    return when ? wrapper(children) : children;
+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,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/Show.js

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

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}/Slacker.js

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

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

@@ -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.15",
   "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"
   }
 }