@iyulab/components 0.3.0 → 1.0.0

package/dist/utilities/elements.js

@@ -1,20 +1,71 @@
+import { escapeHtmlAttr, escapeHtmlHref } from "./sanitizers.js";
+//#region src/utilities/elements.ts
+/**
+* 엘리먼트의 부모 엘리먼트를 반환합니다.
+* - Shadow DOM을 지원하는 경우, Shadow DOM의 호스트 엘리먼트를 반환합니다.
+* - 일반 DOM 엘리먼트인 경우, 해당 엘리먼트를 반환합니다.
+* - 찾을 수 없는 경우 undefined을 반환합니다.
+*/
 function getParentElement(element) {
-  if (element.parentElement) {
-    return element.parentElement;
-  } else {
-    const root = element.getRootNode({ composed: false });
-    return root instanceof Document ? root.documentElement : root instanceof ShadowRoot ? root.host : root instanceof HTMLElement ? root : void 0;
-  }
+	if (element.parentElement) return element.parentElement;
+	else {
+		const root = element.getRootNode({ composed: false });
+		return root instanceof Document ? root.documentElement : root instanceof ShadowRoot ? root.host : root instanceof HTMLElement ? root : void 0;
+	}
 }
+/**
+* element의 root를 기준으로 selector와 매치되는 첫번째 HTMLElement를 반환합니다.
+* - 탐색은 element가 존재하는 shadow DOM 또는 document 루트 범위에서 이루어집니다.
+*/
+function querySelectorWithin(element, selectors) {
+	if (!selectors) return null;
+	const rootNode = element.getRootNode({ composed: false });
+	if (rootNode instanceof ShadowRoot || rootNode instanceof Document) return rootNode.querySelector(selectors);
+	else return null;
+}
+/**
+* element의 root를 기준으로 selector와 매치되는 모든 HTMLElement를 반환합니다.
+* - 탐색은 element가 존재하는 shadow DOM 또는 document 루트 범위에서 이루어집니다.
+*/
 function querySelectorAllWithin(element, selectors) {
-  if (!selectors) return [];
-  const rootNode = element.getRootNode({ composed: false });
-  if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
-    const nodeList = rootNode.querySelectorAll(selectors);
-    return Array.from(nodeList);
-  } else {
-    return [];
-  }
+	if (!selectors) return [];
+	const rootNode = element.getRootNode({ composed: false });
+	if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
+		const nodeList = rootNode.querySelectorAll(selectors);
+		return Array.from(nodeList);
+	} else return [];
+}
+/**
+* 지정한 태그, 속성, 내용으로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
+*
+* 속성 값 처리 규칙:
+* - `null` / `undefined` → 해당 속성 생략
+* - `false` (boolean)   → 해당 속성 생략
+* - `true`  (boolean)   → 값 없이 키만 출력 (예: `disabled`)
+* - `object`            → `JSON.stringify` 후 `escapeHtmlAttr`
+* - `href` / `src` 키  → `escapeHtmlHref` 적용
+* - 그 외 string       → `escapeHtmlAttr` 적용
+*
+* `content`는 이미 안전한 HTML 문자열이라고 가정합니다 (내부 escape 없음).
+*
+* @param tag     - 커스텀 엘리먼트 태그 이름 (예: `"u-ref-tag"`)
+* @param attrs   - 속성 객체
+* @param content - 내부 HTML 문자열 (기본값: `""`)
+* @returns 생성된 HTML 문자열
+*
+* @example
+* buildElementHTML('u-ref-tag', { href: 'https://example.com', disabled: true }, 'Click');
+* // → '<u-ref-tag href="https://example.com" disabled>Click</u-ref-tag>'
+*/
+function buildElementHTML(tag, attrs = {}, content = "") {
+	const URL_ATTR = new Set(["href", "src"]);
+	const attrStr = Object.entries(attrs).flatMap(([k, v]) => {
+		if (v === void 0 || v == null || v === false) return [];
+		if (v === true) return [k];
+		const raw = typeof v === "object" ? JSON.stringify(v) : String(v);
+		return [`${k}="${URL_ATTR.has(k) ? escapeHtmlHref(raw) : escapeHtmlAttr(raw)}"`];
+	}).join(" ");
+	return attrStr ? `<${tag} ${attrStr}>${content}</${tag}>` : `<${tag}>${content}</${tag}>`;
 }
