@iyulab/router 0.6.0 → 0.6.2

package/README.md

@@ -6,13 +6,9 @@ A modern, lightweight client-side router for web applications with support for b
 
 - 🚀 **Modern URLPattern-based routing** - Uses native URLPattern API for powerful path matching
 - 🔧 **Unified Framework Support** - Works with both Lit and React components using render functions
-- 📱 **Client-side Navigation** - History API integration with browser back/forward support
+- 📱 **Client-Side Navigation** - History API integration with browser back/forward support
 - 🎯 **Nested Routing** - Support for deeply nested route hierarchies with index and path routes
-- 🔗 **Smart Link Component** - Automatic external link detection and handling
 - 📊 **Route Events** - Track navigation progress with route-begin, route-done, and route-error events
-- 🎨 **Flexible Outlet System** - Unified rendering with renderContent method
-- 🌐 **Global Route Access** - Access current route information anywhere via `window.route`
-- 🔄 **Force Re-rendering** - Control component re-rendering on route changes
 - ⚠️ **Enhanced Error Handling** - Built-in ErrorPage component with improved styling
 
 ## Installation
@@ -30,43 +26,18 @@ import { Router } from '@iyulab/router';
 import { html } from 'lit';
 
 const router = new Router({
-  root: document.getElementById('app')!,
-  basepath: '/app',
+  basepath: '/',
   routes: [
     {
       index: true,
       render: () => html`<home-page></home-page>`
     },
     {
-      path: '/user/:id',
+      path: '/user/:id', // URLPattern route
       render: (routeInfo) => html`<user-page .userId=${routeInfo.params.id}></user-page>`
     }
-  ]
+  ],
 });
-
-// Start routing
-router.go(window.location.href);
-```
-
-### Nested Routes
-
-```typescript
-const routes = [
-  {
-    path: '/dashboard',
-    render: () => html`<dashboard-layout><u-outlet></u-outlet></dashboard-layout>`,
-    children: [
-      {
-        index: true, // Matches /dashboard exactly
-        render: () => html`<dashboard-home></dashboard-home>`
-      },
-      {
-        path: 'settings',
-        render: () => html`<dashboard-settings></dashboard-settings>`
-      }
-    ]
-  }
-];
 ```
 
 ### Mixed Framework Support
@@ -78,12 +49,16 @@ const routes = [
   // Lit component
   {
     path: '/lit-page',
-    render: (routeInfo) => html`<my-lit-component .routeInfo=${routeInfo}></my-lit-component>`
+    render: (routeInfo) => {
+      return html`<my-lit-component .routeInfo=${routeInfo}></my-lit-component>`
+    }
   },
   // React component
   {
     path: '/react-page',
-    render: (routeInfo) => React.createElement(MyReactComponent, { routeInfo })
+    render: (routeInfo) => {
+      return ( <MyComponent></MyComponent> )
+    }
   },
   // HTML element
   {
@@ -97,14 +72,39 @@ const routes = [
 ];
 ```
 
+### Nested Routes
+
+```typescript
+import { RouteConfig } from '@iyulab/router';
+
+const routes: RouteConfig[] = [
+  {
+    path: '/dashboard',
+    render: () => html`<dashboard-layout><u-outlet></u-outlet></dashboard-layout>`,
+    children: [
+      {
+        index: true, // Matches '/dashboard'
+        render: () => html`<dashboard-home></dashboard-home>`
+      },
+      {
+        path: 'settings', // Matches '/dashboard/settings'
+        render: () => html`<dashboard-settings></dashboard-settings>`
+      }
+    ]
+  }
+];
+```
+
 ## Usage Examples
 
