snappy-prerender 2.7.0 → 2.8.0

package/src/core/locales.js

@@ -0,0 +1,385 @@
+import { pagePath } from './url-policy.js';
+
+const GENERATED_ATTRIBUTE = 'data-snappy-locale';
+
+/**
+ * Builds the locale plan for a run. A seoLocale without a locales matrix becomes a
+ * synthetic single-locale plan so metadata and language attributes still work.
+ * @param {object} config
+ * @returns {object | null}
+ */
+export function buildLocalePlan(config) {
+  if (config.locales) return config.locales;
+  if (!config.seoLocale?.code) return null;
+  const seo = config.seoLocale;
+  return {
+    mode: 'single',
+    active: seo.code,
+    default: seo.code,
+    xDefault: false,
+    hreflang: false,
+    synthetic: true,
+    list: [
+      {
+        code: seo.code,
+        prefix: '',
+        htmlLang: seo.htmlLang === true ? seo.code : (seo.htmlLang ?? seo.code),
+        dir: seo.dir ?? null,
+        locale: seo.navigator ? seo.code : null,
+      },
+    ],
+  };
+}
+
+/**
+ * Returns the locale record for a code.
+ * @param {object} plan
+ * @param {string} code
+ * @returns {object | null}
+ */
+export function localeByCode(plan, code) {
+  return plan?.list?.find((locale) => locale.code === code) ?? null;
+}
+
+/**
+ * Returns the locale rendered by a single-mode run.
+ * @param {object} plan
+ * @returns {object | null}
+ */
+export function activeLocale(plan) {
+  if (!plan) return null;
+  if (plan.mode === 'single') return localeByCode(plan, plan.active ?? plan.default);
+  return localeByCode(plan, plan.default);
+}
+
+/**
+ * Joins a locale prefix and a route without producing duplicate slashes.
+ * @param {string} prefix
+ * @param {string} route
+ * @returns {string}
+ */
+export function joinLocalePath(prefix, route) {
+  const left = prefix === '/' ? '' : prefix;
+  const right = route === '/' ? '' : route;
+  const joined = `${left}${right}`;
+  return joined.length === 0 ? '/' : joined.replace(/\/{2,}/g, '/');
+}
+
+/**
+ * Maps a base route to the route a locale publishes.
+ * @param {object} locale
+ * @param {string} baseRoute
+ * @returns {string}
+ */
+export function localeRoute(locale, baseRoute) {
+  const mapped = locale.routes?.[baseRoute] ?? baseRoute;
+  return joinLocalePath(locale.prefix ?? '', mapped);
+}
+
+/**
+ * Removes a locale prefix from a route, returning the base route used for alternate
+ * links and crawling.
+ * @param {string} route
+ * @param {object} locale
+ * @returns {string}
+ */
+export function stripLocalePrefix(route, locale) {
+  const prefix = locale.prefix ?? '';
+  if (!prefix) return route;
+  if (route === prefix) return '/';
+  if (route.startsWith(`${prefix}/`)) return route.slice(prefix.length);
+  return route;
+}
+
+/**
+ * Reports whether a route belongs to a non-default locale and should not be crawled as a
+ * base route in path mode.
+ * @param {string} route
+ * @param {object} plan
+ * @returns {boolean}
+ */
+export function isLocalePrefixedRoute(route, plan) {
+  if (!plan || plan.mode !== 'path') return false;
+  const defaultLocale = localeByCode(plan, plan.default);
+  return plan.list.some(
+    (locale) =>
+      locale.code !== plan.default &&
+      locale.prefix &&
+      locale.prefix !== defaultLocale?.prefix &&
+      (route === locale.prefix || route.startsWith(`${locale.prefix}/`)),
+  );
+}
+
+/**
+ * Resolves the public URL for a base route in one locale.
+ * @param {object} locale
+ * @param {string} baseRoute
+ * @param {object} config
+ * @param {'path' | 'single'} mode
+ * @returns {string | null}
+ */
+export function localePageUrl(locale, baseRoute, config, mode = 'path') {
+  const base = locale.url ?? config.metadata?.siteUrl;
+  if (!base) return null;
+  const route =
+    mode === 'single' ? (locale.routes?.[baseRoute] ?? baseRoute) : localeRoute(locale, baseRoute);
+  const path = pagePath(route, {
+    flatOutput: config.flatOutput,
+    trailingSlash: config.metadata?.trailingSlash,
+  });
+  const prefix = config.base === '/' ? '' : config.base.slice(0, -1);
+  return `${base.replace(/\/$/, '')}${prefix}${path}`;
+}
+
+/**
+ * Builds the canonical URL, alternates and Open Graph locale values for one localized
+ * page. Explicit app metadata is handled later; this describes the defaults the package
+ * should fill.
+ * @param {{ locale: object, baseRoute: string, plan: object, config: object }} input
+ * @returns {object | null}
+ */
+export function buildLocaleLinks({ locale, baseRoute, plan, config }) {
+  if (!locale || !plan) return null;
+  const canonical = localePageUrl(locale, baseRoute, config, plan.mode);
+  const alternates = [];
+  if (plan.hreflang !== false) {
+    for (const target of plan.list) {
+      const href = localePageUrl(target, baseRoute, config, plan.mode);
+      if (href) alternates.push({ hreflang: target.code, href });
+    }
+    const xDefault = plan.xDefault;
+    if (xDefault === false) {
+      // Explicitly disabled.
+    } else if (typeof xDefault === 'string' && /^https?:\/\//.test(xDefault)) {
+      alternates.push({ hreflang: 'x-default', href: xDefault });
+    } else if (typeof xDefault === 'string') {
+      const target = localeByCode(plan, xDefault);
+      const href = target ? localePageUrl(target, baseRoute, config, plan.mode) : null;
+      if (href) alternates.push({ hreflang: 'x-default', href });
+    }
+  }
+  const ogAlternates = plan.list
+    .filter((target) => target.code !== locale.code && target.ogLocale)
+    .map((target) => target.ogLocale);
+  return {
+    htmlLang: locale.htmlLang ?? locale.code,
+    dir: locale.dir ?? null,
+    canonical,
+    ogLocale: locale.ogLocale ?? null,
+    ogAlternates,
+    alternates,
+    hreflang: plan.hreflang !== false,
+  };
+}
+
+/**
+ * Applies locale defaults to a parsed document. Generated tags carry a marker so a rerun
+ * can replace them without touching metadata the app wrote. Existing app tags win.
+ * @param {object} document parse5 document
+ * @param {object} links result of buildLocaleLinks
+ * @param {{ skipAlternates?: boolean, htmlLang?: string | boolean, dir?: string | null, forceHtmlLang?: boolean }} options
+ */
+export function applyLocaleMetadata(document, links, options = {}) {
+  if (!links) return;
+  const head = findHead(document);
+  if (!head) return;
+  removeGenerated(head);
+  applyHtmlAttributes(document, links, options);
+  applyCanonical(head, links);
+  applyOpenGraph(head, links, options.skipAlternates === true);
+  if (!options.skipAlternates && links.hreflang) applyAlternates(head, links.alternates);
+}
+
+/**
+ * Writes generated html language and direction attributes while preserving app-owned
+ * values unless a locale explicitly forces them.
+ * @param {object} document
+ * @param {object} links
+ * @param {object} options
+ */
+function applyHtmlAttributes(document, links, options) {
+  const html = (document.childNodes ?? []).find((node) => node.tagName === 'html');
+  if (!html) return;
+  const lang =
+    options.htmlLang === false
+      ? null
+      : typeof options.htmlLang === 'string'
+        ? options.htmlLang
+        : links.htmlLang;
+  const generatedLang = attribute(html, 'data-snappy-locale-lang') === 'true';
+  if (lang && (options.forceHtmlLang || !attribute(html, 'lang') || generatedLang)) {
+    setAttribute(html, 'lang', lang);
+    setAttribute(html, 'data-snappy-locale-lang', 'true');
+  }
+  const dir = options.dir ?? links.dir;
+  const generatedDir = attribute(html, 'data-snappy-locale-dir') === 'true';
+  if (dir && (!attribute(html, 'dir') || generatedDir)) {
+    setAttribute(html, 'dir', dir);
+    setAttribute(html, 'data-snappy-locale-dir', 'true');
+  }
+}
+
+/**
+ * Sets or replaces one attribute on a parse5 node.
+ * @param {object} node
+ * @param {string} name
+ * @param {string} value
+ */
+function setAttribute(node, name, value) {
+  const attrs = node.attrs ?? [];
+  const existing = attrs.find((entry) => entry.name === name);
+  if (existing) existing.value = value;
+  else attrs.push({ name, value });
+  node.attrs = attrs;
+}
+
+/**
+ * Adds the locale canonical link when the app did not provide one.
+ * @param {object} head
+ * @param {object} links
+ */
+function applyCanonical(head, links) {
+  if (!links.canonical) return;
+  const existing = head.childNodes?.find(
+    (node) => node.tagName === 'link' && attribute(node, 'rel').toLowerCase() === 'canonical',
+  );
+  if (existing) return;
+  head.childNodes.push(
+    linkNode([
+      { name: 'rel', value: 'canonical' },
+      { name: 'href', value: links.canonical },
+      { name: GENERATED_ATTRIBUTE, value: 'canonical' },
+    ]),
+  );
+}
+
+/**
+ * Adds Open Graph locale metadata without duplicating app-owned tags.
+ * @param {object} head
+ * @param {object} links
+ * @param {boolean} skipAlternates
+ */
+function applyOpenGraph(head, links, skipAlternates) {
+  if (links.ogLocale && !hasMeta(head, 'property', 'og:locale')) {
+    head.childNodes.push(metaNode('property', 'og:locale', links.ogLocale));
+  }
+  if (skipAlternates) return;
+  for (const locale of links.ogAlternates ?? []) {
+    if (hasMeta(head, 'property', 'og:locale:alternate', locale)) continue;
+    head.childNodes.push(metaNode('property', 'og:locale:alternate', locale));
+  }
+}
+
+/**
+ * Adds generated hreflang links, leaving an app-owned entry for the same code in place.
+ * @param {object} head
+ * @param {Array<{ hreflang: string, href: string }>} alternates
+ */
+function applyAlternates(head, alternates) {
+  for (const alternate of alternates ?? []) {
+    const existing = head.childNodes?.find(
+      (node) =>
+        node.tagName === 'link' &&
+        node.attrs?.some(
+          (entry) => entry.name === 'rel' && entry.value.toLowerCase() === 'alternate',
+        ) &&
+        node.attrs?.some(
+          (entry) => entry.name === 'hreflang' && entry.value === alternate.hreflang,
+        ),
+    );
+    if (existing) continue;
+    head.childNodes.push(
+      linkNode([
+        { name: 'rel', value: 'alternate' },
+        { name: 'hreflang', value: alternate.hreflang },
+        { name: 'href', value: alternate.href },
+        { name: GENERATED_ATTRIBUTE, value: `hreflang:${alternate.hreflang}` },
+      ]),
+    );
+  }
+}
+
+/**
+ * Removes locale tags generated by an earlier pass so a rerun can replace them.
+ * @param {object} head
+ */
+function removeGenerated(head) {
+  head.childNodes = (head.childNodes ?? []).filter(
+    (node) => !node.attrs?.some((entry) => entry.name === GENERATED_ATTRIBUTE),
+  );
+}
+
+/**
+ * Reports whether the head already contains a meta tag with the given identity.
+ * @param {object} head
+ * @param {string} attributeName
+ * @param {string} key
+ * @param {string | null} content
+ * @returns {boolean}
+ */
+function hasMeta(head, attributeName, key, content = null) {
+  return (head.childNodes ?? []).some(
+    (node) =>
+      node.tagName === 'meta' &&
+      attribute(node, attributeName) === key &&
+      (content === null || attribute(node, 'content') === content),
+  );
+}
+
+/**
+ * Finds the document head in a parsed document.
+ * @param {object} document
+ * @returns {object | null}
+ */
+function findHead(document) {
+  const html = (document.childNodes ?? []).find((node) => node.tagName === 'html');
+  return (html?.childNodes ?? []).find((node) => node.tagName === 'head') ?? null;
+}
+
+/**
+ * Reads a parse5 node attribute.
+ * @param {object} node
+ * @param {string} name
+ * @returns {string}
+ */
+function attribute(node, name) {
+  return node.attrs?.find((entry) => entry.name === name)?.value ?? '';
+}
+
+/**
+ * Builds a parse5 link node.
+ * @param {Array<{ name: string, value: string }>} attrs
+ * @returns {object}
+ */
+function linkNode(attrs) {
+  return {
+    nodeName: 'link',
+    tagName: 'link',
+    attrs,
+    namespaceURI: 'http://www.w3.org/1999/xhtml',
+    childNodes: [],
+    parentNode: null,
+  };
+}
+
+/**
+ * Builds a parse5 meta node with the generated marker.
+ * @param {string} attributeName
+ * @param {string} key
+ * @param {string} content
+ * @returns {object}
+ */
+function metaNode(attributeName, key, content) {
+  return {
+    nodeName: 'meta',
+    tagName: 'meta',
+    attrs: [
+      { name: attributeName, value: key },
+      { name: 'content', value: content },
+      { name: GENERATED_ATTRIBUTE, value: `${key}:${content}` },
+    ],
+    namespaceURI: 'http://www.w3.org/1999/xhtml',
+    childNodes: [],
+    parentNode: null,
+  };
+}