-
-export { getParentElement, querySelectorAllWithin };
+//#endregion
+export { buildElementHTML, getParentElement, querySelectorAllWithin, querySelectorWithin };

package/dist/utilities/icons.d.ts

@@ -0,0 +1,67 @@
+/**
+ * 기본 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 반환합니다.
+ */
+declare function getDefaultBaseUrl(): string;
+/**
+ * 기본 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 설정합니다.
+ *
+ * @param url - 아이콘 리소스의 기본 URL (예: `/assets/icons/` 또는 `https://cdn.example.com/icons/`)
+ */
+declare function setDefaultBaseUrl(url: string): void;
+/**
+ * `name`으로 아이콘 리소스를 가져오는 함수입니다.
+ */
+type IconResolver = (name: string) => string | undefined | Promise<string | undefined>;
+/**
+ * 아이콘 리소스 캐시입니다.
+ * lib + name 조합으로 SVG 리소스를 저장/조회합니다.
+ */
+declare class IconCache {
+    private static cache;
+    /** 클래스 생성 방지 */
+    private constructor();
+    private static makeKey;
+    /**
+     * 지정된 lib, name 조합의 리소스가 존재하는지 확인합니다.
+     */
+    static has(lib: string, name: string): boolean;
+    /**
+     * 지정된 lib, name 조합의 리소스를 가져옵니다.
+     */
+    static get(lib: string, name: string): string | undefined;
+    /**
+     * 지정된 lib, name 조합의 리소스를 저장합니다.
+     */
+    static set(lib: string, name: string, resource: string): void;
+    /**
+     * 전체 캐시를 비웁니다.
+     */
+    static clear(): void;
+}
+/**
+ * 아이콘 레지스트리입니다.
+ * 아이콘 라이브러리를 등록하고, 아이콘을 조회하는 기능을 제공합니다.
+ */
+declare class IconRegistry {
+    private static libs;
+    /** 클래스 생성 방지 */
+    private constructor();
+    /**
+     * 지정된 아이콘 라이브러리가 등록되었는지 확인합니다.
+     */
+    static has(lib: string): boolean;
+    /**
+     * 지정된 아이콘 라이브러리를 등록합니다.
+     * 이미 등록된 라이브러리 이름인 경우, 경고 메시지를 출력합니다.
+     */
+    static register(lib: string, resolver: IconResolver): void;
+    /**
+     * 지정된 아이콘 라이브러리를 등록 해제합니다.
+     */
+    static unregister(lib: string): void;
+    /**
+     * 지정된 아이콘 라이브러리의 svg 아이콘 소스를 가져옵니다.
+     */
+    static resolve(lib: string, name: string): Promise<string | undefined>;
+}
+export { getDefaultBaseUrl, setDefaultBaseUrl, IconCache, IconRegistry, };

package/dist/utilities/icons.js

