@wsxjs/wsx-router 0.0.30 → 0.1.1

package/dist/index.mjs

@@ -0,0 +1,1051 @@
+import { autoRegister as ce, LightComponent as ne, jsx as ee, WebComponent as le } from "@wsxjs/wsx-core";
+const re = {
+  trace: 0,
+  debug: 1,
+  info: 2,
+  warn: 3,
+  error: 4,
+  silent: 5
+};
+function ae() {
+  if (typeof process < "u")
+    return process.env.NODE_ENV === "production" || process.env.MODE === "production";
+  try {
+    const i = globalThis;
+    if (i.import?.meta?.env) {
+      const e = i.import.meta.env;
+      return e.MODE === "production" || e.PROD === !0;
+    }
+  } catch {
+  }
+  return !1;
+}
+const ue = {
+  name: "WSX",
+  level: ae() ? "info" : "debug",
+  pretty: !ae()
+};
+function G(i, e) {
+  return i ? `[${i}] ${e}` : e;
+}
+class We {
+  constructor(e, t) {
+    this.name = e, this.level = t, this.levelValue = re[t], this.isProd = ae();
+  }
+  /**
+   * Check if a log level should be logged
+   */
+  shouldLog(e) {
+    return this.level === "silent" ? !1 : re[e] >= this.levelValue;
+  }
+  trace(e, ...t) {
+    if (!this.isProd || this.shouldLog("trace")) {
+      const n = G(this.name, e);
+      t.length > 0 ? console.debug(n, ...t) : console.debug(n);
+    }
+  }
+  debug(e, ...t) {
+    if (!this.isProd || this.shouldLog("debug")) {
+      const n = G(this.name, e);
+      t.length > 0 ? console.debug(n, ...t) : console.debug(n);
+    }
+  }
+  info(e, ...t) {
+    if (this.shouldLog("info")) {
+      const n = G(this.name, e);
+      t.length > 0 ? console.info(n, ...t) : console.info(n);
+    }
+  }
+  warn(e, ...t) {
+    if (this.shouldLog("warn")) {
+      const n = G(this.name, e);
+      t.length > 0 ? console.warn(n, ...t) : console.warn(n);
+    }
+  }
+  error(e, ...t) {
+    if (this.shouldLog("error")) {
+      const n = G(this.name, e);
+      t.length > 0 ? console.error(n, ...t) : console.error(n);
+    }
+  }
+  /**
+   * Set the log level dynamically
+   */
+  setLevel(e) {
+    this.level = e, this.levelValue = re[e];
+  }
+  /**
+   * Get the current log level
+   */
+  getLevel() {
+    return this.level;
+  }
+}
+class be {
+  constructor(e = {}) {
+    this.name = e.name || ue.name, this.currentLevel = e.level || ue.level, this.nativeLogger = new We(this.name, this.currentLevel);
+  }
+  debug(e, ...t) {
+    this.nativeLogger.debug(e, ...t);
+  }
+  info(e, ...t) {
+    this.nativeLogger.info(e, ...t);
+  }
+  warn(e, ...t) {
+    this.nativeLogger.warn(e, ...t);
+  }
+  error(e, ...t) {
+    this.nativeLogger.error(e, ...t);
+  }
+  fatal(e, ...t) {
+    const n = G(this.name, `[FATAL] ${e}`);
+    t.length > 0 ? console.error(n, ...t) : console.error(n);
+  }
+  trace(e, ...t) {
+    this.nativeLogger.trace(e, ...t);
+  }
+  /**
+   * Set the log level dynamically
+   */
+  setLevel(e) {
+    this.currentLevel = e, this.nativeLogger.setLevel(e);
+  }
+  /**
+   * Get the current log level
+   */
+  getLevel() {
+    return this.nativeLogger.getLevel();
+  }
+}
+new be();
+function ie(i, e = {}) {
+  return new be({
+    ...e,
+    name: e.name || `WSX:${i}`
+  });
+}
+const je = ie("RouterUtils"), J = class J {
+  /**
+   * 设置当前路由信息（由 WsxRouter 内部调用）
+   * @internal
+   */
+  static _setCurrentRoute(e) {
+    J._currentRoute = e;
+  }
+  /**
+   * 编程式导航
+   */
+  static navigate(e, t = !1) {
+    t ? window.history.replaceState(null, "", e) : window.history.pushState(null, "", e), window.dispatchEvent(new PopStateEvent("popstate")), je.debug(`Navigated to: ${e} (replace: ${t})`);
+  }
+  /**
+   * 获取当前路由信息
+   * 如果路由已匹配（由 WsxRouter 维护），则返回包含参数的路由信息
+   * 否则返回基础路由信息（参数为空对象）
+   */
+  static getCurrentRoute() {
+    if (J._currentRoute)
+      return J._currentRoute;
+    const e = new URL(window.location.href);
+    return {
+      path: e.pathname,
+      params: {},
+      query: Object.fromEntries(e.searchParams.entries()),
+      hash: e.hash.slice(1)
+      // 移除 # 号
+    };
+  }
+  /**
+   * 解析路由路径，提取参数
+   */
+  static parseRoute(e, t) {
+    if (e === t)
+      return {
+        route: e,
+        params: {},
+        exact: !0
+      };
+    if (e === "*")
+      return {
+        route: e,
+        params: {},
+        exact: !1
+      };
+    if (e.includes(":")) {
+      const n = e.match(/:([^/]+)/g)?.map((_) => _.slice(1)) || [], p = e.replace(/:[^/]+/g, "([^/]+)"), v = new RegExp(`^${p}$`), w = t.match(v);
+      if (w && n.length > 0) {
+        const _ = {};
+        return n.forEach((y, I) => {
+          _[y] = w[I + 1];
+        }), {
+          route: e,
+          params: _,
+          exact: !0
+        };
+      }
+    }
+    if (e.endsWith("/*")) {
+      const n = e.slice(0, -2);
+      if (t.startsWith(n))
+        return {
+          route: e,
+          params: {},
+          exact: !1
+        };
+    }
+    return null;
+  }
+  /**
+   * 构建路由路径，替换参数
+   */
+  static buildPath(e, t = {}) {
+    let n = e;
+    return Object.entries(t).forEach(([p, v]) => {
+      n = n.replace(`:${p}`, encodeURIComponent(v));
+    }), n;
+  }
+  /**
+   * 检查路由是否匹配当前路径
+   */
+  static isRouteActive(e, t = !1) {
+    const n = window.location.pathname;
+    return t ? n === e : e === "/" ? n === "/" : n.startsWith(e);
+  }
+  /**
+   * 获取路由层级
+   */
+  static getRouteDepth(e) {
+    return e.split("/").filter((t) => t.length > 0).length;
+  }
+  /**
+   * 获取父级路由
+   */
+  static getParentRoute(e) {
+    const t = e.split("/").filter((n) => n.length > 0);
+    return t.length <= 1 ? "/" : (t.pop(), "/" + t.join("/"));
+  }
+  /**
+   * 合并路由路径
+   */
+  static joinPaths(...e) {
+    return e.map((t) => t.replace(/^\/+|\/+$/g, "")).filter((t) => t.length > 0).join("/").replace(/^/, "/");
+  }
+  /**
+   * 检查是否为外部链接
+   */
+  static isExternalUrl(e) {
+    return /^https?:\/\//.test(e) || /^mailto:/.test(e) || /^tel:/.test(e);
+  }
+  /**
+   * 获取查询参数
+   */
+  static getQueryParam(e) {
+    return new URL(window.location.href).searchParams.get(e);
+  }
+  /**
+   * 设置查询参数
+   */
+  static setQueryParam(e, t, n = !1) {
+    const p = new URL(window.location.href);
+    p.searchParams.set(e, t);
+    const v = p.pathname + p.search + p.hash;
+    this.navigate(v, n);
+  }
+  /**
+   * 删除查询参数
+   */
+  static removeQueryParam(e, t = !1) {
+    const n = new URL(window.location.href);
+    n.searchParams.delete(e);
+    const p = n.pathname + n.search + n.hash;
+    this.navigate(p, t);
+  }
+  /**
+   * 返回上一页
+   */
+  static goBack() {
+    window.history.back();
+  }
+  /**
+   * 前进一页
+   */
+  static goForward() {
+    window.history.forward();
+  }
+  /**
+   * 替换当前页面
+   */
+  static replace(e) {
+    this.navigate(e, !0);
+  }
+  /**
+   * 获取历史记录长度
+   */
+  static getHistoryLength() {
+    return window.history.length;
+  }
+  /**
+   * 监听路由变化
+   *
+   * 只监听 route-changed 事件，该事件在 RouterUtils._setCurrentRoute() 之后触发。
+   * 不监听 popstate 事件，因为：
+   * 1. WsxRouter 已经监听 popstate 并会触发 route-changed
+   * 2. 同时监听两个事件会导致回调被调用两次，产生竞态条件
+   * 3. popstate 触发时 RouterUtils._currentRoute 可能还未更新
+   *
+   * @see RFC-0035: 路由导航竞态条件修复
+   */
+  static onRouteChange(e) {
+    const t = () => {
+      const n = this.getCurrentRoute();
+      e(n);
+    };
+    return document.addEventListener("route-changed", t), () => {
+      document.removeEventListener("route-changed", t);
+    };
+  }
+};
+J._currentRoute = null;
+let te = J;
+const he = ":host{display:grid;width:100%}.router-outlet{width:100%}:host>wsx-view{grid-area:1 / 1}";
+var ye;
+let xe, Re;
+function N(i, e, t) {
+  return (e = $e(e)) in i ? Object.defineProperty(i, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : i[e] = t, i;
+}
+function Ae(i, e, t, n, p, v) {
+  function w(r, c, u) {
+    return function(s, a) {
+      return u && u(s), r[c].call(s, a);
+    };
+  }
+  function _(r, c) {
+    for (var u = 0; u < r.length; u++) r[u].call(c);
+    return c;
+  }
+  function y(r, c, u, s) {
+    if (typeof r != "function" && (s || r !== void 0)) throw new TypeError(c + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return r;
+  }
+  function I(r, c, u, s, a, j, A, S, D, R, b, f, m) {
+    function $(l) {
+      if (!m(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var h, C = c[0], E = c[3], W = !S;
+    if (!W) {
+      u || Array.isArray(C) || (C = [C]);
+      var o = {}, L = [], g = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      R ? (b || f ? o = { get: de(function() {
+        return E(this);
+      }, s, "get"), set: function(l) {
+        c[4](this, l);
+      } } : o[g] = E, b || de(o[g], s, a === 2 ? "" : g)) : b || (o = Object.getOwnPropertyDescriptor(r, s));
+    }
+    for (var d = r, z = C.length - 1; z >= 0; z -= u ? 2 : 1) {
+      var B = C[z], F = u ? C[z - 1] : void 0, K = {}, O = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(l, k) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        y(k, "An initializer", "be", !0), A.push(k);
+      }).bind(null, K) };
+      try {
+        if (W) (h = y(B.call(F, d, O), "class decorators", "return")) && (d = h);
+        else {
+          var T, P;
+          O.static = D, O.private = R, R ? a === 2 ? T = function(l) {
+            return $(l), o.value;
+          } : (a < 4 && (T = w(o, "get", $)), a !== 3 && (P = w(o, "set", $))) : (T = function(l) {
+            return l[s];
+          }, (a < 2 || a === 4) && (P = function(l, k) {
+            l[s] = k;
+          }));
+          var Q = O.access = { has: R ? m.bind() : function(l) {
+            return s in l;
+          } };
+          if (T && (Q.get = T), P && (Q.set = P), d = B.call(F, f ? { get: o.get, set: o.set } : o[g], O), f) {
+            if (typeof d == "object" && d) (h = y(d.get, "accessor.get")) && (o.get = h), (h = y(d.set, "accessor.set")) && (o.set = h), (h = y(d.init, "accessor.init")) && L.push(h);
+            else if (d !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else y(d, (b ? "field" : "method") + " decorators", "return") && (b ? L.push(d) : o[g] = d);
+        }
+      } finally {
+        K.v = !0;
+      }
+    }
+    return (b || f) && S.push(function(l, k) {
+      for (var q = L.length - 1; q >= 0; q--) k = L[q].call(l, k);
+      return k;
+    }), b || W || (R ? f ? S.push(w(o, "get"), w(o, "set")) : S.push(a === 2 ? o[g] : w.call.bind(o[g])) : Object.defineProperty(r, s, o)), d;
+  }
+  function H(r, c) {
+    return Object.defineProperty(r, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: c });
+  }
+  if (arguments.length >= 6) var M = v[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var V = Object.create(M ?? null), Y = function(r, c, u, s) {
+    var a, j, A = [], S = function(g) {
+      return Te(g) === r;
+    }, D = /* @__PURE__ */ new Map();
+    function R(g) {
+      g && A.push(_.bind(null, g));
+    }
+    for (var b = 0; b < c.length; b++) {
+      var f = c[b];
+      if (Array.isArray(f)) {
+        var m = f[1], $ = f[2], h = f.length > 3, C = 16 & m, E = !!(8 & m), W = (m &= 7) == 0, o = $ + "/" + E;
+        if (!W && !h) {
+          var L = D.get(o);
+          if (L === !0 || L === 3 && m !== 4 || L === 4 && m !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + $);
+          D.set(o, !(m > 2) || m);
+        }
+        I(E ? r : r.prototype, f, C, h ? "#" + $ : $e($), m, s, E ? j = j || [] : a = a || [], A, E, h, W, m === 1, E && h ? S : u);
+      }
+    }
+    return R(a), R(j), A;
+  }(i, e, p, V);
+  return t.length || H(i, V), { e: Y, get c() {
+    var r = [];
+    return t.length && [H(I(i, [t], n, i.name, 5, V, r), V), _.bind(null, r, i)];
+  } };
+}
+function $e(i) {
+  var e = Oe(i, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Oe(i, e) {
+  if (typeof i != "object" || !i) return i;
+  var t = i[Symbol.toPrimitive];
+  if (t !== void 0) {
+    var n = t.call(i, e);
+    if (typeof n != "object") return n;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(i);
+}
+function de(i, e, t) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(i, "name", { configurable: !0, value: t ? t + " " + e : e });
+  } catch {
+  }
+  return i;
+}
+function Te(i) {
+  if (Object(i) !== i) throw TypeError("right-hand side of 'in' should be an object, got " + (i !== null ? typeof i : "null"));
+  return i;
+}
+const x = ie("WsxRouter");
+Re = [ce({
+  tagName: "wsx-router"
+})];
+let Ie;
+class Ve extends ne {
+  constructor() {
+    super({
+      styles: he,
+      styleName: "wsx-router"
+    }), N(this, "_autoStyles", he), N(this, "views", /* @__PURE__ */ new Map()), N(this, "currentView", null), N(this, "currentPath", ""), N(this, "isHandlingRoute", !1), N(this, "compiledRoutes", /* @__PURE__ */ new Map()), N(this, "matchCache", /* @__PURE__ */ new Map()), N(this, "enableViewTransitions", !0), N(this, "scrollRestoration", "manual"), N(this, "handleRouteChange", () => {
+      if (this.isHandlingRoute) {
+        x.debug("Route change already in progress, skipping");
+        return;
+      }
+      this.views.size === 0 && (this.collectViews(), x.debug(`WsxRouter re-collected views: ${this.views.size}`)), this.isHandlingRoute = !0;
+      try {
+        const e = window.location.pathname;
+        x.debug(`WsxRouter: Route changed to: ${e}`);
+        const t = new CustomEvent("before-navigate", {
+          detail: {
+            to: e,
+            from: this.currentPath
+          },
+          bubbles: !0,
+          cancelable: !0
+        });
+        if (!this.dispatchEvent(t)) {
+          x.debug(`Navigation to ${e} was cancelled`);
+          return;
+        }
+        this.performNavigation(e);
+      } finally {
+        requestAnimationFrame(() => {
+          this.isHandlingRoute = !1;
+        });
+      }
+    }), N(this, "interceptLinks", (e) => {
+      const t = e.target.closest("a");
+      if (!t) return;
+      const n = t.getAttribute("href");
+      !n || n.startsWith("http") || n.startsWith("#") || (e.preventDefault(), this.navigate(n));
+    });
+  }
+  render() {
+    return /* @__PURE__ */ ee("div", { class: "router-outlet" });
+  }
+  onRendered() {
+    super.onRendered?.(), this.views.size === 0 && (this.collectViews(), x.debug("WsxRouter collected views in onRendered:", this.views.size)), this.views.size > 0 && !this.currentView && requestAnimationFrame(() => {
+      this.handleRouteChange();
+    });
+  }
+  onConnected() {
+    super.onConnected?.(), x.debug("WsxRouter connected to DOM"), "scrollRestoration" in history && (history.scrollRestoration = this.scrollRestoration), window.addEventListener("popstate", this.handleRouteChange), this.addEventListener("click", this.interceptLinks), requestAnimationFrame(() => {
+      this.views.size === 0 && (this.collectViews(), x.debug(`WsxRouter collected views in onConnected: ${this.views.size}`)), requestAnimationFrame(() => {
+        x.debug(`WsxRouter handling initial route: ${window.location.pathname}`), this.handleRouteChange();
+      });
+    });
+  }
+  onDisconnected() {
+    super.onDisconnected?.(), window.removeEventListener("popstate", this.handleRouteChange);
+  }
+  collectViews() {
+    const e = Array.from(this.children).filter((t) => t.tagName.toLowerCase() === "wsx-view");
+    x.debug(`WsxRouter found ${e.length} views`), this.views.clear(), this.compiledRoutes.clear(), this.matchCache.clear(), e.forEach((t) => {
+      const n = t.getAttribute("route") || "/";
+      if (this.views.set(n, t), x.debug(`WsxRouter registered route: ${n}`), n.includes(":")) {
+        const p = n.replace(/:[^/]+/g, "([^/]+)"), v = new RegExp(`^${p}$`);
+        this.compiledRoutes.set(n, v), x.debug(`WsxRouter compiled regex for route: ${n} -> ${v}`);
+      }
+      t.style.display = "none";
+    });
+  }
+  /**
+   * RFC 0033: 执行导航（带 View Transitions 支持）
+   */
+  performNavigation(e) {
+    const t = () => {
+      const n = this.matchRoute(e);
+      if (n) {
+        n.style.display = "block", n.style.visibility = "visible";
+        const p = n.getAttribute("route") || "/";
+        x.debug(`Showing view for route: ${p}`);
+        for (const [H, M] of this.views)
+          M !== n && (M.style.display = "none", M.style.visibility = "");
+        this.currentView = n;
+        const v = this.extractParams(p, e);
+        x.debug(`Extracted params for route ${p} and path ${e}:`, v), v && requestAnimationFrame(() => {
+          n.setAttribute("params", JSON.stringify(v)), x.debug(`Set params attribute on view: ${JSON.stringify(v)}`);
+        });
+        const w = window.location.href || `${window.location.pathname}${window.location.search}${window.location.hash}`, _ = new URL(w, window.location.origin || "http://localhost"), y = {
+          path: e,
+          params: v || {},
+          query: Object.fromEntries(_.searchParams.entries()),
+          hash: _.hash.slice(1)
+        };
+        te._setCurrentRoute(y), x.debug("Updated RouterUtils._currentRoute:", y);
+        const I = new CustomEvent("route-changed", {
+          detail: y,
+          bubbles: !0
+        });
+        document.dispatchEvent(I);
+      } else {
+        for (const [y, I] of this.views)
+          I.style.display = "none";
+        this.currentView = null, x.warn(`No view found for path: ${e}`);
+        const p = window.location.href || `${window.location.pathname}${window.location.search}${window.location.hash}`, v = new URL(p, window.location.origin || "http://localhost"), w = {
+          path: e,
+          params: {},
+          query: Object.fromEntries(v.searchParams.entries()),
+          hash: v.hash.slice(1)
+        };
+        te._setCurrentRoute(w);
+        const _ = new CustomEvent("route-changed", {
+          detail: w,
+          bubbles: !0
+        });
+        document.dispatchEvent(_);
+      }
+      this.handleScrollRestoration(e), this.dispatchEvent(new CustomEvent("after-navigate", {
+        detail: {
+          to: e,
+          from: this.currentPath
+        },
+        bubbles: !0
+      })), this.currentPath = e;
+    };
+    this.enableViewTransitions && "startViewTransition" in document ? document.startViewTransition(t) : t();
+  }
+  /**
+   * RFC 0033: 滚动恢复处理
+   */
+  handleScrollRestoration(e) {
+    this.scrollRestoration === "manual" && (this.isBackNavigation() || (window.scrollTo(0, 0), x.debug("Scrolled to top for forward navigation")));
+  }
+  /**
+   * RFC 0033: 检测是否是后退导航
+   */
+  isBackNavigation() {
+    return "navigation" in performance && performance.navigation ? performance.navigation.type === 2 : window.history.state?.navigationType === "back";
+  }
+  matchRoute(e) {
+    if (x.warn(`matchRoute called for path: ${e}, views count: ${this.views.size}`), this.matchCache.has(e)) {
+      const n = this.matchCache.get(e);
+      return x.warn(`matchRoute: found in cache, route: ${n}`), this.views.get(n) || null;
+    }
+    if (this.views.has(e))
+      return this.matchCache.set(e, e), x.warn(`matchRoute: exact match found for ${e}`), this.views.get(e);
+    for (const [n, p] of this.views)
+      if (n.endsWith("/*")) {
+        const v = n.slice(0, -2);
+        if (e.startsWith(v))
+          return this.matchCache.set(e, n), x.warn(`matchRoute: prefix match found, route: ${n}, path: ${e}`), p;
+      }
+    x.warn(`matchRoute: checking parameter routes, compiledRoutes count: ${this.compiledRoutes.size}`);
+    for (const [n, p] of this.views)
+      if (n.includes(":")) {
+        const v = this.compiledRoutes.get(n);
+        if (v) {
+          const w = v.test(e);
+          if (x.warn(`matchRoute: testing route ${n} against ${e}, matches: ${w}`), w)
+            return this.matchCache.set(e, n), x.warn(`matchRoute: parameter match found, route: ${n}, path: ${e}`), p;
+        } else
+          x.warn(`matchRoute: route ${n} has ':' but no compiled regex found`);
+      }
+    const t = this.views.get("*") || null;
+    return t ? (this.matchCache.set(e, "*"), x.warn(`matchRoute: wildcard match found for ${e}`)) : x.warn(`matchRoute: no match found for ${e}, no wildcard view available`), t;
+  }
+  extractParams(e, t) {
+    if (!e.includes(":")) return null;
+    const n = e.match(/:([^/]+)/g)?.map((y) => y.slice(1)) || [], p = e.replace(/:[^/]+/g, "([^/]+)"), v = new RegExp(`^${p}$`), w = t.match(v);
+    if (!w || !n.length) return null;
+    const _ = {};
+    return n.forEach((y, I) => {
+      _[y] = w[I + 1];
+    }), _;
+  }
+  /**
+   * RFC 0032: 清除匹配缓存
+   * 当路由配置变更时调用，确保使用最新的路由规则
+   */
+  clearMatchCache() {
+    this.matchCache.clear(), x.debug("WsxRouter cleared match cache");
+  }
+  /**
+   * RFC 0033: 配置 View Transitions
+   */
+  setViewTransitions(e) {
+    this.enableViewTransitions = e, x.debug(`View Transitions ${e ? "enabled" : "disabled"}`);
+  }
+  /**
+   * RFC 0033: 配置 Scroll Restoration
+   */
+  setScrollRestoration(e) {
+    this.scrollRestoration = e, "scrollRestoration" in history && (history.scrollRestoration = e), x.debug(`Scroll Restoration set to ${e}`);
+  }
+  /**
+   * 编程式导航 - 使用原生 History API
+   */
+  navigate(e) {
+    window.history.pushState(null, "", e), this.handleRouteChange();
+  }
+}
+ye = Ve;
+[Ie, xe] = Ae(ye, [], Re, 0, void 0, ne).c;
+xe();
+const De = ":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 Ce;
+let Ee, Le;
+function Z(i, e, t) {
+  return (e = ke(e)) in i ? Object.defineProperty(i, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : i[e] = t, i;
+}
+function ze(i, e, t, n, p, v) {
+  function w(r, c, u) {
+    return function(s, a) {
+      return u && u(s), r[c].call(s, a);
+    };
+  }
+  function _(r, c) {
+    for (var u = 0; u < r.length; u++) r[u].call(c);
+    return c;
+  }
+  function y(r, c, u, s) {
+    if (typeof r != "function" && (s || r !== void 0)) throw new TypeError(c + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return r;
+  }
+  function I(r, c, u, s, a, j, A, S, D, R, b, f, m) {
+    function $(l) {
+      if (!m(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var h, C = c[0], E = c[3], W = !S;
+    if (!W) {
+      u || Array.isArray(C) || (C = [C]);
+      var o = {}, L = [], g = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      R ? (b || f ? o = { get: fe(function() {
+        return E(this);
+      }, s, "get"), set: function(l) {
+        c[4](this, l);
+      } } : o[g] = E, b || fe(o[g], s, a === 2 ? "" : g)) : b || (o = Object.getOwnPropertyDescriptor(r, s));
+    }
+    for (var d = r, z = C.length - 1; z >= 0; z -= u ? 2 : 1) {
+      var B = C[z], F = u ? C[z - 1] : void 0, K = {}, O = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(l, k) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        y(k, "An initializer", "be", !0), A.push(k);
+      }).bind(null, K) };
+      try {
+        if (W) (h = y(B.call(F, d, O), "class decorators", "return")) && (d = h);
+        else {
+          var T, P;
+          O.static = D, O.private = R, R ? a === 2 ? T = function(l) {
+            return $(l), o.value;
+          } : (a < 4 && (T = w(o, "get", $)), a !== 3 && (P = w(o, "set", $))) : (T = function(l) {
+            return l[s];
+          }, (a < 2 || a === 4) && (P = function(l, k) {
+            l[s] = k;
+          }));
+          var Q = O.access = { has: R ? m.bind() : function(l) {
+            return s in l;
+          } };
+          if (T && (Q.get = T), P && (Q.set = P), d = B.call(F, f ? { get: o.get, set: o.set } : o[g], O), f) {
+            if (typeof d == "object" && d) (h = y(d.get, "accessor.get")) && (o.get = h), (h = y(d.set, "accessor.set")) && (o.set = h), (h = y(d.init, "accessor.init")) && L.push(h);
+            else if (d !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else y(d, (b ? "field" : "method") + " decorators", "return") && (b ? L.push(d) : o[g] = d);
+        }
+      } finally {
+        K.v = !0;
+      }
+    }
+    return (b || f) && S.push(function(l, k) {
+      for (var q = L.length - 1; q >= 0; q--) k = L[q].call(l, k);
+      return k;
+    }), b || W || (R ? f ? S.push(w(o, "get"), w(o, "set")) : S.push(a === 2 ? o[g] : w.call.bind(o[g])) : Object.defineProperty(r, s, o)), d;
+  }
+  function H(r, c) {
+    return Object.defineProperty(r, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: c });
+  }
+  if (arguments.length >= 6) var M = v[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var V = Object.create(M ?? null), Y = function(r, c, u, s) {
+    var a, j, A = [], S = function(g) {
+      return Me(g) === r;
+    }, D = /* @__PURE__ */ new Map();
+    function R(g) {
+      g && A.push(_.bind(null, g));
+    }
+    for (var b = 0; b < c.length; b++) {
+      var f = c[b];
+      if (Array.isArray(f)) {
+        var m = f[1], $ = f[2], h = f.length > 3, C = 16 & m, E = !!(8 & m), W = (m &= 7) == 0, o = $ + "/" + E;
+        if (!W && !h) {
+          var L = D.get(o);
+          if (L === !0 || L === 3 && m !== 4 || L === 4 && m !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + $);
+          D.set(o, !(m > 2) || m);
+        }
+        I(E ? r : r.prototype, f, C, h ? "#" + $ : ke($), m, s, E ? j = j || [] : a = a || [], A, E, h, W, m === 1, E && h ? S : u);
+      }
+    }
+    return R(a), R(j), A;
+  }(i, e, p, V);
+  return t.length || H(i, V), { e: Y, get c() {
+    var r = [];
+    return t.length && [H(I(i, [t], n, i.name, 5, V, r), V), _.bind(null, r, i)];
+  } };
+}
+function ke(i) {
+  var e = Pe(i, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Pe(i, e) {
+  if (typeof i != "object" || !i) return i;
+  var t = i[Symbol.toPrimitive];
+  if (t !== void 0) {
+    var n = t.call(i, e);
+    if (typeof n != "object") return n;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(i);
+}
+function fe(i, e, t) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(i, "name", { configurable: !0, value: t ? t + " " + e : e });
+  } catch {
+  }
+  return i;
+}
+function Me(i) {
+  if (Object(i) !== i) throw TypeError("right-hand side of 'in' should be an object, got " + (i !== null ? typeof i : "null"));
+  return i;
+}
+const U = ie("WsxView");
+Le = [ce({
+  tagName: "wsx-view"
+})];
+let qe;
+class Ne extends ne {
+  constructor() {
+    super(), Z(this, "_autoStyles", De), Z(this, "_component", ""), Z(this, "params", void 0), Z(this, "componentInstance", null), Z(this, "isLoading", !1);
+    let e = this.reactive({});
+    Object.defineProperty(this, "params", {
+      get: () => e,
+      set: (t) => {
+        e = t !== null && typeof t < "u" && (Array.isArray(t) || typeof t == "object") ? this.reactive(t) : t, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  get component() {
+    return this._component;
+  }
+  set component(e) {
+    this._component = e || "", this._component && requestAnimationFrame(() => {
+      this.connected && !this.componentInstance && !this.isLoading && this.loadComponent(this._component || "");
+    });
+  }
+  // 防止重复加载的标志
+  render() {
+    return /* @__PURE__ */ ee("div", { class: "route-view" });
+  }
+  onConnected() {
+    super.onConnected?.(), requestAnimationFrame(() => {
+      !this.connected || this.isLoading || this.componentInstance || this.component && this.loadComponent(this.component);
+    });
+  }
+  async loadComponent(e) {
+    if (!(!this.connected || this.isLoading || this.componentInstance)) {
+      this.isLoading = !0;
+      try {
+        const t = this.componentInstance;
+        if (t && (t.remove(), this.componentInstance = null), !customElements.get(e)) {
+          U.warn(`Component ${e} not found in customElements registry`), this.isLoading = !1;
+          return;
+        }
+        U.warn(`WsxView: Creating instance of ${e}`), this.componentInstance = document.createElement(e), Object.keys(this.params).length > 0 && (U.warn(`WsxView: Setting initial params on ${e}:`, this.params), Object.entries(this.params).forEach(([v, w]) => {
+          this.componentInstance.setAttribute(v, w);
+        }));
+        const p = this.querySelector(".route-view");
+        if (p) {
+          if (U.warn(`WsxView: Appending ${e} to container`), !customElements.get(e)) {
+            U.error(`WsxView: Component ${e} is not registered in customElements registry!`), this.isLoading = !1, this.componentInstance = null;
+            return;
+          }
+          p.appendChild(this.componentInstance), U.warn(`WsxView: Component ${e} appended successfully, waiting for connectedCallback...`), setTimeout(() => {
+            this.componentInstance && this.componentInstance.isConnected ? U.warn(`WsxView: Component ${e} is now connected to DOM`) : U.error(`WsxView: Component ${e} was not connected to DOM!`);
+          }, 0);
+        } else
+          U.error("WsxView: Route view container not found"), this.componentInstance = null;
+      } catch (t) {
+        U.warn(`Error loading component ${e}:`, t), this.componentInstance = null;
+      } finally {
+        this.isLoading = !1, U.warn(`WsxView: loadComponent for ${e} completed, isLoading=${this.isLoading}`);
+      }
+    }
+  }
+  onDisconnected() {
+    super.onDisconnected?.(), this.componentInstance && (this.componentInstance.remove(), this.componentInstance = null);
+  }
+}
+Ce = Ne;
+[qe, Ee] = ze(Ce, [], Le, 0, void 0, ne).c;
+Ee();
+const Ue = ':host{display:var(--wsx-theme-link-host-display, inline-flex);align-items:var(--wsx-theme-link-host-align-items, center);min-width:fit-content;min-height:fit-content;width:auto;height:auto;margin:var(--wsx-theme-btn-margin, 0);vertical-align:var(--wsx-theme-btn-vertical-align, middle)}.wsx-link{color:var(--wsx-theme-link-color, #007bff);text-decoration:var(--wsx-theme-link-decoration, underline);cursor:pointer;transition:color .2s ease;display:var(--wsx-theme-link-display, inline-flex);align-items:var(--wsx-theme-link-align-items, center);justify-content:var(--wsx-theme-link-justify-content, flex-start);gap:var(--wsx-theme-link-gap, 0);line-height:var(--wsx-theme-link-line-height, var(--wsx-theme-btn-line-height, 1.5));font-size:var(--wsx-theme-link-font-size, inherit);font-weight:var(--wsx-theme-link-font-weight, inherit);padding:var(--wsx-theme-link-padding, 0);margin:var(--wsx-theme-link-margin, 0);box-sizing:var(--wsx-theme-btn-box-sizing, border-box);vertical-align:var(--wsx-theme-btn-vertical-align, middle);width:auto;height:auto;min-width:fit-content}.wsx-link:hover{color:var(--wsx-theme-link-hover-color, #0056b3);text-decoration:var(--wsx-theme-link-hover-decoration, underline)}.wsx-link:focus{outline:2px solid var(--wsx-theme-link-focus-color, var(--wsx-theme-focus-color, #dc2626));outline-offset:2px}.wsx-link.active{color:var(--wsx-theme-link-active-color, #6c757d);font-weight:var(--wsx-theme-link-active-weight, bold)}:host([disabled]) .wsx-link{color:var(--wsx-theme-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(--wsx-theme-button-bg, #007bff);color:var(--wsx-theme-button-color, white);padding:var(--wsx-theme-btn-padding, .5rem 1rem);border-radius:var(--wsx-theme-btn-border-radius, .25rem);text-decoration:none;display:var(--wsx-theme-btn-display, inline-block)}:host([variant="button"]) .wsx-link:hover{background-color:var(--wsx-theme-button-hover-bg, #0056b3);color:var(--wsx-theme-button-hover-color, white)}:host([variant="tab"]) .wsx-link{padding:var(--wsx-theme-btn-padding, .5rem 1rem);border-bottom:2px solid transparent;text-decoration:none}:host([variant="tab"]) .wsx-link.active{border-bottom-color:var(--wsx-theme-tab-active-border, #007bff)}';
+var oe, se;
+let me, _e, ge;
+function X(i, e, t) {
+  return (e = Se(e)) in i ? Object.defineProperty(i, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : i[e] = t, i;
+}
+function He(i, e, t, n, p, v) {
+  function w(r, c, u) {
+    return function(s, a) {
+      return u && u(s), r[c].call(s, a);
+    };
+  }
+  function _(r, c) {
+    for (var u = 0; u < r.length; u++) r[u].call(c);
+    return c;
+  }
+  function y(r, c, u, s) {
+    if (typeof r != "function" && (s || r !== void 0)) throw new TypeError(c + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return r;
+  }
+  function I(r, c, u, s, a, j, A, S, D, R, b, f, m) {
+    function $(l) {
+      if (!m(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var h, C = c[0], E = c[3], W = !S;
+    if (!W) {
+      u || Array.isArray(C) || (C = [C]);
+      var o = {}, L = [], g = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      R ? (b || f ? o = { get: ve(function() {
+        return E(this);
+      }, s, "get"), set: function(l) {
+        c[4](this, l);
+      } } : o[g] = E, b || ve(o[g], s, a === 2 ? "" : g)) : b || (o = Object.getOwnPropertyDescriptor(r, s));
+    }
+    for (var d = r, z = C.length - 1; z >= 0; z -= u ? 2 : 1) {
+      var B = C[z], F = u ? C[z - 1] : void 0, K = {}, O = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(l, k) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        y(k, "An initializer", "be", !0), A.push(k);
+      }).bind(null, K) };
+      try {
+        if (W) (h = y(B.call(F, d, O), "class decorators", "return")) && (d = h);
+        else {
+          var T, P;
+          O.static = D, O.private = R, R ? a === 2 ? T = function(l) {
+            return $(l), o.value;
+          } : (a < 4 && (T = w(o, "get", $)), a !== 3 && (P = w(o, "set", $))) : (T = function(l) {
+            return l[s];
+          }, (a < 2 || a === 4) && (P = function(l, k) {
+            l[s] = k;
+          }));
+          var Q = O.access = { has: R ? m.bind() : function(l) {
+            return s in l;
+          } };
+          if (T && (Q.get = T), P && (Q.set = P), d = B.call(F, f ? { get: o.get, set: o.set } : o[g], O), f) {
+            if (typeof d == "object" && d) (h = y(d.get, "accessor.get")) && (o.get = h), (h = y(d.set, "accessor.set")) && (o.set = h), (h = y(d.init, "accessor.init")) && L.push(h);
+            else if (d !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else y(d, (b ? "field" : "method") + " decorators", "return") && (b ? L.push(d) : o[g] = d);
+        }
+      } finally {
+        K.v = !0;
+      }
+    }
+    return (b || f) && S.push(function(l, k) {
+      for (var q = L.length - 1; q >= 0; q--) k = L[q].call(l, k);
+      return k;
+    }), b || W || (R ? f ? S.push(w(o, "get"), w(o, "set")) : S.push(a === 2 ? o[g] : w.call.bind(o[g])) : Object.defineProperty(r, s, o)), d;
+  }
+  function H(r, c) {
+    return Object.defineProperty(r, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: c });
+  }
+  if (arguments.length >= 6) var M = v[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var V = Object.create(M ?? null), Y = function(r, c, u, s) {
+    var a, j, A = [], S = function(g) {
+      return Fe(g) === r;
+    }, D = /* @__PURE__ */ new Map();
+    function R(g) {
+      g && A.push(_.bind(null, g));
+    }
+    for (var b = 0; b < c.length; b++) {
+      var f = c[b];
+      if (Array.isArray(f)) {
+        var m = f[1], $ = f[2], h = f.length > 3, C = 16 & m, E = !!(8 & m), W = (m &= 7) == 0, o = $ + "/" + E;
+        if (!W && !h) {
+          var L = D.get(o);
+          if (L === !0 || L === 3 && m !== 4 || L === 4 && m !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + $);
+          D.set(o, !(m > 2) || m);
+        }
+        I(E ? r : r.prototype, f, C, h ? "#" + $ : Se($), m, s, E ? j = j || [] : a = a || [], A, E, h, W, m === 1, E && h ? S : u);
+      }
+    }
+    return R(a), R(j), A;
+  }(i, e, p, V);
+  return t.length || H(i, V), { e: Y, get c() {
+    var r = [];
+    return t.length && [H(I(i, [t], n, i.name, 5, V, r), V), _.bind(null, r, i)];
+  } };
+}
+function Se(i) {
+  var e = Be(i, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Be(i, e) {
+  if (typeof i != "object" || !i) return i;
+  var t = i[Symbol.toPrimitive];
+  if (t !== void 0) {
+    var n = t.call(i, e);
+    if (typeof n != "object") return n;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (e === "string" ? String : Number)(i);
+}
+function ve(i, e, t) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(i, "name", { configurable: !0, value: t ? t + " " + e : e });
+  } catch {
+  }
+  return i;
+}
+function Fe(i) {
+  if (Object(i) !== i) throw TypeError("right-hand side of 'in' should be an object, got " + (i !== null ? typeof i : "null"));
+  return i;
+}
+function Ke(i) {
+  return i;
+}
+const pe = ie("WsxLink");
+_e = [ce({
+  tagName: "wsx-link"
+})];
+let we;
+new (ge = (se = class extends le {
+  constructor() {
+    super(), X(this, "_autoStyles", Ue), X(this, "to", void 0), X(this, "activeClass", void 0), X(this, "handleClick", (v) => {
+      if (v.preventDefault(), !this.to) {
+        pe.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")), pe.debug(`Navigated to: ${this.to}`);
+    }), X(this, "updateActiveState", () => {
+      const v = window.location.pathname, w = this.exact ? v === this.to : v.startsWith(this.to) && this.to !== "/", _ = this.shadowRoot?.querySelector("a");
+      _ && (w ? (_.classList.add(this.activeClass), this.setAttribute("active", "")) : (_.classList.remove(this.activeClass), this.removeAttribute("active")));
+    });
+    const [e, t] = this.useState("to", "");
+    Object.defineProperty(this, "to", {
+      get: e,
+      set: t,
+      enumerable: !0,
+      configurable: !0
+    });
+    const [n, p] = this.useState("activeClass", "active");
+    Object.defineProperty(this, "activeClass", {
+      get: n,
+      set: p,
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  get replace() {
+    return this.hasAttribute("replace");
+  }
+  get exact() {
+    return this.hasAttribute("exact");
+  }
+  render() {
+    return /* @__PURE__ */ ee("a", { href: this.to, class: "wsx-link", onClick: this.handleClick, part: "link" }, /* @__PURE__ */ ee("slot", null));
+  }
+  onConnected() {
+    super.onConnected?.(), this.to = this.to || "", this.activeClass = this.activeClass || "active";
+    const e = this.shadowRoot.querySelector(".wsx-link");
+    e && (e.href = this.to), window.addEventListener("popstate", this.updateActiveState), document.addEventListener("route-changed", this.updateActiveState), this.updateActiveState();
+  }
+  onDisconnected() {
+    super.onDisconnected?.(), window.removeEventListener("popstate", this.updateActiveState), document.removeEventListener("route-changed", this.updateActiveState);
+  }
+  onAttributeChanged(e, t, n) {
+    switch (e) {
+      case "to":
+        this.to = n || "", this.updateActiveState();
+        break;
+      case "replace":
+        this.replace = n !== null && n !== "false";
+        break;
+      case "active-class":
+        this.activeClass = n || "active", this.updateActiveState();
+        break;
+      case "exact":
+        this.exact = n !== null && n !== "false", this.updateActiveState();
+        break;
+    }
+  }
+  isExternalLink(e) {
+    return e.startsWith("http://") || e.startsWith("https://") || e.startsWith("mailto:") || e.startsWith("tel:");
+  }
+  /**
+   * 编程式导航
+   */
+  navigate() {
+    this.to && this.handleClick(new MouseEvent("click", {
+      bubbles: !0,
+      cancelable: !0
+    }));
+  }
+}, [we, me] = He(se, [], _e, 0, void 0, le).c, se), oe = class extends Ke {
+  constructor() {
+    super(we), X(this, "observedAttributes", ["to", "replace", "active-class", "exact"]), me();
+  }
+}, X(oe, ge, void 0), oe)();
+export {
+  te as RouterUtils,
+  we as WsxLink,
+  Ie as WsxRouter,
+  qe as WsxView
+};