@iyulab/router 0.11.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/router",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "A modern client-side router for web applications with support for Lit and React components",
   "keywords": [
     "lit",
@@ -54,7 +54,8 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "lit": "^3.3.3"
+    "lit": "^3.3.3",
+    "urlpattern-polyfill": "^10.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/dist/share-BaGC5VOl.js

@@ -1,245 +0,0 @@
-import { LitElement, css, html, render } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-//#region src/components/UOutlet.ts
-/**
-* LitElement 또는 React 컴포넌트를 렌더링해주는 웹컴포넌트 입니다.
-*/
-var UOutlet = class extends HTMLElement {
-	/**
-	* 주어진 렌더링 옵션에 따라 컨텐츠를 렌더링합니다.
-	*/
-	async render(value, options) {
-		if (this.routeId === options?.id && options?.force === false) return;
-		this.routeId = options?.id;
-		this.reset();
-		if (value === null) throw new Error("Content is null and cannot be rendered.");
-		if (typeof value !== "object") throw new Error("Content is not a valid renderable object.");
-		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) {
-			const { createRoot } = await import("react-dom/client");
-			this.root = createRoot(this);
-			this.root.render(value);
-		} else throw new Error("not supported content type for Outlet rendering.");
-	}
-	/**
-	* 기존 DOM을 삭제하여, 초기 상태로 되돌립니다.
-	*/
-	reset() {
-		if (this.root && "_$litPart$" in this) delete this._$litPart$;
-		if (this.root && "unmount" in this.root) this.root.unmount();
-		this.root = void 0;
-		this.innerHTML = "";
-	}
-};
-customElements.define("u-outlet", UOutlet);
-//#endregion
-//#region src/internals/url-helpers.ts
-/**
-* 주어진 URL이 외부 링크인지 확인합니다.
-* 
-* @param url 확인할 URL 문자열
-* @return 외부 링크인 경우 true, 내부 링크인 경우 false
-*/
-function isExternalUrl(url) {
-	if (!url) return false;
-	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(url, base);
-		if (/^(?:ftp:|ftps:|ws:|wss:)/i.test(parsed.protocol)) return true;
-		return parsed.origin !== new URL(base).origin;
-	} catch {
-		return false;
-	}
-}
-/**
-* URL 문자열을 파싱하여 RouteContext 객체로 반환합니다.
-* - http(s)로 시작하는 절대 URL은 외부 링크로 간주됩니다.
-* - 절대경로(/...)는 그대로 사용됩니다.
-* - 상대경로는 basepath를 기준으로 절대경로로 변환됩니다. 
-* - 쿼리스트링(?)로 시작하는 쿼리는 현재 경로와 추가됩니다.
-* - 해시(#)로 시작하는 해시는 현재 경로와 추가됩니다.
-* 
-* @param url 파싱할 URL 문자열
-* @param basepath 기준이 되는 basepath 문자열
-* @returns 파싱된 RouteContext 객체
-*/
-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: () => {},
-		metadata: {}
-	};
-}
-/**
-* pathname 경로를 조합하여 절대경로를 반환합니다.
-* 
-* @param paths 조합할 경로 문자열들
-* @returns 조합된 절대경로 문자열
-*/
-function absolutePath(...paths) {
-	paths = paths.map((p) => p.replace(/^\/|\/$/g, "")).filter((p) => p.length > 0);
-	if (paths.length === 0) return "/";
-	return "/" + paths.join("/");
-}
-/**
-* basepath가 동적 패턴일 경우(RouteConfig에서 basepath가 :id 등으로 정의된 경우),
-* 현재 경로에서 해당되는 패턴의 basepath를 추출하여 반환합니다.
-* 
-* @param basepath 동적 패턴이 포함된 basepath 문자열
-* @return 현재 경로에 매칭되는 basepath 문자열
-* @example
-* catchBasePath('/app/:id') => '/app/123'
-*/
-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 !== void 0 && restPath !== "" ? rawPath.replace("/" + restPath, "") : rawPath.replace(/\/$/, "");
-	}
-	pattern = new URLPattern({ pathname: `${basepath}{/}?` });
-	match = pattern.exec({ pathname: window.location.pathname });
-	if (match) return match.pathname.input;
-	return basepath;
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.143.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.143.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);
-	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-	return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-//#endregion
-//#region src/components/ULink.ts
-var ULink = class ULink extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.isExternal = false;
-		this.handleClick = (event) => {
-			if (event.defaultPrevented) return;
-			if (event.button !== 0) return;
-			if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-			if (this.target && this.target.toLowerCase() !== "_self") return;
-			if (this.navigate === "document") 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 url = window.location.pathname + this.href;
-				this.dispatchPopstate(basepath, url);
-				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);
-		};
-	}
-	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")) this.isExternal = isExternalUrl(this.href || "");
-	}
-	render() {
-		return html`
-      <a
-        href=${this.compute(this.href)}
-        target=${ifDefined(this.target)}
-        rel=${ifDefined(this.rel)}
-        data-navigate=${ifDefined(this.navigate)}
-      >
-        <slot></slot>
-      </a>
-    `;
-	}
-	/** a 태그에 주입할 href 값을 계산합니다. */
-	compute(href) {
-		const basepath = this.getBasepath();
-		if (!href) return window.location.origin + basepath;
-		if (this.isExternal) return href;
-		if (href.startsWith("/")) return href;
-		if (href.startsWith("#") || href.startsWith("?")) return href;
-		return absolutePath(basepath, href);
-	}
-	/** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
-	dispatchPopstate(basepath, url) {
-		window.history.pushState({ basepath }, "", url);
-		window.dispatchEvent(new PopStateEvent("popstate"));
-	}
-	/** basepath를 state에서 꺼내는 헬퍼 */
-	getBasepath() {
-		return window.history.state?.basepath || "/";
-	}
-	static {
-		this.styles = css`
-    :host {
-      cursor: pointer;
-    }
-
-    a {
-      text-decoration: none;
-
-      font-size: inherit;
-      font-weight: inherit;
-      font-family: inherit;
-      color: inherit;
-      cursor: inherit;
-    }
-  `;
-	}
-};
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], ULink.prototype, "target", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], ULink.prototype, "rel", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], ULink.prototype, "href", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], ULink.prototype, "navigate", void 0);
-ULink = __decorate([customElement("u-link")], ULink);
-//#endregion
-export { isExternalUrl as a, absolutePath as i, __decorate as n, parseUrl as o, __decorateMetadata as r, UOutlet as s, ULink as t };