@@ -0,0 +1,200 @@
+import bell_fill_svg_default from "../_virtual/_glob-assets_raw/bell-fill.svg.d37c41d9.js";
+import check_circle_fill_svg_default from "../_virtual/_glob-assets_raw/check-circle-fill.svg.51c33a2a.js";
+import check_lg_svg_default from "../_virtual/_glob-assets_raw/check-lg.svg.371c5e78.js";
+import chevron_down_svg_default from "../_virtual/_glob-assets_raw/chevron-down.svg.0ccd06ea.js";
+import chevron_left_svg_default from "../_virtual/_glob-assets_raw/chevron-left.svg.b4601050.js";
+import chevron_right_svg_default from "../_virtual/_glob-assets_raw/chevron-right.svg.0711bb67.js";
+import chevron_up_svg_default from "../_virtual/_glob-assets_raw/chevron-up.svg.ed917211.js";
+import dash_lg_svg_default from "../_virtual/_glob-assets_raw/dash-lg.svg.b40b8b3a.js";
+import exclamation_circle_fill_svg_default from "../_virtual/_glob-assets_raw/exclamation-circle-fill.svg.dc8c523e.js";
+import exclamation_triangle_fill_svg_default from "../_virtual/_glob-assets_raw/exclamation-triangle-fill.svg.7949d2c7.js";
+import eye_slash_svg_default from "../_virtual/_glob-assets_raw/eye-slash.svg.240afafa.js";
+import eye_svg_default from "../_virtual/_glob-assets_raw/eye.svg.2e5e9c4c.js";
+import info_circle_fill_svg_default from "../_virtual/_glob-assets_raw/info-circle-fill.svg.6580071d.js";
+import plus_lg_svg_default from "../_virtual/_glob-assets_raw/plus-lg.svg.294e9073.js";
+import search_svg_default from "../_virtual/_glob-assets_raw/search.svg.0ba2012d.js";
+import star_fill_svg_default from "../_virtual/_glob-assets_raw/star-fill.svg.f24b5a2d.js";
+import star_svg_default from "../_virtual/_glob-assets_raw/star.svg.4af61468.js";
+import three_dots_vertical_svg_default from "../_virtual/_glob-assets_raw/three-dots-vertical.svg.9fee78c5.js";
+import three_dots_svg_default from "../_virtual/_glob-assets_raw/three-dots.svg.6a7a5b23.js";
+import x_lg_svg_default from "../_virtual/_glob-assets_raw/x-lg.svg.f34b882c.js";
+//#region src/utilities/icons.ts
+var defaultIconBaseUrl = "/assets/icons/";
+/**
+* 기본 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 반환합니다.
+*/
+function getDefaultBaseUrl() {
+	return defaultIconBaseUrl;
+}
+/**
+* 기본 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 설정합니다.
+*
+* @param url - 아이콘 리소스의 기본 URL (예: `/assets/icons/` 또는 `https://cdn.example.com/icons/`)
+*/
+function setDefaultBaseUrl(url) {
+	defaultIconBaseUrl = url;
+}
+/**
+* vite의 `import.meta.glob`을 사용하여 내부 경로상의 모든 SVG 파일을 빌드 시점에 한 번에 로드합니다.
+* 이 레지스트리는 런타임 동안 불변이며, 아이콘 조회 시 재사용됩니다.
+*/
+var internalIconBundle = new Map(Object.entries(/* @__PURE__ */ Object.assign({
+	"../assets/icons/bell-fill.svg": bell_fill_svg_default,
+	"../assets/icons/check-circle-fill.svg": check_circle_fill_svg_default,
+	"../assets/icons/check-lg.svg": check_lg_svg_default,
+	"../assets/icons/chevron-down.svg": chevron_down_svg_default,
+	"../assets/icons/chevron-left.svg": chevron_left_svg_default,
+	"../assets/icons/chevron-right.svg": chevron_right_svg_default,
+	"../assets/icons/chevron-up.svg": chevron_up_svg_default,
+	"../assets/icons/dash-lg.svg": dash_lg_svg_default,
+	"../assets/icons/exclamation-circle-fill.svg": exclamation_circle_fill_svg_default,
+	"../assets/icons/exclamation-triangle-fill.svg": exclamation_triangle_fill_svg_default,
+	"../assets/icons/eye-slash.svg": eye_slash_svg_default,
+	"../assets/icons/eye.svg": eye_svg_default,
+	"../assets/icons/info-circle-fill.svg": info_circle_fill_svg_default,
+	"../assets/icons/plus-lg.svg": plus_lg_svg_default,
+	"../assets/icons/search.svg": search_svg_default,
+	"../assets/icons/star-fill.svg": star_fill_svg_default,
+	"../assets/icons/star.svg": star_svg_default,
+	"../assets/icons/three-dots-vertical.svg": three_dots_vertical_svg_default,
+	"../assets/icons/three-dots.svg": three_dots_svg_default,
+	"../assets/icons/x-lg.svg": x_lg_svg_default
+})).map(([path, module]) => {
+	return [path.split("/").pop()?.replace(".svg", "") || "", module];
+}).filter(([name]) => name !== ""));
+/**
+* 아이콘 리소스 캐시입니다.
+* lib + name 조합으로 SVG 리소스를 저장/조회합니다.
+*/
+var IconCache = class {
+	static {
+		this.cache = /* @__PURE__ */ new Map();
+	}
+	/** 클래스 생성 방지 */
+	constructor() {}
+	static makeKey(lib, name) {
+		return `${lib}:${name}`;
+	}
+	/**
+	* 지정된 lib, name 조합의 리소스가 존재하는지 확인합니다.
+	*/
+	static has(lib, name) {
+		return this.cache.has(this.makeKey(lib, name));
+	}
+	/**
+	* 지정된 lib, name 조합의 리소스를 가져옵니다.
+	*/
+	static get(lib, name) {
+		return this.cache.get(this.makeKey(lib, name));
+	}
+	/**
+	* 지정된 lib, name 조합의 리소스를 저장합니다.
+	*/
+	static set(lib, name, resource) {
+		this.cache.set(this.makeKey(lib, name), resource);
+	}
+	/**
+	* 전체 캐시를 비웁니다.
+	*/
+	static clear() {
+		this.cache.clear();
+	}
+};
+/**
+* 아이콘 레지스트리입니다.
+* 아이콘 라이브러리를 등록하고, 아이콘을 조회하는 기능을 제공합니다.
+*/
+var IconRegistry = class {
+	static {
+		this.libs = /* @__PURE__ */ new Map();
+	}
+	/** 클래스 생성 방지 */
+	constructor() {}
+	/**
+	* 지정된 아이콘 라이브러리가 등록되었는지 확인합니다.
+	*/
+	static has(lib) {
+		return this.libs.has(lib);
+	}
+	/**
+	* 지정된 아이콘 라이브러리를 등록합니다.
+	* 이미 등록된 라이브러리 이름인 경우, 경고 메시지를 출력합니다.
+	*/
+	static register(lib, resolver) {
+		if (this.libs.has(lib)) console.warn(`Icon library "${lib}" is already registered`);
+		else this.libs.set(lib, resolver);
+	}
+	/**
+	* 지정된 아이콘 라이브러리를 등록 해제합니다.
+	*/
+	static unregister(lib) {
+		this.libs.delete(lib);
+	}
+	/**
+	* 지정된 아이콘 라이브러리의 svg 아이콘 소스를 가져옵니다.
+	*/
+	static async resolve(lib, name) {
+		const resolver = this.libs.get(lib);
+		if (!resolver) return void 0;
+		return (await resolver(name))?.trim();
+	}
+};
+IconRegistry.register("internal", (name) => {
+	return internalIconBundle.get(name);
+});
+IconRegistry.register("tabler", async (name) => {
+	if (IconCache.has("tabler", name)) return IconCache.get("tabler", name);
+	try {
+		const [iconName, style = "outline"] = name.split(":");
+		const url = `https://cdn.jsdelivr.net/npm/@tabler/icons@3.40.0/icons/${style}/${iconName}.svg`;
+		const response = await fetch(url);
+		if (!response.ok) return void 0;
+		const svg = await response.text();
+		IconCache.set("tabler", name, svg);
+		return svg;
+	} catch {
+		return;
+	}
+});
+IconRegistry.register("heroicons", async (name) => {
+	if (IconCache.has("heroicons", name)) return IconCache.get("heroicons", name);
+	try {
+		const [iconName, style = "outline", size = "24"] = name.split(":");
+		const url = `https://cdn.jsdelivr.net/npm/heroicons@2.2.0/${size}/${style}/${iconName}.svg`;
+		const response = await fetch(url);
+		if (!response.ok) return void 0;
+		const svg = await response.text();
+		IconCache.set("heroicons", name, svg);
+		return svg;
+	} catch {
+		return;
+	}
+});
+IconRegistry.register("lucide", async (name) => {
+	if (IconCache.has("lucide", name)) return IconCache.get("lucide", name);
+	try {
+		const url = `https://cdn.jsdelivr.net/npm/lucide-static@0.577.0/icons/${name}.svg`;
+		const response = await fetch(url);
+		if (!response.ok) return void 0;
+		const svg = await response.text();
+		IconCache.set("lucide", name, svg);
+		return svg;
+	} catch {
+		return;
+	}
+});
+IconRegistry.register("bootstrap", async (name) => {
+	if (IconCache.has("bootstrap", name)) return IconCache.get("bootstrap", name);
+	try {
+		const url = `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/icons/${name}.svg`;
+		const response = await fetch(url);
+		if (!response.ok) return void 0;
+		const svg = await response.text();
+		IconCache.set("bootstrap", name, svg);
+		return svg;
+	} catch (error) {
+		return;
+	}
+});
+//#endregion
+export { IconCache, IconRegistry, getDefaultBaseUrl, setDefaultBaseUrl };

