@iyulab/components 0.3.0 → 0.4.0

package/dist/utilities/elements.d.ts

@@ -15,3 +15,26 @@ export declare function querySelectorWithin(element: Element, selectors: string)
  * - 탐색은 element가 존재하는 shadow DOM 또는 document 루트 범위에서 이루어집니다.
  */
 export declare function querySelectorAllWithin(element: Element, selectors: string): HTMLElement[];
+/**
+ * 지정한 태그, 속성, 내용으로 커스텀 엘리먼트 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>'
+ */
+export declare function buildElementHTML(tag: string, attrs?: Record<string, string | boolean | object | null | undefined>, content?: string): string;

package/dist/utilities/elements.js

@@ -1,3 +1,5 @@
+import { escapeHtmlHref, escapeHtmlAttr } from './sanitizers.js';
+
 function getParentElement(element) {
   if (element.parentElement) {
     return element.parentElement;
@@ -6,6 +8,15 @@ function getParentElement(element) {
     return root instanceof Document ? root.documentElement : root instanceof ShadowRoot ? root.host : root instanceof HTMLElement ? root : void 0;
   }
 }
+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;
+  }
+}
 function querySelectorAllWithin(element, selectors) {
   if (!selectors) return [];
   const rootNode = element.getRootNode({ composed: false });
@@ -16,5 +27,16 @@ function querySelectorAllWithin(element, selectors) {
     return [];
   }
 }
+function buildElementHTML(tag, attrs = {}, content = "") {
+  const URL_ATTR = /* @__PURE__ */ 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);
+    const escaped = URL_ATTR.has(k) ? escapeHtmlHref(raw) : escapeHtmlAttr(raw);
+    return [`${k}="${escaped}"`];
+  }).join(" ");
+  return attrStr ? `<${tag} ${attrStr}>${content}</${tag}>` : `<${tag}>${content}</${tag}>`;
+}
 
-export { getParentElement, querySelectorAllWithin };
+export { buildElementHTML, getParentElement, querySelectorAllWithin, querySelectorWithin };

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,43 @@
+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;
+}
+const HTML_TEXT_ESCAPE_REGEX = /[&<>"']/g;
+const HTML_TEXT_ESCAPE_MAP = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function escapeHtmlText(value) {
+  return HTML_TEXT_ESCAPE_REGEX.test(value) ? value.replace(HTML_TEXT_ESCAPE_REGEX, (ch) => HTML_TEXT_ESCAPE_MAP[ch]) : value;
+}
+const HTML_ATTR_ESCAPE_REGEX = /[&<>"]/g;
+const HTML_ATTR_ESCAPE_MAP = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;"
+};
+function escapeHtmlAttr(value) {
+  return HTML_ATTR_ESCAPE_REGEX.test(value) ? value.replace(HTML_ATTR_ESCAPE_REGEX, (ch) => HTML_ATTR_ESCAPE_MAP[ch]) : value;
+}
+const HREF_STRIP_CHARS_REGEX = /[\u0000-\u001F\u007F\s]+/g;
+const HREF_UNSAFE_PROTOCOL_REGEX = /^(?:javascript|data|vbscript):/i;
+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);
+}
+
+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": "0.4.0",
   "keywords": [
     "iyulab",
     "components",
@@ -41,7 +41,6 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.5",
     "lit": "^3.3.2",
-    "quill": "2.0.3",
     "reflect-metadata": "^0.2.2"
   },
   "peerDependencies": {
@@ -57,9 +56,9 @@
     }
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@types/node": "^25.3.0",
-    "eslint": "^10.0.2",
+    "@eslint/js": "^9.39.3",
+    "@types/node": "^25.3.2",
+    "eslint": "^9.39.3",
     "eslint-plugin-lit": "^2.2.1",
     "globals": "^17.3.0",
     "typescript": "^5.9.3",

package/dist/components/BaseElement.d.ts

@@ -1,33 +0,0 @@
-import { CSSResultGroup, LitElement } from 'lit';
-/**
- * BaseElement는 LitElement를 확장한 기본 Web Component 클래스입니다.
- * 이 클래스는 자동으로 종속된 컴포넌트를 정의하며, 유용한 헬퍼 메서드들을 제공합니다.
- */
-export declare class BaseElement extends LitElement {
-    /**
-     * 기본 스타일을 정의합니다.
-     */
-    static styles: CSSResultGroup;
-    /**
-     * 현재 컴포넌트에 종속된 컴포넌트들을 정의하는 정적 속성입니다.
-     * 이 속성은 컴포넌트가 정의될 때 자동으로 호출되어
-     * 종속된 컴포넌트를 등록합니다.
-     */
-    static dependencies: Record<string, typeof BaseElement>;
-    constructor();
-    /**
-     * 커스텀 엘리먼트를 정의합니다.
-     * 이미 정의된 엘리먼트는 다시 정의하지 않습니다.
-     * @param name - 커스텀 엘리먼트의 이름
-     * @param options - 엘리먼트 정의 옵션
-     */
-    static define(name: string, options?: ElementDefinitionOptions): void;
-    /**
-     * 커스텀 이벤트를 디스패치합니다.
-     * @param name - 이벤트 이름
-     * @param value - 이벤트의 detail에 포함될 데이터
-     * @param options - 추가 이벤트 옵션 (예: bubbles, composed 등)
-     * @returns 이벤트가 성공적으로 디스패치되었는지 여부
-     */
-    protected emit(name: string, value?: any, options?: CustomEventInit): boolean;
-}

package/dist/components/BaseElement.js

@@ -1,59 +0,0 @@
-import { LitElement } from 'lit';
-import { styles } from './BaseElement.styles.js';
-
-class BaseElement extends LitElement {
-  static {
-    /**
-     * 기본 스타일을 정의합니다.
-     */
-    this.styles = styles;
-  }
-  static {
-    /**
-     * 현재 컴포넌트에 종속된 컴포넌트들을 정의하는 정적 속성입니다.
-     * 이 속성은 컴포넌트가 정의될 때 자동으로 호출되어
-     * 종속된 컴포넌트를 등록합니다.
-     */
-    this.dependencies = {};
-  }
-  constructor() {
-    super();
-    Object.entries(this.constructor.dependencies).forEach(([name, component]) => {
-      component.define(name);
-    });
-  }
-  /**
-   * 커스텀 엘리먼트를 정의합니다.
-   * 이미 정의된 엘리먼트는 다시 정의하지 않습니다.
-   * @param name - 커스텀 엘리먼트의 이름
-   * @param options - 엘리먼트 정의 옵션
-   */
-  static define(name, options = {}) {
-    if (!customElements.get(name)) {
-      try {
-        customElements.define(name, this, options);
-      } catch (error) {
-        console.warn(`Failed to register component "${name}":`, error);
-      }
-    }
-  }
-  /**
-   * 커스텀 이벤트를 디스패치합니다.
-   * @param name - 이벤트 이름
-   * @param value - 이벤트의 detail에 포함될 데이터
-   * @param options - 추가 이벤트 옵션 (예: bubbles, composed 등)
-   * @returns 이벤트가 성공적으로 디스패치되었는지 여부
-   */
-  emit(name, value, options) {
-    const event = new CustomEvent(name, {
-      bubbles: true,
-      composed: true,
-      cancelable: false,
-      detail: value,
-      ...options
-    });
-    return this.dispatchEvent(event);
-  }
-}
-
-export { BaseElement };