package/src/core/normalize.js

@@ -12,7 +12,7 @@ const MAX_METADATA_ORIGINS = 3;
  * Optionally: removes style or script tags, marks scripts async, drops dead blob
  * stylesheets, and adds preconnect and image preload hints.
  */
-export function normaliseHtml(html, options = {}) {
+export function normaliseHtml(html, options = {}, { serialize: serializeOutput = true } = {}) {
   const document = parse(html);
   const stats = {
     removedElements: 0,
@@ -21,7 +21,6 @@ export function normaliseHtml(html, options = {}) {
     dedupedStyles: 0,
     hints: 0,
     textSeparators: 0,
-    titleElements: 0,
     noindex: false,
     metadataOrigins: [],
   };
@@ -34,7 +33,11 @@ export function normaliseHtml(html, options = {}) {
   if (preconnectOrigins.length > 0 || preloadImages.length > 0) {
     stats.hints = appendHints(document, { preconnectOrigins, preloadImages });
   }
-  return { html: serialize(document), stats };
+  return {
+    html: serializeOutput ? serialize(document) : undefined,
+    stats,
+    document,
+  };
 }
 
 // Rebuilds a node's child list, dropping removed nodes, separating adjacent text nodes
@@ -50,7 +53,6 @@ function cleanChildren(parent, stats, seenStyles, inHead, options) {
       stripAttributes(child, options.removeAttributes, stats);
     }
     if (childInHead && child.tagName === 'style' && dedupeStyle(child, stats, seenStyles)) continue;
-    if (childInHead && child.tagName === 'title') stats.titleElements += 1;
     if (childInHead) collectMetadataOrigins(child, stats);
     if (childInHead) collectRobots(child, stats);
     if (options.asyncScriptTags && child.tagName === 'script') markScriptAsync(child);
@@ -182,11 +184,24 @@ function isBlobStylesheet(node) {
   return attributeValue(node, 'href').startsWith('blob:');
 }
 
-// Adds a robots noindex meta to the not-found page, which may be served with a 200 by
-// a host that does not apply 404 status codes. Returns true when the tag was added.
+// Ensures the not-found page carries a robots noindex. An existing robots meta is updated in
+// place so the page never ships both index and noindex directives. Returns true when the tag
+// was added or changed.
 function appendNoindex(document) {
   const head = findHead(document);
   if (!head) return false;
+  const robots = (head.childNodes ?? []).filter(
+    (node) => node.tagName === 'meta' && attributeValue(node, 'name').toLowerCase() === 'robots',
+  );
+  if (robots.length > 0) {
+    const [first, ...extras] = robots;
+    const content = attributeValue(first, 'content');
+    if (!/\bnoindex\b/i.test(content)) setAttributeValue(first, 'content', 'noindex');
+    if (extras.length > 0) {
+      head.childNodes = head.childNodes.filter((node) => !extras.includes(node));
+    }
+    return true;
+  }
   head.childNodes.push(
     createElement('meta', [
       { name: 'name', value: 'robots' },
@@ -196,6 +211,15 @@ function appendNoindex(document) {
   return true;
 }
 
+// Sets or replaces one attribute on a parse5 node.
+function setAttributeValue(node, name, value) {
+  const attrs = node.attrs ?? [];
+  const existing = attrs.find((attribute) => attribute.name === name);
+  if (existing) existing.value = value;
+  else attrs.push({ name, value });
+  node.attrs = attrs;
+}
+
 // Appends preconnect and image preload links to the head, skipping duplicates.
 function appendHints(document, { preconnectOrigins, preloadImages }) {
   const head = findHead(document);

package/src/core/page-content.js

@@ -1,13 +1,63 @@
+// Containers used by the common setups, so probes can find the app without config.
+export const CONTAINER_SELECTOR = '#root, #app, #__next';
+
 /**
- * Reports whether a rendered page carries any app content. A missing container and an
- * empty container both mean the browser did not receive an app, which is what a 404,
- * a failed bundle, or an empty build looks like after serialisation.
+ * Reads the empty-page and status-marker state in one browser round trip.
  */
-export async function isPageEmpty(page) {
+export async function readPageState(page) {
   return page.evaluate(() => {
     const container = document.querySelector('#root, #app, #__next') ?? document.body;
-    if (!container) return true;
-    const text = (container.textContent ?? '').trim();
-    return container.childElementCount === 0 && text.length === 0;
+    const text = (container?.textContent ?? '').trim();
+    const empty = !container || (container.childElementCount === 0 && text.length === 0);
+    const marker = document.querySelector('meta[name="prerender-status-code"]');
+    const value = marker ? Number.parseInt(marker.getAttribute('content') ?? '', 10) : null;
+    return { empty, statusCode: Number.isFinite(value) ? value : null };
   });
 }
+
+/**
+ * Reads the empty-page state, status marker, framework markers and boot state in one
+ * round trip. Verification runs this on every route, so the combined probe avoids three
+ * separate CDP calls.
+ */
+export async function readBootState(page, selector = CONTAINER_SELECTOR) {
+  return page.evaluate((containerSelector) => {
+    const pageContainer =
+      document.querySelector(containerSelector) ?? document.body?.firstElementChild ?? null;
+    const contentContainer = document.querySelector(containerSelector) ?? document.body;
+    const text = (contentContainer?.textContent ?? '').trim();
+    const empty =
+      !contentContainer || (contentContainer.childElementCount === 0 && text.length === 0);
+    const marker = document.querySelector('meta[name="prerender-status-code"]');
+    const value = marker ? Number.parseInt(marker.getAttribute('content') ?? '', 10) : null;
+    const markers = pageContainer
+      ? {
+          react: Object.keys(pageContainer).some(
+            (key) => key.startsWith('__reactContainer') || key === '_reactRootContainer',
+          ),
+          vue: Boolean(
+            pageContainer.__vue_app__ ||
+              pageContainer.__vueParentComponent ||
+              pageContainer._vnode ||
+              pageContainer.__vue__,
+          ),
+          preact: Boolean(
+            pageContainer.__k ||
+              pageContainer._children ||
+              pageContainer.firstElementChild?.__k ||
+              pageContainer.firstElementChild?._children,
+          ),
+          svelte: Boolean(
+            pageContainer.__svelte_meta || pageContainer.querySelector?.('[data-svelte-h]'),
+          ),
+        }
+      : {};
+    const child = window.__snappyBoot?.prerenderedChild ?? null;
+    return {
+      empty,
+      statusCode: Number.isFinite(value) ? value : null,
+      markers,
+      markupPreserved: child ? child.isConnected : null,
+    };
+  }, selector);
+}

package/src/core/page-meta.js

@@ -4,12 +4,17 @@ const DATA_URL = /^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i;
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 
 /**
- * Reads the metadata and structural markers from a final HTML document. This runs
- * after post-processing so a transform that changes the head is reflected in the
- * sitemap, the audit and the report.
+ * Reads the metadata and structural markers from a final HTML string.
  */
 export function collectPageMeta(html) {
-  const document = parse(html);
+  return collectPageMetaFromDocument(parse(html));
+}
+
+/**
+ * Reads metadata from an already parsed document. Used by the write pipeline so the
+ * final HTML is parsed once instead of once per post-processing step.
+ */
+export function collectPageMetaFromDocument(document) {
   const meta = {
     title: null,
     titleCount: 0,
@@ -17,6 +22,9 @@ export function collectPageMeta(html) {
     canonical: null,
     robots: null,
     noindex: false,
+    lang: null,
+    dir: null,
+    ogLocale: null,
     h1Count: 0,
     alternates: [],
     images: [],
@@ -25,6 +33,10 @@ export function collectPageMeta(html) {
   const visitedLinks = new Set();
 
   const walk = (node) => {
+    if (node.tagName === 'html') {
+      meta.lang = attribute(node, 'lang') || null;
+      meta.dir = attribute(node, 'dir') || null;
+    }
     // An SVG <title> names a drawing, not the document, so it must not count as a page title.
     if (node.tagName === 'title' && node.namespaceURI !== SVG_NAMESPACE) {
       meta.titleCount += 1;
@@ -32,8 +44,10 @@ export function collectPageMeta(html) {
     }
     if (node.tagName === 'meta') {
       const name = attribute(node, 'name').toLowerCase();
+      const property = attribute(node, 'property').toLowerCase();
       const content = attribute(node, 'content');
       if (name === 'description' && meta.description === null) meta.description = content;
+      if (property === 'og:locale' && meta.ogLocale === null) meta.ogLocale = content;
       if (name === 'robots') {
         meta.robots ??= content;
         if (/\b(noindex|none)\b/i.test(content)) meta.noindex = true;

package/src/core/preload-links.js

@@ -7,8 +7,22 @@ import { toPublicPath } from './routes.js';
  * preload-manifest headers, so this is the page-level equivalent for runtime chunks,
  * fonts and the LCP image.
  */
-export function injectPreloadLinks(
-  html,
+export function injectPreloadLinks(html, options = {}) {
+  if (options.scripts?.length === 0 && options.fonts?.size === 0 && !options.lcpImage) {
+    return html;
+  }
+  const document = parse(html);
+  const added = injectPreloadLinksInto(document, options);
+  return added > 0 ? serialize(document) : html;
+}
+
+/**
+ * Injects preload hints into a parsed document and reports how many were added.
+ * Keeping this separate lets the write pipeline parse the page once for all final
+ * post-processing steps.
+ */
+export function injectPreloadLinksInto(
+  document,
   {
     scripts = [],
     fonts = new Map(),
@@ -18,9 +32,8 @@ export function injectPreloadLinks(
     skipScripts = new Set(),
   } = {},
 ) {
-  const document = parse(html);
   const head = findHead(document);
-  if (!head) return html;
+  if (!head) return 0;
   const existingScripts = new Set();
   const hints = new Set();
 
@@ -46,7 +59,7 @@ export function injectPreloadLinks(
     added += 1;
   };
 
-  for (const script of scripts) {
+  for (const script of [...scripts].sort()) {
     const href = toPublicPath(script, base);
     if (existingScripts.has(href) || skipScripts.has(href)) continue;
     add(
@@ -57,7 +70,9 @@ export function injectPreloadLinks(
       href,
     );
   }
-  for (const [font, contentType] of fonts) {
+  for (const [font, contentType] of [...fonts.entries()].sort(([left], [right]) =>
+    left.localeCompare(right),
+  )) {
     const href = toPublicPath(font, base);
     const attrs = [
       { name: 'rel', value: 'preload' },
@@ -80,13 +95,11 @@ export function injectPreloadLinks(
       href,
     );
   }
-  return added > 0 ? serialize(document) : html;
+  return added;
 }
 
-// Collects script src values from a document, used to tell a script a transform
-// removed from a chunk the app loads at runtime.
-export function collectScriptSources(html) {
-  const document = parse(html);
+// Collects script src values from an already parsed document.
+export function collectScriptSourcesFromDocument(document) {
   const sources = new Set();
   const walk = (node) => {
     if (node.tagName === 'script') {

package/src/core/preload-manifest.js

@@ -12,8 +12,12 @@ const PAGE_ORIGIN = 'http://snappy.local';
  * output rather than the render-time resource list keeps the manifest correct after
  * inline CSS, tag surgery, or a failed write.
  */
-export function collectPageResources(html, { base = '/', route = '/' } = {}) {
-  const document = parse(html);
+export function collectPageResources(html, options = {}) {
+  return collectPageResourcesFromDocument(parse(html), options);
+}
+
+// Reads referenced resources from an already parsed document.
+export function collectPageResourcesFromDocument(document, { base = '/', route = '/' } = {}) {
   const scripts = [];
   const styles = [];
   const pageUrl = new URL(toPublicPath(route, base), PAGE_ORIGIN);