package/dist/utilities/sanitizers.d.ts

@@ -0,0 +1,35 @@
+/**
+ * HTML 출력 시 XSS 방지를 위한 escape 유틸
+ *
+ * 컨텍스트에 맞는 함수를 사용해야 합니다.
+ *
+ * - escapeHtmlText : HTML 텍스트 노드에 삽입할 때
+ * - escapeHtmlAttr : HTML attribute 값에 삽입할 때
+ * - escapeHtmlHref : href/src 같은 URL attribute에 삽입할 때
+ */
+/**
+ * Zero Width Space / LTR / RTL mark / BOM 등
+ * 화면에 표시되지 않는 유니코드 문자를 제거합니다.
+ */
+export declare function stripZeroWidth(value: string): string;
+/**
+ * HTML 텍스트 노드(context)에 삽입할 문자열을 escape합니다.
+ *
+ * 예:
+ *   <script> → &lt;script&gt;
+ */
+export declare function escapeHtmlText(value: string): string;
+/**
+ * HTML attribute 값(context)에 삽입할 문자열을 escape합니다.
+ *
+ * 예:
+ *   <div title="{value}">
+ */
+export declare function escapeHtmlAttr(value: string): string;
+/**
+ * href / src attribute용 문자열 처리
+ *
+ * 예:
+ *  <a href="{value}">
+ */
+export declare function escapeHtmlHref(value: string): string;

