@ilokesto/utilinent 0.0.21 → 0.0.23

package/README.md

@@ -23,7 +23,7 @@ pnpm add @ilokesto/utilinent
 기본적으로 다음 컴포넌트들을 가져와 사용할 수 있습니다.
 
 ```tsx
-import { Show, For, Repeat, Observer, OptionalWrapper } from '@ilokesto/utilinent';
+import { Show, For, Repeat, Observer, OptionalWrapper, useIntersectionObserver } from '@ilokesto/utilinent';
 ```
 
 #### `<Show>`
@@ -134,12 +134,35 @@ function Post({ post, withLink }) {
 }
 ```
 
+### 훅(Hooks)
+
+#### `useIntersectionObserver`
+
+Intersection Observer API를 React 훅으로 감싼 것입니다. 컴포넌트의 뷰포트 내 가시성을 추적하는 데 사용됩니다.
+
+**사용 예시:**
+
+```tsx
+import { useIntersectionObserver } from '@ilokesto/utilinent';
+import { useRef } from 'react';
+
+function MyComponent() {
+  const { ref, isIntersecting } = useIntersectionObserver({ threshold: 0.5 });
+
+  return (
+    <div ref={ref} style={{ transition: 'opacity 0.5s', opacity: isIntersecting ? 1 : 0.2 }}>
+      {isIntersecting ? '이제 화면에 보입니다!' : '화면 밖에 있습니다.'}
+    </div>
+  );
+}
+```
+
 ### 실험적 기능
 
 실험적인 컴포넌트 및 훅은 `experimental` 경로에서 가져올 수 있습니다. 이 기능들은 API가 변경될 수 있습니다.
 
 ```tsx
-import { Mount, Slacker, createSwitcher, useIntersectionObserver, Slot, Slottable } from '@ilokesto/utilinent/experimental';
+import { Mount, Slacker, createSwitcher, Slot, Slottable } from '@ilokesto/utilinent/experimental';
 ```
 
 #### `<Slot>` 및 `<Slottable>`
@@ -257,27 +280,6 @@ function Media() {
 }
 ```
 
-#### `useIntersectionObserver`
-
-Intersection Observer API를 React 훅으로 감싼 것입니다. 컴포넌트의 뷰포트 내 가시성을 추적하는 데 사용됩니다.
-
-**사용 예시:**
-
-```tsx
-import { useIntersectionObserver } from '@ilokesto/utilinent/experimental';
-import { useRef } from 'react';
-
-function MyComponent() {
-  const { ref, isIntersecting } = useIntersectionObserver({ threshold: 0.5 });
-
-  return (
-    <div ref={ref} style={{ transition: 'opacity 0.5s', opacity: isIntersecting ? 1 : 0.2 }}>
-      {isIntersecting ? '이제 화면에 보입니다!' : '화면 밖에 있습니다.'}
-    </div>
-  );
-}
-```
-
 ## 라이선스
 
 [MIT](./LICENSE)

package/dist/components/For.js

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

package/dist/components/Repeat.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { createElement } from "react";
+import { createElement, forwardRef } from "react";
 import { htmlTags } from "../constants/htmlTags";
 function BaseRepeat({ times, children, fallback = null }) {
     if (!times || times <= 0 || !Number.isInteger(times)) {
@@ -7,13 +7,15 @@ function BaseRepeat({ times, children, fallback = null }) {
     }
     return _jsx(_Fragment, { children: Array.from({ length: times }, (_, i) => children(i)) });
 }
-const renderForTag = (tag) => ({ times, children, fallback = null, ...props }) => {
+const renderForTag = (tag) => 
+// forward ref so consumers can attach a ref to the underlying DOM element
+forwardRef(({ times, children, fallback = null, ...props }, ref) => {
     if (!times || times <= 0 || !Number.isInteger(times)) {
         return fallback ?? null;
     }
     const content = Array.from({ length: times }, (_, i) => children(i));
-    return createElement(tag, props, content);
-};
+    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,15 @@ 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);
-};
+    return createElement(tag, { ...props, ref }, content);
+});
 const tagEntries = htmlTags.reduce((acc, tag) => {
     acc[tag] = renderForTag(tag);
     return acc;

package/dist/experimental.d.ts

@@ -2,4 +2,3 @@ export * from './experimental/Mount';
 export * from './experimental/Slacker';
 export * from './experimental/Switch';
 export * from './experimental/Slot';
-export * from './hooks/useIntersectionObserver';

package/dist/experimental.js

@@ -2,4 +2,3 @@ export * from './experimental/Mount';
 export * from './experimental/Slacker';
 export * from './experimental/Switch';
 export * from './experimental/Slot';
-export * from './hooks/useIntersectionObserver';

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export * from './components/Observer';
 export * from './components/OptionalWrapper';
 export * from './components/Repeat';
 export * from './components/Show';
+export * from './hooks/useIntersectionObserver';

package/dist/index.js

@@ -3,3 +3,4 @@ export * from './components/Observer';
 export * from './components/OptionalWrapper';
 export * from './components/Repeat';
 export * from './components/Show';
+export * from './hooks/useIntersectionObserver';

package/dist/types/for.d.ts

@@ -5,7 +5,7 @@ export interface ForProps<T extends Array<unknown>> extends Fallback {
     children: (item: T[number], index: number) => React.ReactNode;
 }
 type ForTagHelper<K extends keyof JSX.IntrinsicElements> = {
-    <T extends Array<unknown>>(props: ForProps<T> & ComponentPropsWithRef<K>): React.ReactNode;
+    <T extends Array<unknown>>(props: ForProps<T> & Omit<ComponentPropsWithRef<K>, 'children'>): React.ReactNode;
 };
 export interface ForType {
     <T extends Array<unknown>>(props: ForProps<T>): React.ReactNode;

package/package.json

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