@iyulab/router 0.5.2 → 0.6.0

package/dist/react.d.ts

@@ -0,0 +1,89 @@
+import { CSSResult } from 'lit';
+import { LitElement } from 'lit';
+import { PropertyValues } from 'lit';
+import { ReactElement } from 'react';
+import { ReactWebComponent } from '@lit/react';
+import { TemplateResult } from 'lit-html';
+import { TemplateResult as TemplateResult_2 } from 'lit';
+
+declare interface RenderOption {
+    id?: string;
+    force?: boolean;
+    content: RenderResult;
+}
+
+declare type RenderResult = HTMLElement | ReactElement | TemplateResult_2<1> | false;
+
+/**
+ * `u-link` 웹 컴포넌트를 React에서 사용할 수 있도록 래핑한 컴포넌트입니다.
+ */
+export declare const ULink: ReactWebComponent<ULink_2, {}>;
+
+/**
+ * - 클라이언트 라우팅을 지원하는 링크 엘리먼트입니다.
+ * - 내부 링크는 클라이언트 라우팅을 수행하고, 외부 링크는 브라우저 기본 네비게이션을 사용합니다.
+ * - Ctrl/Meta/Shift/Alt, 중클릭/우클릭 등은 브라우저 기본 동작(새 탭, 컨텍스트 메뉴 등)을 그대로 유지합니다.
+ */
+declare class ULink_2 extends LitElement {
+    /** 외부 링크 여부 */
+    private isExternal;
+    /** a 태그에 주입할 href 값 */
+    computedHref: string;
+    /**
+     * a 태그 target을 지원하고 싶으면 열어두는게 좋습니다.
+     * - _blank 등을 쓰면 무조건 브라우저 기본 동작을 따르도록 처리합니다.
+     */
+    target?: string;
+    /**
+     * - 속성을 정의하지 않으면 basepath로 이동합니다.
+     * - http(s)로 시작하면 외부 링크로 간주하고 브라우저 네비게이션을 사용합니다.
+     * - 절대경로(/...)일 경우 basepath로 시작하면 SPA 라우팅 대상이 될 수 있습니다.
+     * - 상대경로는 (basepath + 상대경로)로 SPA 라우팅 대상이 될 수 있습니다.
+     * - ?로 시작하면 현재 pathname에 쿼리스트링을 붙여 SPA 라우팅합니다.
+     * - #으로 시작하면 현재 URL에 해시만 바꾸고(브라우저 기본) 동작합니다.
+     */
+    href?: string;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+    /** basepath를 state에서 꺼내는 헬퍼 */
+    private getBasepath;
+    /** a 태그에 주입할 href 값을 계산합니다. */
+    private computeHref;
+    /**
+     * 클릭 가로채기 규칙
+     * - 좌클릭(0) + 보조키 없음(ctrl/meta/shift/alt 없음) + target이 _self일 때만 SPA 라우팅 고려
+     * - 그 외(중클릭/우클릭/보조키/target=_blank 등)는 브라우저 기본 동작 유지
+     */
+    private handleAnchorClick;
+    /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
+    private dispatchPopstate;
+    static styles: CSSResult;
+}
+
+/**
+ * `u-outlet` 웹 컴포넌트를 React에서 사용할 수 있도록 래핑한 컴포넌트입니다.
+ */
+export declare const UOutlet: ReactWebComponent<UOutlet_2, {}>;
+
+/**
+ * 라우트 설정에 따라 LitElement 또는 React 컴포넌트를 렌더링합니다.
+ */
+declare class UOutlet_2 extends LitElement {
+    private routeId?;
+    private container?;
+    private content?;
+    /** 외부 스타일을 적용하기 위해 라이트 돔을사용 합니다. */
+    protected createRenderRoot(): this;
+    render(): TemplateResult_2<1>;
+    /**
+     * render 함수의 결과를 렌더링합니다.
+     * - HTMLElement, ReactElement, TemplateResult를 모두 처리할 수 있습니다.
+     */
+    renderContent({ id, content, force }: RenderOption): Promise<HTMLDivElement>;
+    /**
+     * 기존 DOM을 라이프 사이클에 맞게 제거합니다.
+     */
+    clear(): void;
+}
+
+export { }

