@wsxjs/wsx-router 0.0.5

package/dist/index.js

@@ -0,0 +1,409 @@
+import { createLogger as y, autoRegister as E, WebComponent as S, jsx as f } from "@wsxjs/wsx-core";
+const Y = ":host{display:block;width:100%;height:100%}.router-outlet{width:100%;height:100%}";
+var Z = Object.create, R = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, O = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), N = (e) => {
+  throw TypeError(e);
+}, j = (e, t, r) => t in e ? R(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, et = (e, t) => R(e, "name", { value: t, configurable: !0 }), rt = (e) => [, , , Z((e == null ? void 0 : e[O("metadata")]) ?? null)], ot = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], z = (e) => e !== void 0 && typeof e != "function" ? N("Function expected") : e, it = (e, t, r, i, o) => ({ kind: ot[e], name: t, metadata: i, addInitializer: (n) => r._ ? N("Already initialized") : o.push(z(n || null)) }), nt = (e, t) => j(t, O("metadata"), e[3]), st = (e, t, r, i) => {
+  for (var o = 0, n = e[t >> 1], s = n && n.length; o < s; o++) n[o].call(r);
+  return i;
+}, at = (e, t, r, i, o, n) => {
+  var s, l, c, a = t & 7, h = !1, v = 0, w = e[v] || (e[v] = []), d = a && (o = o.prototype, a < 5 && (a > 3 || !h) && tt(o, r));
+  et(o, r);
+  for (var u = i.length - 1; u >= 0; u--)
+    c = it(a, r, l = {}, e[3], w), s = (0, i[u])(o, c), l._ = 1, z(s) && (o = s);
+  return nt(e, o), d && R(o, r, d), h ? a ^ 4 ? n : d : o;
+}, g = (e, t, r) => j(e, typeof t != "symbol" ? t + "" : t, r), D, C, F;
+const p = y("WsxRouter");
+D = [E({ tagName: "wsx-router" })];
+class $ extends (F = S) {
+  constructor() {
+    super({ styles: Y }), g(this, "views", /* @__PURE__ */ new Map()), g(this, "currentView", null), g(this, "handleRouteChange", () => {
+      const t = window.location.pathname;
+      p.debug(`Route changed to: ${t}`), this.currentView && (this.currentView.style.display = "none", p.debug("Hiding previous view"));
+      const r = this.matchRoute(t);
+      if (r) {
+        r.style.display = "block", this.currentView = r, p.debug(`Showing view for route: ${r.getAttribute("route")}`);
+        const i = this.extractParams(r.getAttribute("route") || "/", t);
+        i && r.setAttribute("params", JSON.stringify(i));
+      } else
+        p.warn(`No view found for path: ${t}`);
+      this.dispatchEvent(
+        new CustomEvent("route-changed", {
+          detail: { path: t, view: r },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }), g(this, "interceptLinks", (t) => {
+      const r = t.target.closest("a");
+      if (!r) return;
+      const i = r.getAttribute("href");
+      !i || i.startsWith("http") || i.startsWith("#") || (t.preventDefault(), this.navigate(i));
+    });
+  }
+  render() {
+    return /* @__PURE__ */ f("div", { class: "router-outlet" }, /* @__PURE__ */ f("slot", null));
+  }
+  onConnected() {
+    p.debug("WsxRouter connected to DOM"), this.collectViews(), p.debug("WsxRouter collected views:", this.views.size), window.addEventListener("popstate", this.handleRouteChange), this.addEventListener("click", this.interceptLinks), this.handleRouteChange();
+  }
+  onDisconnected() {
+    window.removeEventListener("popstate", this.handleRouteChange);
+  }
+  collectViews() {
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot");
+    if (!t) {
+      p.error("WsxRouter: No slot found");
+      return;
+    }
+    const i = t.assignedElements().filter((n) => n.tagName.toLowerCase() === "wsx-view");
+    p.debug("WsxRouter found views:", i.length), i.forEach((n) => {
+      const s = n.getAttribute("route") || "/";
+      this.views.set(s, n), n.style.display = "none", p.debug(`WsxRouter hiding view for route: ${s}`);
+    });
+  }
+  matchRoute(t) {
+    if (this.views.has(t))
+      return this.views.get(t);
+    for (const [r, i] of this.views)
+      if (r.includes(":")) {
+        const o = r.replace(/:[^/]+/g, "([^/]+)");
+        if (new RegExp(`^${o}$`).test(t))
+          return i;
+      }
+    return this.views.get("*") || null;
+  }
+  extractParams(t, r) {
+    var c;
+    if (!t.includes(":")) return null;
+    const i = ((c = t.match(/:([^/]+)/g)) == null ? void 0 : c.map((a) => a.slice(1))) || [], o = t.replace(/:[^/]+/g, "([^/]+)"), n = new RegExp(`^${o}$`), s = r.match(n);
+    if (!s || !i.length) return null;
+    const l = {};
+    return i.forEach((a, h) => {
+      l[a] = s[h + 1];
+    }), l;
+  }
+  /**
+   * 编程式导航 - 使用原生 History API
+   */
+  navigate(t) {
+    window.history.pushState(null, "", t), this.handleRouteChange();
+  }
+}
+C = rt(F);
+$ = at(C, 0, "WsxRouter", D, $);
+st(C, 1, $);
+const ct = ":host{display:block;width:100%;height:100%}.route-view{width:100%;height:100%;position:relative}:host([loading]) .route-view{opacity:.5;transition:opacity .3s ease}:host([error]) .route-view{border:1px solid var(--error-color, #ff0000);padding:1rem}.route-view.entering{animation:fadeIn .3s ease-out}.route-view.leaving{animation:fadeOut .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}";
+var lt = Object.create, A = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, U = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), M = (e) => {
+  throw TypeError(e);
+}, q = (e, t, r) => t in e ? A(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, dt = (e, t) => A(e, "name", { value: t, configurable: !0 }), ut = (e) => [, , , lt((e == null ? void 0 : e[U("metadata")]) ?? null)], pt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], V = (e) => e !== void 0 && typeof e != "function" ? M("Function expected") : e, vt = (e, t, r, i, o) => ({ kind: pt[e], name: t, metadata: i, addInitializer: (n) => r._ ? M("Already initialized") : o.push(V(n || null)) }), mt = (e, t) => q(t, U("metadata"), e[3]), wt = (e, t, r, i) => {
+  for (var o = 0, n = e[t >> 1], s = n && n.length; o < s; o++) n[o].call(r);
+  return i;
+}, ft = (e, t, r, i, o, n) => {
+  var s, l, c, a = t & 7, h = !1, v = 0, w = e[v] || (e[v] = []), d = a && (o = o.prototype, a < 5 && (a > 3 || !h) && ht(o, r));
+  dt(o, r);
+  for (var u = i.length - 1; u >= 0; u--)
+    c = vt(a, r, l = {}, e[3], w), s = (0, i[u])(o, c), l._ = 1, V(s) && (o = s);
+  return mt(e, o), d && A(o, r, d), h ? a ^ 4 ? n : d : o;
+}, _ = (e, t, r) => q(e, typeof t != "symbol" ? t + "" : t, r), Q, P, T;
+const k = y("WsxView");
+Q = [E({ tagName: "wsx-view" })];
+class b extends (T = S) {
+  constructor() {
+    super({
+      styles: ct,
+      styleName: "wsx-view"
+    }), _(this, "component", null), _(this, "params", {}), _(this, "componentInstance", null);
+  }
+  render() {
+    return /* @__PURE__ */ f("div", { class: "route-view", part: "view" });
+  }
+  onConnected() {
+    const t = this.getAttribute("component");
+    t && !this.componentInstance && this.loadComponent(t);
+  }
+  onAttributeChanged(t, r, i) {
+    if (t === "component" && i && !this.componentInstance)
+      this.loadComponent(i);
+    else if (t === "params" && this.componentInstance)
+      try {
+        this.params = JSON.parse(i), Object.entries(this.params).forEach(([o, n]) => {
+          this.componentInstance.setAttribute(o, n);
+        });
+      } catch (o) {
+        k.error("Failed to parse params:", o);
+      }
+  }
+  async loadComponent(t) {
+    var o;
+    if (this.componentInstance && (this.componentInstance.remove(), this.componentInstance = null), !customElements.get(t)) {
+      k.warn(`Component ${t} not found in customElements registry`);
+      return;
+    }
+    this.componentInstance = document.createElement(t), Object.keys(this.params).length > 0 && Object.entries(this.params).forEach(([n, s]) => {
+      this.componentInstance.setAttribute(n, s);
+    });
+    const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".route-view");
+    i ? i.appendChild(this.componentInstance) : k.error("Route view container not found");
+  }
+  onDisconnected() {
+    this.componentInstance && (this.componentInstance.remove(), this.componentInstance = null);
+  }
+}
+P = ut(T);
+b = ft(P, 0, "WsxView", Q, b);
+_(b, "observedAttributes", ["route", "component", "params"]);
+wt(P, 1, b);
+const gt = ':host{display:inline-block;min-width:fit-content;min-height:fit-content;width:auto;height:auto}.wsx-link{color:var(--link-color, #007bff);text-decoration:var(--link-decoration, underline);cursor:pointer;transition:color .2s ease;display:inline-block;min-height:1.2em;line-height:1.2}.wsx-link:hover{color:var(--link-hover-color, #0056b3);text-decoration:var(--link-hover-decoration, underline)}.wsx-link:focus{outline:2px solid var(--link-focus-color, #007bff);outline-offset:2px}.wsx-link.active{color:var(--link-active-color, #6c757d);font-weight:var(--link-active-weight, bold)}:host([disabled]) .wsx-link{color:var(--link-disabled-color, #6c757d);cursor:not-allowed;pointer-events:none}:host([external]) .wsx-link:after{content:"↗";font-size:.8em;margin-left:.2em;opacity:.7}:host([variant="button"]) .wsx-link{background-color:var(--button-bg, #007bff);color:var(--button-color, white);padding:.5rem 1rem;border-radius:.25rem;text-decoration:none;display:inline-block}:host([variant="button"]) .wsx-link:hover{background-color:var(--button-hover-bg, #0056b3);color:var(--button-hover-color, white)}:host([variant="tab"]) .wsx-link{padding:.5rem 1rem;border-bottom:2px solid transparent;text-decoration:none}:host([variant="tab"]) .wsx-link.active{border-bottom-color:var(--tab-active-border, #007bff)}';
+var _t = Object.create, L = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, H = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), J = (e) => {
+  throw TypeError(e);
+}, B = (e, t, r) => t in e ? L(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, xt = (e, t) => L(e, "name", { value: t, configurable: !0 }), yt = (e) => [, , , _t((e == null ? void 0 : e[H("metadata")]) ?? null)], kt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], G = (e) => e !== void 0 && typeof e != "function" ? J("Function expected") : e, $t = (e, t, r, i, o) => ({ kind: kt[e], name: t, metadata: i, addInitializer: (n) => r._ ? J("Already initialized") : o.push(G(n || null)) }), Et = (e, t) => B(t, H("metadata"), e[3]), St = (e, t, r, i) => {
+  for (var o = 0, n = e[t >> 1], s = n && n.length; o < s; o++) n[o].call(r);
+  return i;
+}, Rt = (e, t, r, i, o, n) => {
+  var s, l, c, a = t & 7, h = !1, v = 0, w = e[v] || (e[v] = []), d = a && (o = o.prototype, a < 5 && (a > 3 || !h) && bt(o, r));
+  xt(o, r);
+  for (var u = i.length - 1; u >= 0; u--)
+    c = $t(a, r, l = {}, e[3], w), s = (0, i[u])(o, c), l._ = 1, G(s) && (o = s);
+  return Et(e, o), d && L(o, r, d), h ? a ^ 4 ? n : d : o;
+}, m = (e, t, r) => B(e, typeof t != "symbol" ? t + "" : t, r), K, W, X;
+const I = y("WsxLink");
+K = [E({ tagName: "wsx-link" })];
+class x extends (X = S) {
+  constructor() {
+    super({
+      styles: gt,
+      styleName: "wsx-link"
+    }), m(this, "to", ""), m(this, "replace", !1), m(this, "activeClass", "active"), m(this, "exact", !1), m(this, "handleClick", (t) => {
+      if (t.preventDefault(), !this.to) {
+        I.warn("No 'to' attribute specified");
+        return;
+      }
+      if (this.isExternalLink(this.to)) {
+        window.open(this.to, "_blank");
+        return;
+      }
+      this.replace ? window.history.replaceState(null, "", this.to) : window.history.pushState(null, "", this.to), window.dispatchEvent(new PopStateEvent("popstate")), I.debug(`Navigated to: ${this.to}`);
+    }), m(this, "updateActiveState", () => {
+      var o;
+      const t = window.location.pathname, r = this.exact ? t === this.to : t.startsWith(this.to) && this.to !== "/", i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("a");
+      i && (r ? (i.classList.add(this.activeClass), this.setAttribute("active", "")) : (i.classList.remove(this.activeClass), this.removeAttribute("active")));
+    });
+  }
+  render() {
+    return /* @__PURE__ */ f("a", { href: this.to, class: "wsx-link", onClick: this.handleClick, part: "link" }, /* @__PURE__ */ f("slot", null));
+  }
+  onConnected() {
+    this.to = this.getAttribute("to") || "", this.replace = this.hasAttribute("replace"), this.activeClass = this.getAttribute("active-class") || "active", this.exact = this.hasAttribute("exact");
+    const t = this.shadowRoot.querySelector(".wsx-link");
+    t && (t.href = this.to), window.addEventListener("popstate", this.updateActiveState), document.addEventListener("route-changed", this.updateActiveState), this.updateActiveState();
+  }
+  onDisconnected() {
+    window.removeEventListener("popstate", this.updateActiveState), document.removeEventListener("route-changed", this.updateActiveState);
+  }
+  onAttributeChanged(t, r, i) {
+    switch (t) {
+      case "to":
+        this.to = i || "", this.rerender(), this.updateActiveState();
+        break;
+      case "replace":
+        this.replace = i !== null && i !== "false";
+        break;
+      case "active-class":
+        this.activeClass = i || "active", this.updateActiveState();
+        break;
+      case "exact":
+        this.exact = i !== null && i !== "false", this.updateActiveState();
+        break;
+    }
+  }
+  isExternalLink(t) {
+    return t.startsWith("http://") || t.startsWith("https://") || t.startsWith("mailto:") || t.startsWith("tel:");
+  }
+  /**
+   * 编程式导航
+   */
+  navigate() {
+    this.to && this.handleClick(
+      new MouseEvent("click", {
+        bubbles: !0,
+        cancelable: !0
+      })
+    );
+  }
+}
+W = yt(X);
+x = Rt(W, 0, "WsxLink", K, x);
+m(x, "observedAttributes", ["to", "replace", "active-class", "exact"]);
+St(W, 1, x);
+const Ct = y("RouterUtils");
+class Pt {
+  /**
+   * 编程式导航
+   */
+  static navigate(t, r = !1) {
+    r ? window.history.replaceState(null, "", t) : window.history.pushState(null, "", t), window.dispatchEvent(new PopStateEvent("popstate")), Ct.debug(`Navigated to: ${t} (replace: ${r})`);
+  }
+  /**
+   * 获取当前路由信息
+   */
+  static getCurrentRoute() {
+    const t = new URL(window.location.href);
+    return {
+      path: t.pathname,
+      params: {},
+      // 需要路由匹配后才能确定
+      query: Object.fromEntries(t.searchParams.entries()),
+      hash: t.hash.slice(1)
+      // 移除 # 号
+    };
+  }
+  /**
+   * 解析路由路径，提取参数
+   */
+  static parseRoute(t, r) {
+    var i;
+    if (t === r)
+      return {
+        route: t,
+        params: {},
+        exact: !0
+      };
+    if (t === "*")
+      return {
+        route: t,
+        params: {},
+        exact: !1
+      };
+    if (t.includes(":")) {
+      const o = ((i = t.match(/:([^/]+)/g)) == null ? void 0 : i.map((c) => c.slice(1))) || [], n = t.replace(/:[^/]+/g, "([^/]+)"), s = new RegExp(`^${n}$`), l = r.match(s);
+      if (l && o.length > 0) {
+        const c = {};
+        return o.forEach((a, h) => {
+          c[a] = l[h + 1];
+        }), {
+          route: t,
+          params: c,
+          exact: !0
+        };
+      }
+    }
+    if (t.endsWith("/*")) {
+      const o = t.slice(0, -2);
+      if (r.startsWith(o))
+        return {
+          route: t,
+          params: {},
+          exact: !1
+        };
+    }
+    return null;
+  }
+  /**
+   * 构建路由路径，替换参数
+   */
+  static buildPath(t, r = {}) {
+    let i = t;
+    return Object.entries(r).forEach(([o, n]) => {
+      i = i.replace(`:${o}`, encodeURIComponent(n));
+    }), i;
+  }
+  /**
+   * 检查路由是否匹配当前路径
+   */
+  static isRouteActive(t, r = !1) {
+    const i = window.location.pathname;
+    return r ? i === t : t === "/" ? i === "/" : i.startsWith(t);
+  }
+  /**
+   * 获取路由层级
+   */
+  static getRouteDepth(t) {
+    return t.split("/").filter((r) => r.length > 0).length;
+  }
+  /**
+   * 获取父级路由
+   */
+  static getParentRoute(t) {
+    const r = t.split("/").filter((i) => i.length > 0);
+    return r.length <= 1 ? "/" : (r.pop(), "/" + r.join("/"));
+  }
+  /**
+   * 合并路由路径
+   */
+  static joinPaths(...t) {
+    return t.map((r) => r.replace(/^\/+|\/+$/g, "")).filter((r) => r.length > 0).join("/").replace(/^/, "/");
+  }
+  /**
+   * 检查是否为外部链接
+   */
+  static isExternalUrl(t) {
+    return /^https?:\/\//.test(t) || /^mailto:/.test(t) || /^tel:/.test(t);
+  }
+  /**
+   * 获取查询参数
+   */
+  static getQueryParam(t) {
+    return new URL(window.location.href).searchParams.get(t);
+  }
+  /**
+   * 设置查询参数
+   */
+  static setQueryParam(t, r, i = !1) {
+    const o = new URL(window.location.href);
+    o.searchParams.set(t, r);
+    const n = o.pathname + o.search + o.hash;
+    this.navigate(n, i);
+  }
+  /**
+   * 删除查询参数
+   */
+  static removeQueryParam(t, r = !1) {
+    const i = new URL(window.location.href);
+    i.searchParams.delete(t);
+    const o = i.pathname + i.search + i.hash;
+    this.navigate(o, r);
+  }
+  /**
+   * 返回上一页
+   */
+  static goBack() {
+    window.history.back();
+  }
+  /**
+   * 前进一页
+   */
+  static goForward() {
+    window.history.forward();
+  }
+  /**
+   * 替换当前页面
+   */
+  static replace(t) {
+    this.navigate(t, !0);
+  }
+  /**
+   * 获取历史记录长度
+   */
+  static getHistoryLength() {
+    return window.history.length;
+  }
+  /**
+   * 监听路由变化
+   */
+  static onRouteChange(t) {
+    const r = () => {
+      const i = this.getCurrentRoute();
+      t(i);
+    };
+    return window.addEventListener("popstate", r), document.addEventListener("route-changed", r), () => {
+      window.removeEventListener("popstate", r), document.removeEventListener("route-changed", r);
+    };
+  }
+}
+export {
+  Pt as RouterUtils,
+  x as WsxLink,
+  $ as WsxRouter,
+  b as WsxView
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@wsxjs/wsx-router",
+  "version": "0.0.5",
+  "description": "WSX Router - Native History API-based routing for WSX Framework",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__",
+    "!**/test"
+  ],
+  "dependencies": {
+    "@wsxjs/wsx-core": "0.0.5"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "@vitest/ui": "^2.1.8",
+    "@vitest/coverage-v8": "^2.1.8",
+    "eslint": "^9.31.0",
+    "jsdom": "^26.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.19",
+    "vitest": "^2.1.8",
+    "@wsxjs/wsx-vite-plugin": "0.0.5",
+    "@wsxjs/eslint-plugin-wsx": "0.0.5"
+  },
+  "keywords": [
+    "wsx",
+    "router",
+    "web-components",
+    "history-api",
+    "navigation",
+    "spa"
+  ],
+  "author": "WSX Framework Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wsxjs/wsxjs.git",
+    "directory": "packages/wsx-router"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "NODE_ENV=development vite build",
+    "dev": "NODE_ENV=development vite build --watch",
+    "clean": "rm -rf dist",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  }
+}