misc: tweak stats github action (#56694)

This PR adds a few tweaks to our Github actions PR:
- expand by default the main section
- add some heuristics to not show hash/id changes in the diff view
- add some heuristics to not show increase/decrease size when it's too small (100 bytes is noise most often)
- add rendering runtimes to the list of tracked files


after vs before

![CleanShot 2023-10-11 at 14 56 36@2x](https://github.com/vercel/next.js/assets/11064311/548781bc-e893-45d1-aca4-de73b2b30299)

![CleanShot 2023-10-11 at 14 57 11@2x](https://github.com/vercel/next.js/assets/11064311/8e1c77e3-bed5-46ec-a756-62496df6729e)

Author: feedthejim

.github/actions/next-stats-action/src/add-comment.js

@@ -24,6 +24,8 @@ const shortenLabel = (itemKey) =>
     : itemKey
 
 const twoMB = 2 * 1024 * 1024
+const ONE_HUNDRED_BYTES = 100
+const ONE_HUNDRED_MS = 100
 
 module.exports = async function addComment(
   results = [],
@@ -82,24 +84,21 @@ module.exports = async function addComment(
         // otherwise only show gzip values
         else if (!isGzipItem && !groupKey.match(gzipIgnoreRegex)) return
 
-        if (
-          !itemKey.startsWith('buildDuration') ||
-          (isBenchmark && itemKey.match(/req\/sec/))
-        ) {
-          if (typeof mainItemVal === 'number') mainRepoTotal += mainItemVal
-          if (typeof diffItemVal === 'number') diffRepoTotal += diffItemVal
-        }
-
         // calculate the change
         if (mainItemVal !== diffItemVal) {
           if (
             typeof mainItemVal === 'number' &&
             typeof diffItemVal === 'number'
           ) {
-            change = round(diffItemVal - mainItemVal, 2)
+            const roundedValue = round(diffItemVal - mainItemVal, 2)
 
             // check if there is still a change after rounding
-            if (change !== 0) {
+            if (
+              roundedValue !== 0 &&
+              ((prettyType === 'ms' && roundedValue > ONE_HUNDRED_MS) ||
+                (prettyType === 'bytes' && roundedValue > ONE_HUNDRED_BYTES))
+            ) {
+              change = roundedValue
               const absChange = Math.abs(change)
               const warnIfNegative = isBenchmark && itemKey.match(/req\/sec/)
               const warn = warnIfNegative
@@ -112,12 +111,22 @@ module.exports = async function addComment(
               change = `${warn}${change < 0 ? '-' : '+'}${
                 useRawValue ? absChange : prettify(absChange, prettyType)
               }`
+            } else {
+              change = 'N/A'
             }
           } else {
             change = 'N/A'
           }
         }
 
+        if (
+          (change !== 'N/A' && !itemKey.startsWith('buildDuration')) ||
+          (isBenchmark && itemKey.match(/req\/sec/))
+        ) {
+          if (typeof mainItemVal === 'number') mainRepoTotal += mainItemVal
+          if (typeof diffItemVal === 'number') diffRepoTotal += diffItemVal
+        }
+
         groupTable += `| ${
           isBenchmark ? itemKey : shortenLabel(itemKey)
         } | ${mainItemStr} | ${diffItemStr} | ${change} |\n`
@@ -169,8 +178,7 @@ module.exports = async function addComment(
 
     // add diffs
     if (result.diffs) {
-      const diffHeading = '#### Diffs\n'
-      let diffContent = diffHeading
+      let diffContent = ''
 
       Object.keys(result.diffs).forEach((itemKey) => {
         const curDiff = result.diffs[itemKey]
@@ -187,8 +195,11 @@ module.exports = async function addComment(
         diffContent += `\n</details>\n`
       })
 
-      if (diffContent !== diffHeading) {
+      if (diffContent.length > 0) {
+        resultContent += `<details>\n`
+        resultContent += `<summary><strong>Diff details</strong></summary>\n\n`
         resultContent += diffContent
+        resultContent += `\n</details>\n\n`
       }
     }
     let increaseDecreaseNote = ''
@@ -199,7 +210,7 @@ module.exports = async function addComment(
       increaseDecreaseNote = ' (Decrease detected ✓)'
     }
 
-    comment += `<details>\n`
+    comment += `<details open>\n`
     comment += `<summary><strong>${result.title}</strong>${increaseDecreaseNote}</summary>\n\n<br/>\n\n`
     comment += resultContent
     comment += '</details>\n'

.github/actions/next-stats-action/src/run/collect-diffs.js

@@ -106,7 +106,7 @@ module.exports = async function collectDiffs(
           `cd ${diffingDir} && git diff --minimal HEAD ${file}`
         )
         stdout = (stdout.split(file).pop() || '').trim()
-        if (stdout.length > 0) {
+        if (stdout.length > 0 && !isLikelyHashOrIDChange(stdout)) {
           diffs[fileKey] = stdout
         }
       } catch (err) {
@@ -117,3 +117,48 @@ module.exports = async function collectDiffs(
   }
   return diffs
 }
+
+function isLikelyHashOrIDChange(diff) {
+  const lines = diff.split('\n')
+  let additions = []
+  let deletions = []
+
+  // Separate additions and deletions
+  for (const line of lines) {
+    if (line.startsWith('+')) {
+      additions.push(line.substring(1).split(/\b/))
+    } else if (line.startsWith('-')) {
+      deletions.push(line.substring(1).split(/\b/))
+    }
+  }
+
+  // If the number of additions and deletions is different, it's not a hash or ID change
+  if (additions.length !== deletions.length) {
+    return false
+  }
+
+  // Compare each addition with each deletion
+  for (let i = 0; i < additions.length; i++) {
+    const additionTokens = additions[i]
+    const deletionTokens = deletions[i]
+
+    // Identify differing tokens
+    const differingTokens = additionTokens.filter(
+      (token, index) => token !== deletionTokens[index]
+    )
+
+    // Analyze differing tokens
+    for (const token of differingTokens) {
+      const isLikelyHash = /^[a-f0-9]+$/.test(token)
+      const isLikelyID = /^[0-9]+$/.test(token)
+      // this is most likely noise because some path include the repo name, which can be main or diff
+      const isLikelyNoise = ['main', 'diff'].includes(token)
+
+      if (!isLikelyHash && !isLikelyID && !isLikelyNoise) {
+        return false
+      }
+    }
+  }
+
+  return true
+}

test/.stats-app/stats-config.js

@@ -36,6 +36,10 @@ const clientGlobs = [
       '.next/server/edge-runtime-webpack.js',
     ],
   },
+  {
+    name: 'Next Runtimes',
+    globs: ['../../node_modules/next/dist/compiled/next-server/**/*.js'],
+  },
 ]
 
 const renames = [