ranui/dist/route-CGwS0cd_.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { a as o, n as h, o as n, r as a, t as u } from "./utils-D1iZnChu.js";
import { c } from "./mocks-CMGoftIc.js";
import { t as l } from "./events-C59wGdni.js";
import { j as p, k as d, p as m } from "./factory-ZNhcQ4tf.js";
import { a as _, n as f } from "./ssr-DSGwPtEd.js";
import { getSSGPath as g, matchPath as b } from "./utils/router.js";
var v = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:block}:host([hidden]){display:none!important}", w = class extends f {
  static get observedAttributes() {
    return [
      "path",
      "exact",
      "src",
      "sheet"
    ];
  }
  _events = new l();
  _shadowDom;
  _params = {};
  _mounted = !1;
  _module = null;
  _disposePage = null;
  _pageHost = null;
  _mountToken = 0;
  constructor() {
    super(), this._shadowDom = h(this, v), u(this._shadowDom, "slot", () => m().build());
  }
  get path() {
    return a(this, "path", "/");
  }
  set path(t) {
    o(this, "path", t);
  }
  get exact() {
    return this.hasAttribute("exact");
  }
  get src() {
    return a(this, "src");
  }
  set src(t) {
    o(this, "src", t);
  }
  get params() {
    return { ...this._params };
  }
  get sheet() {
    return a(this, "sheet");
  }
  set sheet(t) {
    o(this, "sheet", t);
  }
  handlerExternalCss = () => {
    n(this, this._shadowDom, "sheet", null, this.sheet);
  };
  _update(t) {
    const { matched: e, params: s } = b(this.path, this.exact, t);
    this._params = s, this.hidden = !e, this.src && !c && (e ? this._mount() : this._unmount()), e && this.dispatchEvent(new CustomEvent("routematch", {
      detail: {
        path: t,
        params: s
      },
      bubbles: !0
    }));
  }
  async _mount() {
    if (this._mounted) return;
    this._mounted = !0;
    const t = ++this._mountToken;
    this._pageHost || (this._pageHost = document.createElement("div"), this._pageHost.setAttribute("part", "page"), this.appendChild(this._pageHost));
    try {
      if (this._module ??= await import(
        /* @vite-ignore */
        this.src
      ), t !== this._mountToken) return;
      const e = this._module.default;
      if (typeof e != "function") {
        console.error(`[r-route] "${this.src}" has no default export (host) => void`);
        return;
      }
      const s = this._pageHost;
      this._disposePage = d((r) => {
        const i = e(s);
        return typeof i == "function" && p(i), r;
      });
    } catch (e) {
      this._mounted = !1, console.error(`[r-route] failed to load "${this.src}":`, e);
    }
  }
  _unmount() {
    this._mounted && (this._mounted = !1, this._mountToken++, this._disposePage?.(), this._disposePage = null, this._pageHost?.replaceChildren());
  }
  _preSerialize() {
    const t = g();
    t !== null && this._update(t);
  }
  connectedCallback() {
    this.handlerExternalCss();
    const t = this.closest("r-router");
    t && t._currentPath && this._update(t._currentPath);
  }
  disconnectedCallback() {
    this._unmount(), this._events.abort();
  }
  attributeChangedCallback(t, e, s) {
    if (e !== s) {
      if (t === "src" && (this._module = null, this._unmount()), t === "path" || t === "exact" || t === "src") {
        const r = this.closest("r-router");
        r && this._update(r._currentPath);
      }
      t === "sheet" && this.handlerExternalCss();
    }
  }
};
_("r-route", w);
export {
  w as t
};