@iyulab/router 0.7.1 → 0.7.3

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 iyulab
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2025 iyulab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,272 +1,272 @@
-# @iyulab/router
-
-A modern, lightweight client-side router for web applications with support for both Lit and React components.
-
-## Features
-
-- 🚀 **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
-- 🎯 **Nested Routing** - Support for deeply nested route hierarchies with index and path routes
-- 📊 **Route Events** - Track navigation progress with route-begin, route-done, and route-error events
-- ⚠️ **Enhanced Error Handling** - Built-in ErrorPage component with improved styling
-
-## Installation
-
-```bash
-npm install @iyulab/router
-```
-
-## Quick Start
-
-### Basic Setup
-
-```typescript
-import { Router } from '@iyulab/router';
-import { html } from 'lit';
-
-const router = new Router({
-  basepath: '/',
-  routes: [
-    {
-      index: true,
-      render: () => html`<home-page></home-page>`
-    },
-    {
-      path: '/user/:id', // URLPattern route
-      render: (routeInfo) => html`<user-page .userId=${routeInfo.params.id}></user-page>`
-    }
-  ],
-});
-```
-
-### Mixed Framework Support
-
-```typescript
-import React from 'react';
-
-const routes = [
-  // Lit component
-  {
-    path: '/lit-page',
-    render: (routeInfo) => {
-      return html`<my-lit-component .routeInfo=${routeInfo}></my-lit-component>`
-    }
-  },
-  // React component
-  {
-    path: '/react-page',
-    render: (routeInfo) => {
-      return ( <MyComponent></MyComponent> )
-    }
-  },
-  // HTML element
-  {
-    path: '/element-page',
-    render: (routeInfo) => {
-      const element = document.createElement('my-element');
-      element.data = routeInfo.params;
-      return element;
-    }
-  }
-];
-```
-
-### 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 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() {
-    return html`
-      <nav>
-        <u-link href="/">Home</u-link>
-        <u-link href="/about">About</u-link>
-        <u-link href="/user/123">User Profile</u-link>
-      </nav>
-      <main>
-        <u-outlet></u-outlet>
-      </main>
-    `;
-  }
-}
-```
-
-### Using with React Components
-
-```tsx
-import React from 'react';
-import { UOutlet, ULink } from '@iyulab/router/react';
-
-export function AppRoot() {
-  return (
-    <div>
-      <nav>
-        <ULink href="/">Home</ULink>
-        <ULink href="/about">About</ULink>
-        <ULink href="/user/123">User Profile</ULink>
-      </nav>
-      <main>
-        <UOutlet />
-      </main>
-    </div>
-  );
-}
-```
-
-## Error Handling
-
-The router provides comprehensive error handling through `FallbackRouteContext`. When a routing error occurs, the fallback render function receives a context with full error information:
-
-```typescript
-const router = new Router({
-  root: document.body,
-  basepath: '/',
-  routes: [...],
-  fallback: {
-    title: 'Error',
-    render: (ctx) => {
-      // ctx.error contains RouteError with code, message, and original error
-      const { code, message, original } = ctx.error;
-
-      if (code === 'NOT_FOUND') {
-        return html`<not-found-page .path=${ctx.pathname}></not-found-page>`;
-      }
-      if (code === 'CONTENT_LOAD_ERROR') {
-        return html`<error-page .message=${message}></error-page>`;
-      }
-      return html`<error-page .error=${ctx.error}></error-page>`;
-    }
-  }
-});
-```
-
-Error types:
-- `NotFoundError` — No matching route found (code: `NOT_FOUND`)
-- `ContentLoadError` — Route render function threw an error (code: `CONTENT_LOAD_ERROR`)
-- `ContentRenderError` — Outlet rendering failed (code: `CONTENT_RENDER_ERROR`)
-
-## Route Metadata
-
-Routes can carry arbitrary metadata via the `meta` field. When a route matches, metadata from the entire matched route chain is merged (parent → child order, child overrides parent):
-
-```typescript
-const router = new Router({
-  root: document.body,
-  basepath: '/',
-  routes: [
-    {
-      path: '/admin',
-      meta: { requiresAuth: true, layout: 'admin' },
-      render: (ctx) => {
-        // ctx.meta === { requiresAuth: true, layout: 'admin' }
-        return html`<admin-layout><u-outlet></u-outlet></admin-layout>`;
-      },
-      children: [
-        {
-          path: 'settings',
-          meta: { requiresAuth: true, role: 'superadmin' },
-          render: (ctx) => {
-            // ctx.meta === { requiresAuth: true, layout: 'admin', role: 'superadmin' }
-            return html`<admin-settings></admin-settings>`;
-          }
-        }
-      ]
-    }
-  ]
-});
-```
-
-Use cases: authentication guards, SEO tags, analytics tracking, layout selection, and more.
-
-## Route Events
-
-The router dispatches events on the `window` object during navigation:
-
-| Event | Type | Description |
-|-------|------|-------------|
-| `route-begin` | `RouteBeginEvent` | Fired when navigation starts |
-| `route-progress` | `RouteProgressEvent` | Fired during async loading (0–100) |
-| `route-done` | `RouteDoneEvent` | Fired when navigation completes successfully |
-| `route-error` | `RouteErrorEvent` | Fired when a routing error occurs |
-
-```typescript
-// Track navigation progress
-window.addEventListener('route-progress', (e: RouteProgressEvent) => {
-  progressBar.value = e.progress;
-});
-
-// Log navigation events
-window.addEventListener('route-begin', (e: RouteBeginEvent) => {
-  console.log('Navigating to:', e.context.pathname);
-});
-
-window.addEventListener('route-done', (e: RouteDoneEvent) => {
-  analytics.trackPageView(e.context.pathname);
-});
-
-window.addEventListener('route-error', (e: RouteErrorEvent) => {
-  errorTracker.report(e.error);
-});
-```
-
-## URL Parameters
-
-The router supports URLPattern-based parameter matching:
-
-```typescript
-const routes: RouteConfig[] = [
-  // Required parameter
-  { path: '/user/:id', render: (ctx) => html`<user-page .id=${ctx.params.id}></user-page>` },
-
-  // Optional parameter
-  { path: '/posts/:category?', render: (ctx) => {
-    const category = ctx.params.category || 'all';
-    return html`<posts-page .category=${category}></posts-page>`;
-  }},
-
-  // Wildcard (catch-all)
-  { path: '/docs/:path*', render: (ctx) => html`<docs-page .path=${ctx.params.path}></docs-page>` },
-
-  // Multiple parameters
-  { path: '/org/:orgId/repo/:repoId', render: (ctx) => {
-    return html`<repo-page .orgId=${ctx.params.orgId} .repoId=${ctx.params.repoId}></repo-page>`;
-  }}
-];
-```
-
-When URL parameters change (e.g., navigating from `/user/1` to `/user/2`), leaf routes (without children) automatically re-render since `force` defaults to `true`. For parent routes with children, set `force: true` explicitly if re-rendering is needed on parameter changes.
-
-## License
-
-MIT License - see [LICENSE](LICENSE) file for details.
+# @iyulab/router
+
+A modern, lightweight client-side router for web applications with support for both Lit and React components.
+
+## Features
+
+- 🚀 **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
+- 🎯 **Nested Routing** - Support for deeply nested route hierarchies with index and path routes
+- 📊 **Route Events** - Track navigation progress with route-begin, route-done, and route-error events
+- ⚠️ **Enhanced Error Handling** - Built-in ErrorPage component with improved styling
+
+## Installation
+
+```bash
+npm install @iyulab/router
+```
+
+## Quick Start
+
+### Basic Setup
+
+```typescript
+import { Router } from '@iyulab/router';
+import { html } from 'lit';
+
+const router = new Router({
+  basepath: '/',
+  routes: [
+    {
+      index: true,
+      render: () => html`<home-page></home-page>`
+    },
+    {
+      path: '/user/:id', // URLPattern route
+      render: (routeInfo) => html`<user-page .userId=${routeInfo.params.id}></user-page>`
+    }
+  ],
+});
+```
+
+### Mixed Framework Support
+
+```typescript
+import React from 'react';
+
+const routes = [
+  // Lit component
+  {
+    path: '/lit-page',
+    render: (routeInfo) => {
+      return html`<my-lit-component .routeInfo=${routeInfo}></my-lit-component>`
+    }
+  },
+  // React component
+  {
+    path: '/react-page',
+    render: (routeInfo) => {
+      return ( <MyComponent></MyComponent> )
+    }
+  },
+  // HTML element
+  {
+    path: '/element-page',
+    render: (routeInfo) => {
+      const element = document.createElement('my-element');
+      element.data = routeInfo.params;
+      return element;
+    }
+  }
+];
+```
+
+### 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 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() {
+    return html`
+      <nav>
+        <u-link href="/">Home</u-link>
+        <u-link href="/about">About</u-link>
+        <u-link href="/user/123">User Profile</u-link>
+      </nav>
+      <main>
+        <u-outlet></u-outlet>
+      </main>
+    `;
+  }
+}
+```
+
+### Using with React Components
+
+```tsx
+import React from 'react';
+import { UOutlet, ULink } from '@iyulab/router/react';
+
+export function AppRoot() {
+  return (
+    <div>
+      <nav>
+        <ULink href="/">Home</ULink>
+        <ULink href="/about">About</ULink>
+        <ULink href="/user/123">User Profile</ULink>
+      </nav>
+      <main>
+        <UOutlet />
+      </main>
+    </div>
+  );
+}
+```
+
+## Error Handling
+
+The router provides comprehensive error handling through `FallbackRouteContext`. When a routing error occurs, the fallback render function receives a context with full error information:
+
+```typescript
+const router = new Router({
+  root: document.body,
+  basepath: '/',
+  routes: [...],
+  fallback: {
+    title: 'Error',
+    render: (ctx) => {
+      // ctx.error contains RouteError with code, message, and original error
+      const { code, message, original } = ctx.error;
+
+      if (code === 'NOT_FOUND') {
+        return html`<not-found-page .path=${ctx.pathname}></not-found-page>`;
+      }
+      if (code === 'CONTENT_LOAD_ERROR') {
+        return html`<error-page .message=${message}></error-page>`;
+      }
+      return html`<error-page .error=${ctx.error}></error-page>`;
+    }
+  }
+});
+```
+
+Error types:
+- `NotFoundError` — No matching route found (code: `NOT_FOUND`)
+- `ContentLoadError` — Route render function threw an error (code: `CONTENT_LOAD_ERROR`)
+- `ContentRenderError` — Outlet rendering failed (code: `CONTENT_RENDER_ERROR`)
+
+## Route Metadata
+
+Routes can carry arbitrary metadata via the `meta` field. When a route matches, metadata from the entire matched route chain is merged (parent → child order, child overrides parent):
+
+```typescript
+const router = new Router({
+  root: document.body,
+  basepath: '/',
+  routes: [
+    {
+      path: '/admin',
+      meta: { requiresAuth: true, layout: 'admin' },
+      render: (ctx) => {
+        // ctx.meta === { requiresAuth: true, layout: 'admin' }
+        return html`<admin-layout><u-outlet></u-outlet></admin-layout>`;
+      },
+      children: [
+        {
+          path: 'settings',
+          meta: { requiresAuth: true, role: 'superadmin' },
+          render: (ctx) => {
+            // ctx.meta === { requiresAuth: true, layout: 'admin', role: 'superadmin' }
+            return html`<admin-settings></admin-settings>`;
+          }
+        }
+      ]
+    }
+  ]
+});
+```
+
+Use cases: authentication guards, SEO tags, analytics tracking, layout selection, and more.
+
+## Route Events
+
+The router dispatches events on the `window` object during navigation:
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `route-begin` | `RouteBeginEvent` | Fired when navigation starts |
+| `route-progress` | `RouteProgressEvent` | Fired during async loading (0–100) |
+| `route-done` | `RouteDoneEvent` | Fired when navigation completes successfully |
+| `route-error` | `RouteErrorEvent` | Fired when a routing error occurs |
+
+```typescript
+// Track navigation progress
+window.addEventListener('route-progress', (e: RouteProgressEvent) => {
+  progressBar.value = e.progress;
+});
+
+// Log navigation events
+window.addEventListener('route-begin', (e: RouteBeginEvent) => {
+  console.log('Navigating to:', e.context.pathname);
+});
+
+window.addEventListener('route-done', (e: RouteDoneEvent) => {
+  analytics.trackPageView(e.context.pathname);
+});
+
+window.addEventListener('route-error', (e: RouteErrorEvent) => {
+  errorTracker.report(e.error);
+});
+```
+
+## URL Parameters
+
+The router supports URLPattern-based parameter matching:
+
+```typescript
+const routes: RouteConfig[] = [
+  // Required parameter
+  { path: '/user/:id', render: (ctx) => html`<user-page .id=${ctx.params.id}></user-page>` },
+
+  // Optional parameter
+  { path: '/posts/:category?', render: (ctx) => {
+    const category = ctx.params.category || 'all';
+    return html`<posts-page .category=${category}></posts-page>`;
+  }},
+
+  // Wildcard (catch-all)
+  { path: '/docs/:path*', render: (ctx) => html`<docs-page .path=${ctx.params.path}></docs-page>` },
+
+  // Multiple parameters
+  { path: '/org/:orgId/repo/:repoId', render: (ctx) => {
+    return html`<repo-page .orgId=${ctx.params.orgId} .repoId=${ctx.params.repoId}></repo-page>`;
+  }}
+];
+```
+
+When URL parameters change (e.g., navigating from `/user/1` to `/user/2`), leaf routes (without children) automatically re-render since `force` defaults to `true`. For parent routes with children, set `force: true` explicitly if re-rendering is needed on parameter changes.
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.

