refactor(html): embed router data in HTML; extract shouldIntercept; drop document queries

Replace the `data-root` attribute and runtime `document.querySelectorAll`
discovery with a `<script type="application/json" data-router>` tag emitted
by `buildAssetTags`. The tag carries `{ root, assets }` so `startRouter` and
`parsePage` read build-time data instead of querying the live document.

- `getAssets` helper removed; skew detection now reads `data-router` JSON
  from the fetched page
- `shouldIntercept(event, url, root)` extracted from the inline navigate guard
- `hydrated` exported from runtime so the router uses it directly for
  pre-swap island scroll saves (no `document.querySelectorAll` for that path)

Assisted-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ovflowd

packages/react/src/html/__tests__/generate.test.mjs

@@ -360,8 +360,9 @@ describe('web generate', () => {
     assert.match(html, /<article data-custom-ssr>fs:1<\/article>/);
     assert.match(
       html,
-      /<script type=module crossorigin src=\.\/custom\/index\.js data-root=\.\/>/
+      /<script type=module crossorigin src=\.\/custom\/index\.js>/
     );
+    assert.match(html, /data-router/);
     // The adapter reported no fonts, so there are none to preload
     assert.doesNotMatch(html, /as=font/);
     assert.match(

packages/react/src/html/ui/router.mjs

@@ -57,19 +57,6 @@ export const isPage = (url, root) =>
  */
 export const withoutFragment = href => href.split('#')[0];
 
-/**
- * The absolute URLs of the scripts and stylesheets a document loads.
- *
- * @param {Document} doc
- * @param {string} base - The document's URL, for relative references
- * @returns {Array<URL>}
- */
-const getAssets = (doc, base) =>
-  [...doc.querySelectorAll('script[src], link[rel~="stylesheet"][href]')].map(
-    element =>
-      new URL(element.getAttribute('src') ?? element.getAttribute('href'), base)
-  );
-
 /**
  * Keys an iterable of islands by name and occurrence, so that the same island
  * is found again on the next page.
@@ -123,10 +110,25 @@ const updateHead = doc => {
  */
 const transition = update => update();
 
+/**
+ * Whether a navigation event should be intercepted by the router.
+ *
+ * @param {NavigateEvent} event
+ * @param {URL} url
+ * @param {string} root
+ */
+const shouldIntercept = (event, url, root) =>
+  event.canIntercept &&
+  !event.hashChange &&
+  event.downloadRequest === null &&
+  !event.formData &&
+  event.navigationType !== 'reload' &&
+  isPage(url, root);
+
 /**
  * Starts handling navigations between the pages of the site, unless the
- * browser lacks the Navigation API or the page does not say where the site
- * starts (see `buildAssetTags`).
+ * browser lacks the Navigation API or the page does not carry router data
+ * (see `buildAssetTags`).
  *
  * @param {object} options
  * @param {(root: Node) => void} options.unmount - Unmounts the components
@@ -135,18 +137,17 @@ const transition = update => update();
  * islands; used to save scroll positions before the body is replaced.
  */
 export const startRouter = ({ unmount, islands }) => {
-  const script = document.querySelector('script[data-root]');
+  const tag = document.querySelector('script[data-router]');
 
-  if (!('navigation' in window) || !script) {
+  if (!('navigation' in window) || !tag) {
     return;
   }
 
-  const root = new URL(script.dataset.root, location.href).href;
-
-  // The document's head is never replaced (see `PAGE_HEAD`), so the relative
-  // URLs in it are resolved while they still point where they did at load
+  /** @type {{ root: string, assets: Array<string> }} */
+  const config = JSON.parse(tag.textContent);
+  const root = new URL(config.root, location.href).href;
   const assets = new Set(
-    getAssets(document, location.href).map(url => url.href)
+    config.assets.map(href => new URL(href, location.href).href)
   );
 
   /** @type {Map<string, { page: Promise<Page | null>, expires: number }>} */
@@ -202,8 +203,18 @@ export const startRouter = ({ unmount, islands }) => {
    */
   const parsePage = ({ url, html }) => {
     const doc = new DOMParser().parseFromString(html, 'text/html');
+    const tag = doc.querySelector('script[data-router]');
+
+    if (!tag) {
+      return null;
+    }
+
+    /** @type {{ root: string, assets: Array<string> }} */
+    const pageConfig = JSON.parse(tag.textContent);
 
-    return getAssets(doc, url).every(asset => assets.has(asset.href))
+    return pageConfig.assets
+      .map(href => new URL(href, url).href)
+      .every(href => assets.has(href))
       ? doc
       : null;
   };
@@ -267,14 +278,7 @@ export const startRouter = ({ unmount, islands }) => {
   navigation.addEventListener('navigate', event => {
     const url = new URL(event.destination.url);
 
-    if (
-      !event.canIntercept ||
-      event.hashChange ||
-      event.downloadRequest !== null ||
-      event.formData ||
-      event.navigationType === 'reload' ||
-      !isPage(url, root)
-    ) {
+    if (!shouldIntercept(event, url, root)) {
       return;
     }
 

packages/react/src/html/utils/__tests__/processing.test.mjs

@@ -258,14 +258,14 @@ describe('buildAssetTags', () => {
     stylesheets: ['assets/style-ghi.css'],
   };
 
-  it('resolves every asset against the page root, scripts first', () => {
+  it('resolves every asset against the page root, router data tag first', () => {
     const tags = buildAssetTags(assets, '../').split('\n');
 
     assert.deepStrictEqual(
       tags.map(tag => tag.trim()),
       [
-        // The scripts also tell the client-side router where the site starts
-        '<script type="module" crossorigin src="../assets/client-abc.js" data-root="../"></script>',
+        `<script type="application/json" data-router>${JSON.stringify({ root: '../', assets: ['../assets/client-abc.js', '../assets/style-ghi.css'] })}</script>`,
+        '<script type="module" crossorigin src="../assets/client-abc.js"></script>',
         '<link rel="modulepreload" crossorigin href="../assets/shared-def.js" />',
         '<link rel="stylesheet" crossorigin href="../assets/style-ghi.css" />',
       ]
@@ -280,10 +280,10 @@ describe('buildAssetTags', () => {
     );
   });
 
-  it('renders nothing for an empty asset list', () => {
+  it('renders only the router tag for an empty asset list', () => {
     assert.strictEqual(
       buildAssetTags({ scripts: [], preloads: [], stylesheets: [] }, './'),
-      ''
+      '<script type="application/json" data-router>{"root":"./","assets":[]}</script>'
     );
   });
 });

packages/react/src/html/utils/processing.mjs

@@ -163,19 +163,24 @@ export const buildHead = ({ meta = [], links = [], html = [] }) =>
  * statically import as preload hints (as the bundler would inject them), and
  * the stylesheets as links.
  *
- * The entry scripts also carry the root itself, which tells the client-side
- * router (see `ui/router.mjs`) which links lead to pages of the site. It rides
- * along with the scripts because every template has to render them.
+ * Also emits a `<script type="application/json" data-router>` tag carrying the
+ * root and asset URLs so the client-side router can read them without querying
+ * the DOM for script attributes or re-discovering loaded scripts and stylesheets.
  *
  * @param {import('../types').ClientAssets} assets - Output-relative asset paths
  * @param {string} root - The page's root (see {@link resolvePageRoot})
  * @returns {string}
  */
 export const buildAssetTags = ({ scripts, preloads, stylesheets }, root) =>
   [
+    [
+      `<script type="application/json" data-router>${JSON.stringify({
+        root,
+        assets: [...scripts, ...stylesheets].map(file => `${root}${file}`),
+      })}</script>`,
+    ],
     scripts.map(
-      file =>
-        `<script type="module" crossorigin src="${root}${file}" data-root="${root}"></script>`
+      file => `<script type="module" crossorigin src="${root}${file}"></script>`
     ),
     preloads.map(file =>
       renderTag('link', {