feat(plugin-lighthouse): include details from criticalrequestchain and treemap-data

packages/plugin-lighthouse/src/lib/runner/details/__snapshots__/critical-request-chain.type.unit.test.ts.snap

@@ -0,0 +1,108 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`parseCriticalRequestChainToAuditDetails > should convert chains to basic trees 1`] = `
+[
+  {
+    "root": {
+      "children": [
+        {
+          "children": [
+            {
+              "name": "https://fonts.gstatic.com/s/googlesans/v62/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjIUvbQoi-E.woff2",
+              "values": {
+                "duration": "48.083 ms",
+                "transferSize": "35.89 kB",
+              },
+            },
+            {
+              "name": "https://fonts.gstatic.com/s/robotomono/v23/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0me8iUI0.woff2",
+              "values": {
+                "duration": "63.943 ms",
+                "transferSize": "22.31 kB",
+              },
+            },
+          ],
+          "name": "https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap",
+          "values": {
+            "duration": "50.656 ms",
+            "transferSize": "3.68 kB",
+          },
+        },
+        {
+          "children": [
+            {
+              "name": "https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2",
+              "values": {
+                "duration": "86.765 ms",
+                "transferSize": "125.78 kB",
+              },
+            },
+          ],
+          "name": "https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block",
+          "values": {
+            "duration": "55.102 ms",
+            "transferSize": "615 B",
+          },
+        },
+        {
+          "name": "https://www.gstatic.com/devrel-devsite/prod/ve761bca974e16662f27aa8810df6d144acde5bdbeeca0dfd50e25f86621eaa19/chrome/css/app.css",
+          "values": {
+            "duration": "70.050 ms",
+            "transferSize": "133.58 kB",
+          },
+        },
+        {
+          "name": "https://www.gstatic.com/devrel-devsite/prod/ve761bca974e16662f27aa8810df6d144acde5bdbeeca0dfd50e25f86621eaa19/chrome/css/dark-theme.css",
+          "values": {
+            "duration": "69.755 ms",
+            "transferSize": "3.98 kB",
+          },
+        },
+        {
+          "name": "https://developer.chrome.com/extras.css",
+          "values": {
+            "duration": "199.327 ms",
+            "transferSize": "109 B",
+          },
+        },
+      ],
+      "name": "https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains",
+      "values": {
+        "duration": "472.304 ms",
+        "transferSize": "18.66 kB",
+      },
+    },
+    "type": "basic",
+  },
+]
+`;
+
+exports[`parseCriticalRequestChainToAuditDetails > should convert longest chain to table 1`] = `
+{
+  "columns": [
+    {
+      "align": "right",
+      "key": "duration",
+      "label": "Duration",
+    },
+    {
+      "align": "right",
+      "key": "transferSize",
+      "label": "Transfer size",
+    },
+    {
+      "align": "right",
+      "key": "length",
+      "label": "Length",
+    },
+  ],
+  "rows": [
+    {
+      "duration": "757.072 ms",
+      "length": 3,
+      "transferSize": "125.78 kB",
+    },
+  ],
+  "title": "Longest chain",
+}
+`;

packages/plugin-lighthouse/src/lib/runner/details/__snapshots__/treemap-data.type.unit.test.ts.snap

