misc: move lighthouse message formatter to admin folder, refactor (#7338)

.github/workflows/lighthouse-report.yml

@@ -42,8 +42,8 @@ jobs:
           script: |
             const results = ${{ steps.lighthouse_audit.outputs.manifest }}
             const links = ${{ steps.lighthouse_audit.outputs.links }}
-            const createLighthouseReport = require(`${process.env.GITHUB_WORKSPACE}/.github/workflows/scripts/format-lighthouse-score.js`)
+            const createLighthouseReport = (await import(`${process.env.GITHUB_WORKSPACE}/admin/scripts/format-lighthouse-score.mjs`)).default;
-            const comment = createLighthouseReport({ results, links })
+            const comment = createLighthouseReport({ results, links });
             core.setOutput("comment", comment);
 
       - name: Add Lighthouse stats as comment

.github/workflows/scripts/format-lighthouse-score.js

@@ -1,60 +0,0 @@
-const score = (res) => (res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴');
-const formatResult = (res) => Math.round(res * 100);
-const scoreEntry = (scoreResult) => {
-  const normalizedScore = formatResult(scoreResult);
-  const scoreIcon = score(normalizedScore);
-  return `${scoreIcon} ${normalizedScore}`;
-};
-
-const createMarkdownTableRow = ({
-  url,
-  performance,
-  accessibility,
-  bestPractices,
-  seo,
-  pwa,
-  reportUrl,
-}) => {
-  return `| [${
-    new URL(url).pathname
-  }](${url}) | ${performance} | ${accessibility} | ${bestPractices} | ${seo} | ${pwa} | [View report](${reportUrl})|`;
-};
-
-const createSingleRow = ({summary, testUrl, reportPublicUrl}) => {
-  const normalizedBody = {
-    url: testUrl,
-    performance: scoreEntry(summary.performance),
-    accessibility: scoreEntry(summary.accessibility),
-    bestPractices: scoreEntry(summary['best-practices']),
-    seo: scoreEntry(summary.seo),
-    pwa: scoreEntry(summary.pwa),
-    reportUrl: reportPublicUrl,
-  };
-  return createMarkdownTableRow(normalizedBody);
-};
-
-const createMarkdownTableHeader = () => {
-  return [
-    '| URL                       | Performance | Accessibility | Best Practices | SEO      | PWA     | Report |',
-    '|---------------------------|-------------|---------------|----------------|----------|---------|--------|',
-  ];
-};
-
-const createLighthouseReport = ({results, links}) => {
-  const tableHeader = createMarkdownTableHeader();
-  const tableBody = results.map((result) => {
-    const testUrl = Object.keys(links).find((key) => key === result.url);
-    const reportPublicUrl = links[testUrl];
-    return createSingleRow({summary: result.summary, testUrl, reportPublicUrl});
-  });
-  const comment = [
-    '### ⚡️ Lighthouse report for the changes in this PR',
-    '',
-    ...tableHeader,
-    ...tableBody,
-    '',
-  ];
-  return comment.join('\n');
-};
-
-module.exports = createLighthouseReport;

admin/scripts/format-lighthouse-score.mjs

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-check
+
+/** @typedef {Record<'performance' | 'accessibility' | 'best-practices' | 'seo' | 'pwa', number>} LighthouseSummary */
+
+/** @type {Record<keyof LighthouseSummary, string>} */
+const summaryKeys = {
+  performance: 'Performance',
+  accessibility: 'Accessibility',
+  'best-practices': 'Best Practices',
+  seo: 'SEO',
+  pwa: 'PWA',
+};
+
+/** @param {number} score */
+const scoreEntry = (score) => {
+  const normalizedScore = Math.round(score * 100);
+  // eslint-disable-next-line no-nested-ternary
+  const scoreIcon = score >= 90 ? '🟢' : score >= 50 ? '🟠' : '🔴';
+  return `${scoreIcon} ${normalizedScore}`;
+};
+
+/**
+ * @param {Object} param0
+ * @param {string} param0.url
+ * @param {LighthouseSummary} param0.summary
+ * @param {string} param0.reportUrl
+ */
+const createMarkdownTableRow = ({url, summary, reportUrl}) =>
+  [
+    `| [${new URL(url).pathname}](${url})`,
+    ...Object.keys(summaryKeys).map((k) => scoreEntry(summary[k])),
+    `[Report](${reportUrl}) |`,
+  ].join(' | ');
+
+const createMarkdownTableHeader = () => [
+  ['| URL', ...Object.values(summaryKeys), 'Report |'].join(' | '),
+  ['|---', ...Array(Object.keys(summaryKeys).length).fill('---'), '---|'].join(
+    '|',
+  ),
+];
+
+/**
+ * @param {Object} param0
+ * @param {Record<string, string>} param0.links
+ * @param {{url: string, summary: LighthouseSummary}[]} param0.results
+ */
+const createLighthouseReport = ({results, links}) => {
+  const tableHeader = createMarkdownTableHeader();
+  const tableBody = results.map((result) => {
+    const testUrl = Object.keys(links).find((key) => key === result.url);
+    const reportPublicUrl = links[testUrl];
+
+    return createMarkdownTableRow({
+      url: testUrl,
+      summary: result.summary,
+      reportUrl: reportPublicUrl,
+    });
+  });
+  const comment = [
+    '### ⚡️ Lighthouse report for the deploy preview of this PR',
+    '',
+    ...tableHeader,
+    ...tableBody,
+    '',
+  ];
+  return comment.join('\n');
+};
+
+export default createLighthouseReport;