@iyulab/router 0.6.1 → 0.7.0

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

@@ -1,89 +1,54 @@
-import { LitElement, html, render, css } from "lit";
-import { customElement, 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;
-  }
-  /** 컴포넌트가 DOM에 연결될 때 초기화 작업 수행 */
-  connectedCallback() {
-    super.connectedCallback();
-    this.dispatchEvent(new CustomEvent("outlet-load", {
-      bubbles: true,
-      composed: true
-    }));
-  }
-  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$;
+    }
+    if (this.root && "unmount" in this.root) {
+      this.root.unmount();
     }
-    this.container = document.createElement("div");
-    this.container.style.display = "contents";
+    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;
@@ -91,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 +78,8 @@ function parseUrl(url, basepath) {
     hash: urlObj.hash,
     params: {},
     progress: () => {
-    }
+    },
+    meta: {}
   };
 }
 function absolutePath(...paths) {
@@ -121,7 +87,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 });
@@ -151,12 +117,11 @@ let ULink = class extends LitElement {
   constructor() {
     super(...arguments);
     this.isExternal = false;
-    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();
@@ -183,6 +148,14 @@ 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")) {
@@ -191,27 +164,18 @@ let ULink = class extends LitElement {
   }
   render() {
     return html`
-      <a 
-        target=${this.target ?? "_self"}
-        href=${this.computeHref(this.href)}
-        @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 이벤트를 발생시킵니다. */
@@ -219,15 +183,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;

package/package.json

@@ -1,56 +1,56 @@
-{
-  "name": "@iyulab/router",
-  "version": "0.6.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": "./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",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
-  },
-  "devDependencies": {
-    "@lit/react": "^1.0.8",
-    "@types/node": "^25.0.9",
-    "@types/react": "^19.2.8",
-    "@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.0",
+  "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"
+  }
+}