-### Using with Lit Components
+### Using with Lit Elements
 
 ```typescript
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+import "@iyulab/router";
+
 @customElement('app-root')
 export class AppRoot extends LitElement {
   render() {
@@ -146,4 +146,4 @@ export function AppRoot() {
 
 ## License
 
-MIT License - see [LICENSE](LICENSE) file for details.
+MIT License - see [LICENSE](LICENSE) file for details.

package/dist/index.d.ts

@@ -145,10 +145,14 @@ export declare class OutletMissingError extends RouteError {
     constructor();
 }
 
+/** 렌더링 옵션 */
 declare interface RenderOption {
+    /** 교차 렌더링 방지 ID */
     id?: string;
+    /** 강제 렌더링 여부 */
     force?: boolean;
-    content: RenderResult;
+    /** 렌더링할 값 */
+    value: RenderResult;
 }
 
 export declare type RenderResult = HTMLElement | ReactElement | TemplateResult<1> | false;
@@ -297,7 +301,7 @@ export declare class RouteProgressEvent extends RouteEvent {
 }
 
 /**
- * `lit-element`, `react`를 지원하는 클라이언트 사이드 라우터
+ * `lit-element`, `react`를 지원하는 SPA 클라이언트 라우터 객체입니다.
  */
 export declare class Router {
     private readonly _rootElement;
@@ -325,7 +329,7 @@ export declare class Router {
     /** 브라우저 히스토리 이벤트가 발생시 라우팅 처리 */
     private handleWindowPopstate;
     /** 클릭 이벤트에서 라우터로 처리할 앵커를 찾아 클라이언트 라우팅 수행 */
-    private handleRootClick;
+    private handleDocumentClick;
 }
 
 /**
@@ -374,58 +378,61 @@ export declare interface RouterConfig {
 export declare class ULink extends LitElement {
     /** 외부 링크 여부 */
     private isExternal;
-    /** a 태그에 주입할 href 값 */
-    computedHref: string;
     /**
-     * a 태그 target을 지원하고 싶으면 열어두는게 좋습니다.
-     * - _blank 등을 쓰면 무조건 브라우저 기본 동작을 따르도록 처리합니다.
+     * 링크 대상 target 속성
+     *
+     * - `_self`: 현재 창에서 링크 열기 (기본값)
+     * - `_blank`: 새 탭/창에서 링크 열기
+     * - `_parent`: 부모 프레임에서 링크 열기
+     * - `_top`: 최상위 프레임에서 링크 열기
      */
     target?: string;
     /**
-     * - 속성을 정의하지 않으면 basepath로 이동합니다.
+     * 링크 대상 URL, 다음 사항에 따라 SPA 라우팅 또는 브라우저 네비게이션이 결정됩니다.
+     *
+     * - 속성을 정의하지 않으면 설정에서 지정한 `basepath`로 SPA 라우팅합니다.
      * - http(s)로 시작하면 외부 링크로 간주하고 브라우저 네비게이션을 사용합니다.
-     * - 절대경로(/...)일 경우 basepath로 시작하면 SPA 라우팅 대상이 될 수 있습니다.
-     * - 상대경로는 (basepath + 상대경로)로 SPA 라우팅 대상이 될 수 있습니다.
-     * - ?로 시작하면 현재 pathname에 쿼리스트링을 붙여 SPA 라우팅합니다.
-     * - #으로 시작하면 현재 URL에 해시만 바꾸고(브라우저 기본) 동작합니다.
+     * - 절대경로(/...)의 경우 `basepath`로 시작하면 SPA 라우팅합니다, 이외 브라우저 네비게이션을 사용합니다.
+     * - 상대경로는 (basepath + 상대경로)로 결합하여 SPA 라우팅합니다.
+     * - ?로 시작하면 현재 경로에 쿼리스트링을 추가하여 SPA 라우팅합니다.
+     * - #으로 시작하면 브라우저 기본 동작을 사용합니다.
      */
     href?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): TemplateResult_2<1>;
-    /** basepath를 state에서 꺼내는 헬퍼 */
-    private getBasepath;
     /** a 태그에 주입할 href 값을 계산합니다. */
-    private computeHref;
+    private compute;
     /**
-     * 클릭 가로채기 규칙
+     * 클릭 가로채기 핸들러
      * - 좌클릭(0) + 보조키 없음(ctrl/meta/shift/alt 없음) + target이 _self일 때만 SPA 라우팅 고려
      * - 그 외(중클릭/우클릭/보조키/target=_blank 등)는 브라우저 기본 동작 유지
      */
-    private handleAnchorClick;
+    private handleClick;
     /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
     private dispatchPopstate;
+    /** basepath를 state에서 꺼내는 헬퍼 */
+    private getBasepath;
     static styles: CSSResult;
 }
 
 /**
- * 라우트 설정에 따라 LitElement 또는 React 컴포넌트를 렌더링합니다.
+ * LitElement 또는 React 컴포넌트를 렌더링해주는 웹컴포넌트 입니다.
  */
-export declare class UOutlet extends LitElement {
+export declare class UOutlet extends HTMLElement {
+    /** 교차 렌더링 방지 id */
     private routeId?;
-    private container?;
-    private content?;
-    /** 외부 스타일을 적용하기 위해 라이트 돔을사용 합니다. */
-    protected createRenderRoot(): this;
-    render(): TemplateResult<1>;
+    /** 실제 렌더링 컨텐츠 */
+    private root?;
     /**
-     * render 함수의 결과를 렌더링합니다.
-     * - HTMLElement, ReactElement, TemplateResult를 모두 처리할 수 있습니다.
+     * 주어진 렌더링 옵션에 따라 컨텐츠를 렌더링합니다.
      */
-    renderContent({ id, content, force }: RenderOption): Promise<HTMLDivElement>;
+    render({ id, value, force }: RenderOption): void;
     /**
-     * 기존 DOM을 라이프 사이클에 맞게 제거합니다.
+     * 기존 DOM을 삭제하여, 초기 상태로 되돌립니다.
      */
-    clear(): void;
+    reset(): void;
 }
 
 export { }

package/dist/index.js

@@ -1,8 +1,7 @@
-import { a as absolutePath, i as isExternalUrl, p as parseUrl } from "./share-ZrQFmsur.js";
-import { b, U } from "./share-ZrQFmsur.js";
+import { a as absolutePath, i as isExternalUrl, p as parseUrl } from "./share-6Zs4TunA.js";
+import { b, U } from "./share-6Zs4TunA.js";
 import { css, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 class RouteError extends Error {
   constructor(code, message, original) {
     super(message);
@@ -74,51 +73,6 @@ class RouteErrorEvent extends RouteEvent {
     this.error = error;
   }
 }
-const ban = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M15 8a6.97 6.97 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"/>\n</svg>';
-const __vite_glob_0_0 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: ban
-}, Symbol.toStringTag, { value: "Module" }));
-const boxSeam = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z"/>\n</svg>';
-const __vite_glob_0_1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: boxSeam
-}, Symbol.toStringTag, { value: "Module" }));
-const exclamationTriangle = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>\n  <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>\n</svg>';
-const __vite_glob_0_2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: exclamationTriangle
-}, Symbol.toStringTag, { value: "Module" }));
-const palette = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>\n  <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7"/>\n</svg>';
-const __vite_glob_0_3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: palette
-}, Symbol.toStringTag, { value: "Module" }));
-const personLock = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m0 5.996V14H3s-1 0-1-1 1-4 6-4q.845.002 1.544.107a4.5 4.5 0 0 0-.803.918A11 11 0 0 0 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664zM9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1"/>\n</svg>';
-const __vite_glob_0_4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: personLock
-}, Symbol.toStringTag, { value: "Module" }));
-const search = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>\n</svg>';
-const __vite_glob_0_5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: search
-}, Symbol.toStringTag, { value: "Module" }));
-const stopwatch = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5z"/>\n  <path d="M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64l.012-.013.354-.354-.354-.353a.5.5 0 0 1 .707-.708l1.414 1.415a.5.5 0 1 1-.707.707l-.353-.354-.354.354-.013.012A7 7 0 1 1 7 2.071V1.5a.5.5 0 0 1-.5-.5M8 3a6 6 0 1 0 .001 12A6 6 0 0 0 8 3"/>\n</svg>';
-const __vite_glob_0_6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: stopwatch
-}, Symbol.toStringTag, { value: "Module" }));
-const wifiOff = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M10.706 3.294A12.6 12.6 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.52.52 0 0 0 .668.05A11.45 11.45 0 0 1 8 4q.946 0 1.852.148zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.45 8.45 0 0 1 3.51-1.27zm2.596 1.404.785-.785q.947.362 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.5 8.5 0 0 0-1.98-.932zM8 10l.933-.933a6.5 6.5 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.53.53 0 0 1-.611.09A5.5 5.5 0 0 0 8 10m4.905-4.905.747-.747q.886.451 1.685 1.03a.485.485 0 0 1 .047.737.52.52 0 0 1-.668.05 11.5 11.5 0 0 0-1.811-1.07M9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A2 2 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75z"/>\n</svg>';
-const __vite_glob_0_7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: wifiOff
-}, Symbol.toStringTag, { value: "Module" }));
-const wrenchAdjustable = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M16 4.5a4.5 4.5 0 0 1-1.703 3.526L13 5l2.959-1.11q.04.3.041.61"/>\n  <path d="M11.5 9c.653 0 1.273-.139 1.833-.39L12 5.5 11 3l3.826-1.53A4.5 4.5 0 0 0 7.29 6.092l-6.116 5.096a2.583 2.583 0 1 0 3.638 3.638L9.908 8.71A4.5 4.5 0 0 0 11.5 9m-1.292-4.361-.596.893.809-.27a.25.25 0 0 1 .287.377l-.596.893.809-.27.158.475-1.5.5a.25.25 0 0 1-.287-.376l.596-.893-.809.27a.25.25 0 0 1-.287-.377l.596-.893-.809.27-.158-.475 1.5-.5a.25.25 0 0 1 .287.376M3 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>\n</svg>';
-const __vite_glob_0_8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: wrenchAdjustable
-}, Symbol.toStringTag, { value: "Module" }));
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -129,27 +83,12 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const icons = Object.entries(/* @__PURE__ */ Object.assign({
-  "../assets/ban.svg": __vite_glob_0_0,
-  "../assets/box-seam.svg": __vite_glob_0_1,
-  "../assets/exclamation-triangle.svg": __vite_glob_0_2,
-  "../assets/palette.svg": __vite_glob_0_3,
-  "../assets/person-lock.svg": __vite_glob_0_4,
-  "../assets/search.svg": __vite_glob_0_5,
-  "../assets/stopwatch.svg": __vite_glob_0_6,
-  "../assets/wifi-off.svg": __vite_glob_0_7,
-  "../assets/wrench-adjustable.svg": __vite_glob_0_8
-})).reduce((acc, [path, content]) => {
-  const name = path.split("/").pop()?.replace(".svg", "") || "";
-  acc[name] = content.default;
-  return acc;
-}, {});
 let UErrorPage = class extends LitElement {
   render() {
     const error = this.error || this.getDefaultError();
     const icon = this.getErrorIcon(error.code);
     return html`
