@ilokesto/utilinent 0.0.15 → 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

@@ -1,5 +1,12 @@
-export function For({ each, children, fallback = null, }) {
-    return (each && each.length > 0)
-        ? each?.map(children)
-        : fallback;
+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

@@ -8,7 +8,7 @@ export function Observer({ children, fallback = null, threshold = 0, rootMargin
         freezeOnceVisible,
         onChange,
     });
-    return (_jsx("div", { ref: ref, style: 
+    return (_jsx(Show.div, { ref: ref, style: 
         // fallback이 없고 isIntersecting이 false인 경우
         !fallback && !isIntersecting
             ? {
@@ -17,5 +17,5 @@ export function Observer({ children, fallback = null, threshold = 0, rootMargin
                 flexShrink: 0, // flex 컨테이너에서 축소되지 않도록
                 display: "block", // inline 요소가 되지 않도록
             }
-            : undefined, children: _jsx(Show, { when: isIntersecting, fallback: fallback, children: typeof children === "function" ? children(isIntersecting) : children }) }));
+            : undefined, when: isIntersecting, fallback: fallback, children: typeof children === "function" ? children(isIntersecting) : 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

@@ -1,8 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-export function Repeat({ times, children, fallback }) {
-    // times가 0 이하이거나 유효하지 않은 경우 fallback 렌더링
+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 fallback ?? null;
     }
-    return (_jsx(_Fragment, { children: Array.from({ length: times }, (_, index) => children(index)) }));
+    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

@@ -1,9 +1,18 @@
-export function Show({ when, children, fallback = null }) {
+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/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.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/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

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

@@ -1,6 +1,6 @@
 {
   "name": "@ilokesto/utilinent",
-  "version": "0.0.15",
+  "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"
   ],