@iyulab/router 0.10.1 → 0.10.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.10.3] - 2026-07-24
+
+### Fixed
+- **root 안에 `<u-outlet>` 이 없을 때 초기화 실패가 삼켜지던 문제 수정** (U-CMMS React+Vite E2E 실측, ISSUE-20260722-router-react-consumption #1). `waitOutlet` 은 타임아웃 시 서술적 오류로 reject 하지만, `Router` 생성자가 `void waitOutlet(...).then(...)` 로 거부를 처리하지 않아 폴링 타임아웃(최대 10초) 뒤 unhandled rejection 으로만 새어 나갔다 — 소비자에겐 원인 없는 빈 화면이었다. 이제 `.catch()` 로 `console.error('Router initialization failed:', …)` 에 명시적으로 표면화한다.
+
+### Documentation
+- README에 "React + Vite" 섹션 추가 — 아웃렛의 `react-dom/client` 동적 import 가 Vite dev 사전번들(`optimizeDeps`)에서 깨지는 CJS interop 을 `optimizeDeps.exclude: ['@iyulab/router']` + `include: ['react-dom/client']` 로 해소하는 소비 설정 명시(초안 #2).
+- Quick Start 에 root 의 `<u-outlet>` 요구 + 부재 시 로그 메시지 명시.
+
+## [0.10.2] - 2026-07-15
+
+### Changed
+- Click interception now reuses the route match computed while deciding whether to intercept an anchor, instead of recomputing it inside `go()` — avoids a duplicate `getRoutes` call per intercepted click
+- Bumped `@types/node`, `@types/react`, `happy-dom`, `vite`, `vite-plugin-dts`, `vitest` devDependencies
+
 ## [0.10.1] - 2026-07-02
 
 ### Documentation

package/README.md

@@ -29,6 +29,35 @@ const router = new Router({
 router.go('/users/1');
 ```
 
+> The router renders matched output into a `<u-outlet>` inside `root`. Make sure one exists:
+>
+> ```html
+> <div id="app"><u-outlet></u-outlet></div>
+> ```
+>
+> If `root` contains no `<u-outlet>`, the router logs
+> `Router initialization failed: Timed out waiting for <u-outlet>` and renders nothing.
+
+## React + Vite
+
+The outlet renders React content by dynamically importing `react-dom/client` when a route
+returns a React element. Under Vite's dev pre-bundling (`optimizeDeps`), this CommonJS
+interop can break — `TypeError: createRoot is not a function` by default, or
+`ReferenceError: module is not defined` if only the router is excluded. Pre-bundle
+`react-dom/client` while leaving the router itself unbundled:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['@iyulab/router'],
+    include: ['react-dom/client'],
+  },
+});
+```
+
 ## Skills Usage
 
 Install the `iyulab-router` skill for agent-friendly package guidance.

package/dist/Router.d.ts

@@ -29,8 +29,11 @@ export declare class Router {
      * 지정한 경로의 클라이언트 라우팅을 수행합니다. 상대경로일 경우 basepath와 조합되어 이동합니다.
      * @param href 이동할 경로
      * @param options 네비게이션 옵션
+     * @param routes (internal) 호출자가 이미 계산한 라우트 매칭 결과가 있으면 재사용합니다.
+     *   `handleRootElementClick`이 가로채기 여부 판단을 위해 미리 계산한 결과를 전달해
+     *   동일 pathname에 대한 getRoutes 중복 호출을 피하는 용도입니다. 외부에서 사용하지 마세요.
      */
-    go(href: string, options?: NavigateOptions): Promise<undefined>;
+    go(href: string, options?: NavigateOptions, routes?: RouteConfig[]): Promise<undefined>;
     /** 브라우저 히스토리 이벤트가 발생시 라우팅 처리 */
     private handleWindowPopstate;
     /** 클릭 이벤트에서 라우터로 처리할 앵커를 찾아 클라이언트 라우팅 수행 */

package/dist/components/UErrorPage.d.ts

@@ -1,5 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, CSSResult } from 'lit';
 import { RouteError } from '../types/RouteError.js';
+import { TemplateResult } from 'lit-html';
 /**
  * 라우팅 중 발생한 에러 정보를 사용자에게 전달하기 위한 기본 컴포넌트 입니다.
  */
@@ -7,10 +8,10 @@ export declare class UErrorPage extends LitElement {
     constructor(error?: RouteError);
     /** 표시할 에러 정보 */
     error?: RouteError;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): TemplateResult<1>;
     /** 기본 에러 정보 반환 */
     private getDefaultError;
     /** 에러 코드에 따른 기본 아이콘 반환 */
     private getErrorIcon;
-    static styles: import('lit').CSSResult;
+    static styles: CSSResult;
 }

package/dist/components/ULink.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues, CSSResult } from 'lit';
+import { TemplateResult } from 'lit-html';
 /**
  * - 클라이언트 라우팅을 지원하는 링크 엘리먼트입니다.
  * - 내부 링크는 클라이언트 라우팅을 수행하고, 외부 링크는 브라우저 기본 네비게이션을 사용합니다.
@@ -40,7 +41,7 @@ export declare class ULink extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): TemplateResult<1>;
     /** a 태그에 주입할 href 값을 계산합니다. */
     private compute;
     /**
@@ -53,5 +54,5 @@ export declare class ULink extends LitElement {
     private dispatchPopstate;
     /** basepath를 state에서 꺼내는 헬퍼 */
     private getBasepath;
-    static styles: import('lit').CSSResult;
+    static styles: CSSResult;
 }

package/dist/index.d.ts

@@ -7,12 +7,3 @@ export * from './types/RouterConfig';
 export * from './components/UOutlet';
 export * from './components/ULink';
 export { Router } from './Router';
-
-declare global {
-  interface WindowEventMap {
-    'route-begin': RouteBeginEvent;
-    'route-progress': RouteProgressEvent;
-    'route-done': RouteDoneEvent;
-    'route-error': RouteErrorEvent;
-  }
-}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as isExternalUrl, i as absolutePath, n as __decorate, o as parseUrl, r as __decorateMetadata, s as UOutlet, t as ULink } from "./share-C2LbLiIW.js";
+import { a as isExternalUrl, i as absolutePath, n as __decorate, o as parseUrl, r as __decorateMetadata, s as UOutlet, t as ULink } from "./share-BUgoWpfZ.js";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 //#region src/types/RouteError.ts
@@ -403,9 +403,10 @@ var Router = class {
 				if (anchor.target && anchor.target !== "") return;
 				const pathname = new URL(anchor.href).pathname;
 				if (this._basepath !== "/" && !pathname.startsWith(this._basepath)) return;
-				if (getRoutes(this._routes, pathname).length === 0) return;
+				const routes = getRoutes(this._routes, pathname);
+				if (routes.length === 0) return;
 				e.preventDefault();
-				await this.go(anchor.href);
+				await this.go(anchor.href, void 0, routes);
 			} catch {}
 		};
 		this.destroy();
