@iyulab/router 0.3.0 → 0.5.0

package/dist/main.cjs.js

@@ -1,819 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const react = require("@lit/react");
-const React = require("react");
-const client = require("react-dom/client");
-function absolutePath(...paths) {
-  paths = paths.map((p) => p.replace(/^\/|\/$/g, "")).filter((p) => p.length > 0);
-  if (paths.length === 0) return "/";
-  return "/" + paths.join("/");
-}
-function parseURL(url, basepath) {
-  let urlObj;
-  basepath = catchBasepath(basepath);
-  if (url.startsWith("http")) {
-    urlObj = new URL(url);
-  } else if (url.startsWith("/")) {
-    urlObj = new URL(url, window.location.origin);
-  } else if (url.startsWith("?")) {
-    urlObj = new URL(window.location.pathname + url, window.location.origin);
-  } else if (url.startsWith("#")) {
-    urlObj = new URL(window.location.pathname + window.location.search + url, window.location.origin);
-  } else {
-    urlObj = new URL(absolutePath(basepath, url), window.location.origin);
-  }
-  return {
-    href: urlObj.href,
-    origin: urlObj.origin,
-    basepath,
-    path: urlObj.href.replace(urlObj.origin, ""),
-    pathname: urlObj.pathname,
-    query: new URLSearchParams(urlObj.search),
-    hash: urlObj.hash,
-    params: {}
-  };
-}
-function catchBasepath(basepath) {
-  if (basepath === "/") return basepath;
-  let pattern = new URLPattern({ pathname: basepath + "/*" });
-  let match = pattern.exec({ pathname: window.location.pathname });
-  if (match) {
-    const rawPath = match.pathname.input;
-    const restPath = match.pathname.groups?.["0"];
-    return restPath ? rawPath.replace("/" + restPath, "") : rawPath.slice(0, -1);
-  }
-  pattern = new URLPattern({ pathname: `${basepath}{/}?` });
-  match = pattern.exec({ pathname: window.location.pathname });
-  if (match) {
-    return match.pathname.input;
-  }
-  return basepath;
-}
-function getRandomID() {
-  return window.isSecureContext ? window.crypto.randomUUID() : window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16);
-}
-class RouteError extends Error {
-  constructor(code, message, original) {
-    super(message);
-    this.name = "RouteError";
-    this.code = code;
-    this.original = original;
-    this.timestamp = (/* @__PURE__ */ new Date()).toISOString();
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, RouteError);
-    }
-  }
-}
-class NotFoundRouteError extends RouteError {
-  constructor(path, original) {
-    super(404, `Page not found: ${path}`, original);
-    this.name = "NotFoundError";
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, NotFoundRouteError);
-    }
-  }
-}
-class RouteEvent extends Event {
-  constructor(type, routeInfo, cancelable = false) {
-    super(type, { bubbles: true, composed: true, cancelable });
-    this.routeInfo = routeInfo;
-    this.timestamp = (/* @__PURE__ */ new Date()).toISOString();
-  }
-  /** 이벤트가 취소되었는지 확인 */
-  get cancelled() {
-    return this.defaultPrevented;
-  }
-  /** 이벤트 취소 */
-  cancel() {
-    if (this.cancelable) {
-      this.preventDefault();
-    }
-  }
-}
-class RouteBeginEvent extends RouteEvent {
-  constructor(routeInfo) {
-    super("route-begin", routeInfo, false);
-  }
-}
-class RouteDoneEvent extends RouteEvent {
-  constructor(routeInfo) {
-    super("route-done", routeInfo, false);
-  }
-}
-class RouteErrorEvent extends RouteEvent {
-  constructor(error, routeInfo) {
-    super("route-error", routeInfo, false);
-    this.error = error;
-  }
-}
-const styles = lit.css`
-  :host {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    width: 100%;
-    padding: 2rem;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background: var(--route-error-background, linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%));
-    color: var(--route-error-color, #2d3748);
-    line-height: 1.6;
-  }
-
-  .container {
-    max-width: 520px;
-    margin: 0 auto;
-    text-align: center;
-    background: var(--route-error-container-bg, rgba(255, 255, 255, 0.95));
-    backdrop-filter: blur(10px);
-    border-radius: var(--route-error-border-radius, 24px);
-    padding: 3rem 2rem;
-    box-shadow: var(--route-error-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
-    border: 1px solid var(--route-error-border, rgba(255, 255, 255, 0.2));
-    animation: slideUp 0.6s ease-out;
-  }
-
-  @keyframes slideUp {
-    from {
-      opacity: 0;
-      transform: translateY(30px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .icon {
-    font-size: 5rem;
-    margin-bottom: 1.5rem;
-    animation: bounce 0.8s ease-out 0.2s both;
-    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
-  }
-
-  @keyframes bounce {
-    0%, 20%, 53%, 80%, 100% {
-      transform: translate3d(0, 0, 0);
-    }
-    40%, 43% {
-      transform: translate3d(0, -10px, 0);
-    }
-    70% {
-      transform: translate3d(0, -5px, 0);
-    }
-    90% {
-      transform: translate3d(0, -2px, 0);
-    }
-  }
-
-  .code {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: var(--route-error-code-color, #4a5568);
-    letter-spacing: -0.025em;
-  }
-
-  .message {
-    font-size: 1.125rem;
-    margin-bottom: 2.5rem;
-    color: var(--route-error-message-color, #718096);
-    font-weight: 400;
-    max-width: 400px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .actions {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  .button {
-    position: relative;
-    padding: 0.875rem 2rem;
-    border: none;
-    border-radius: 12px;
-    font-size: 0.95rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    font-family: inherit;
-    min-width: 120px;
-    overflow: hidden;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .button:first-child {
-    background: var(--route-error-primary-button-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
-    color: var(--route-error-primary-button-color, white);
-    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.4);
-  }
-
-  .button:first-child:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px 0 rgba(102, 126, 234, 0.5);
-  }
-
-  .button:first-child:active {
-    transform: translateY(0);
-  }
-
-  .button:last-child {
-    background: var(--route-error-secondary-button-bg, rgba(255, 255, 255, 0.9));
-    color: var(--route-error-secondary-button-color, #4a5568);
-    border: 2px solid var(--route-error-secondary-button-border, rgba(74, 85, 104, 0.2));
-    backdrop-filter: blur(10px);
-  }
-
-  .button:last-child:hover {
-    background: var(--route-error-secondary-button-hover-bg, rgba(255, 255, 255, 1));
-    border-color: var(--route-error-secondary-button-hover-border, rgba(74, 85, 104, 0.4));
-    transform: translateY(-1px);
-  }
-
-  .button:focus-visible {
-    outline: 2px solid var(--route-error-focus-color, #667eea);
-    outline-offset: 2px;
-  }
-
-  .button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transition: left 0.5s;
-  }
-
-  .button:hover::before {
-    left: 100%;
-  }
-
-  @media (max-width: 640px) {
-    :host {
-      padding: 1rem;
-    }
-
-    .container {
-      padding: 2rem 1.5rem;
-      border-radius: 20px;
-    }
-
-    .icon {
-      font-size: 4rem;
-    }
-
-    .code {
-      font-size: 1.75rem;
-    }
-
-    .message {
-      font-size: 1rem;
-      margin-bottom: 2rem;
-    }
-
-    .actions {
-      flex-direction: column;
-      align-items: center;
-      gap: 0.75rem;
-    }
-
-    .button {
-      width: 100%;
-      max-width: 280px;
-      padding: 1rem 2rem;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .container {
-      margin: 1rem;
-      padding: 1.5rem 1rem;
-    }
-
-    .icon {
-      font-size: 3.5rem;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :host {
-      background: var(--route-error-dark-background, linear-gradient(135deg, #1a202c 0%, #2d3748 100%));
-      color: var(--route-error-dark-color, #e2e8f0);
-    }
-
-    .container {
-      background: var(--route-error-dark-container-bg, rgba(45, 55, 72, 0.95));
-      border: 1px solid var(--route-error-dark-border, rgba(255, 255, 255, 0.1));
-    }
-
-    .code {
-      color: var(--route-error-dark-code-color, #f7fafc);
-    }
-
-    .message {
-      color: var(--route-error-dark-message-color, #a0aec0);
-    }
-
-    .button:first-child {
-      background: var(--route-error-dark-primary-button-bg, linear-gradient(135deg, #553c9a 0%, #764ba2 100%));
-      box-shadow: 0 4px 15px 0 rgba(85, 60, 154, 0.4);
-    }
-
-    .button:first-child:hover {
-      box-shadow: 0 8px 25px 0 rgba(85, 60, 154, 0.5);
-    }
-
-    .button:last-child {
-      background: var(--route-error-dark-secondary-button-bg, rgba(74, 85, 104, 0.3));
-      color: var(--route-error-dark-secondary-button-color, #e2e8f0);
-      border: 2px solid var(--route-error-dark-secondary-button-border, rgba(226, 232, 240, 0.2));
-    }
-
-    .button:last-child:hover {
-      background: var(--route-error-dark-secondary-button-hover-bg, rgba(74, 85, 104, 0.5));
-      border-color: var(--route-error-dark-secondary-button-hover-border, rgba(226, 232, 240, 0.4));
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .container {
-      animation: none;
-    }
-    
-    .icon {
-      animation: none;
-    }
-    
-    .button::before {
-      display: none;
-    }
-    
-    .button {
-      transition: none;
-    }
-  }
-`;
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
-  return result;
-};
-let ErrorPage = class extends lit.LitElement {
-  render() {
-    const error = this.error || this.getDefaultError();
-    const icon = this.getErrorIcon(error.code);
-    return lit.html`
-      <div class="container" role="alert" aria-live="polite">
-        <div class="icon" aria-hidden="true">${icon}</div>
-        <div class="code" aria-label="Error code">${error.code}</div>
-        <div class="message">${error.message}</div>
-        
-        <div class="actions">
-          <button 
-            class="button"
-            @click=${this.handleGoBack}
-            title="Go back to previous page"
-            aria-label="Go back to previous page">
-            ← Go Back
-          </button>
-          
-          <button 
-            class="button"
-            @click=${this.handleRefresh}
-            title="Refresh the current page"
-            aria-label="Refresh the current page">
-            🔄 Refresh
-          </button>
-        </div>
-      </div>
-    `;
-  }
-  /** 기본 에러 정보 반환 */
-  getDefaultError() {
-    return new RouteError(500, "Something went wrong. Please try again or contact support if the problem persists.");
-  }
-  /** 에러 코드에 따른 기본 아이콘 반환 */
-  getErrorIcon(code) {
-    const numericCode = typeof code === "string" ? parseInt(code) : code;
-    switch (numericCode) {
-      case 404:
-        return "🔍";
-      case 403:
-        return "🔒";
-      case 401:
-        return "🔑";
-      case 429:
-        return "⏱️";
-      case 503:
-        return "🛠️";
-      case 500:
-      default:
-        return "⚠️";
-    }
-  }
-  /** 뒤로가기 */
-  handleGoBack() {
-    window.history.back();
-  }
-  /** 새로고침 */
-  handleRefresh() {
-    window.location.reload();
-  }
-};
-ErrorPage.styles = styles;
-__decorateClass$1([
-  decorators_js.property({ type: Object })
-], ErrorPage.prototype, "error", 2);
-ErrorPage = __decorateClass$1([
-  decorators_js.customElement("u-error-page")
-], ErrorPage);
-class Router {
-  constructor(config) {
-    this._counter = 0;
-    this.handlePopstate = async () => {
-      const href = window.location.href;
-      await this.go(href);
-    };
-    this._rootElement = config.root;
-    this._basepath = absolutePath(config.basepath || "/");
-    this._routes = this.setRoutes(config.routes, this._basepath);
-    window.removeEventListener("popstate", this.handlePopstate);
-    window.addEventListener("popstate", this.handlePopstate);
-    this.initiate();
-  }
-  get basepath() {
-    return this._basepath;
-  }
-  get routes() {
-    return this._routes;
-  }
-  get routeInfo() {
-    return this._routeInfo;
-  }
-  /**
-   * 지정한 경로의 클라이언트 라우팅을 수행합니다. 상대경로일 경우 basepath와 조합되어 이동합니다.
-   * @param href 이동할 경로
-   */
-  async go(href) {
-    const requestID = getRandomID();
-    this._requestID = requestID;
-    const routeInfo = parseURL(href, this._basepath);
-    if (routeInfo.href === this._routeInfo?.href) return;
-    try {
-      if (this._requestID !== requestID) return;
-      window.dispatchEvent(new RouteBeginEvent(routeInfo));
-      const routes = this.getRoutes(routeInfo.pathname);
-      const lastRoute = routes[routes.length - 1];
-      if (lastRoute && "path" in lastRoute && lastRoute.path instanceof URLPattern) {
-        routeInfo.params = lastRoute.path.exec({ pathname: routeInfo.pathname })?.pathname.groups || {};
-      }
-      this._routeInfo = routeInfo;
-      window.route = routeInfo;
-      if (this._requestID !== requestID) return;
-      if (routes.length === 0) {
-        throw new NotFoundRouteError(routeInfo.href);
-      }
-      let outlet = this.findOutletOrThrow(this._rootElement);
-      let title = void 0;
-      for (const route of routes) {
-        if (this._requestID !== requestID) return;
-        const content = route.render(routeInfo);
-        const element = await outlet.renderContent({ id: route.id, content, force: route.force });
-        outlet = this.findOutlet(element) || outlet;
-        title = route.title || title;
-      }
-      document.title = title || document.title;
-      if (this._requestID !== requestID) return;
-      if (routeInfo.href !== window.location.href) {
-        window.history.pushState({ basepath: routeInfo.basepath }, "", routeInfo.href);
-      } else {
-        window.history.replaceState({ basepath: routeInfo.basepath }, "", routeInfo.href);
-      }
-      window.dispatchEvent(new RouteDoneEvent(routeInfo));
-    } catch (error) {
-      const routeError = new RouteError(
-        error.status || error.code || "UNKNOWN_ERROR",
-        error.message || "An unexpected error occurred",
-        error
-      );
-      window.dispatchEvent(new RouteErrorEvent(routeError, routeInfo));
-      console.error("Routing error:", error);
-      try {
-        const errorEl = new ErrorPage();
-        errorEl.error = routeError;
-        document.body.innerHTML = "";
-        document.body.appendChild(errorEl);
-      } catch (pageError) {
-        console.error("Failed to render error component:", pageError);
-        console.error("Original error:", error);
-      }
-    }
-  }
-  /** 초기 라우팅 처리, TODO: 제거 */
-  async initiate() {
-    let outlet = await this.findOutlet(this._rootElement);
-    while (!outlet && this._counter < 20) {
-      await new Promise((resolve) => setTimeout(resolve, 50));
-      this._counter++;
-      outlet = await this.findOutlet(this._rootElement);
-    }
-    this._counter = 0;
-    this.handlePopstate();
-  }
-  /** 라우트를 재설정합니다. */
-  setRoutes(routes, basepath) {
-    for (const route of routes) {
-      route.id ||= getRandomID();
-      if ("index" in route && route.index) {
-        route.path = new URLPattern({ pathname: `${basepath}{/}?` });
-      } else if ("path" in route && route.path) {
-        if (typeof route.path === "string") {
-          const absolutePathStr = absolutePath(basepath, route.path);
-          route.path = new URLPattern({ pathname: `${absolutePathStr}{/}?` });
-        }
-      } else {
-        throw new Error('Route must have either "index" or "path" property defined.');
-      }
-      if (route.children && route.children.length > 0) {
-        let childBasepath;
-        if ("index" in route) {
-          childBasepath = basepath;
-        } else {
-          if (typeof route.path === "string") {
-            childBasepath = absolutePath(basepath, route.path);
-          } else {
-            childBasepath = route.path.pathname.replace("{/}?", "");
-          }
-        }
-        route.children = this.setRoutes(route.children, childBasepath);
-        route.force ||= false;
-      } else {
-        route.force ||= true;
-      }
-    }
-    return routes;
-  }
-  /** URLPattern을 사용하여 경로와 일치하는 라우트들을 자식 라우트까지 포함하여 반환합니다. */
-  getRoutes(pathname, routes = this._routes) {
-    for (const route of routes) {
-      if (route.children) {
-        const childRoutes = this.getRoutes(pathname, route.children);
-        if (childRoutes.length > 0) {
-          return [route, ...childRoutes];
-        }
-      }
-      let matches = false;
-      if ("index" in route && route.index && route.path) {
-        matches = route.path.test({ pathname });
-      } else if ("path" in route && route.path instanceof URLPattern) {
-        matches = route.path.test({ pathname });
-      }
-      if (matches) {
-        return [route];
-      }
-    }
-    return [];
-  }
-  /** Outlet 엘리먼트를 찾아 반환합니다. */
-  findOutlet(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 = this.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 = this.findOutlet(child);
-        if (outlet) return outlet;
-      }
-    }
-    return void 0;
-  }
-  /** Outlet 엘리먼트를 찾아 반환합니다. 없으면 에러를 던집니다. */
-  findOutletOrThrow(element) {
-    const outlet = this.findOutlet(element);
-    if (!outlet) {
-      throw new Error("No Outlet component found in the root element.");
-    }
-    return outlet;
-  }
-}
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const EXTERNAL_LINK_PATTERNS = [
-  /^http/,
-  /^\/\//,
-  /^mailto:/,
-  /^tel:/,
-  /^javascript:/,
-  /^ftp:/,
-  /^data:/,
-  /^ws:/,
-  /^wss:/
-];
-const _Link = class _Link extends lit.LitElement {
-  constructor() {
-    super(...arguments);
-    this.isExternal = false;
-    this.anchorHref = "#";
-    this.handleMouseDown = (event) => {
-      const isNonNavigationClick = event.button === 2 || event.metaKey || event.shiftKey || event.altKey;
-      if (event.defaultPrevented || isNonNavigationClick) return;
-      event.preventDefault();
-      event.stopPropagation();
-      const basepath = window.history.state?.basepath || "";
-      if (event.button === 1 || event.ctrlKey) {
-        window.open(this.anchorHref, "_blank");
-      } else if (!this.href) {
-        this.dispatchPopstate(basepath, basepath);
-      } else if (this.isExternal || this.href.startsWith("/") && !this.href.startsWith(basepath)) {
-        window.location.href = this.href;
-      } else if (this.href.startsWith("#")) {
-        const url = window.location.pathname + window.location.search + this.href;
-        this.dispatchHashchange(basepath, url);
-      } else if (this.href.startsWith("?")) {
-        const url = window.location.pathname + this.href;
-        this.dispatchPopstate(basepath, url);
-      } else {
-        const url = absolutePath(basepath, this.href);
-        this.dispatchPopstate(basepath, url);
-      }
-    };
-    this.preventClickEvent = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("mousedown", this.handleMouseDown);
-  }
-  disconnectedCallback() {
-    this.removeEventListener("mousedown", this.handleMouseDown);
-    super.disconnectedCallback();
-  }
-  async updated(changedProperties) {
-    super.updated(changedProperties);
-    await this.updateComplete;
-    if (changedProperties.has("href")) {
-      this.isExternal = this.checkExternalLink(this.href || "");
-      this.anchorHref = this.getAnchorHref(this.href);
-    }
-  }
-  render() {
-    return lit.html`
-      <a href=${this.anchorHref} @click=${this.preventClickEvent}>
-        <slot></slot>
-      </a>
-    `;
-  }
-  /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
-  dispatchPopstate(basepath, url) {
-    window.history.pushState({ basepath }, "", url);
-    window.dispatchEvent(new PopStateEvent("popstate"));
-  }
-  /** 클라이언트 라우팅을 위해 hashchange 이벤트를 발생시킵니다. */
-  dispatchHashchange(basepath, url) {
-    window.history.pushState({ basepath }, "", url);
-    window.dispatchEvent(new HashChangeEvent("hashchange"));
-  }
-  /** 외부 링크인지 확인합니다. */
-  checkExternalLink(href) {
-    return EXTERNAL_LINK_PATTERNS.some((pattern) => pattern.test(href));
-  }
-  /** a 태그의 href 값을 계산합니다. */
-  getAnchorHref(href) {
-    const basepath = window.history.state?.basepath || "";
-    if (!href) {
-      return window.location.origin + basepath;
-    }
-    if (this.isExternal || href.startsWith("/") || href.startsWith("#") || href.startsWith("?")) {
-      return href;
-    }
-    return absolutePath(basepath, href);
-  }
-};
-_Link.styles = lit.css`
-    :host {
-      display: inline-flex;
-      cursor: pointer;
-    }
-
-    a {
-      display: contents;
-      text-decoration: none;
-      color: inherit;
-    }
-  `;
-let Link = _Link;
-__decorateClass([
-  decorators_js.state()
-], Link.prototype, "anchorHref");
-__decorateClass([
-  decorators_js.property({ type: String })
-], Link.prototype, "href");
-class Outlet extends lit.LitElement {
-  /** 쉐도우를 사용하지 않고, 직접 렌더링합니다. */
-  createRenderRoot() {
-    return this;
-  }
-  render() {
-    return lit.html`${this.container}`;
-  }
-  /**
-   * render 함수의 결과를 렌더링합니다.
-   * - HTMLElement, ReactElement, TemplateResult를 모두 처리할 수 있습니다.
-   */
-  async renderContent({ id, content, force }) {
-    if (this.routeId === id && force === false && this.container) {
-      return this.container;
-    }
-    this.routeId = id;
-    this.clear();
-    if (!this.container) {
-      throw new Error("DOM이 초기화되지 않았습니다.");
-    }
-    if (content instanceof HTMLElement) {
-      this.container.appendChild(content);
-    } else if ("_$litType$" in content) {
-      this.content = lit.render(content, this.container);
-    } else if ("$$typeof" in content) {
-      this.content = client.createRoot(this.container);
-      this.content.render(content);
-    } else {
-      throw new Error("not supported content type for Outlet rendering.");
-    }
-    this.requestUpdate();
-    await this.updateComplete;
-    return this.container;
-  }
-  /**
-   * 기존 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;
-    }
-    this.container = document.createElement("div");
-    this.container.style.display = "contents";
-  }
-}
-customElements.define("u-link", Link);
-customElements.define("u-outlet", Outlet);
-const ULink = react.createComponent({
-  react: React,
-  tagName: "u-link",
-  elementClass: Link
-});
-const UOutlet = react.createComponent({
-  react: React,
-  tagName: "u-outlet",
-  elementClass: Outlet
-});
-exports.Link = Link;
-exports.NotFoundRouteError = NotFoundRouteError;
-exports.Outlet = Outlet;
-exports.RouteBeginEvent = RouteBeginEvent;
-exports.RouteDoneEvent = RouteDoneEvent;
-exports.RouteError = RouteError;
-exports.RouteErrorEvent = RouteErrorEvent;
-exports.Router = Router;
-exports.ULink = ULink;
-exports.UOutlet = UOutlet;