@iyulab/router 0.6.0 → 0.6.1

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

@@ -325,7 +325,7 @@ export declare class Router {
     /** 브라우저 히스토리 이벤트가 발생시 라우팅 처리 */
     private handleWindowPopstate;
     /** 클릭 이벤트에서 라우터로 처리할 앵커를 찾아 클라이언트 라우팅 수행 */
-    private handleRootClick;
+    private handleDocumentClick;
 }
 
 /**
@@ -374,8 +374,6 @@ export declare interface RouterConfig {
 export declare class ULink extends LitElement {
     /** 외부 링크 여부 */
     private isExternal;
-    /** a 태그에 주입할 href 값 */
-    computedHref: string;
     /**
      * a 태그 target을 지원하고 싶으면 열어두는게 좋습니다.
      * - _blank 등을 쓰면 무조건 브라우저 기본 동작을 따르도록 처리합니다.
@@ -416,6 +414,8 @@ export declare class UOutlet extends LitElement {
     private content?;
     /** 외부 스타일을 적용하기 위해 라이트 돔을사용 합니다. */
     protected createRenderRoot(): this;
+    /** 컴포넌트가 DOM에 연결될 때 초기화 작업 수행 */
+    connectedCallback(): void;
     render(): TemplateResult<1>;
     /**
      * render 함수의 결과를 렌더링합니다.

package/dist/index.js

@@ -1,5 +1,5 @@
-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-SPj-xl6y.js";
+import { b, U } from "./share-SPj-xl6y.js";
 import { css, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
@@ -204,7 +204,7 @@ UErrorPage.styles = css`
         --route-code-color: #f7fafc;
         --route-message-color: #cbd5e0;
       }
-    };
+    }
 
     :host {
       display: flex;
@@ -282,15 +282,24 @@ 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;
@@ -350,11 +359,11 @@ class Router {
       const href = window.location.href;
       await this.go(href);
     };
-    this.handleRootClick = (e) => {
+    this.handleDocumentClick = (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;
@@ -374,17 +383,19 @@ class Router {
     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.removeEventListener("click", this.handleDocumentClick);
+      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;
   }

package/dist/react.d.ts

@@ -27,8 +27,6 @@ export declare const ULink: ReactWebComponent<ULink_2, {}>;
 declare class ULink_2 extends LitElement {
     /** 외부 링크 여부 */
     private isExternal;
-    /** a 태그에 주입할 href 값 */
-    computedHref: string;
     /**
      * a 태그 target을 지원하고 싶으면 열어두는게 좋습니다.
      * - _blank 등을 쓰면 무조건 브라우저 기본 동작을 따르도록 처리합니다.
@@ -74,6 +72,8 @@ declare class UOutlet_2 extends LitElement {
     private content?;
     /** 외부 스타일을 적용하기 위해 라이트 돔을사용 합니다. */
     protected createRenderRoot(): this;
+    /** 컴포넌트가 DOM에 연결될 때 초기화 작업 수행 */
+    connectedCallback(): void;
     render(): TemplateResult_2<1>;
     /**
      * render 함수의 결과를 렌더링합니다.

package/dist/react.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { b as ULink$1, U as UOutlet$1 } from "./share-ZrQFmsur.js";
+import { b as ULink$1, U as UOutlet$1 } from "./share-SPj-xl6y.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) => {

package/dist/{share-ZrQFmsur.js → share-SPj-xl6y.js}

@@ -1,5 +1,5 @@
 import { LitElement, html, render, css } from "lit";
-import { customElement, state, property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { createRoot } from "react-dom/client";
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -14,6 +14,14 @@ let UOutlet = class extends LitElement {
   createRenderRoot() {
     return this;
   }
+  /** 컴포넌트가 DOM에 연결될 때 초기화 작업 수행 */
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent("outlet-load", {
+      bubbles: true,
+      composed: true
+    }));
+  }
   render() {
     return html`${this.container}`;
   }
@@ -143,7 +151,6 @@ let ULink = class extends LitElement {
   constructor() {
     super(...arguments);
     this.isExternal = false;
-    this.computedHref = "#";
     this.handleAnchorClick = (event) => {
       if (event.defaultPrevented) return;
       if (event.button !== 0) return;
@@ -180,16 +187,14 @@ let ULink = class extends LitElement {
     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}
-      >
+        href=${this.computeHref(this.href)}
+        @click=${this.handleAnchorClick}>
         <slot></slot>
       </a>
     `;
@@ -232,9 +237,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.1",
   "description": "A modern client-side router for web applications with support for Lit and React components",
   "keywords": [
     "lit",
@@ -36,6 +36,7 @@
     }
   },
   "scripts": {
+    "test": "vite",
     "build": "vite build"
   },
   "dependencies": {
@@ -45,7 +46,7 @@
   },
   "devDependencies": {
     "@lit/react": "^1.0.8",
-    "@types/node": "^25.0.8",
+    "@types/node": "^25.0.9",
     "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "typescript": "^5.9.3",