ranui 0.1.10-alpha.7 → 0.2.0-alpha.0

package/dist/utils/router.js

@@ -0,0 +1,197 @@
+var o = null, r = null, u = null;
+function m() {
+  return u;
+}
+function v(e) {
+  u = e;
+}
+function b() {
+  u = null;
+}
+function f(e) {
+  const t = {};
+  return e && new URLSearchParams(e.startsWith("?") ? e.slice(1) : e).forEach((i, n) => {
+    t[n] = i;
+  }), t;
+}
+function l() {
+  return typeof document < "u" && "startViewTransition" in document;
+}
+function _(e) {
+  l() ? document.startViewTransition(e) : e();
+}
+function h() {
+  typeof document > "u" || r && document.head.contains(r) || (r = document.createElement("style"), r.textContent = "@view-transition { navigation: auto; }", document.head.appendChild(r));
+}
+function d() {
+  r?.remove(), r = null;
+}
+function p(e) {
+  return e === !0 || e === "spa" || e === "both";
+}
+function w(e) {
+  return e === "mpa" || e === "both";
+}
+var g = class {
+  _mode;
+  _base;
+  _routes;
+  _vtMode;
+  _beforeGuards = [];
+  _afterGuards = [];
+  _changeHandlers = [];
+  _pageSwapHandlers = [];
+  _pageRevealHandlers = [];
+  _components = /* @__PURE__ */ new Set();
+  _current = null;
+  _mpaActive = !1;
+  constructor(e = {}) {
+    this._mode = e.mode ?? "history", this._base = e.base ?? "", this._routes = e.routes ?? [], this._vtMode = e.viewTransition, w(this._vtMode) && this._enableMpa();
+  }
+  get mode() {
+    return this._mode;
+  }
+  get base() {
+    return this._base;
+  }
+  get routes() {
+    return [...this._routes];
+  }
+  get currentRoute() {
+    return this._current;
+  }
+  _matchConfigPath(e, t) {
+    const i = [], n = t.path.split("/").map((s) => s.startsWith(":") ? (i.push(s.slice(1)), "([^/]+)") : s === "*" ? "(.*)" : s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("/");
+    return (t.exact ? new RegExp(`^${n}$`) : new RegExp(`^${n}(?:/.*)?$`)).test(e);
+  }
+  matchRoute(e) {
+    return this._routes.find((t) => this._matchConfigPath(e, t)) ?? null;
+  }
+  getStaticPaths() {
+    return this._routes.map((e) => e.path);
+  }
+  _enableMpa() {
+    this._mpaActive || (this._mpaActive = !0, h(), typeof window < "u" && (window.addEventListener("pageswap", this._onPageSwap), window.addEventListener("pagereveal", this._onPageReveal)));
+  }
+  _disableMpa() {
+    this._mpaActive && (this._mpaActive = !1, d(), typeof window < "u" && (window.removeEventListener("pageswap", this._onPageSwap), window.removeEventListener("pagereveal", this._onPageReveal)));
+  }
+  _onPageSwap = (e) => {
+    this._pageSwapHandlers.forEach((t) => t(e));
+  };
+  _onPageReveal = (e) => {
+    this._pageRevealHandlers.forEach((t) => t(e));
+  };
+  _bind(e) {
+    this._components.add(e);
+  }
+  _unbind(e) {
+    this._components.delete(e);
+  }
+  _buildLocation(e) {
+    const t = e.indexOf("?"), i = t === -1 ? e : e.slice(0, t), n = t === -1 ? "" : e.slice(t + 1);
+    return {
+      path: i || "/",
+      params: {},
+      query: f(n),
+      fullPath: e || "/"
+    };
+  }
+  _getCurrentPath() {
+    if (typeof window > "u") return "/";
+    if (this._mode === "hash") return window.location.hash.slice(1) || "/";
+    const e = window.location.pathname, t = this._base;
+    return (t && e.startsWith(t) ? e.slice(t.length) || "/" : e) + (window.location.search || "");
+  }
+  _notify() {
+    const e = this._buildLocation(this._getCurrentPath()), t = this._current;
+    this._current = e;
+    const i = () => {
+      this._components.forEach((n) => n._syncRoutes());
+    };
+    p(this._vtMode) ? _(i) : i(), this._afterGuards.forEach((n) => n(e, t)), this._changeHandlers.forEach((n) => n(e, t));
+  }
+  async _navigate(e, t) {
+    const i = this._buildLocation(e), n = this._current;
+    for (const s of this._beforeGuards) {
+      const a = await new Promise((c) => {
+        s(i, n, c);
+      });
+      if (a === !1) return;
+      if (typeof a == "string") return this._navigate(a, t);
+    }
+    if (typeof window < "u") {
+      const s = this._mode === "hash" ? `#${e}` : this._base + e;
+      t ? window.history.replaceState({ path: e }, "", s) : window.history.pushState({ path: e }, "", s);
+    }
+    this._notify();
+  }
+  push(e) {
+    return this._navigate(e, !1);
+  }
+  replace(e) {
+    return this._navigate(e, !0);
+  }
+  back() {
+    typeof window < "u" && window.history.back();
+  }
+  forward() {
+    typeof window < "u" && window.history.forward();
+  }
+  go(e) {
+    typeof window < "u" && window.history.go(e);
+  }
+  destroy() {
+    this._disableMpa(), this._components.clear();
+  }
+  beforeEach(e) {
+    return this._beforeGuards.push(e), () => {
+      const t = this._beforeGuards.indexOf(e);
+      t !== -1 && this._beforeGuards.splice(t, 1);
+    };
+  }
+  afterEach(e) {
+    return this._afterGuards.push(e), () => {
+      const t = this._afterGuards.indexOf(e);
+      t !== -1 && this._afterGuards.splice(t, 1);
+    };
+  }
+  onRouteChange(e) {
+    return this._changeHandlers.push(e), () => {
+      const t = this._changeHandlers.indexOf(e);
+      t !== -1 && this._changeHandlers.splice(t, 1);
+    };
+  }
+  onPageSwap(e) {
+    return this._pageSwapHandlers.push(e), () => {
+      const t = this._pageSwapHandlers.indexOf(e);
+      t !== -1 && this._pageSwapHandlers.splice(t, 1);
+    };
+  }
+  onPageReveal(e) {
+    return this._pageRevealHandlers.push(e), () => {
+      const t = this._pageRevealHandlers.indexOf(e);
+      t !== -1 && this._pageRevealHandlers.splice(t, 1);
+    };
+  }
+};
+function y(e) {
+  o?.destroy();
+  const t = new g(e);
+  return o = t, t;
+}
+function S() {
+  return o;
+}
+function P() {
+  return h(), () => d();
+}
+export {
+  g as RouterCore,
+  b as clearSSGPath,
+  y as createRouter,
+  P as enableMpaViewTransitions,
+  m as getSSGPath,
+  v as setSSGPath,
+  S as useRouter
+};

package/dist/utils/ssg.d.ts

@@ -0,0 +1,49 @@
+export interface SSGPage {
+    /** URL path this page was rendered for, e.g. "/about". */
+    path: string;
+    /** Serialized HTML string with Declarative Shadow DOM. */
+    html: string;
+}
+/**
+ * Render a single router element for the given URL path.
+ *
+ * Sets the SSG path context so that each `r-route` child resolves its
+ * `hidden` attribute during serialization via `_preSerialize()`.
+ *
+ *   const html = renderStaticPage(createApp(), '/about');
+ */
+export declare function renderStaticPage(element: HTMLElement, path: string): string;
+/**
+ * Render one HTML page per route and return all results.
+ *
+ * `factory` is called once per route — it must return a freshly constructed
+ * router element tree (r-router + r-route children) each time, because each
+ * render mutates the element's `hidden` attributes.
+ *
+ * Paths are read from the active RouterCore's `getStaticPaths()` when omitted.
+ * Pass `options.paths` to override or to provide paths when no RouterCore is set.
+ *
+ *   const router = createRouter({
+ *     routes: [
+ *       { path: '/', exact: true },
+ *       { path: '/about' },
+ *       { path: '/contact' },
+ *     ],
+ *   });
+ *
+ *   const pages = generateStaticPages(() => {
+ *     const app = new Router();
+ *     [['/', homeContent], ['/about', aboutContent], ['/contact', contactContent]]
+ *       .forEach(([path, content]) => {
+ *         const route = new Route();
+ *         route.setAttribute('path', path);
+ *         route.appendChild(content);
+ *         app.appendChild(route);
+ *       });
+ *     return app;
+ *   });
+ *   // pages = [{ path: '/', html: '...' }, { path: '/about', html: '...' }, ...]
+ */
+export declare function generateStaticPages(factory: () => HTMLElement, options?: {
+    paths?: string[];
+}): SSGPage[];

package/dist/utils/ssr-registry.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Unified registration that handles both browser (customElements.define) and
+ * SSR (internal registry) environments. Replace all bare customElements.define
+ * calls with this so new components are automatically available to renderToStream.
+ */
+export declare function defineSSR(tagName: string, constructor: new () => HTMLElement): void;
+export declare function getSSRConstructor(tagName: string): (new () => HTMLElement) | undefined;
+export declare function getSSRRegistry(): ReadonlyMap<string, new () => HTMLElement>;

package/dist/utils/ssr-stream.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Streaming SSR renderer. Accepts an HTML string containing RanUI custom elements
+ * and yields HTML chunks with Declarative Shadow DOM (DSD) inlined.
+ *
+ * Static HTML is yielded immediately; custom elements are instantiated via the
+ * SSR registry and serialized before yielding.
+ *
+ * @example
+ * ```ts
+ * import { renderToStream } from 'ranui/ssr-stream';
+ *
+ * const stream = renderToStream(`
+ *   <r-button type="primary">Submit</r-button>
+ *   <r-progress percent="65"></r-progress>
+ * `);
+ * for await (const chunk of stream) res.write(chunk);
+ * ```
+ */
+export declare function renderToStream(html: string): AsyncGenerator<string>;
+/**
+ * Non-streaming convenience wrapper. Collects all chunks and returns a single string.
+ */
+export declare function renderHTMLToString(html: string): Promise<string>;

package/dist/utils/ssr.d.ts

@@ -0,0 +1,17 @@
+export declare const HTMLElementSSR: () => {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare const RanElement: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+/**
+ * Rendering utility for RanUI components in SSR environments.
+ * Accepts a component instance and returns its HTML string with Declarative Shadow DOM.
+ */
+export declare const renderToString: (component: any) => string;
+/**
+ * Convenience helper to render a tag with attributes and children manually.
+ */
+export declare const h: (tag: string, props?: Record<string, string>, ...children: any[]) => string;

package/dist/utils/style.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 将 CSS 字符串注入到指定的 Shadow DOM。
+ * - SSR 环境安全（自动跳过）
+ * - 幂等：同一 shadowRoot 不会重复注入
+ * - 优先使用 Constructable Stylesheets 提升性能
+ */
+export declare const adoptStyles: (shadowRoot: ShadowRoot, cssText: string) => void;
+/**
+ * 注入通过组件 `sheet` 属性传入的动态样式。
+ * 幂等策略：同一 shadowRoot 内相同 cssText 只注入一次。
+ */
+export declare const adoptSheetText: (shadowRoot: ShadowRoot, cssText: string) => void;

package/dist/utils/theme.d.ts

@@ -0,0 +1,9 @@
+export type RanThemeName = 'light' | 'dark' | 'system';
+export type ThemeTarget = HTMLElement | Document;
+export type ThemeTokenMap = Record<string, string | number | null | undefined>;
+export declare const setTheme: (name: RanThemeName, target?: ThemeTarget) => void;
+export declare const getTheme: (target?: ThemeTarget) => RanThemeName | "";
+export declare const setThemeToken: (name: string, value: string | number, target?: HTMLElement) => void;
+export declare const clearThemeToken: (name: string, target?: HTMLElement) => void;
+export declare const setThemeTokens: (tokens: ThemeTokenMap, target?: HTMLElement) => void;
+export declare const initTheme: (target?: ThemeTarget) => void;

package/dist/utils/tween.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 缓动函数
+ * t: current time（当前时间）
+ * b: beginning value（初始值）
+ * c: change in value（变化量）
+ * d: duration（持续时间）
+ *
+ * 感谢张鑫旭大佬 https://github.com/zhangxinxu/Tween
+ */
+interface SpeedType {
+    easeIn: (...arr: number[]) => number;
+    easeOut: (...arr: number[]) => number;
+}
+export declare const quad: SpeedType;
+export declare const cubic: SpeedType;
+export declare const quart: SpeedType;
+export declare const quint: SpeedType;
+export declare const sine: SpeedType;
+export declare const expo: SpeedType;
+export declare const circ: SpeedType;
+export {};

package/dist/utils/video.d.ts

@@ -0,0 +1,40 @@
+export declare const vod: {
+    FD: {
+        label: string;
+    };
+    LD: {
+        bandWidth: {
+            h264: number;
+            h265: number;
+        };
+        label: string;
+    };
+    SD: {
+        bandWidth: {
+            h264: number;
+            h265: number;
+        };
+        label: string;
+    };
+    HD: {
+        bandWidth: {
+            h264: number;
+            h265: number;
+        };
+        label: string;
+    };
+    '2K': {
+        bandWidth: {
+            h264: number;
+            h265: number;
+        };
+        label: string;
+    };
+    '4K': {
+        bandWidth: {
+            h264: number;
+            h265: number;
+        };
+        label: string;
+    };
+};