@@ -418,6 +419,8 @@ var Router = class {
 		if (config.useIntercept !== false) this._rootElement.addEventListener("click", this.handleRootElementClick);
 		if (config.initialLoad !== false) waitOutlet(this._rootElement).then(() => {
 			this.go(window.location.href);
+		}).catch((error) => {
+			console.error("Router initialization failed:", error instanceof Error ? error.message : error);
 		});
 	}
 	/** 객체를 정리하고 이벤트 리스너를 제거합니다. */
@@ -443,8 +446,11 @@ var Router = class {
 	* 지정한 경로의 클라이언트 라우팅을 수행합니다. 상대경로일 경우 basepath와 조합되어 이동합니다.
 	* @param href 이동할 경로
 	* @param options 네비게이션 옵션
+	* @param routes (internal) 호출자가 이미 계산한 라우트 매칭 결과가 있으면 재사용합니다.
+	*   `handleRootElementClick`이 가로채기 여부 판단을 위해 미리 계산한 결과를 전달해
+	*   동일 pathname에 대한 getRoutes 중복 호출을 피하는 용도입니다. 외부에서 사용하지 마세요.
 	*/
-	async go(href, options) {
+	async go(href, options, routes) {
 		if (!options?.isRedirect) this._tracker.reset();
 		const requestID = getRandomID();
 		this._requestID = requestID;
@@ -461,7 +467,7 @@ var Router = class {
 		let title = void 0;
 		try {
 			outlet = findOutletOrThrow(this._rootElement);
-			const routes = getRoutes(this._routes, context.pathname);
+			routes ??= getRoutes(this._routes, context.pathname);
 			if (routes.length === 0) throw new NotFoundError(context.href);
 			const lastRoute = routes[routes.length - 1];
 			if (lastRoute.path instanceof URLPattern) context.params = lastRoute.path.exec({ pathname: context.pathname })?.pathname.groups || {};

package/dist/react.d.ts

@@ -1,10 +1,11 @@
 import { ULink as ULinkElement } from './components/ULink.js';
 import { UOutlet as UOutletElement } from './components/UOutlet.js';
+import { ReactWebComponent } from '@lit/react';
 /**
  * `u-link` 웹 컴포넌트를 React에서 사용할 수 있도록 래핑한 컴포넌트입니다.
  */
-export declare const ULink: import('@lit/react').ReactWebComponent<ULinkElement, {}>;
+export declare const ULink: ReactWebComponent<ULinkElement, {}>;
 /**
  * `u-outlet` 웹 컴포넌트를 React에서 사용할 수 있도록 래핑한 컴포넌트입니다.
  */
-export declare const UOutlet: import('@lit/react').ReactWebComponent<UOutletElement, {}>;
+export declare const UOutlet: ReactWebComponent<UOutletElement, {}>;

package/dist/react.js

@@ -1,4 +1,4 @@
-import { s as UOutlet$1, t as ULink$1 } from "./share-C2LbLiIW.js";
+import { s as UOutlet$1, t as ULink$1 } from "./share-BUgoWpfZ.js";
 import React from "react";
 import { createComponent } from "@lit/react";
 //#region src/react.ts

package/dist/{share-C2LbLiIW.js → share-BUgoWpfZ.js}

@@ -126,12 +126,12 @@ function catchBasepath(basepath) {
 	return basepath;
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/types/RouteEvent.d.ts

@@ -40,4 +40,15 @@ export declare class RouteErrorEvent extends RouteEvent {
     readonly error: RouteError;
     constructor(context: RouteContext, error: RouteError);
 }
+/**
+ * 전역 WindowEventMap에 라우터 이벤트 타입
+ */
+declare global {
+    interface WindowEventMap {
+        'route-begin': RouteBeginEvent;
+        'route-progress': RouteProgressEvent;
+        'route-done': RouteDoneEvent;
+        'route-error': RouteErrorEvent;
+    }
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/router",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "A modern client-side router for web applications with support for Lit and React components",
   "keywords": [
     "lit",
@@ -59,13 +59,13 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^25.8.0",
-    "@types/react": "^19.2.14",
+    "@types/node": "^26.1.1",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "happy-dom": "^20.10.2",
+    "happy-dom": "^20.10.6",
     "typescript": "^5.9.3",
-    "vite": "^8.0.13",
-    "vite-plugin-dts": "^5.0.0",
-    "vitest": "^4.1.8"
+    "vite": "^8.1.4",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.10"
   }
 }