sibujs 4.12.0 → 4.13.1

package/dist/plugins.js

@@ -1,3 +1,6 @@
+import {
+  prerenderWait
+} from "./chunk-B36ADEIR.js";
 import {
   MigrationStorageError,
   VERSION,
@@ -19,7 +22,10 @@ import {
   preloadCritical,
   prerenderRoutes,
   satisfies
-} from "./chunk-653KGQS2.js";
+} from "./chunk-OIKD7YDY.js";
+import {
+  acquireTitle
+} from "./chunk-52XFPGSN.js";
 import {
   PluginInstallCancelledError,
   createPlugin,
@@ -35,9 +41,12 @@ import {
 } from "./chunk-J6FW5TV6.js";
 import {
   span
-} from "./chunk-T5O2CUHV.js";
+} from "./chunk-5XUGJM3J.js";
 import {
+  STATIC_VALUE_RESOLVER,
   escapeScriptJson,
+  planHeadElementEntry,
+  planMetaEntry,
   renderToString,
   serializeHeadEntry
 } from "./chunk-2F4PSJ5Z.js";
@@ -49,17 +58,17 @@ import {
 import {
   appendChildren,
   resolveClassValue
-} from "./chunk-WH4U2VUE.js";
+} from "./chunk-CPQKWCJ2.js";
 import {
   setSafeAttribute
-} from "./chunk-XX4BRMWF.js";
+} from "./chunk-K4LNUT5L.js";
 import "./chunk-F2UWOZ6J.js";
 import {
   globalSingleton
 } from "./chunk-7ZHH77QA.js";
 import {
   effect
-} from "./chunk-EMB5PG7V.js";
+} from "./chunk-QC3NP47A.js";
 import {
   sanitizeUrl,
   stripControlChars
@@ -70,14 +79,14 @@ import {
 import "./chunk-5HZXGZ6T.js";
 import {
   signal
-} from "./chunk-IHA62NGJ.js";
+} from "./chunk-QKFVMIAV.js";
 import {
   bindOwnerScope,
   getOwnerScope,
   runWithOwnerScope,
   track,
   untracked
-} from "./chunk-B2Y5BJSP.js";
+} from "./chunk-4UTGDVSA.js";
 import {
   devWarn,
   dispose,
@@ -158,6 +167,201 @@ function getAvailableLocales() {
   return Object.keys(locales);
 }
 
+// src/plugins/routeHead.ts
+var OG_FIELDS = [
+  ["title", "og:title"],
+  ["description", "og:description"],
+  ["image", "og:image"],
+  ["url", "og:url"],
+  ["type", "og:type"],
+  ["siteName", "og:site_name"]
+];
+var OG_URL_PROPERTIES = /* @__PURE__ */ new Set(["og:image", "og:url"]);
+var ROUTE_HEAD_ATTR = "data-sibu-head";
+var BASE_TITLE_ATTR = "data-sibu-base-title";
+function routeHasHead(matched, defaults) {
+  if (defaults) return true;
+  for (const record of matched) if (record.head) return true;
+  return false;
+}
+function resolveValue(value, route2) {
+  if (value == null) return null;
+  const v = typeof value === "function" ? value(route2) : value;
+  return v == null ? null : String(v);
+}
+function mergeHeads(route2, defaults) {
+  const layers = [];
+  if (defaults) layers.push(defaults);
+  for (const record of route2.matched) {
+    const head = record.head;
+    if (head) layers.push(head);
+  }
+  const merged = {};
+  const og = {};
+  const meta = /* @__PURE__ */ new Map();
+  for (const layer of layers) {
+    if (layer.title !== void 0) merged.title = layer.title;
+    if (layer.description !== void 0) merged.description = layer.description;
+    if (layer.canonical !== void 0) merged.canonical = layer.canonical;
+    if (layer.og) {
+      for (const [field] of OG_FIELDS) if (layer.og[field] !== void 0) og[field] = layer.og[field];
+    }
+    for (const entry of layer.meta ?? []) {
+      const id = metaIdentity(entry);
+      if (id) meta.set(id, entry);
+    }
+  }
+  merged.og = og;
+  merged.meta = Array.from(meta.values());
+  return merged;
+}
+function metaIdentity(entry) {
+  const name = typeof entry.name === "string" ? entry.name : null;
+  if (name) return `name:${name.toLowerCase()}`;
+  const property = typeof entry.property === "string" ? entry.property : null;
+  if (property) return `property:${property.toLowerCase()}`;
+  return null;
+}
+function applyTemplate(title, template) {
+  if (!template) return title;
+  return typeof template === "function" ? template(title) : template.replace("%s", title);
+}
+function resolveRouteHead(route2, defaults) {
+  const merged = mergeHeads(route2, defaults);
+  const ownTitle = resolveValue(merged.title, route2);
+  const routeSetTitle = route2.matched.some((r) => r.head?.title != null);
+  const title = ownTitle === null ? null : routeSetTitle ? applyTemplate(ownTitle, defaults?.titleTemplate) : ownTitle;
+  const description = resolveValue(merged.description, route2);
+  const canonical = resolveValue(merged.canonical, route2);
+  const tags = [];
+  const push2 = (key, tag, attrs) => {
+    const plan = tag === "meta" ? planMetaEntry(attrs, STATIC_VALUE_RESOLVER) : planHeadElementEntry(attrs, STATIC_VALUE_RESOLVER);
+    if (plan.kind === "drop") return;
+    tags.push({ key, tag, attrs: Object.fromEntries(plan.attributes) });
+  };
+  if (description !== null) push2("meta:name:description", "meta", { name: "description", content: description });
+  if (canonical !== null) push2("link:rel:canonical", "link", { rel: "canonical", href: canonical });
+  const og = merged.og ?? {};
+  for (const [field, property] of OG_FIELDS) {
+    let value = og[field] === void 0 ? void 0 : resolveValue(og[field], route2);
+    if (value === void 0) {
+      if (field === "title") value = ownTitle;
+      else if (field === "description") value = description;
+      else if (field === "url") value = canonical;
+      else value = null;
+    }
+    if (value === null) continue;
+    if (OG_URL_PROPERTIES.has(property)) {
+      value = sanitizeUrl(value);
+      if (value === "") continue;
+    }
+    push2(`meta:property:${property}`, "meta", { property, content: value });
+  }
+  for (const entry of merged.meta ?? []) {
+    const id = metaIdentity(entry);
+    if (!id) continue;
+    const attrs = {};
+    for (const [name, v] of Object.entries(entry)) {
+      const resolved = resolveValue(v, route2);
+      if (resolved !== null) attrs[name] = resolved;
+    }
+    push2(`meta:${id}`, "meta", attrs);
+  }
+  return { title, tags };
+}
+function escapeText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function routeHeadToHTML(head) {
+  const parts = [];
+  if (head.title !== null) parts.push(`<title>${escapeText(head.title)}</title>`);
+  for (const t2 of head.tags) {
+    const html = serializeHeadEntry(t2.tag, t2.attrs);
+    if (html) parts.push(html.replace(/ \/>$/, ` ${ROUTE_HEAD_ATTR}="" />`));
+  }
+  return parts.join("\n");
+}
+function selectorFor(key) {
+  const [tag, attr, ...rest] = key.split(":");
+  const value = rest.join(":").replace(/["\\]/g, "\\$&");
+  return `${tag}[${attr}="${value}" i]`;
+}
+function createRouteHeadController(defaults) {
+  const [current, setCurrent] = signal(null);
+  const owned = /* @__PURE__ */ new Map();
+  const initial = new Set(Array.from(document.head.children));
+  const titleEl = document.head.querySelector("title");
+  const baseTitle = titleEl?.getAttribute(BASE_TITLE_ATTR) ?? document.title;
+  let titleLease = null;
+  let firstApply = true;
+  const publish = (tag) => {
+    const existing = owned.get(tag.key);
+    if (existing && sameAttrs(existing, tag.attrs)) return;
+    if (!existing) {
+      for (const el of Array.from(document.head.querySelectorAll(selectorFor(tag.key)))) {
+        if (initial.has(el)) {
+          el.remove();
+          initial.delete(el);
+        }
+      }
+    }
+    const next = document.createElement(tag.tag);
+    for (const [name, value] of Object.entries(tag.attrs)) next.setAttribute(name, value);
+    next.setAttribute(ROUTE_HEAD_ATTR, "");
+    if (existing?.parentNode) existing.replaceWith(next);
+    else document.head.appendChild(next);
+    owned.set(tag.key, next);
+  };
+  const apply = (head) => {
+    if (firstApply) {
+      firstApply = false;
+      for (const el of Array.from(document.head.querySelectorAll(`[${ROUTE_HEAD_ATTR}]`))) {
+        if (initial.has(el) && !head.tags.some((t2) => el.matches(selectorFor(t2.key)))) {
+          el.remove();
+          initial.delete(el);
+        }
+      }
+    }
+    const keep = /* @__PURE__ */ new Set();
+    for (const tag of head.tags) {
+      keep.add(tag.key);
+      publish(tag);
+    }
+    for (const [key, el] of owned) {
+      if (keep.has(key)) continue;
+      el.remove();
+      owned.delete(key);
+    }
+    const title = head.title ?? baseTitle;
+    if (titleLease) titleLease.set(title);
+    else titleLease = acquireTitle(title);
+  };
+  const stop = effect(() => {
+    const route2 = current();
+    if (route2 === null) return;
+    const head = resolveRouteHead(route2, defaults);
+    untracked(() => apply(head));
+  });
+  return {
+    update(route2) {
+      setCurrent(route2);
+    },
+    dispose() {
+      stop();
+      for (const el of owned.values()) el.remove();
+      owned.clear();
+      titleLease?.release();
+      titleLease = null;
+    }
+  };
+}
+function sameAttrs(el, attrs) {
+  const names = Object.keys(attrs);
+  if (el.attributes.length !== names.length + 1) return false;
+  for (const name of names) if (el.getAttribute(name) !== attrs[name]) return false;
+  return true;
+}
+
 // src/plugins/router.ts
 function splitRouteUrl(url) {
   const hashIndex = url.indexOf("#");
@@ -836,6 +1040,15 @@ var _SibuRouter = class _SibuRouter {
     // to superseded work. The router's own initial location resolution is
     // excluded — it establishes the bootstrap route rather than superseding it.
     this.navEpoch = 0;
+    // Created the first time a committed route needs a managed <head>.
+    this.headController = null;
+    // `readyPromise` plus the matched components loaded; created on the first
+    // `routerReady()` call only, so an app that never asks pays nothing and its
+    // outlets load exactly as before.
+    this.loadedPromise = null;
+    this.readyPromise = new Promise((resolve) => {
+      this.resolveReady = resolve;
+    });
     this.options = {
       mode: "history",
       base: "",
@@ -873,12 +1086,31 @@ var _SibuRouter = class _SibuRouter {
       }
     }
     queueMicrotask(() => {
+      let initial = Promise.resolve();
       if (!this.navigator.isNavigating) {
-        this.handleLocationChange(true, true);
+        initial = this.handleLocationChange(true, true);
       }
       this.isReadySetter(true);
+      prerenderWait(initial.then(this.resolveReady, this.resolveReady));
     });
   }
+  /** Load the component of every record the current route matched, without instantiating any. */
+  async preloadMatched() {
+    const current = untracked(() => this.currentRouteGetter());
+    for (const record of current.matched) {
+      if ("redirect" in record) continue;
+      try {
+        await this.loader.preloadPlan(record, current.path);
+      } catch {
+        this.loader.clearErrors();
+      }
+    }
+  }
+  /** Settles after the initial navigation and its component loads; see `routerReady()`. */
+  whenReady() {
+    this.loadedPromise ?? (this.loadedPromise = this.readyPromise.then(() => this.destroyed ? void 0 : this.preloadMatched()));
+    return this.loadedPromise;
+  }
   createInitialRoute() {
     return {
       path: "/",
@@ -892,7 +1124,7 @@ var _SibuRouter = class _SibuRouter {
   }
   handleLocationChange(skipHistory = true, initialResolution = false) {
     const path = this.getCurrentPath();
-    this.navigate(path, { replace: true, skipHistory, initialResolution }).catch((err) => {
+    return this.navigate(path, { replace: true, skipHistory, initialResolution }).catch((err) => {
       console.error("[Router] Error during location change navigation:", err);
     });
   }
@@ -1049,9 +1281,18 @@ var _SibuRouter = class _SibuRouter {
     }
     if (!options.initialResolution) this.navEpoch++;
     this.currentRouteSetter(to);
+    this.updateHead(to);
     this.guards.runAfterEach(to, from);
     this.handleScrollBehavior(to, from);
   }
+  updateHead(to) {
+    if (typeof document === "undefined" || this.destroyed) return;
+    if (this.headController === null) {
+      if (!routeHasHead(to.matched, this.options.head)) return;
+      this.headController = createRouteHeadController(this.options.head);
+    }
+    this.headController.update(to);
+  }
   resolvePath(to) {
     if (typeof to === "string") return to;
     let path = to.path || "";
@@ -1140,14 +1381,14 @@ var _SibuRouter = class _SibuRouter {
    * anything. Pair with {@link instantiateComponent} at the commit boundary.
    */
   async loadPlan(route2, routePath) {
-    return this.loader.loadPlan(route2, routePath);
+    return prerenderWait(this.loader.loadPlan(route2, routePath));
   }
   /**
    * Create exactly one real instance from an already-resolved plan. With a
    * `scope`, the factory runs in it (see `RouteScope`).
    */
   async instantiateComponent(plan, route2, routePath, scope) {
-    return this.loader.instantiate(plan, route2, routePath, scope);
+    return prerenderWait(this.loader.instantiate(plan, route2, routePath, scope));
   }
   /** Resolve a route's module/factory without creating any component instance. */
   async preloadPlan(route2, routePath) {
@@ -1203,6 +1444,9 @@ var _SibuRouter = class _SibuRouter {
     this.guards.clear();
     this.loader.clearCache();
     this.isReadySetter(false);
+    this.headController?.dispose();
+    this.headController = null;
+    this.resolveReady();
   }
   // Cache management
   clearCache() {
@@ -1441,6 +1685,10 @@ function router() {
     afterEach: (hook) => _routerRef.current?.afterEach(hook)
   };
 }
+function routerReady() {
+  if (!_routerRef.current) throw new Error("Router not initialized. Call createRouter() first.");
+  return _routerRef.current.whenReady();
+}
 function navigate(to, options) {
   if (!_routerRef.current) throw new Error("Router not initialized. Call createRouter() first.");
   return _routerRef.current.navigate(to, options);
@@ -2547,10 +2795,13 @@ export {
   renderRouteToString,
   replace,
   resetPlugins,
+  resolveRouteHead,
   resolveServerRoute,
   route,
+  routeHeadToHTML,
   router,
   routerPlugin,
+  routerReady,
   routerState,
   satisfies,
   serializeRouteState,