chore: speculation rules

ovflowd · ovflowd · commit f539c8d85d82 · 2025-11-11T02:57:13.000+01:00
diff --git a/src/generators/web/constants.mjs b/src/generators/web/constants.mjs
@@ -80,3 +80,14 @@ export const JSX_IMPORTS = {
     source: '@node-core/ui-components/Providers/NotificationProvider',
   },
 };
+
+/**
+ * Specification rules for resource hints like prerendering and prefetching.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API
+ */
+export const SPECULATION_RULES = {
+  prefetch: [
+    { where: { selector_matches: '[rel~=prefetch]' }, eagerness: 'eager' },
+  ],
+  prerender: [{ where: { href_matches: '/*.html' }, eagerness: 'moderate' }],
+};
diff --git a/src/generators/web/template.html b/src/generators/web/template.html
@@ -16,6 +16,7 @@
   <!-- Apply theme before paint to avoid Flash of Unstyled Content -->
   <script>document.documentElement.setAttribute("data-theme",localStorage.getItem("theme")||(matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"));</script>
   <script type="importmap">{{importMap}}</script>
+  <script type="speculationrules">{{speculationRules}}</script>
 </head>
 
 <body>
diff --git a/src/generators/web/ui/components/SideBar/index.jsx b/src/generators/web/ui/components/SideBar/index.jsx
@@ -1,4 +1,4 @@
-import Select from '@node-core/ui-components/Common/Select/index.js';
+import Select from '@node-core/ui-components/Common/Select';
 import SideBar from '@node-core/ui-components/Containers/Sidebar';
 
 import styles from './index.module.css';
@@ -31,6 +31,7 @@ export default ({ versions, pathname, currentVersion, docPages }) => (
       },
     ]}
     onSelect={redirect}
+    as={props => <a {...props} rel="prefetch" />}
   >
     <div>
       <Select
diff --git a/src/generators/web/utils/processing.mjs b/src/generators/web/utils/processing.mjs
@@ -3,6 +3,7 @@ import { randomUUID } from 'node:crypto';
 import HTMLMinifier from '@minify-html/node';
 import { jsx, toJs } from 'estree-util-to-js';
 
+import { SPECULATION_RULES } from '../constants.mjs';
 import bundleCode from './bundle.mjs';
 import { createChunkedRequire } from './chunks.mjs';
 
@@ -83,6 +84,8 @@ export async function processJSXEntries(
 
   const titleSuffix = `Node.js v${version} Documentation`;
 
+  const speculationRulesString = JSON.stringify(SPECULATION_RULES, null, 2);
+
   // Process each entry to create final HTML
   const results = entries.map(({ data: { api, heading } }) => {
     const fileName = `${api}.js`;
@@ -92,7 +95,8 @@ export async function processJSXEntries(
       .replace('{{title}}', `${heading.data.name} | ${titleSuffix}`)
       .replace('{{dehydrated}}', serverBundle.get(fileName) ?? '')
       .replace('{{importMap}}', clientBundle.importMap ?? '')
-      .replace('{{entrypoint}}', `./${fileName}?${randomUUID()}`);
+      .replace('{{entrypoint}}', `./${fileName}?${randomUUID()}`)
+      .replace('{{speculationRules}}', speculationRulesString);
 
     // Minify HTML (input must be a Buffer)
     const finalHTMLBuffer = HTMLMinifier.minify(Buffer.from(renderedHtml), {});
