From 009d2ae0e82d819a499ab3defb060cd66c82d6e8 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 5 May 2022 14:35:39 +0800 Subject: [PATCH] misc: move lighthouse message formatter to admin folder, refactor --- .github/workflows/lighthouse-report.yml | 4 +- .../scripts/format-lighthouse-score.js | 60 --------------- admin/scripts/format-lighthouse-score.mjs | 76 +++++++++++++++++++ 3 files changed, 78 insertions(+), 62 deletions(-) delete mode 100644 .github/workflows/scripts/format-lighthouse-score.js create mode 100644 admin/scripts/format-lighthouse-score.mjs diff --git a/.github/workflows/lighthouse-report.yml b/.github/workflows/lighthouse-report.yml index 97bb2901a4ad..3f57a9956b14 100644 --- a/.github/workflows/lighthouse-report.yml +++ b/.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 comment = createLighthouseReport({ results, links }) + const createLighthouseReport = (await import(`${process.env.GITHUB_WORKSPACE}/admin/scripts/format-lighthouse-score.mjs`)).default; + const comment = createLighthouseReport({ results, links }); core.setOutput("comment", comment); - name: Add Lighthouse stats as comment diff --git a/.github/workflows/scripts/format-lighthouse-score.js b/.github/workflows/scripts/format-lighthouse-score.js deleted file mode 100644 index 29d90976f73d..000000000000 --- a/.github/workflows/scripts/format-lighthouse-score.js +++ /dev/null @@ -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; diff --git a/admin/scripts/format-lighthouse-score.mjs b/admin/scripts/format-lighthouse-score.mjs new file mode 100644 index 000000000000..b73595cdc3ad --- /dev/null +++ b/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} */ +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} 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;