-      <div class="icon">${unsafeHTML(icon)}</div>
+      <div class="icon">${icon}</div>
       <div class="code">${error.code}</div>
       <div class="message">${error.message}</div>
     `;
@@ -164,55 +103,55 @@ let UErrorPage = class extends LitElement {
     const numericCode = typeof code === "string" ? parseInt(code) : code;
     switch (codeStr) {
       case "OUTLET_NOT_FOUND":
-        return icons["box-seam"] || "📦";
+        return "📦";
       case "CONTENT_LOAD_FAILED":
-        return icons["wifi-off"] || "📡";
+        return "📡";
       case "RENDER_FAILED":
-        return icons["palette"] || "🎨";
+        return "🎨";
     }
     switch (numericCode) {
       case 404:
-        return icons["search"] || "🔍";
+        return "🔍";
       case 403:
-        return icons["ban"] || "🚫";
+        return "🚫";
       case 401:
-        return icons["person-lock"] || "🔐";
+        return "🔐";
       case 429:
-        return icons["stopwatch"] || "⏱️";
+        return "⏱️";
       case 503:
-        return icons["wrench-adjustable"] || "🛠️";
+        return "🛠️";
       default:
-        return icons["exclamation-triangle"] || "⚠️";
+        return "⚠️";
     }
   }
 };
 UErrorPage.styles = css`
     :host {
-      --route-icon-color: #4a5568;
-      --route-code-color: #1a202c;
-      --route-message-color: #718096;
+      --error-icon-color: #4a5568;
+      --error-code-color: #1a202c;
+      --error-message-color: #718096;
     }
     :host-context([theme="dark"]) {
-      --route-icon-color: #a0aec0;
-      --route-code-color: #f7fafc;
-      --route-message-color: #cbd5e0;
+      --error-icon-color: #a0aec0;
+      --error-code-color: #f7fafc;
+      --error-message-color: #cbd5e0;
     }
 
     @media (prefers-color-scheme: dark) {
       :host {
-        --route-icon-color: #a0aec0;
-        --route-code-color: #f7fafc;
-        --route-message-color: #cbd5e0;
+        --error-icon-color: #a0aec0;
+        --error-code-color: #f7fafc;
+        --error-message-color: #cbd5e0;
       }
-    };
+    }
 
     :host {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      min-height: 100vh;
       width: 100%;
+      height: 100%;
       text-align: center;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       overflow: auto;
@@ -220,31 +159,24 @@ UErrorPage.styles = css`
     }
 
     .icon {
-      display: contents;
+      color: var(--error-icon-color);
       font-size: 6rem;
-      color: var(--route-icon-color);
       opacity: 0.85;
     }
 
-    svg {
-      width: 1em;
-      height: 1em;
-      fill: currentColor;
-    }
-
     .code {
+      color: var(--error-code-color);
       font-size: 2rem;
       font-weight: 700;
-      margin: 1rem 0;
-      color: var(--route-code-color);
       letter-spacing: -0.5px;
+      margin: 1rem 0;
     }
 
     .message {
+      color: var(--error-message-color);
       font-size: 1rem;
-      color: var(--route-message-color);
-      max-width: 600px;
       line-height: 1.6;
+      max-width: 600px;
     }
   `;
 __decorateClass([
@@ -257,6 +189,7 @@ function getRandomID() {
   return window.isSecureContext ? window.crypto.randomUUID() : window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16);
 }
 function findOutlet(element) {
+  if (!element) return void 0;
   let outlet = void 0;
   if (element.shadowRoot) {
     outlet = element.shadowRoot.querySelector("u-outlet");
@@ -282,18 +215,26 @@ function findOutletOrThrow(element) {
   }
   return outlet;
 }
-function findAnchorFromEvent(e) {
-  const targets = e.composedPath() || [];
+async function waitOutlet(element, timeout = 1e4) {
+  const start = performance.now();
+  while (performance.now() - start < timeout) {
+    const outlet = findOutlet(element);
+    if (outlet) return outlet;
+    await new Promise((r) => setTimeout(r, 50));
+  }
+  throw new Error("Timed out waiting for u-outlet.");
+}
+function findAnchorFrom(event) {
+  const targets = event.composedPath() || [];
   if (targets && targets.length) {
     for (const node of targets) {
       if (!(node instanceof Element)) continue;
       if (node.tagName === "A") return node;
     }
   }
-  const tgt = e.target;
+  const tgt = event.target;
   if (!tgt) return null;
-  const anchor = tgt.closest("a");
-  return anchor;
+  return tgt.closest("a");
 }
 function setRoutes(routes, basepath) {
   for (const route of routes) {
@@ -327,10 +268,10 @@ function setRoutes(routes, basepath) {
   }
   return routes;
 }
-function getRoutes(pathname, routes) {
+function getRoutes(routes, pathname) {
   for (const route of routes) {
     if (route.index !== true && route.children && route.children.length > 0) {
-      const childRoutes = getRoutes(pathname, route.children);
+      const childRoutes = getRoutes(route.children, pathname);
       if (childRoutes.length > 0) {
         return [route, ...childRoutes];
       }
@@ -346,15 +287,15 @@ function getRoutes(pathname, routes) {
 }
 class Router {
   constructor(config) {
-    this.handleWindowPopstate = async () => {
+    this.handleWindowPopstate = async (_) => {
       const href = window.location.href;
       await this.go(href);
     };
-    this.handleRootClick = (e) => {
+    this.handleDocumentClick = async (e) => {
       try {
         if (e.defaultPrevented) return;
         if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) return;
-        const anchor = findAnchorFromEvent(e);
+        const anchor = findAnchorFrom(e);
         if (!anchor) return;
         const href = anchor.getAttribute("href") || anchor.href;
         if (!href) return;
@@ -363,28 +304,29 @@ class Router {
         if (anchor.getAttribute("rel") === "external") return;
         if (anchor.target && anchor.target !== "") return;
         e.preventDefault();
-        void this.go(anchor.href);
+        await this.go(anchor.href);
       } catch {
       }
     };
+    this.destroy();
     this._rootElement = config.root;
     this._basepath = absolutePath(config.basepath || "/");
     this._routes = setRoutes(config.routes || [], this._basepath);
     this._fallback = config.fallback;
-    window.removeEventListener("popstate", this.handleWindowPopstate);
     window.addEventListener("popstate", this.handleWindowPopstate);
     if (config.useIntercept !== false) {
-      this._rootElement.removeEventListener("click", this.handleRootClick);
-      this._rootElement.addEventListener("click", this.handleRootClick);
+      document.addEventListener("click", this.handleDocumentClick);
     }
     if (config.initialLoad !== false) {
-      void this.go(window.location.href);
+      void waitOutlet(this._rootElement).then(() => {
+        this.go(window.location.href);
+      });
     }
   }
   /** 객체를 정리하고 이벤트 리스너를 제거합니다. */
   destroy() {
     window.removeEventListener("popstate", this.handleWindowPopstate);
-    this._rootElement.removeEventListener("click", this.handleRootClick);
+    document.removeEventListener("click", this.handleDocumentClick);
     this._requestID = void 0;
     this._context = void 0;
   }
@@ -423,7 +365,7 @@ class Router {
     try {
       if (this._requestID !== requestID) return;
       window.dispatchEvent(new RouteBeginEvent(context));
-      const routes = getRoutes(context.pathname, this._routes);
+      const routes = getRoutes(this._routes, context.pathname);
       const lastRoute = routes[routes.length - 1];
       if (lastRoute && lastRoute.path instanceof URLPattern) {
         context.params = lastRoute.path.exec({ pathname: context.pathname })?.pathname.groups || {};
@@ -432,7 +374,6 @@ class Router {
       outlet = findOutletOrThrow(this._rootElement);
       let title = void 0;
       let content = null;
-      let element = null;
       if (routes.length === 0) {
         throw new NotFoundError(context.href);
       }
@@ -448,11 +389,11 @@ class Router {
           throw new ContentLoadError(LoadError);
         }
         try {
-          element = await outlet.renderContent({ id: route.id, content, force: route.force });
+          outlet.render({ id: route.id, value: content, force: route.force });
         } catch (renderError) {
           throw new ContentRenderError(renderError);
         }
-        outlet = findOutlet(element) || outlet;
+        outlet = findOutlet(outlet) || outlet;
         title = route.title || title;
       }
       document.title = title || document.title;
@@ -468,13 +409,13 @@ class Router {
       try {
         if (this._fallback && this._fallback.render && outlet) {
           const fallbackContent = await this._fallback.render({ ...context, error: routeError });
-          outlet.renderContent({ id: "#fallback", content: fallbackContent, force: true });
+          outlet.render({ id: "#fallback", value: fallbackContent, force: true });
           document.title = this._fallback.title || document.title;
         } else {
           const errorContent = new UErrorPage();
           errorContent.error = error;
           if (outlet) {
-            outlet.renderContent({ id: "#error", content: errorContent, force: true });
+            outlet.render({ id: "#error", value: errorContent, force: true });
           } else {
             document.body.innerHTML = "";
             document.body.appendChild(errorContent);

package/dist/react.d.ts

@@ -6,10 +6,14 @@ import { ReactWebComponent } from '@lit/react';
 import { TemplateResult } from 'lit-html';
 import { TemplateResult as TemplateResult_2 } from 'lit';
 
+/** 렌더링 옵션 */
 declare interface RenderOption {
+    /** 교차 렌더링 방지 ID */
     id?: string;
+    /** 강제 렌더링 여부 */
     force?: boolean;
-    content: RenderResult;
+    /** 렌더링할 값 */
+    value: RenderResult;
 }
 
 declare type RenderResult = HTMLElement | ReactElement | TemplateResult_2<1> | false;
@@ -27,36 +31,42 @@ export declare const ULink: ReactWebComponent<ULink_2, {}>;
 declare class ULink_2 extends LitElement {
     /** 외부 링크 여부 */
     private isExternal;
-    /** a 태그에 주입할 href 값 */
-    computedHref: string;
     /**
-     * a 태그 target을 지원하고 싶으면 열어두는게 좋습니다.
-     * - _blank 등을 쓰면 무조건 브라우저 기본 동작을 따르도록 처리합니다.
+     * 링크 대상 target 속성
+     *
+     * - `_self`: 현재 창에서 링크 열기 (기본값)
+     * - `_blank`: 새 탭/창에서 링크 열기
+     * - `_parent`: 부모 프레임에서 링크 열기
+     * - `_top`: 최상위 프레임에서 링크 열기
      */
     target?: string;
     /**
-     * - 속성을 정의하지 않으면 basepath로 이동합니다.
+     * 링크 대상 URL, 다음 사항에 따라 SPA 라우팅 또는 브라우저 네비게이션이 결정됩니다.
+     *
+     * - 속성을 정의하지 않으면 설정에서 지정한 `basepath`로 SPA 라우팅합니다.
      * - http(s)로 시작하면 외부 링크로 간주하고 브라우저 네비게이션을 사용합니다.
-     * - 절대경로(/...)일 경우 basepath로 시작하면 SPA 라우팅 대상이 될 수 있습니다.
-     * - 상대경로는 (basepath + 상대경로)로 SPA 라우팅 대상이 될 수 있습니다.
-     * - ?로 시작하면 현재 pathname에 쿼리스트링을 붙여 SPA 라우팅합니다.
-     * - #으로 시작하면 현재 URL에 해시만 바꾸고(브라우저 기본) 동작합니다.
+     * - 절대경로(/...)의 경우 `basepath`로 시작하면 SPA 라우팅합니다, 이외 브라우저 네비게이션을 사용합니다.
+     * - 상대경로는 (basepath + 상대경로)로 결합하여 SPA 라우팅합니다.
+     * - ?로 시작하면 현재 경로에 쿼리스트링을 추가하여 SPA 라우팅합니다.
+     * - #으로 시작하면 브라우저 기본 동작을 사용합니다.
      */
     href?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
-    /** basepath를 state에서 꺼내는 헬퍼 */
-    private getBasepath;
     /** a 태그에 주입할 href 값을 계산합니다. */
-    private computeHref;
+    private compute;
     /**
-     * 클릭 가로채기 규칙
+     * 클릭 가로채기 핸들러
      * - 좌클릭(0) + 보조키 없음(ctrl/meta/shift/alt 없음) + target이 _self일 때만 SPA 라우팅 고려
      * - 그 외(중클릭/우클릭/보조키/target=_blank 등)는 브라우저 기본 동작 유지
      */
-    private handleAnchorClick;
+    private handleClick;
     /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
     private dispatchPopstate;
+    /** basepath를 state에서 꺼내는 헬퍼 */
+    private getBasepath;
     static styles: CSSResult;
 }
 
@@ -66,24 +76,21 @@ declare class ULink_2 extends LitElement {
 export declare const UOutlet: ReactWebComponent<UOutlet_2, {}>;
 
 /**
- * 라우트 설정에 따라 LitElement 또는 React 컴포넌트를 렌더링합니다.
+ * LitElement 또는 React 컴포넌트를 렌더링해주는 웹컴포넌트 입니다.
  */
-declare class UOutlet_2 extends LitElement {
+declare class UOutlet_2 extends HTMLElement {
+    /** 교차 렌더링 방지 id */
     private routeId?;
-    private container?;
-    private content?;
-    /** 외부 스타일을 적용하기 위해 라이트 돔을사용 합니다. */
-    protected createRenderRoot(): this;
-    render(): TemplateResult_2<1>;
+    /** 실제 렌더링 컨텐츠 */
+    private root?;
     /**
-     * render 함수의 결과를 렌더링합니다.
-     * - HTMLElement, ReactElement, TemplateResult를 모두 처리할 수 있습니다.
+     * 주어진 렌더링 옵션에 따라 컨텐츠를 렌더링합니다.
      */
-    renderContent({ id, content, force }: RenderOption): Promise<HTMLDivElement>;
+    render({ id, value, force }: RenderOption): void;
     /**
-     * 기존 DOM을 라이프 사이클에 맞게 제거합니다.
+     * 기존 DOM을 삭제하여, 초기 상태로 되돌립니다.
      */
-    clear(): void;
+    reset(): void;
 }
 
 export { }

package/dist/react.js

@@ -1,38 +1,13 @@
 import React from "react";
-import { b as ULink$1, U as UOutlet$1 } from "./share-ZrQFmsur.js";
-const e = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), n = /* @__PURE__ */ new WeakMap(), t = (e2, t2, o2, l, a) => {
-  const s = a?.[t2];
-  void 0 === s ? (e2[t2] = o2, null == o2 && t2 in HTMLElement.prototype && e2.removeAttribute(t2)) : o2 !== l && ((e3, t3, o3) => {
-    let l2 = n.get(e3);
-    void 0 === l2 && n.set(e3, l2 = /* @__PURE__ */ new Map());
-    let a2 = l2.get(t3);
-    void 0 !== o3 ? void 0 === a2 ? (l2.set(t3, a2 = { handleEvent: o3 }), e3.addEventListener(t3, a2)) : a2.handleEvent = o3 : void 0 !== a2 && (l2.delete(t3), e3.removeEventListener(t3, a2));
-  })(e2, s, o2);
-}, o = ({ react: n2, tagName: o2, elementClass: l, events: a, displayName: s }) => {
-  const c = new Set(Object.keys(a ?? {})), r = n2.forwardRef(((s2, r2) => {
-    const i = n2.useRef(/* @__PURE__ */ new Map()), d = n2.useRef(null), f = {}, u = {};
-    for (const [n3, t2] of Object.entries(s2)) e.has(n3) ? f["className" === n3 ? "class" : n3] = t2 : c.has(n3) || n3 in l.prototype ? u[n3] = t2 : f[n3] = t2;
-    return n2.useLayoutEffect((() => {
-      if (null === d.current) return;
-      const e2 = /* @__PURE__ */ new Map();
-      for (const n3 in u) t(d.current, n3, s2[n3], i.current.get(n3), a), i.current.delete(n3), e2.set(n3, s2[n3]);
-      for (const [e3, n3] of i.current) t(d.current, e3, void 0, n3, a);
-      i.current = e2;
-    })), n2.useLayoutEffect((() => {
-      d.current?.removeAttribute("defer-hydration");
-    }), []), f.suppressHydrationWarning = true, n2.createElement(o2, { ...f, ref: n2.useCallback(((e2) => {
-      d.current = e2, "function" == typeof r2 ? r2(e2) : null !== r2 && (r2.current = e2);
-    }), [r2]) });
-  }));
-  return r.displayName = s ?? l.name, r;
-};
-const ULink = o({
+import { createComponent } from "@lit/react";
+import { b as ULink$1, U as UOutlet$1 } from "./share-6Zs4TunA.js";
+const ULink = createComponent({
   react: React,
   tagName: "u-link",
   elementClass: ULink$1,
   events: {}
 });
-const UOutlet = o({
+const UOutlet = createComponent({
   react: React,
   tagName: "u-outlet",
   elementClass: UOutlet$1,

package/dist/{share-ZrQFmsur.js → share-6Zs4TunA.js}

@@ -1,81 +1,54 @@
-import { LitElement, html, render, css } from "lit";
-import { customElement, state, property } from "lit/decorators.js";
+import { render, css, LitElement, html } from "lit";
 import { createRoot } from "react-dom/client";
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(result) || result;
-  return result;
-};
-let UOutlet = class extends LitElement {
-  /** 외부 스타일을 적용하기 위해 라이트 돔을사용 합니다. */
-  createRenderRoot() {
-    return this;
-  }
-  render() {
-    return html`${this.container}`;
-  }
+import { property, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+class UOutlet extends HTMLElement {
   /**
-   * render 함수의 결과를 렌더링합니다.
-   * - HTMLElement, ReactElement, TemplateResult를 모두 처리할 수 있습니다.
+   * 주어진 렌더링 옵션에 따라 컨텐츠를 렌더링합니다.
    */
-  async renderContent({ id, content, force }) {
-    if (this.routeId === id && force === false && this.container) {
-      return this.container;
-    }
+  render({ id, value, force }) {
+    if (this.routeId === id && force === false) return;
     this.routeId = id;
-    this.clear();
-    if (!this.container) {
-      throw new Error("Outlet container is not initialized.");
-    }
-    if (typeof content !== "object") {
+    this.reset();
+    if (typeof value !== "object") {
       throw new Error("Content is not a valid renderable object.");
     }
-    if (content instanceof HTMLElement) {
-      this.container.appendChild(content);
-    } else if ("_$litType$" in content) {
-      this.content = render(content, this.container);
-    } else if ("$$typeof" in content) {
-      this.content = createRoot(this.container);
-      this.content.render(content);
+    if (value instanceof HTMLElement) {
+      this.replaceChildren(value);
+      this.root = void 0;
+    } else if ("_$litType$" in value) {
+      this.root = render(value, this);
+    } else if ("$$typeof" in value) {
+      this.root = createRoot(this);
+      this.root.render(value);
     } else {
       throw new Error("not supported content type for Outlet rendering.");
     }
-    this.requestUpdate();
-    await this.updateComplete;
-    return this.container;
   }
   /**
-   * 기존 DOM을 라이프 사이클에 맞게 제거합니다.
+   * 기존 DOM을 삭제하여, 초기 상태로 되돌립니다.
    */
-  clear() {
-    if (this.content) {
-      if ("unmount" in this.content) {
-        this.content.unmount();
-      }
-      if ("setConnected" in this.content) {
-        this.content.setConnected(false);
-      }
-      this.content = void 0;
+  reset() {
+    if (this.root && "_$litPart$" in this) {
+      delete this._$litPart$;
     }
-    this.container = document.createElement("div");
-    this.container.style.display = "contents";
+    if (this.root && "unmount" in this.root) {
+      this.root.unmount();
+    }
+    this.root = void 0;
+    this.innerHTML = "";
   }
-};
-UOutlet = __decorateClass$1([
-  customElement("u-outlet")
-], UOutlet);
+}
+customElements.define("u-outlet", UOutlet);
 function isExternalUrl(url) {
   if (!url) return false;
-  const s = url.trim();
-  if (/^(?:mailto:|tel:|javascript:)/i.test(s)) return true;
-  if (s.startsWith("//")) return true;
+  url = url.trim();
+  if (/^(?:mailto:|tel:|javascript:)/i.test(url)) return true;
+  if (url.startsWith("//")) return true;
   try {
     const base = typeof window !== "undefined" ? window.location.origin : "http://localhost";
-    const parsed = new URL(s, base);
-    if (/^(?:ftp:|ftps:|data:|ws:|wss:)/i.test(parsed.protocol)) return true;
+    const parsed = new URL(url, base);
+    if (/^(?:ftp:|ftps:|ws:|wss:)/i.test(parsed.protocol)) return true;
     return parsed.origin !== new URL(base).origin;
   } catch {
     return false;
@@ -83,7 +56,7 @@ function isExternalUrl(url) {
 }
 function parseUrl(url, basepath) {
   let urlObj;
-  basepath = catchBasePath(basepath);
+  basepath = catchBasepath(basepath);
   if (url.startsWith("http")) {
     urlObj = new URL(url);
   } else if (url.startsWith("/")) {
@@ -113,7 +86,7 @@ function absolutePath(...paths) {
   if (paths.length === 0) return "/";
   return "/" + paths.join("/");
 }
-function catchBasePath(basepath) {
+function catchBasepath(basepath) {
   if (basepath === "/") return basepath;
   let pattern = new URLPattern({ pathname: basepath + "/*" });
   let match = pattern.exec({ pathname: window.location.pathname });
@@ -143,13 +116,11 @@ let ULink = class extends LitElement {
   constructor() {
     super(...arguments);
     this.isExternal = false;
-    this.computedHref = "#";
-    this.handleAnchorClick = (event) => {
+    this.handleClick = (event) => {
       if (event.defaultPrevented) return;
       if (event.button !== 0) return;
       if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-      const target = (this.target ?? "").trim();
-      if (target && target.toLowerCase() !== "_self") return;
+      if (this.target && this.target.toLowerCase() !== "_self") return;
       const basepath = this.getBasepath();
       if (!this.href) {
         event.preventDefault();
@@ -176,37 +147,34 @@ let ULink = class extends LitElement {
       this.dispatchPopstate(basepath, url);
     };
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.handleClick);
+    super.disconnectedCallback();
+  }
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("href")) {
       this.isExternal = isExternalUrl(this.href || "");
-      this.computedHref = this.computeHref(this.href);
     }
   }
   render() {
     return html`
-      <a 
-        target=${this.target ?? "_self"}
-        href=${this.computedHref}
-        @click=${this.handleAnchorClick}
-      >
+      <a target=${ifDefined(this.target)} href=${this.compute(this.href)}>
         <slot></slot>
       </a>
     `;
   }
-  /** basepath를 state에서 꺼내는 헬퍼 */
-  getBasepath() {
-    return window.history.state?.basepath || "";
-  }
   /** a 태그에 주입할 href 값을 계산합니다. */
-  computeHref(href) {
+  compute(href) {
     const basepath = this.getBasepath();
-    if (!href) {
-      return window.location.origin + basepath;
-    }
+    if (!href) return window.location.origin + basepath;
     if (this.isExternal) return href;
-    if (href.startsWith("#") || href.startsWith("?")) return href;
     if (href.startsWith("/")) return href;
+    if (href.startsWith("#") || href.startsWith("?")) return href;
     return absolutePath(basepath, href);
   }
   /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
@@ -214,15 +182,17 @@ let ULink = class extends LitElement {
     window.history.pushState({ basepath }, "", url);
     window.dispatchEvent(new PopStateEvent("popstate"));
   }
+  /** basepath를 state에서 꺼내는 헬퍼 */
+  getBasepath() {
+    return window.history.state?.basepath || "";
+  }
 };
 ULink.styles = css`
     :host {
-      display: inline-flex;
       cursor: pointer;
     }
 
     a {
-      display: contents;
       text-decoration: none;
 
       font-size: inherit;
@@ -232,9 +202,6 @@ ULink.styles = css`
       cursor: inherit;
     }
   `;
-__decorateClass([
-  state()
-], ULink.prototype, "computedHref", 2);
 __decorateClass([
   property({ type: String })
 ], ULink.prototype, "target", 2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/router",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "A modern client-side router for web applications with support for Lit and React components",
   "keywords": [
     "lit",
@@ -36,17 +36,18 @@
     }
   },
   "scripts": {
+    "test": "vite",
     "build": "vite build"
   },
   "dependencies": {
+    "@lit/react": "^1.0.8",
     "lit": "^3.3.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
   "devDependencies": {
-    "@lit/react": "^1.0.8",
-    "@types/node": "^25.0.8",
-    "@types/react": "^19.2.8",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",