package/dist/react.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { b as ULink$1, U as UOutlet$1 } from "./share-ZrQFmsur.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) => {
+    let l2 = n.get(e3);
+    void 0 === l2 && n.set(e3, l2 = /* @__PURE__ */ new Map());
+    let a2 = l2.get(t3);
+    void 0 !== o3 ? void 0 === a2 ? (l2.set(t3, a2 = { handleEvent: o3 }), e3.addEventListener(t3, a2)) : a2.handleEvent = o3 : void 0 !== a2 && (l2.delete(t3), e3.removeEventListener(t3, a2));
+  })(e2, s, o2);
+}, o = ({ react: n2, tagName: o2, elementClass: l, events: a, displayName: s }) => {
+  const c = new Set(Object.keys(a ?? {})), r = n2.forwardRef(((s2, r2) => {
+    const i = n2.useRef(/* @__PURE__ */ new Map()), d = n2.useRef(null), f = {}, u = {};
+    for (const [n3, t2] of Object.entries(s2)) e.has(n3) ? f["className" === n3 ? "class" : n3] = t2 : c.has(n3) || n3 in l.prototype ? u[n3] = t2 : f[n3] = t2;
+    return n2.useLayoutEffect((() => {
+      if (null === d.current) return;
+      const e2 = /* @__PURE__ */ new Map();
+      for (const n3 in u) t(d.current, n3, s2[n3], i.current.get(n3), a), i.current.delete(n3), e2.set(n3, s2[n3]);
+      for (const [e3, n3] of i.current) t(d.current, e3, void 0, n3, a);
+      i.current = e2;
+    })), n2.useLayoutEffect((() => {
+      d.current?.removeAttribute("defer-hydration");
+    }), []), f.suppressHydrationWarning = true, n2.createElement(o2, { ...f, ref: n2.useCallback(((e2) => {
+      d.current = e2, "function" == typeof r2 ? r2(e2) : null !== r2 && (r2.current = e2);
+    }), [r2]) });
+  }));
+  return r.displayName = s ?? l.name, r;
+};
+const ULink = o({
+  react: React,
+  tagName: "u-link",
+  elementClass: ULink$1,
+  events: {}
+});
+const UOutlet = o({
+  react: React,
+  tagName: "u-outlet",
+  elementClass: UOutlet$1,
+  events: {}
+});
+export {
+  ULink,
+  UOutlet
+};

package/dist/share-ZrQFmsur.js

@@ -0,0 +1,253 @@
+import { LitElement, html, render, css } from "lit";
+import { customElement, state, property } from "lit/decorators.js";
+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;
+  }
+  render() {
+    return 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("Outlet container is not initialized.");
+    }
+    if (typeof content !== "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);
+    } 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";
+  }
+};
+UOutlet = __decorateClass$1([
+  customElement("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;
+  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;
+    return parsed.origin !== new URL(base).origin;
+  } catch {
+    return false;
+  }
+}
+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: {},
+    progress: () => {
+    }
+  };
+}
+function absolutePath(...paths) {
+  paths = paths.map((p) => p.replace(/^\/|\/$/g, "")).filter((p) => p.length > 0);
+  if (paths.length === 0) return "/";
+  return "/" + paths.join("/");
+}
+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;
+}
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (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(target, key, result);
+  return result;
+};
+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;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      const target = (this.target ?? "").trim();
+      if (target && target.toLowerCase() !== "_self") return;
+      const basepath = this.getBasepath();
+      if (!this.href) {
+        event.preventDefault();
+        this.dispatchPopstate(basepath, basepath);
+        return;
+      }
+      if (this.isExternal) return;
+      if (this.href.startsWith("#")) return;
+      event.preventDefault();
+      if (this.href.startsWith("?")) {
+        const url2 = window.location.pathname + this.href;
+        this.dispatchPopstate(basepath, url2);
+        return;
+      }
+      if (this.href.startsWith("/")) {
+        if (!this.href.startsWith(basepath)) {
+          window.location.assign(this.href);
+          return;
+        }
+        this.dispatchPopstate(basepath, this.href);
+        return;
+      }
+      const url = absolutePath(basepath, this.href);
+      this.dispatchPopstate(basepath, url);
+    };
+  }
+  willUpdate(changedProperties) {
+    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}
+      >
+        <slot></slot>
+      </a>
+    `;
+  }
+  /** basepath를 state에서 꺼내는 헬퍼 */
+  getBasepath() {
+    return window.history.state?.basepath || "";
+  }
+  /** a 태그에 주입할 href 값을 계산합니다. */
+  computeHref(href) {
+    const basepath = this.getBasepath();
+    if (!href) {
+      return window.location.origin + basepath;
+    }
+    if (this.isExternal) return href;
+    if (href.startsWith("#") || href.startsWith("?")) return href;
+    if (href.startsWith("/")) return href;
+    return absolutePath(basepath, href);
+  }
+  /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
+  dispatchPopstate(basepath, url) {
+    window.history.pushState({ basepath }, "", url);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  }
+};
+ULink.styles = css`
+    :host {
+      display: inline-flex;
+      cursor: pointer;
+    }
+
+    a {
+      display: contents;
+      text-decoration: none;
+
+      font-size: inherit;
+      font-weight: inherit;
+      font-family: inherit;
+      color: inherit;
+      cursor: inherit;
+    }
+  `;
+__decorateClass([
+  state()
+], ULink.prototype, "computedHref", 2);
+__decorateClass([
+  property({ type: String })
+], ULink.prototype, "target", 2);
+__decorateClass([
+  property({ type: String })
+], ULink.prototype, "href", 2);
+ULink = __decorateClass([
+  customElement("u-link")
+], ULink);
+export {
+  UOutlet as U,
+  absolutePath as a,
+  ULink as b,
+  isExternalUrl as i,
+  parseUrl as p
+};

package/package.json

@@ -1,51 +1,55 @@
-{
-  "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.6.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": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    }
+  },
+  "scripts": {
+    "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.8",
+    "@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"
+  }
+}