@ilokesto/utilinent 0.0.22 → 0.0.24

package/dist/components/For.js

@@ -1,14 +1,15 @@
-import { createElement } from "react";
+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) => ({ each, children, fallback = null, ...props }) => {
-    if (!each || each.length === 0)
-        return fallback;
-    const content = each.map(children);
-    return createElement(tag, props, content);
-};
+const renderForTag = (tag) => 
+// forward ref so consumers can attach a ref to the underlying DOM element
+forwardRef(({ each, children, fallback = null, ...props }, ref) => {
+    const content = each && each.length > 0 ? each.map(children) : fallback;
+    return createElement(tag, { ...props, ref }, content);
+});
 const tagEntries = htmlTags.reduce((acc, tag) => {
     acc[tag] = renderForTag(tag);
     return acc;

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,21 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { createElement } from "react";
+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) => ({ 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);
-};
+const renderForTag = (tag) => 
+// forward ref so consumers can attach a ref to the underlying DOM element
+forwardRef(({ times, children, fallback = null, ...props }, ref) => {
+    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) => {
     acc[tag] = renderForTag(tag);
     return acc;

package/dist/components/Show.js

@@ -1,4 +1,4 @@
-import { createElement } from "react";
+import { createElement, forwardRef } from "react";
 import { htmlTags } from "../constants/htmlTags";
 const BaseShow = ({ when, children, fallback = null }) => {
     const shouldRender = Array.isArray(when) ? when.every(Boolean) : !!when;
@@ -8,13 +8,17 @@ const BaseShow = ({ when, children, fallback = null }) => {
             : children
         : fallback;
 };
-const renderForTag = (tag) => ({ when, children, fallback = null, ...props }) => {
+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;
-    return createElement(tag, props, content);
-};
+    const content = shouldRender
+        ? typeof children === "function"
+            ? children(when)
+            : children
+        : fallback;
+    return createElement(tag, { ...props, ref }, content);
+});
 const tagEntries = htmlTags.reduce((acc, tag) => {
     acc[tag] = renderForTag(tag);
     return acc;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilokesto/utilinent",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ilokesto/utilinent.git"