[wip]

Author: avivkeller

scripts/compare-builds/web.mjs

@@ -15,6 +15,7 @@ const formatBytes = bytes => {
   if (!bytes) {
     return '0 B';
   }
+
   const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(1024));
   return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${UNITS[i]}`;
 };
@@ -45,37 +46,17 @@ const getDirectoryStats = async dir => {
   return new Map(entries);
 };
 
-/**
- * Gets the extension of a file
- * @param {string} file - Filename
- * @returns {string} File extension (without dot)
- */
-const getExtension = file => file.split('.').pop();
-
-/**
- * Gets the base name of a file (without extension)
- * @param {string} file - Filename
- * @returns {string} Base filename
- */
-const getBaseName = file => file.slice(0, file.lastIndexOf('.') || file.length);
-
 /**
  * Generates a table row for a file
  * @param {string} file - Filename
- * @param {number} [baseSize] - Base size in bytes
- * @param {number} [headSize] - Head size in bytes
+ * @param {number} baseSize - Base size in bytes
+ * @param {number} headSize - Head size in bytes
  * @returns {string} Markdown table row
  */
 const generateRow = (file, baseSize, headSize) => {
-  const baseCol = baseSize != null ? formatBytes(baseSize) : '-';
-  const headCol = headSize != null ? formatBytes(headSize) : '-';
-
-  let diffCol = 'Added';
-  if (baseSize != null && headSize != null) {
-    diffCol = formatDiff(baseSize, headSize);
-  } else if (baseSize != null) {
-    diffCol = 'Removed';
-  }
+  const baseCol = formatBytes(baseSize);
+  const headCol = formatBytes(headSize);
+  const diffCol = formatDiff(baseSize, headSize);
 
   return `| \`${file}\` | ${baseCol} | ${headCol} | ${diffCol} |`;
 };
@@ -104,40 +85,48 @@ const generateTable = (files, baseStats, headStats) => {
 const details = (summary, content) =>
   `<details>\n<summary>${summary}</summary>\n\n${content}\n\n</details>`;
 
-async function main() {
-  const [baseStats, headStats] = await Promise.all(
-    [BASE, HEAD].map(getDirectoryStats)
-  );
+const [baseStats, headStats] = await Promise.all(
+  [BASE, HEAD].map(getDirectoryStats)
+);
 
-  const allFiles = Array.from(
-    new Set([...baseStats.keys(), ...headStats.keys()])
-  );
+const allFiles = Array.from(
+  new Set([...baseStats.keys(), ...headStats.keys()])
+);
 
-  if (!allFiles.length) {
-    return;
-  }
+// Filter to only changed files (exist in both and have different sizes)
+const changedFiles = allFiles.filter(
+  f =>
+    baseStats.has(f) &&
+    headStats.has(f) &&
+    baseStats.get(f) !== headStats.get(f)
+);
 
+if (changedFiles.length) {
   // Separate HTML/JS pairs from other files
   const pairs = [];
   const other = [];
   const processed = new Set();
 
-  for (const file of allFiles) {
+  for (const file of changedFiles) {
     if (processed.has(file)) {
       continue;
     }
 
-    const basename = getBaseName(file);
-    const hasHtml = allFiles.some(
-      f => getBaseName(f) === basename && getExtension(f) === 'html'
+    const basename = path.basename(file, path.extname(file));
+    const hasHtml = changedFiles.some(
+      f =>
+        path.basename(f, path.extname(f)) === basename &&
+        path.extname(f) === '.html'
     );
-    const hasJs = allFiles.some(
-      f => getBaseName(f) === basename && getExtension(f) === 'js'
+    const hasJs = changedFiles.some(
+      f =>
+        path.basename(f, path.extname(f)) === basename &&
+        path.extname(f) === '.js'
     );
 
     if (hasHtml && hasJs) {
-      allFiles
-        .filter(f => getBaseName(f) === basename)
+      changedFiles
+        .filter(f => path.basename(f, path.extname(f)) === basename)
         .forEach(f => {
           pairs.push(f);
           processed.add(f);
@@ -151,29 +140,15 @@ async function main() {
   pairs.sort();
   other.sort();
 
-  // Generate report sections
-  const sections = [];
+  console.log('## Web Generator\n');
+  console.log(generateTable(other, baseStats, headStats));
 
   if (pairs.length) {
-    sections.push(
+    console.log(
       details(
-        `HTML/JS Pairs (${pairs.length})`,
+        `Pages (${pairs.length / 2})`,
         generateTable(pairs, baseStats, headStats)
       )
     );
   }
-
-  if (other.length) {
-    sections.push(
-      details(
-        `Other Files (${other.length})`,
-        generateTable(other, baseStats, headStats)
-      )
-    );
-  }
-
-  console.log('## Web Generator');
-  console.log(sections.join('\n\n'));
 }
-
-main();

src/generators/web/constants.mjs

@@ -85,7 +85,7 @@ export const JSX_IMPORTS = {
  * 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 = {
+export const SPECULATION_RULES = JSON.stringify({
   // Eagerly prefetch all links that point to the API docs themselves
   // in a moderate eagerness to improve resource loading
   prefetch: [{ where: { href_matches: '/*' }, eagerness: 'eager' }],
@@ -94,4 +94,4 @@ export const SPECULATION_RULES = {
     // These will be done in a moderate eagerness (hover, likely next navigation)
     { where: { selector_matches: '[rel~=prefetch]' }, eagerness: 'moderate' },
   ],
-};
+});

src/generators/web/utils/processing.mjs

@@ -106,7 +106,6 @@ export async function processJSXEntries(
   ]);
 
   const titleSuffix = `Node.js v${version.version} Documentation`;
-  const speculationRulesString = JSON.stringify(SPECULATION_RULES, null, 2);
 
   // Step 3: Create final HTML (could be parallelized in workers)
   const results = entries.map(({ data: { api, heading } }) => {
@@ -118,7 +117,7 @@ export async function processJSXEntries(
       .replace('{{dehydrated}}', serverBundle.get(fileName) ?? '')
       .replace('{{importMap}}', clientBundle.importMap ?? '')
       .replace('{{entrypoint}}', `./${fileName}?${randomUUID()}`)
-      .replace('{{speculationRules}}', speculationRulesString);
+      .replace('{{speculationRules}}', SPECULATION_RULES);
 
     // Minify HTML (input must be a Buffer)
     const finalHTMLBuffer = HTMLMinifier.minify(Buffer.from(renderedHtml), {});