ranui/dist/route-AlGCwWst.js

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

import { H as h, I as n, R as u, p as l } from "./factory-WDxu11V0.js";
import { t as c } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { i, n as o, o as d, t as p } from "./utils-U-9uH7EX.js";
import { a as _, n as m } from "./ssr-BzykYefm.js";
import { getSSGPath as f, matchPath as g } from "./utils/router.js";
var b = ":host{display:block}:host([hidden]){display:none!important}", C = class extends m {
  static get observedAttributes() {
    return [
      "path",
      "exact",
      "src",
      "sheet"
    ];
  }
  _events = new c();
  _shadowDom;
  _params = {};
  _mounted = !1;
  _module = null;
  _disposePage = null;
  _pageHost = null;
  _mountToken = 0;
  constructor() {
    super(), this._shadowDom = p(this, b), this._shadowDom.appendChild(l().build());
  }
  get path() {
    return o(this, "path", "/");
  }
  set path(t) {
    i(this, "path", t);
  }
  get exact() {
    return this.hasAttribute("exact");
  }
  get src() {
    return o(this, "src");
  }
  set src(t) {
    i(this, "src", t);
  }
  get params() {
    return { ...this._params };
  }
  get sheet() {
    return o(this, "sheet");
  }
  set sheet(t) {
    i(this, "sheet", t);
  }
  handlerExternalCss = () => {
    d(this, this._shadowDom, "sheet", null, this.sheet);
  };
  _update(t) {
    const { matched: e, params: s } = g(this.path, this.exact, t);
    this._params = s, this.hidden = !e, this.src && !h && (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 = n((r) => {
        const a = e(s);
        return typeof a == "function" && u(a), 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 = f();
    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", C);
export {
  C as t
};