@iyulab/router 0.5.2 → 0.5.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,163 +1,163 @@
-# @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
-- 🔗 **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
-
-```bash
-npm install @iyulab/router
-```
-
-## Quick Start
-
-### Basic Setup
-
-```typescript
-import { Router } from '@iyulab/router';
-import { html } from 'lit';
-
-const router = new Router({
-  root: document.getElementById('app')!,
-  basepath: '/app',
-  routes: [
-    {
-      index: true,
-      render: () => html`<home-page></home-page>`
-    },
-    {
-      path: '/user/:id',
-      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
-
-```typescript
-import React from 'react';
-
-const routes = [
-  // Lit component
-  {
-    path: '/lit-page',
-    render: (routeInfo) => html`<my-lit-component .routeInfo=${routeInfo}></my-lit-component>`
-  },
-  // React component
-  {
-    path: '/react-page',
-    render: (routeInfo) => React.createElement(MyReactComponent, { routeInfo })
-  },
-  // HTML element
-  {
-    path: '/element-page',
-    render: (routeInfo) => {
-      const element = document.createElement('my-element');
-      element.data = routeInfo.params;
-      return element;
-    }
-  }
-];
-```
-
-## Usage Examples
-
-### Using with Lit Components
-
-```typescript
-import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-@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 { Outlet, Link } from '@iyulab/router';
-
-export function AppRoot() {
-  return (
-    <div>
-      <nav>
-        <Link href="/">Home</Link>
-        <Link href="/about">About</Link>
-        <Link href="/user/123">User Profile</Link>
-      </nav>
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
-```
-
-## Browser Support
-
-- **URLPattern API**: Required for routing functionality
-- **Modern browsers**: Chrome 95+, Firefox 106+, Safari 16.4+
-- **Polyfill**: Consider using [urlpattern-polyfill](https://www.npmjs.com/package/urlpattern-polyfill) for older browsers
-
-## Contributing
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add some amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
-
-## License
-
+# @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
+- 🔗 **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
+
+```bash
+npm install @iyulab/router
+```
+
+## Quick Start
+
+### Basic Setup
+
+```typescript
+import { Router } from '@iyulab/router';
+import { html } from 'lit';
+
+const router = new Router({
+  root: document.getElementById('app')!,
+  basepath: '/app',
+  routes: [
+    {
+      index: true,
+      render: () => html`<home-page></home-page>`
+    },
+    {
+      path: '/user/:id',
+      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
+
+```typescript
+import React from 'react';
+
+const routes = [
+  // Lit component
+  {
+    path: '/lit-page',
+    render: (routeInfo) => html`<my-lit-component .routeInfo=${routeInfo}></my-lit-component>`
+  },
+  // React component
+  {
+    path: '/react-page',
+    render: (routeInfo) => React.createElement(MyReactComponent, { routeInfo })
+  },
+  // HTML element
+  {
+    path: '/element-page',
+    render: (routeInfo) => {
+      const element = document.createElement('my-element');
+      element.data = routeInfo.params;
+      return element;
+    }
+  }
+];
+```
+
+## Usage Examples
+
+### Using with Lit Components
+
+```typescript
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@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 { Outlet, Link } from '@iyulab/router';
+
+export function AppRoot() {
+  return (
+    <div>
+      <nav>
+        <Link href="/">Home</Link>
+        <Link href="/about">About</Link>
+        <Link href="/user/123">User Profile</Link>
+      </nav>
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+```
+
+## Browser Support
+
+- **URLPattern API**: Required for routing functionality
+- **Modern browsers**: Chrome 95+, Firefox 106+, Safari 16.4+
+- **Polyfill**: Consider using [urlpattern-polyfill](https://www.npmjs.com/package/urlpattern-polyfill) for older browsers
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
 MIT License - see [LICENSE](LICENSE) file for details.

package/dist/index.d.ts

@@ -26,7 +26,6 @@ declare interface BaseRouteConfig {
      * - "/user/:id/:name?"
      * - "/user/:id/:name*"
      * - "/user/:id/:name+"
-     * - "/user/:id/:name{1,3}"
      * @link
      * https://developer.mozilla.org/en-US/docs/Web/API/URLPattern
      */
@@ -56,6 +55,11 @@ declare interface BaseRouteConfig {
      * - true로 설정하면 기존 렌더링을 무시하고 새로 렌더링합니다.
      */
     force?: boolean;
+    /**
+     * 경로 매칭시 대소문자 구분 여부
+     * @default false
+     */
+    ignoreCase?: boolean;
 }
 
 /**
@@ -431,16 +435,16 @@ export declare const UOutlet: ReactWebComponent<Outlet, {}>;
 
 export { }
 
-declare global {
-  interface WindowEventMap {
-    'route-begin': RouteBeginEvent;
-    'route-progress': RouteProgressEvent;
-    'route-done': RouteDoneEvent;
-    'route-error': RouteErrorEvent;
-  }
-
-  interface HTMLElementTagNameMap {
-    'u-link': Link;
-    'u-outlet': Outlet;
-  }
+declare global {
+  interface WindowEventMap {
+    'route-begin': RouteBeginEvent;
+    'route-progress': RouteProgressEvent;
+    'route-done': RouteDoneEvent;
+    'route-error': RouteErrorEvent;
+  }
+
+  interface HTMLElementTagNameMap {
+    'u-link': Link;
+    'u-outlet': Outlet;
+  }
 }

package/dist/index.js

@@ -218,8 +218,8 @@ class Outlet extends LitElement {
     if (!this.container) {
       throw new Error("Outlet container is not initialized.");
     }
-    if (content === false) {
-      throw new Error("Content is false, cannot render.");
+    if (typeof content !== "object") {
+      throw new Error("Content is not a valid renderable object.");
     }
     if (content instanceof HTMLElement) {
       this.container.appendChild(content);
@@ -548,16 +548,23 @@ function findAnchorFromEvent(e2) {
 function setRoutes(routes, basepath) {
   for (const route of routes) {
     route.id ||= getRandomID();
+    route.ignoreCase ||= false;
     if (route.index === true) {
-      route.path = new URLPattern({ pathname: `${basepath}{/}?` });
+      route.path = new URLPattern({ pathname: `${basepath}{/}?` }, {
+        ignoreCase: route.ignoreCase
+      });
       route.force ||= true;
     } else {
       if (typeof route.path === "string") {
         const absolutePathStr = absolutePath(basepath, route.path);
-        route.path = new URLPattern({ pathname: `${absolutePathStr}{/}?` });
+        route.path = new URLPattern({ pathname: `${absolutePathStr}{/}?` }, {
+          ignoreCase: route.ignoreCase
+        });
       } else if (route.path instanceof URLPattern) ;
       else {
-        route.path = new URLPattern({ pathname: `${basepath}{/}?` });
+        route.path = new URLPattern({ pathname: `${basepath}{/}?` }, {
+          ignoreCase: route.ignoreCase
+        });
       }
       if (route.children && route.children.length > 0) {
         const childBasepath = route.path.pathname.replace("{/}?", "");
@@ -651,18 +658,17 @@ class Router {
     const requestID = getRandomID();
     this._requestID = requestID;
     const context = parseUrl(href, this._basepath);
-    if (context.href === this._context?.href) return;
+    if (context.href !== window.location.href) {
+      window.history.pushState({ basepath: context.basepath }, "", context.href);
+    } else {
+      window.history.replaceState({ basepath: context.basepath }, "", context.href);
+    }
     const progressCallback = (value) => {
       if (this._requestID !== requestID) return;
       const progress = Math.max(0, Math.min(100, Math.round(value)));
       window.dispatchEvent(new RouteProgressEvent(context, progress));
     };
     context.progress = progressCallback;
-    if (context.href !== window.location.href) {
-      window.history.pushState({ basepath: context.basepath }, "", context.href);
-    } else {
-      window.history.replaceState({ basepath: context.basepath }, "", context.href);
-    }
     let outlet = void 0;
     try {
       if (this._requestID !== requestID) return;
@@ -685,13 +691,12 @@ class Router {
         if (!route.render) continue;
         try {
           content = await route.render(context);
-          if (content === false || content === null) {
+          if (content === false || content === void 0 || content === null) {
             throw new Error("Failed to load content for the route.");
           }
         } catch (LoadError) {
           throw new ContentLoadError(LoadError);
         }
-        if (this._requestID !== requestID) return;
         try {
           element = await outlet.renderContent({ id: route.id, content, force: route.force });
         } catch (renderError) {

package/package.json

@@ -1,51 +1,51 @@
-{
-  "name": "@iyulab/router",
-  "version": "0.5.2",
-  "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"
-    }
-  },
-  "scripts": {
-    "build": "vite build"
-  },
-  "dependencies": {
-    "lit": "^3.3.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
-  },
-  "devDependencies": {
-    "@lit/react": "^1.0.8",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.2",
-    "vite-plugin-dts": "^4.5.4"
-  }
+{
+  "name": "@iyulab/router",
+  "version": "0.5.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"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "lit": "^3.3.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
+  },
+  "devDependencies": {
+    "@lit/react": "^1.0.8",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6",
+    "vite-plugin-dts": "^4.5.4"
+  }
 }