package/dist/index.d.ts

@@ -1,9 +1,7 @@
 import { CSSResult } from 'lit';
 import { LitElement } from 'lit';
 import { PropertyValues } from 'lit';
-import { ReactElement } from 'react';
-import { TemplateResult } from 'lit';
-import { TemplateResult as TemplateResult_2 } from 'lit-html';
+import { TemplateResult } from 'lit-html';
 
 /**
  * 공통 라우트 속성
@@ -48,7 +46,7 @@ declare interface BaseRouteConfig {
      * }
      * ```
      */
-    render?: (ctx: RouteContext) => Promise<RenderResult> | RenderResult;
+    render?: (ctx: RouteContext) => Promise<unknown> | unknown;
     /**
      * 라우터 URL 변경시 렌더링을 강제할지 여부
      * - 기본값으로 children을 가질때 false로 설정되며, children이 없을 경우 true로 설정됩니다.
@@ -85,8 +83,6 @@ export declare class ContentRenderError extends RouteError {
     constructor(original?: Error | any);
 }
 
-export declare type FallbackRenderResult = HTMLElement | ReactElement | TemplateResult<1>;
-
 export declare interface FallbackRouteConfig {
     /**
      * 브라우저의 타이틀이 설정에 따라 변경됩니다.
@@ -109,7 +105,7 @@ export declare interface FallbackRouteConfig {
      * }
      * ```
      */