@@ -0,0 +1,102 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`parseTreemapDataToBasicTrees > should convert root nodes to basic trees 1`] = `
+[
+  {
+    "root": {
+      "children": [
+        {
+          "children": [
+            {
+              "name": "failbot/failbot-error.ts",
+              "values": {
+                "resourceBytes": "237 B",
+                "unusedBytes": "113 B",
+              },
+            },
+            {
+              "name": "remove-child-patch/remove-child-patch.ts",
+              "values": {
+                "resourceBytes": "268 B",
+              },
+            },
+            {
+              "name": "fetch-overrides/fetch-overrides.ts",
+              "values": {
+                "resourceBytes": "376 B",
+                "unusedBytes": "263 B",
+              },
+            },
+          ],
+          "name": "ui/packages",
+          "values": {
+            "resourceBytes": "881 B",
+            "unusedBytes": "376 B",
+          },
+        },
+        {
+          "name": "app/assets/modules/environment.ts",
+          "values": {
+            "resourceBytes": "42 B",
+          },
+        },
+        {
+          "name": "(unmapped)",
+          "values": {
+            "resourceBytes": "515 B",
+          },
+        },
+      ],
+      "name": "https://github.githubassets.com/assets/environment-7b93e0f0c8ff.js",
+      "values": {
+        "resourceBytes": "1.4 kB",
+        "unusedBytes": "376 B",
+      },
+    },
+    "type": "basic",
+  },
+  {
+    "root": {
+      "children": [
+        {
+          "children": [
+            {
+              "name": "commenting/edit.ts",
+              "values": {
+                "resourceBytes": "9.07 kB",
+                "unusedBytes": "8.03 kB",
+              },
+            },
+            {
+              "name": "html-validation.ts",
+              "values": {
+                "duplicatedNormalizedModuleName": "app/assets/modules/github/behaviors/html-validation.ts",
+                "resourceBytes": "2.03 kB",
+                "unusedBytes": "2.03 kB",
+              },
+            },
+          ],
+          "name": "app/assets/modules/github/behaviors",
+          "values": {
+            "resourceBytes": "11.1 kB",
+            "unusedBytes": "10.06 kB",
+          },
+        },
+        {
+          "name": "(unmapped)",
+          "values": {
+            "resourceBytes": "534 B",
+            "unusedBytes": "65 B",
+          },
+        },
+      ],
+      "name": "https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-fb43816ab83c.js",
+      "values": {
+        "resourceBytes": "11.62 kB",
+        "unusedBytes": "10.12 kB",
+      },
+    },
+    "type": "basic",
+  },
+]
+`;

packages/plugin-lighthouse/src/lib/runner/details/critical-request-chain.type.ts

@@ -0,0 +1,73 @@
+import type Details from 'lighthouse/types/lhr/audit-details';
+import type {
+  AuditDetails,
+  BasicTree,
+  BasicTreeNode,
+  Table,
+} from '@code-pushup/models';
+import { formatBytes, formatDuration } from '@code-pushup/utils';
+
+const DURATION_DECIMALS = 3;
+
+export function parseCriticalRequestChainToAuditDetails(
+  details: Details.CriticalRequestChain,
+): AuditDetails {
+  const trees = chainsToTrees(details);
+  const table = longestChainToTable(details);
+  return { table, trees };
+}
+
+function longestChainToTable(details: Details.CriticalRequestChain): Table {
+  const longestChain = {
+    duration: formatDuration(details.longestChain.duration, DURATION_DECIMALS),
+    transferSize: formatBytes(details.longestChain.transferSize),
+    length: details.longestChain.length,
+  };
+  type ColumnKey = keyof typeof longestChain;
+
+  return {
+    title: 'Longest chain',
+    columns: [
+      {
+        key: 'duration' satisfies ColumnKey,
+        label: 'Duration',
+        align: 'right',
+      },
+      {
+        key: 'transferSize' satisfies ColumnKey,
+        label: 'Transfer size',
+        align: 'right',
+      },
+      {
+        key: 'length' satisfies ColumnKey,
+        label: 'Length',
+        align: 'right',
+      },
+    ],
+    rows: [longestChain],
+  };
+}
+
+function chainsToTrees(details: Details.CriticalRequestChain): BasicTree[] {
+  return Object.values(details.chains)
+    .map(chainToTreeNode)
+    .map(root => ({ type: 'basic', root }));
+}
+
+function chainToTreeNode(
+  chain: Details.SimpleCriticalRequestNode[string],
+): BasicTreeNode {
+  return {
+    name: chain.request.url,
+    values: {
+      duration: formatDuration(
+        (chain.request.endTime - chain.request.startTime) * 1000,
+        DURATION_DECIMALS,
+      ),
+      transferSize: formatBytes(chain.request.transferSize),
+    },
+    ...(chain.children && {
+      children: Object.values(chain.children).map(chainToTreeNode),
+    }),
+  };
+}