@ilokesto/utilinent 1.0.7 → 1.0.9

package/dist/components/Show/index.d.ts

@@ -1,4 +1,9 @@
 import type { ShowType } from "../../types/show";
+/**
+ * Showable 컴포넌트는 실제로는 렌더링되지 않고,
+ * Show 컴포넌트가 이를 찾아서 when 값을 전달하고 조건부 렌더링 처리
+ * Forrable과 동일한 패턴
+ */
 export declare const Showable: ({ children, fallback }: {
     children: React.ReactNode | ((value: any) => React.ReactNode);
     fallback?: React.ReactNode;

package/dist/components/Show/index.js

@@ -2,6 +2,11 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createElement, forwardRef } from "react";
 import { htmlTags } from "../../constants/htmlTags";
 import { renderShowContent } from "./renderShowContent";
+/**
+ * Showable 컴포넌트는 실제로는 렌더링되지 않고,
+ * Show 컴포넌트가 이를 찾아서 when 값을 전달하고 조건부 렌더링 처리
+ * Forrable과 동일한 패턴
+ */
 export const Showable = ({ children, fallback = null }) => {
     return _jsx(_Fragment, { children: children });
 };

package/dist/components/Show/processShowable.d.ts

@@ -1,4 +1,9 @@
 /**
  * Showable 패턴을 처리하는 공통 함수
+ *
+ * Forrable과 동일한 패턴:
+ * - Showable을 찾아서 when 값을 기반으로 조건부 렌더링
+ * - 다른 children은 그대로 유지
+ * - Showable 위치에 렌더링 결과 삽입
  */
-export declare function processShowable(children: React.ReactNode, when: any, fallback: React.ReactNode): React.ReactNode;
+export declare function processShowable(children: React.ReactNode, when: any, fallback: React.ReactNode): import("react").ReactNode;

package/dist/components/Show/processShowable.js

@@ -8,17 +8,37 @@ function isShowable(child) {
 }
 /**
  * Showable 패턴을 처리하는 공통 함수
+ *
+ * Forrable과 동일한 패턴:
+ * - Showable을 찾아서 when 값을 기반으로 조건부 렌더링
+ * - 다른 children은 그대로 유지
+ * - Showable 위치에 렌더링 결과 삽입
  */
 export function processShowable(children, when, fallback) {
     const childrenArray = Children.toArray(children);
+    const showable = childrenArray.find(isShowable);
     const shouldRender = Array.isArray(when) ? when.every(Boolean) : !!when;
+    // Showable이 없으면 children 그대로 반환 (일반 children들)
+    if (!showable) {
+        return children;
+    }
+    // Showable을 찾아서 조건부 렌더링 처리
+    const showableChildren = showable.props.children;
+    const showableFallback = showable.props.fallback ?? fallback;
+    // when 조건에 따라 Showable의 content 결정
+    let showableContent;
+    if (typeof showableChildren === "function") {
+        // 함수인 경우: when 값을 전달하고 조건부 렌더링
+        showableContent = shouldRender ? showableChildren(when) : showableFallback;
+    }
+    else {
+        // ReactNode인 경우: 조건부 렌더링
+        showableContent = shouldRender ? showableChildren : showableFallback;
+    }
+    // children 배열에서 Showable만 교체
     return childrenArray.map((child) => {
-        if (isShowable(child)) {
-            const showableChildren = child.props.children;
-            const showableFallback = child.props.fallback ?? fallback;
-            if (typeof showableChildren === "function") {
-                return shouldRender ? showableChildren(when) : showableFallback;
-            }
+        if (child === showable) {
+            return showableContent;
         }
         return child;
     });

package/dist/components/Show/renderShowContent.d.ts

@@ -1,4 +1,8 @@
 /**
  * children 렌더링을 처리하는 공통 함수
+ *
+ * 두 가지 사용 패턴:
+ * 1. 함수 children: Show 자체가 조건부 렌더링 (<Show when={x}>{(val) => ...}</Show>)
+ * 2. ReactNode children: Show는 항상 렌더링, Showable만 조건부 (<Show.div when={x}><Showable>...</Showable></Show.div>)
  */
 export declare function renderShowContent(when: any, children: React.ReactNode | ((value: any) => React.ReactNode), fallback: React.ReactNode): React.ReactNode;

package/dist/components/Show/renderShowContent.js

@@ -1,13 +1,17 @@
 import { processShowable } from "./processShowable";
 /**
  * children 렌더링을 처리하는 공통 함수
+ *
+ * 두 가지 사용 패턴:
+ * 1. 함수 children: Show 자체가 조건부 렌더링 (<Show when={x}>{(val) => ...}</Show>)
+ * 2. ReactNode children: Show는 항상 렌더링, Showable만 조건부 (<Show.div when={x}><Showable>...</Showable></Show.div>)
  */
 export function renderShowContent(when, children, fallback) {
-    // children이 함수인 경우 (기존 방식)
+    // children이 함수인 경우 (기존 방식 - Show 자체가 조건부 렌더링)
     if (typeof children === "function") {
         const shouldRender = Array.isArray(when) ? when.every(Boolean) : !!when;
         return shouldRender ? children(when) : fallback;
     }
-    // children이 ReactNode인 경우 (Showable 패턴)
+    // children이 ReactNode인 경우 (Showable 패턴 - Show는 항상 렌더링, Showable만 조건부)
     return processShowable(children, when, fallback);
 }

package/dist/constants/htmlTags.d.ts

@@ -1,8 +1,14 @@
 /**
  * 지원되는 HTML 태그 목록
  * const assertion을 사용하여 타입 레벨에서도 활용 가능
+ *
+ * 제외된 태그:
+ * - data: 일반적인 prop 이름과 충돌
+ * - map: Array.prototype.map, Map 객체와 충돌
+ * - var: JavaScript 예약어 (속성으로는 사용 가능하나 혼동 방지)
+ * - s: 너무 짧고 흔한 변수명
  */
-export declare const htmlTags: readonly ["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"];
+export declare const htmlTags: readonly ["a", "abbr", "address", "article", "aside", "b", "bdi", "bdo", "blockquote", "button", "canvas", "cite", "code", "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", "mark", "menu", "meter", "nav", "ol", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "samp", "section", "select", "small", "span", "strong", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "tr", "u", "ul", "video"];
 /**
  * HTML 태그 이름의 유니온 타입
  */

package/dist/constants/htmlTags.js

@@ -1,7 +1,13 @@
 /**
  * 지원되는 HTML 태그 목록
  * const assertion을 사용하여 타입 레벨에서도 활용 가능
+ *
+ * 제외된 태그:
+ * - data: 일반적인 prop 이름과 충돌
+ * - map: Array.prototype.map, Map 객체와 충돌
+ * - var: JavaScript 예약어 (속성으로는 사용 가능하나 혼동 방지)
+ * - s: 너무 짧고 흔한 변수명
  */
 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"
+    "a", "abbr", "address", "article", "aside", "b", "bdi", "bdo", "blockquote", "button", "canvas", "cite", "code", "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", "mark", "menu", "meter", "nav", "ol", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "samp", "section", "select", "small", "span", "strong", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "tr", "u", "ul", "video"
 ];

package/package.json

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