-    render?: (ctx: FallbackRouteContext) => Promise<FallbackRenderResult> | FallbackRenderResult;
+    render?: (ctx: FallbackRouteContext) => Promise<unknown> | unknown;
 }
 
 export declare interface FallbackRouteContext extends RouteContext {
@@ -161,11 +157,9 @@ declare interface RenderOption {
     /** 강제 렌더링 여부 */
     force?: boolean;
     /** 렌더링할 값 */
-    value: RenderResult;
+    value: unknown;
 }
 
-export declare type RenderResult = HTMLElement | ReactElement | TemplateResult<1> | false;
-
 /**
  * 라우트 시작 이벤트
  */
@@ -415,7 +409,7 @@ export declare class ULink extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
-    render(): TemplateResult_2<1>;
+    render(): TemplateResult<1>;
     /** a 태그에 주입할 href 값을 계산합니다. */
     private compute;
     /**
@@ -442,7 +436,7 @@ export declare class UOutlet extends HTMLElement {
     /**
      * 주어진 렌더링 옵션에 따라 컨텐츠를 렌더링합니다.
      */
-    render({ id, value, force }: RenderOption): void;
+    render({ id, value, force }: RenderOption): Promise<void>;
     /**
      * 기존 DOM을 삭제하여, 초기 상태로 되돌립니다.
      */
@@ -451,11 +445,11 @@ export declare class UOutlet extends HTMLElement {
 
 export { }
 
-declare global {
-  interface WindowEventMap {
-    'route-begin': RouteBeginEvent;
-    'route-progress': RouteProgressEvent;
-    'route-done': RouteDoneEvent;
-    'route-error': RouteErrorEvent;
-  }
+declare global {
+  interface WindowEventMap {
+    'route-begin': RouteBeginEvent;
+    'route-progress': RouteProgressEvent;
+    'route-done': RouteDoneEvent;
+    'route-error': RouteErrorEvent;
+  }
 }

package/dist/index.js

@@ -1,5 +1,5 @@
-import { a as absolutePath, i as isExternalUrl, p as parseUrl } from "./share-B5lysqp2.js";
-import { b, U } from "./share-B5lysqp2.js";
+import { a as absolutePath, i as isExternalUrl, p as parseUrl } from "./share-CG-3Tbuy.js";
+import { U, b } from "./share-CG-3Tbuy.js";
 import { css, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
 class RouteError extends Error {
@@ -102,11 +102,11 @@ let UErrorPage = class extends LitElement {
     const codeStr = String(code);
     const numericCode = typeof code === "string" ? parseInt(code) : code;
     switch (codeStr) {
-      case "OUTLET_NOT_FOUND":
+      case "OUTLET_MISSING":
         return "📦";
       case "CONTENT_LOAD_FAILED":
         return "📡";
-      case "RENDER_FAILED":
+      case "CONTENT_RENDER_FAILED":
         return "🎨";
     }
     switch (numericCode) {
@@ -189,23 +189,11 @@ 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;
   if (element.tagName === "U-OUTLET") return element;
-  let outlet = void 0;
-  if (element.shadowRoot) {
-    outlet = element.shadowRoot.querySelector("u-outlet");
-    if (outlet) return outlet;
-    for (const child of Array.from(element.shadowRoot.children)) {
-      outlet = findOutlet(child);
-      if (outlet) return outlet;
-    }
-  } else {
-    outlet = element.querySelector("u-outlet");
-    if (outlet) return outlet;
-    for (const child of Array.from(element.children)) {
-      outlet = findOutlet(child);
-      if (outlet) return outlet;
-    }
+  const root = element.shadowRoot ?? element;
+  for (const child of Array.from(root.children)) {
+    const result = findOutlet(child);
+    if (result) return result;
   }
   return void 0;
 }
@@ -408,8 +396,8 @@ class Router {
       window.dispatchEvent(new RouteDoneEvent(context));
     } catch (error) {
       const routeError = error instanceof RouteError ? error : new RouteError(
-        error.status || error.code || "UNKNOWN_ERROR",
-        error.message || "An unexpected error occurred",
+        error?.status || error?.code || "UNKNOWN_ERROR",
+        error?.message || "An unexpected error occurred",
         error
       );
       window.dispatchEvent(new RouteErrorEvent(context, routeError));
@@ -447,6 +435,6 @@ export {
   RouteErrorEvent,
   RouteProgressEvent,
   Router,
-  b as ULink,
-  U as UOutlet
+  U as ULink,
+  b as UOutlet
 };

package/dist/react.d.ts

@@ -1,96 +1,11 @@
-import { CSSResult } from 'lit';
-import { LitElement } from 'lit';
-import { PropertyValues } from 'lit';
-import { ReactElement } from 'react';
-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;
-    /** 렌더링할 값 */
-    value: RenderResult;
-}
-
-declare type RenderResult = HTMLElement | ReactElement | TemplateResult_2<1> | false;
-
 /**
  * `u-link` 웹 컴포넌트를 React에서 사용할 수 있도록 래핑한 컴포넌트입니다.
  */
-export declare const ULink: ReactWebComponent<ULink_2, {}>;
-
-/**
- * - 클라이언트 라우팅을 지원하는 링크 엘리먼트입니다.
- * - 내부 링크는 클라이언트 라우팅을 수행하고, 외부 링크는 브라우저 기본 네비게이션을 사용합니다.
- * - Ctrl/Meta/Shift/Alt, 중클릭/우클릭 등은 브라우저 기본 동작(새 탭, 컨텍스트 메뉴 등)을 그대로 유지합니다.
- */
-declare class ULink_2 extends LitElement {
-    /** 외부 링크 여부 */
-    private isExternal;
-    /**
-     * 링크 대상 target 속성
-     *
-     * - `_self`: 현재 창에서 링크 열기 (기본값)
-     * - `_blank`: 새 탭/창에서 링크 열기
-     * - `_parent`: 부모 프레임에서 링크 열기
-     * - `_top`: 최상위 프레임에서 링크 열기
-     */
-    target?: string;
-    /**
-     * 링크 대상 URL, 다음 사항에 따라 SPA 라우팅 또는 브라우저 네비게이션이 결정됩니다.
-     *
-     * - 속성을 정의하지 않으면 설정에서 지정한 `basepath`로 SPA 라우팅합니다.
-     * - http(s)로 시작하면 외부 링크로 간주하고 브라우저 네비게이션을 사용합니다.
-     * - 절대경로(/...)의 경우 `basepath`로 시작하면 SPA 라우팅합니다, 이외 브라우저 네비게이션을 사용합니다.
-     * - 상대경로는 (basepath + 상대경로)로 결합하여 SPA 라우팅합니다.
-     * - ?로 시작하면 현재 경로에 쿼리스트링을 추가하여 SPA 라우팅합니다.
-     * - #으로 시작하면 브라우저 기본 동작을 사용합니다.
-     */
-    href?: string;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues): void;
-    render(): TemplateResult<1>;
-    /** a 태그에 주입할 href 값을 계산합니다. */
-    private compute;
-    /**
-     * 클릭 가로채기 핸들러
-     * - 좌클릭(0) + 보조키 없음(ctrl/meta/shift/alt 없음) + target이 _self일 때만 SPA 라우팅 고려
-     * - 그 외(중클릭/우클릭/보조키/target=_blank 등)는 브라우저 기본 동작 유지
-     */
-    private handleClick;
-    /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
-    private dispatchPopstate;
-    /** basepath를 state에서 꺼내는 헬퍼 */
-    private getBasepath;
-    static styles: CSSResult;
-}
+export declare const ULink: any;
 
 /**
  * `u-outlet` 웹 컴포넌트를 React에서 사용할 수 있도록 래핑한 컴포넌트입니다.
  */
-export declare const UOutlet: ReactWebComponent<UOutlet_2, {}>;
-
-/**
- * LitElement 또는 React 컴포넌트를 렌더링해주는 웹컴포넌트 입니다.
- */
-declare class UOutlet_2 extends HTMLElement {
-    /** 교차 렌더링 방지 id */
-    private routeId?;
-    /** 실제 렌더링 컨텐츠 */
-    private root?;
-    /**
-     * 주어진 렌더링 옵션에 따라 컨텐츠를 렌더링합니다.
-     */
-    render({ id, value, force }: RenderOption): void;
-    /**
-     * 기존 DOM을 삭제하여, 초기 상태로 되돌립니다.
-     */
-    reset(): void;
-}
+export declare const UOutlet: any;
 
 export { }

package/dist/react.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { createComponent } from "@lit/react";
-import { b as ULink$1, U as UOutlet$1 } from "./share-B5lysqp2.js";
+import { U as ULink$1, b as UOutlet$1 } from "./share-CG-3Tbuy.js";
 const ULink = createComponent({
   react: React,
   tagName: "u-link",

package/dist/{share-B5lysqp2.js → share-CG-3Tbuy.js}

@@ -1,15 +1,17 @@
 import { render, css, LitElement, html } from "lit";
-import { createRoot } from "react-dom/client";
 import { property, customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 class UOutlet extends HTMLElement {
   /**
    * 주어진 렌더링 옵션에 따라 컨텐츠를 렌더링합니다.
    */
-  render({ id, value, force }) {
+  async render({ id, value, force }) {
     if (this.routeId === id && force === false) return;
     this.routeId = id;
     this.reset();
+    if (value === null) {
+      throw new Error("Content is null and cannot be rendered.");
+    }
     if (typeof value !== "object") {
       throw new Error("Content is not a valid renderable object.");
     }
@@ -19,6 +21,7 @@ class UOutlet extends HTMLElement {
     } else if ("_$litType$" in value) {
       this.root = render(value, this);
     } else if ("$$typeof" in value) {
+      const { createRoot } = await import("react-dom/client");
       this.root = createRoot(this);
       this.root.render(value);
     } else {
@@ -94,7 +97,7 @@ function catchBasepath(basepath) {
   if (match) {
     const rawPath = match.pathname.input;
     const restPath = match.pathname.groups?.["0"];
-    return restPath ? rawPath.replace("/" + restPath, "") : rawPath.slice(0, -1);
+    return restPath !== void 0 && restPath !== "" ? rawPath.replace("/" + restPath, "") : rawPath.replace(/\/$/, "");
   }
   pattern = new URLPattern({ pathname: `${basepath}{/}?` });
   match = pattern.exec({ pathname: window.location.pathname });
@@ -185,7 +188,7 @@ let ULink = class extends LitElement {
   }
   /** basepath를 state에서 꺼내는 헬퍼 */
   getBasepath() {
-    return window.history.state?.basepath || "";
+    return window.history.state?.basepath || "/";
   }
 };
 ULink.styles = css`
@@ -213,9 +216,9 @@ ULink = __decorateClass([
   customElement("u-link")
 ], ULink);
 export {
-  UOutlet as U,
+  ULink as U,
   absolutePath as a,
-  ULink as b,
+  UOutlet as b,
   isExternalUrl as i,
   parseUrl as p
 };

package/package.json

@@ -1,56 +1,69 @@
-{
-  "name": "@iyulab/router",
-  "version": "0.7.1",
-  "description": "A modern client-side router for web applications with support for Lit and React components",
-  "keywords": [
-    "lit",
-    "react",
-    "router",
-    "routing",
-    "spa",
-    "navigation",
-    "client-side"
-  ],
-  "license": "MIT",
-  "author": "iyulab",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/iyulab/node-router.git"
-  },
-  "files": [
-    "dist",
-    "package.json",
-    "README.md",
-    "LICENSE"
-  ],
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./src/index.d.ts",
-      "import": "./src/index.js"
-    },
-    "./react": {
-      "types": "./dist/react.d.ts",
-      "import": "./dist/react.js"
-    }
-  },
-  "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": {
-    "@types/node": "^25.0.9",
-    "@types/react": "^19.2.9",
-    "@types/react-dom": "^19.2.3",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4"
-  }
-}
+{
+  "name": "@iyulab/router",
+  "version": "0.7.3",
+  "description": "A modern client-side router for web applications with support for Lit and React components",
+  "keywords": [
+    "lit",
+    "react",
+    "router",
+    "routing",
+    "spa",
+    "navigation",
+    "client-side"
+  ],
+  "license": "MIT",
+  "author": "iyulab",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iyulab/node-router.git"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    }
+  },
+  "scripts": {
+    "test": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "lit": "^3.3.2"
+  },
+  "peerDependencies": {
+    "@lit/react": ">=1.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "@lit/react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}