snappy-prerender 2.6.0-rc.3 → 2.7.0

package/src/core/inline-css.js

@@ -1,9 +1,12 @@
+import { hasImportRule, rewriteCssUrls } from './css-url.js';
 import { minifyCss } from './minify.js';
 
 /**
  * Inlines every same-origin stylesheet the page loaded, replacing the links with a
  * single style tag. Blob-backed stylesheets work too because the text is read from
- * the live page. Stylesheets that cannot be fetched are left in place.
+ * the live page. Stylesheets that cannot be fetched, or that use @import, are left in
+ * place. Relative url() values are rebased against each sheet before joining so fonts
+ * and images keep working on nested routes.
  */
 export async function inlineStylesheets({ page, minifyCssOptions }) {
   const collected = await page.evaluate(async () => {
@@ -11,7 +14,7 @@ export async function inlineStylesheets({ page, minifyCssOptions }) {
     // applies, so a print stylesheet is left as a link instead of becoming active.
     const INLINEABLE_MEDIA = new Set(['', 'all', 'screen']);
     const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
-    const parts = [];
+    const sheets = [];
     const skipped = [];
     for (const link of links) {
       const media = (link.getAttribute('media') ?? '').trim().toLowerCase();
@@ -22,23 +25,41 @@ export async function inlineStylesheets({ page, minifyCssOptions }) {
       try {
         const response = await fetch(link.href);
         if (!response.ok) throw new Error(String(response.status));
-        parts.push(await response.text());
-        link.remove();
+        sheets.push({ css: await response.text(), href: link.href });
       } catch {
         skipped.push(link.href);
       }
     }
-    return { css: parts.join('\n'), skipped };
+    return { sheets, skipped };
   });
 
-  if (collected.css.trim().length === 0) return { skipped: collected.skipped };
-  const css = minifyCssOptions ? minifyCss(collected.css, minifyCssOptions) : collected.css;
-  await page.evaluate((text) => {
-    const style = document.createElement('style');
-    style.textContent = text;
-    document.head.appendChild(style);
-  }, css);
-  return { skipped: collected.skipped };
+  const inlineable = [];
+  const skipped = [...collected.skipped];
+  for (const sheet of collected.sheets) {
+    if (hasImportRule(sheet.css)) skipped.push(sheet.href);
+    else inlineable.push(sheet);
+  }
+  if (inlineable.length === 0) return { skipped };
+
+  const pageOrigin = new URL(page.url()).origin;
+  const joined = inlineable
+    .map((sheet) => rewriteCssUrls(sheet.css, sheet.href, pageOrigin))
+    .join('\n');
+  const css = minifyCssOptions ? minifyCss(joined, minifyCssOptions) : joined;
+  await page.evaluate(
+    ({ text, hrefs }) => {
+      const style = document.createElement('style');
+      style.setAttribute('data-snappy-inline', '');
+      style.textContent = text;
+      document.head.appendChild(style);
+      const inlined = new Set(hrefs);
+      for (const link of document.querySelectorAll('link[rel="stylesheet"]')) {
+        if (inlined.has(link.href)) link.remove();
+      }
+    },
+    { text: css, hrefs: inlineable.map((sheet) => sheet.href) },
+  );
+  return { skipped };
 }
 
 /**

package/src/core/metadata-origin.js

@@ -1,4 +1,4 @@
-const BUILD_ORIGIN = /https?:\/\/(?:127\.0\.0\.1|localhost|\[::1\])(?::\d+)?/gi;
+const BUILD_ORIGIN = /https?:\/\/(?:127\.0\.0\.1|localhost|\[::1\])(?::\d+)?(?![\w.:-])/gi;
 
 /**
  * Recognises the metadata tags whose value is an absolute URL, and finds URLs pointing at a
@@ -25,12 +25,21 @@ export function collectBuildOrigins(text, limit = 3) {
   return [...new Set(matches)].slice(0, limit);
 }
 
+/**
+ * Scans a serialized document for build-server origins. Used only when the optional
+ * `failOnBuildOriginMetadata` gate is enabled, so a caller that turns stripping off can
+ * still make loopback metadata a build failure.
+ */
+export function findBuildOriginUrls(html) {
+  return collectBuildOrigins(html);
+}
+
 // Reports whether a meta key names a URL, such as og:url, og:image or twitter:image.
 function isUrlKey(key) {
   const [prefix, ...rest] = key.toLowerCase().split(':');
   if (prefix !== 'og' && prefix !== 'twitter') return false;
   const last = rest.at(-1);
-  return last === 'url' || last === 'image';
+  return last === 'url' || last === 'image' || last === 'secure_url';
 }
 
 // Reads an attribute value, defaulting to an empty string.

package/src/core/normalize.js

@@ -17,14 +17,17 @@ export function normaliseHtml(html, options = {}) {
   const stats = {
     removedElements: 0,
     removedAttributes: 0,
+    removedMetadata: 0,
     dedupedStyles: 0,
     hints: 0,
     textSeparators: 0,
     titleElements: 0,
+    noindex: false,
     metadataOrigins: [],
   };
   const seenStyles = new Set();
   cleanChildren(document, stats, seenStyles, false, options);
+  if (options.noindex && !stats.noindex) stats.noindex = appendNoindex(document);
 
   const preconnectOrigins = options.preconnectOrigins ?? [];
   const preloadImages = options.preloadImages ?? [];
@@ -41,6 +44,7 @@ function cleanChildren(parent, stats, seenStyles, inHead, options) {
   const kept = [];
   for (const child of children) {
     const childInHead = inHead || child.tagName === 'head';
+    if (shouldStripMetadata(child, options, stats)) continue;
     if (shouldRemove(child, stats, options)) continue;
     if (child.attrs && options.removeAttributes?.length > 0) {
       stripAttributes(child, options.removeAttributes, stats);
@@ -48,6 +52,7 @@ function cleanChildren(parent, stats, seenStyles, inHead, options) {
     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);
     cleanChildren(child, stats, seenStyles, childInHead, options);
     if (child.content) cleanChildren(child.content, stats, seenStyles, childInHead, options);
@@ -84,13 +89,41 @@ function stripAttributes(node, patterns, stats) {
 
 // Reports whether an attribute name matches a string exactly or a RegExp pattern.
 function matchesAttribute(name, pattern) {
-  return pattern instanceof RegExp ? pattern.test(name) : name === pattern;
+  if (!(pattern instanceof RegExp)) return name === pattern;
+  pattern.lastIndex = 0;
+  const matched = pattern.test(name);
+  pattern.lastIndex = 0;
+  return matched;
+}
+
+// Removes metadata whose absolute URL points at the build server, so a loopback
+// canonical or share image never ships. The origin is recorded first so the run can
+// explain what was dropped.
+function shouldStripMetadata(node, options, stats) {
+  if (!options.stripBuildOriginMetadata || !isMetadataUrlNode(node)) return false;
+  const origins = collectBuildOrigins(metadataUrlValue(node));
+  if (origins.length === 0) return false;
+  for (const origin of origins) {
+    if (stats.metadataOrigins.length >= MAX_METADATA_ORIGINS) break;
+    if (!stats.metadataOrigins.includes(origin)) stats.metadataOrigins.push(origin);
+  }
+  stats.removedMetadata += 1;
+  stats.removedElements += 1;
+  return true;
 }
 
 // Reports whether a node is removed for any of the configured reasons. The metadata script is
 // exempt: the head layer reads it on the client, so stripping it would lose the site defaults.
 function shouldRemove(node, stats, options) {
   if (node.tagName === 'script' && hasAttribute(node, 'data-snappy-meta', null)) return false;
+  if (node.tagName === 'style' && hasAttribute(node, 'data-snappy-inline', null)) return false;
+  if (
+    node.tagName === 'meta' &&
+    attributeValue(node, 'name').toLowerCase() === 'prerender-status-code'
+  ) {
+    stats.removedElements += 1;
+    return true;
+  }
   const reason =
     (node.tagName === 'style' && hasAttribute(node, 'id', FREEZE_STYLE_ID)) ||
     hasAttribute(node, REMOVE_ATTRIBUTE, null) ||
@@ -113,6 +146,14 @@ function collectMetadataOrigins(node, stats) {
   }
 }
 
+// Records a robots noindex so the sitemap can leave the page out.
+function collectRobots(node, stats) {
+  if (node.tagName !== 'meta') return;
+  if (attributeValue(node, 'name').toLowerCase() !== 'robots') return;
+  const content = attributeValue(node, 'content').toLowerCase();
+  if (/\b(noindex|none)\b/.test(content)) stats.noindex = true;
+}
+
 // Drops a style tag whose text was already seen, reporting it through stats.
 function dedupeStyle(node, stats, seenStyles) {
   const text = textContent(node);
@@ -124,9 +165,11 @@ function dedupeStyle(node, stats, seenStyles) {
   return false;
 }
 
-// Adds async to external scripts that are neither async nor defer yet.
+// Adds async to external scripts that are neither async nor defer yet. The injected state
+// script is exempt because it must run before the app bundle so snapStore is available.
 function markScriptAsync(node) {
   const attrs = node.attrs ?? [];
+  if (attrs.some((attribute) => attribute.name === 'data-snappy-state')) return;
   if (!attrs.some((attribute) => attribute.name === 'src')) return;
   if (attrs.some((attribute) => attribute.name === 'async' || attribute.name === 'defer')) return;
   attrs.push({ name: 'async', value: '' });
@@ -139,6 +182,20 @@ 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.
+function appendNoindex(document) {
+  const head = findHead(document);
+  if (!head) return false;
+  head.childNodes.push(
+    createElement('meta', [
+      { name: 'name', value: 'robots' },
+      { name: 'content', value: 'noindex' },
+    ]),
+  );
+  return true;
+}
+
 // Appends preconnect and image preload links to the head, skipping duplicates.
 function appendHints(document, { preconnectOrigins, preloadImages }) {
   const head = findHead(document);

package/src/core/output.js

@@ -27,18 +27,24 @@ export function routeToScreenshotFile(route, { saveAs = 'png' } = {}) {
 
 /**
  * Finds routes that would write the same output file. Two routes can collide, most
- * obviously with flatOutput where both "/" and "/index" map to index.html. Callers
+ * obviously with flatOutput where both "/" and "/index" map to index.html. On a
+ * case-insensitive filesystem, paths that differ only by case collide too. Callers
  * use this to refuse the ambiguous writes instead of letting one overwrite the other.
  */
-export function findOutputCollisions(routes, config) {
+export function findOutputCollisions(
+  routes,
+  config,
+  { caseInsensitive = process.platform === 'darwin' || process.platform === 'win32' } = {},
+) {
   const byFile = new Map();
   const saveAs = config.saveAs ?? 'html';
   for (const route of routes) {
     const file =
       saveAs === 'html' ? routeToFile(route, config) : routeToScreenshotFile(route, config);
-    const existing = byFile.get(file);
+    const key = caseInsensitive ? file.toLowerCase() : file;
+    const existing = byFile.get(key);
     if (existing) existing.push(route);
-    else byFile.set(file, [route]);
+    else byFile.set(key, [route]);
   }
   return new Map([...byFile].filter(([, list]) => list.length > 1));
 }
@@ -61,17 +67,34 @@ export async function writeRouteHtml({ dir, route, html, config }) {
  * files routes reference both go through here so a rebuild only touches what changed.
  */
 export async function writeFileIfChanged({ dir, file, contents }) {
+  return writeIfChanged({ dir, file, contents });
+}
+
+/**
+ * Writes a generated binary file, leaving an identical one untouched. Screenshots use
+ * this so a rebuild only replaces images whose pixels changed.
+ */
+export async function writeBufferIfChanged({ dir, file, buffer }) {
+  return writeIfChanged({ dir, file, contents: buffer });
+}
+
+// Compares the existing file with the new value, handling text and binary payloads,
+// then writes through a temporary file so an interrupted run cannot leave a partial
+// file behind for a host to serve.
+async function writeIfChanged({ dir, file, contents }) {
   const bytes = Buffer.byteLength(contents);
   const target = path.join(dir, file);
-  const existing = await fs.readFile(target, 'utf8').catch(() => null);
-  if (existing === contents) return { file, status: 'unchanged', bytes };
+  const existing = await fs.readFile(target).catch(() => null);
+  const unchanged =
+    typeof contents === 'string'
+      ? existing?.toString('utf8') === contents
+      : existing !== null && Buffer.compare(existing, contents) === 0;
+  if (unchanged) return { file, status: 'unchanged', bytes };
 
   await fs.mkdir(path.dirname(target), { recursive: true });
-  // Written through a temporary file and renamed, so an interrupted run cannot leave a
-  // half-written file behind for a host to serve.
   const temporary = `${target}.snappy-tmp`;
   try {
-    await fs.writeFile(temporary, contents, 'utf8');
+    await fs.writeFile(temporary, contents);
     await fs.rename(temporary, target);
   } catch (error) {
     await fs.rm(temporary, { force: true }).catch(() => {});

package/src/core/page-content.js

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+export async function isPageEmpty(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;
+  });
+}

package/src/core/page-meta.js

@@ -0,0 +1,108 @@
+import { parse } from 'parse5';
+
+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.
+ */
+export function collectPageMeta(html) {
+  const document = parse(html);
+  const meta = {
+    title: null,
+    titleCount: 0,
+    description: null,
+    canonical: null,
+    robots: null,
+    noindex: false,
+    h1Count: 0,
+    alternates: [],
+    images: [],
+    inlineStyleAttributes: 0,
+  };
+  const visitedLinks = new Set();
+
+  const walk = (node) => {
+    // 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;
+      if (meta.title === null) meta.title = textContent(node);
+    }
+    if (node.tagName === 'meta') {
+      const name = attribute(node, 'name').toLowerCase();
+      const content = attribute(node, 'content');
+      if (name === 'description' && meta.description === null) meta.description = content;
+      if (name === 'robots') {
+        meta.robots ??= content;
+        if (/\b(noindex|none)\b/i.test(content)) meta.noindex = true;
+      }
+    }
+    if (node.tagName === 'link') {
+      const rel = attribute(node, 'rel').toLowerCase();
+      if (rel === 'canonical' && meta.canonical === null) meta.canonical = attribute(node, 'href');
+      if (rel.split(/\s+/).includes('alternate')) {
+        const hreflang = attribute(node, 'hreflang');
+        const href = attribute(node, 'href');
+        if (hreflang && href) {
+          const key = `${hreflang}|${href}`;
+          if (!visitedLinks.has(key)) {
+            visitedLinks.add(key);
+            meta.alternates.push({ hreflang, href });
+          }
+        }
+      }
+    }
+    if (node.tagName === 'h1') meta.h1Count += 1;
+    if (node.tagName === 'img') {
+      addImage(meta, attribute(node, 'src'));
+      for (const candidate of srcsetCandidates(attribute(node, 'srcset')))
+        addImage(meta, candidate);
+    }
+    if (node.tagName === 'source' && node.parentNode?.tagName === 'picture') {
+      addImage(meta, attribute(node, 'src'));
+      for (const candidate of srcsetCandidates(attribute(node, 'srcset')))
+        addImage(meta, candidate);
+    }
+    for (const attr of node.attrs ?? []) {
+      if (attr.name === 'style' && attr.value.trim().length > 0) meta.inlineStyleAttributes += 1;
+    }
+    for (const child of node.childNodes ?? []) walk(child);
+  };
+
+  walk(document);
+  return meta;
+}
+
+// Adds a usable image URL once. Data URLs have no host to list in a sitemap.
+function addImage(meta, value) {
+  if (!value || DATA_URL.test(value) || meta.images.includes(value)) return;
+  meta.images.push(value);
+}
+
+// Extracts URL candidates from a srcset, ignoring their density or width descriptors.
+function srcsetCandidates(value) {
+  if (!value) return [];
+  return value
+    .split(',')
+    .map((candidate) => candidate.trim().split(/\s+/)[0])
+    .filter(
+      (candidate) => candidate.length > 0 && !DATA_URL.test(candidate) && !/[<>]/.test(candidate),
+    );
+}
+
+// Reads an attribute value, defaulting to an empty string.
+function attribute(node, name) {
+  return node.attrs?.find((entry) => entry.name === name)?.value ?? '';
+}
+
+// Concatenates the text beneath a node.
+function textContent(node) {
+  let text = '';
+  for (const child of node.childNodes ?? []) {
+    if (child.nodeName === '#text') text += child.value;
+    else text += textContent(child);
+  }
+  return text.trim();
+}

package/src/core/preload-links.js

@@ -0,0 +1,120 @@
+import path from 'node:path';
+import { parse, serialize } from 'parse5';
+import { toPublicPath } from './routes.js';
+
+/**
+ * Injects static preload hints into the final HTML. Static hosts cannot send the
+ * preload-manifest headers, so this is the page-level equivalent for runtime chunks,
+ * fonts and the LCP image.
+ */
+export function injectPreloadLinks(
+  html,
+  {
+    scripts = [],
+    fonts = new Map(),
+    lcpImage = null,
+    base = '/',
+    ignoreForPreload = [],
+    skipScripts = new Set(),
+  } = {},
+) {
+  const document = parse(html);
+  const head = findHead(document);
+  if (!head) return html;
+  const existingScripts = new Set();
+  const hints = new Set();
+
+  const walk = (node) => {
+    if (node.tagName === 'script') {
+      const src = attribute(node, 'src');
+      if (src) existingScripts.add(src);
+    }
+    if (node.tagName === 'link') {
+      const href = attribute(node, 'href');
+      if (href && attribute(node, 'rel').split(/\s+/).includes('preload')) hints.add(href);
+    }
+    for (const child of node.childNodes ?? []) walk(child);
+  };
+  walk(document);
+
+  const ignored = new Set(ignoreForPreload);
+  let added = 0;
+  const add = (element, href) => {
+    if (hints.has(href) || ignored.has(path.posix.basename(href))) return;
+    hints.add(href);
+    head.childNodes.push(element);
+    added += 1;
+  };
+
+  for (const script of scripts) {
+    const href = toPublicPath(script, base);
+    if (existingScripts.has(href) || skipScripts.has(href)) continue;
+    add(
+      linkNode([
+        { name: 'rel', value: 'modulepreload' },
+        { name: 'href', value: href },
+      ]),
+      href,
+    );
+  }
+  for (const [font, contentType] of fonts) {
+    const href = toPublicPath(font, base);
+    const attrs = [
+      { name: 'rel', value: 'preload' },
+      { name: 'as', value: 'font' },
+      { name: 'href', value: href },
+      { name: 'crossorigin', value: '' },
+    ];
+    if (contentType) attrs.push({ name: 'type', value: contentType });
+    add(linkNode(attrs), href);
+  }
+  if (lcpImage) {
+    const href = toPublicPath(lcpImage, base);
+    add(
+      linkNode([
+        { name: 'rel', value: 'preload' },
+        { name: 'as', value: 'image' },
+        { name: 'href', value: href },
+        { name: 'fetchpriority', value: 'high' },
+      ]),
+      href,
+    );
+  }
+  return added > 0 ? serialize(document) : html;
+}
+
+// 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);
+  const sources = new Set();
+  const walk = (node) => {
+    if (node.tagName === 'script') {
+      const src = attribute(node, 'src');
+      if (src) sources.add(src);
+    }
+    for (const child of node.childNodes ?? []) walk(child);
+  };
+  walk(document);
+  return sources;
+}
+
+function findHead(document) {
+  const html = (document.childNodes ?? []).find((node) => node.tagName === 'html');
+  return (html?.childNodes ?? []).find((node) => node.tagName === 'head') ?? null;
+}
+
+function linkNode(attrs) {
+  return {
+    nodeName: 'link',
+    tagName: 'link',
+    attrs,
+    namespaceURI: 'http://www.w3.org/1999/xhtml',
+    childNodes: [],
+    parentNode: null,
+  };
+}
+
+function attribute(node, name) {
+  return node.attrs?.find((entry) => entry.name === name)?.value ?? '';
+}

package/src/core/preload-manifest.js

@@ -1,17 +1,71 @@
 import path from 'node:path';
-import { toPublicPath } from './routes.js';
+import { parse } from 'parse5';
+import { toAppPath } from './resources.js';
+import { normaliseRoute, toPublicPath } from './routes.js';
+import { pagePath } from './url-policy.js';
+
+/** A synthetic origin used only to resolve hrefs while reading the generated HTML. */
+const PAGE_ORIGIN = 'http://snappy.local';
+
+/**
+ * Reads the scripts and stylesheets the final HTML actually references. Using the
+ * 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);
+  const scripts = [];
+  const styles = [];
+  const pageUrl = new URL(toPublicPath(route, base), PAGE_ORIGIN);
+  const add = (node, attribute, target) => {
+    const raw = node.attrs?.find((entry) => entry.name === attribute)?.value;
+    if (!raw || raw.startsWith('data:') || raw.startsWith('blob:')) return;
+    let url;
+    try {
+      url = new URL(raw, pageUrl);
+    } catch {
+      return;
+    }
+    if (url.origin !== PAGE_ORIGIN) return;
+    const appPath = toAppPath(url.href, base);
+    if (appPath) target.push(appPath);
+  };
+  const walk = (node) => {
+    if (node.tagName === 'template') return;
+    if (node.tagName === 'script') add(node, 'src', scripts);
+    if (node.tagName === 'link') {
+      const rel = node.attrs?.find((entry) => entry.name === 'rel')?.value ?? '';
+      if (rel.split(/\s+/).includes('stylesheet')) add(node, 'href', styles);
+    }
+    for (const child of node.childNodes ?? []) walk(child);
+  };
+  walk(document);
+  return { scripts: [...new Set(scripts)], styles: [...new Set(styles)] };
+}
 
 /**
  * Builds the preload manifest: for every route, the same-origin scripts and
- * stylesheets it loaded, rendered as a Link header value. This replaces react-snap's
- * http2PushManifest because browsers removed HTTP/2 push (Chrome in v106); hosts can
- * still use these values for Early Hints or Link response headers. Hints and route keys
- * both carry the base path so they match the URLs a host actually sees.
+ * stylesheets the final page references, rendered as a Link header value. This
+ * replaces react-snap's http2PushManifest because browsers removed HTTP/2 push
+ * (Chrome in v106); hosts can still use these values for Early Hints or Link response
+ * headers. Hints and route keys both carry the base path so they match the URLs a host
+ * actually sees.
  */
-export function buildPreloadManifest(entries, { ignoreForPreload = [], base = '/' } = {}) {
+export function buildPreloadManifest(
+  entries,
+  {
+    ignoreForPreload = [],
+    base = '/',
+    flatOutput = false,
+    trailingSlash = 'preserve',
+    notFoundRoute = null,
+  } = {},
+) {
   const ignored = new Set(ignoreForPreload);
+  const notFound = notFoundRoute ? normaliseRoute(notFoundRoute) : null;
   const manifest = [];
   for (const entry of entries) {
+    if (notFound && normaliseRoute(entry.route) === notFound) continue;
     const hints = [];
     for (const asset of [...entry.scripts, ...entry.styles]) {
       if (ignored.has(path.posix.basename(asset))) continue;
@@ -20,7 +74,7 @@ export function buildPreloadManifest(entries, { ignoreForPreload = [], base = '/
     }
     if (hints.length === 0) continue;
     manifest.push({
-      source: toPublicPath(entry.route, base),
+      source: toPublicPath(pagePath(entry.route, { flatOutput, trailingSlash }), base),
       headers: [{ key: 'Link', value: hints.join(',') }],
     });
   }