package/dist/utilities/sanitizers.js

@@ -0,0 +1,75 @@
+//#region src/utilities/sanitizers.ts
+/**
+* HTML 출력 시 XSS 방지를 위한 escape 유틸
+*
+* 컨텍스트에 맞는 함수를 사용해야 합니다.
+*
+* - escapeHtmlText : HTML 텍스트 노드에 삽입할 때
+* - escapeHtmlAttr : HTML attribute 값에 삽입할 때
+* - escapeHtmlHref : href/src 같은 URL attribute에 삽입할 때
+*/
+/**
+* Zero Width Space / LTR / RTL mark / BOM 등
+* 화면에 표시되지 않는 유니코드 문자를 제거합니다.
+*/
+function stripZeroWidth(value) {
+	const ZERO_WIDTH_REGEX = /[\u200B\u200C\u200D\u200E\u200F\uFEFF]/g;
+	return ZERO_WIDTH_REGEX.test(value) ? value.replace(ZERO_WIDTH_REGEX, "") : value;
+}
+/** HTML text context escape 대상 문자 */
+var HTML_TEXT_ESCAPE_REGEX = /[&<>"']/g;
+/** HTML text context escape용 문자 매핑 */
+var HTML_TEXT_ESCAPE_MAP = {
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+};
+/**
+* HTML 텍스트 노드(context)에 삽입할 문자열을 escape합니다.
+*
+* 예:
+*   <script> → &lt;script&gt;
+*/
+function escapeHtmlText(value) {
+	return HTML_TEXT_ESCAPE_REGEX.test(value) ? value.replace(HTML_TEXT_ESCAPE_REGEX, (ch) => HTML_TEXT_ESCAPE_MAP[ch]) : value;
+}
+/** HTML attribute escape 대상 문자 */
+var HTML_ATTR_ESCAPE_REGEX = /[&<>"]/g;
+/** HTML attribute escape용 문자 매핑 */
+var HTML_ATTR_ESCAPE_MAP = {
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;"
+};
+/**
+* HTML attribute 값(context)에 삽입할 문자열을 escape합니다.
+* 
+* 예:
+*   <div title="{value}">
+*/
+function escapeHtmlAttr(value) {
+	return HTML_ATTR_ESCAPE_REGEX.test(value) ? value.replace(HTML_ATTR_ESCAPE_REGEX, (ch) => HTML_ATTR_ESCAPE_MAP[ch]) : value;
+}
+/** protocol 우회 공격 방지를 위한 공백/제어문자 제거 */
+var HREF_STRIP_CHARS_REGEX = /[\u0000-\u001F\u007F\s]+/g;
+/** href/src에서 차단해야 하는 위험 protocol */
+var HREF_UNSAFE_PROTOCOL_REGEX = /^(?:javascript|data|vbscript):/i;
+/**
+* href / src attribute용 문자열 처리
+*
+* 예:
+*  <a href="{value}">
+*/
+function escapeHtmlHref(value) {
+	let normalized = stripZeroWidth(value).trim();
+	if (HREF_STRIP_CHARS_REGEX.test(normalized)) normalized = normalized.replace(HREF_STRIP_CHARS_REGEX, "");
+	normalized = normalized.replace(/\\/g, "/");
+	if (normalized.startsWith("//")) return "#";
+	if (HREF_UNSAFE_PROTOCOL_REGEX.test(normalized)) return "#";
+	return escapeHtmlAttr(normalized);
+}
+//#endregion
+export { escapeHtmlAttr, escapeHtmlHref, escapeHtmlText, stripZeroWidth };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "keywords": [
     "iyulab",
     "components",
@@ -17,6 +17,9 @@
   },
   "files": [
     "dist",
+    "plugins/**/*.js",
+    "plugins/**/*.d.ts",
+    "skills",
     "LICENSE",
     "README.md",
     "CHANGELOG.md",
@@ -29,43 +32,43 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./dist/*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/*"
-    }
+    "./dist/*": "./dist/*",
+    "./react": "./dist/react/index.js",
+    "./react/*": "./dist/react/*",
+    "./styles/*": "./dist/styles/*",
+    "./plugins/*": "./plugins/*"
   },
   "scripts": {
     "test": "vite --force",
-    "build": "eslint && vite build"
+    "build:plugins": "tsc -p plugins/tsconfig.json",
+    "build": "eslint && vite build && npm run build:plugins"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.5",
-    "lit": "^3.3.2",
-    "quill": "2.0.3",
-    "reflect-metadata": "^0.2.2"
+    "@floating-ui/dom": "^1.7.6",
+    "@lit/react": "^1.0.8",
+    "focus-trap": "^8.0.1",
+    "lit": "^3.3.2"
   },
   "peerDependencies": {
-    "@lit/react": ">=1.0.0",
     "react": ">=18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
-    },
-    "@lit/react": {
-      "optional": true
     }
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@types/node": "^25.3.0",
-    "eslint": "^10.0.2",
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^25.5.0",
+    "eslint": "^9.39.4",
     "eslint-plugin-lit": "^2.2.1",
-    "globals": "^17.3.0",
+    "glob": "^13.0.6",
+    "globals": "^17.4.0",
+    "react": "^19.2.4",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.1",
-    "vite": "^7.3.1",
+    "typescript-eslint": "^8.57.2",
+    "vite": "^8.0.3",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-static-copy": "^3.2.0"
+    "vite-plugin-static-copy": "^4.0.0"
   }
 }

package/plugins/vite-plugin-glob-resolve.d.ts

@@ -0,0 +1,12 @@
+import type { Plugin } from 'vite';
+/**
+ * Rolldown의 preserveModules 모드에서 import.meta.glob의 query 옵션 사용 시
+ * 빈 export가 생성되는 문제를 해결하는 플러그인.
+ *
+ * - `?raw`: 파일 내용을 문자열로 반환
+ * - `?inline`: 파일 내용을 문자열로 반환
+ * - `?url`: 파일을 asset으로 emit하고 URL을 반환
+ *
+ * 가상 모듈(\0 prefix)로 변환하여 파일명에 `?`가 포함되는 것을 방지합니다.
+ */
+export default function globResolve(): Plugin;

package/plugins/vite-plugin-glob-resolve.js

@@ -0,0 +1,66 @@
+import { readFileSync } from 'fs';
+import { resolve, dirname, basename } from 'path';
+import { createHash } from 'crypto';
+const VIRTUAL_PREFIX = '\0glob-assets';
+const SUPPORTED_QUERIES = ['?raw', '?inline', '?url'];
+function shortHash(input) {
+    return createHash('md5').update(input).digest('hex').slice(0, 8);
+}
+/**
+ * Rolldown의 preserveModules 모드에서 import.meta.glob의 query 옵션 사용 시
+ * 빈 export가 생성되는 문제를 해결하는 플러그인.
+ *
+ * - `?raw`: 파일 내용을 문자열로 반환
+ * - `?inline`: 파일 내용을 문자열로 반환
+ * - `?url`: 파일을 asset으로 emit하고 URL을 반환
+ *
+ * 가상 모듈(\0 prefix)로 변환하여 파일명에 `?`가 포함되는 것을 방지합니다.
+ */
+export default function globResolve() {
+    const idToAbsPath = new Map();
+    return {
+        name: 'vite:glob-resolve',
+        enforce: 'pre',
+        resolveId(source, importer) {
+            for (const query of SUPPORTED_QUERIES) {
+                if (source.endsWith(query)) {
+                    const rawPath = source.slice(0, -query.length);
+                    const absPath = importer
+                        ? resolve(dirname(importer), rawPath)
+                        : rawPath;
+                    const name = basename(absPath);
+                    const hash = shortHash(absPath);
+                    const queryName = query.slice(1);
+                    const virtualId = `${VIRTUAL_PREFIX}_${queryName}/${name}.${hash}`;
+                    idToAbsPath.set(virtualId, absPath);
+                    return virtualId;
+                }
+            }
+            return null;
+        },
+        load(id) {
+            if (!id.startsWith(VIRTUAL_PREFIX))
+                return null;
+            const absPath = idToAbsPath.get(id);
+            if (!absPath)
+                return null;
+            // virtualId에서 queryName 추출: "\0glob-assets_{queryName}/..."
+            const queryName = id.slice(VIRTUAL_PREFIX.length + 1).split('/')[0];
+            if (queryName === 'raw' || queryName === 'inline') {
+                const content = readFileSync(absPath, 'utf-8');
+                return `export default ${JSON.stringify(content)};`;
+            }
+            if (queryName === 'url') {
+                const source = readFileSync(absPath);
+                const fileName = basename(absPath);
+                const ref = this.emitFile({
+                    type: 'asset',
+                    name: fileName,
+                    source,
+                });
+                return `export default import.meta.ROLLUP_FILE_URL_${ref};`;
+            }
+            return null;
+        }
+    };
+}

package/plugins/vite-plugin-react-wrapper.d.ts

@@ -0,0 +1,12 @@
+import type { Plugin } from 'vite';
+interface PluginOptions {
+    /** 컴포넌트 소스 디렉토리 경로 (기본값: 'src/components') */
+    input?: string;
+    /** React 래퍼 출력 폴더 - 빌드 outDir 기준 상대 경로 (기본값: 'react') */
+    output?: string;
+}
+/**
+ * Lit Element 컴포넌트를 React 래퍼로 자동 생성하는 Vite 플러그인
+ */
+export default function reactWrapperPlugin(options: PluginOptions): Plugin;
+export {};