From b877878b5b3a3e185d8a4ca1a1ee2fcf93321916 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Wed, 30 Jun 2021 15:22:38 -0500 Subject: [PATCH] misc(build): add build step for report (#12707) --- .github/workflows/devtools.yml | 2 + .github/workflows/smoke.yml | 3 ++ .github/workflows/unit.yml | 2 + .gitignore | 2 + .npmignore | 3 ++ build/build-report.js | 46 ++++++++++++++++ build/build-viewer.js | 3 +- build/readme.md | 2 +- docs/releasing.md | 1 - .../scripts/i18n/collect-strings.js | 2 +- lighthouse-core/scripts/open-devtools.sh | 1 - lighthouse-core/scripts/roll-to-devtools.sh | 3 ++ package.json | 7 +-- report/assets/standalone-template.html | 42 +-------------- report/clients/standalone.js | 52 +++++++++++++++++++ report/report-assets.js | 21 +------- 16 files changed, 124 insertions(+), 68 deletions(-) create mode 100644 build/build-report.js create mode 100644 report/clients/standalone.js diff --git a/.github/workflows/devtools.yml b/.github/workflows/devtools.yml index 8b277623b7..dcce705d0e 100644 --- a/.github/workflows/devtools.yml +++ b/.github/workflows/devtools.yml @@ -42,6 +42,8 @@ jobs: - run: yarn --frozen-lockfile working-directory: ${{ github.workspace }}/lighthouse + - run: yarn build-report + working-directory: ${{ github.workspace }}/lighthouse - run: yarn build-devtools working-directory: ${{ github.workspace }}/lighthouse diff --git a/.github/workflows/smoke.yml b/.github/workflows/smoke.yml index f7bf937076..f237ea3008 100644 --- a/.github/workflows/smoke.yml +++ b/.github/workflows/smoke.yml @@ -46,6 +46,7 @@ jobs: run: bash $GITHUB_WORKSPACE/lighthouse-core/scripts/download-chrome.sh && mv chrome-linux chrome-linux-tot - run: yarn install --frozen-lockfile --network-timeout 1000000 + - run: yarn build-report - run: sudo apt-get install xvfb - name: Run smoke tests @@ -78,6 +79,7 @@ jobs: node-version: 12.x - run: yarn install --frozen-lockfile --network-timeout 1000000 + - run: yarn build-report - name: Run smoke tests # Windows bots are slow, so only run enough tests to verify matching behavior. @@ -100,6 +102,7 @@ jobs: node-version: 12.x - run: yarn install --frozen-lockfile --network-timeout 1000000 + - run: yarn build-report - run: yarn build-devtools - run: sudo apt-get install xvfb diff --git a/.github/workflows/unit.yml b/.github/workflows/unit.yml index 498b7aaf2b..5d922d89f2 100644 --- a/.github/workflows/unit.yml +++ b/.github/workflows/unit.yml @@ -44,6 +44,7 @@ jobs: pip install protobuf==3.7.1 - run: yarn install --frozen-lockfile --network-timeout 1000000 + - run: yarn build-report - run: yarn test-proto # Run before unit-core because the roundtrip json is needed for proto tests. @@ -81,6 +82,7 @@ jobs: node-version: 12.x - run: yarn install --frozen-lockfile --network-timeout 1000000 + - run: yarn build-report - name: yarn unit-cli run: yarn unit-cli diff --git a/.gitignore b/.gitignore index 25096b0030..d1d204a1d1 100644 --- a/.gitignore +++ b/.gitignore @@ -26,6 +26,8 @@ last-run-results.html *.artifacts.log *.ctc.json +report/generated + !lighthouse-core/test/results/artifacts/*.trace.json !lighthouse-core/test/results/artifacts/*.devtoolslog.json !lighthouse-core/test/fixtures/artifacts/**/*.trace.json diff --git a/.npmignore b/.npmignore index ef71c7eed6..f474317995 100644 --- a/.npmignore +++ b/.npmignore @@ -53,6 +53,9 @@ yarn-error.log results.html *.lcov +# generated files needed for publish +!dist/report/standalone.js + # large files changelog.md diff --git a/build/build-report.js b/build/build-report.js new file mode 100644 index 0000000000..457c601283 --- /dev/null +++ b/build/build-report.js @@ -0,0 +1,46 @@ +/** + * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved. + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. + */ +'use strict'; + +const fs = require('fs'); + +function concatRendererCode() { + return [ + fs.readFileSync(__dirname + '/../report/renderer/util.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/dom.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/details-renderer.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/crc-details-renderer.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/snippet-renderer.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/element-screenshot-renderer.js', 'utf8'), + fs.readFileSync(__dirname + '/../lighthouse-core/lib/file-namer.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/logger.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/report-ui-features.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/category-renderer.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/performance-category-renderer.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/pwa-category-renderer.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/report-renderer.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/i18n.js', 'utf8'), + fs.readFileSync(__dirname + '/../report/renderer/text-encoding.js', 'utf8'), + ].join(';\n'); +} + +async function buildStandaloneReport() { + const REPORT_JAVASCRIPT = [ + concatRendererCode(), + fs.readFileSync(__dirname + '/../report/clients/standalone.js', 'utf8'), + ].join(';\n'); + fs.mkdirSync(__dirname + '/../dist/report', {recursive: true}); + fs.writeFileSync(__dirname + '/../dist/report/standalone.js', REPORT_JAVASCRIPT); +} + +if (require.main === module) { + buildStandaloneReport(); +} + +module.exports = { + buildStandaloneReport, + concatRendererCode, +}; diff --git a/build/build-viewer.js b/build/build-viewer.js index 1c7956b7db..f9eefedec2 100644 --- a/build/build-viewer.js +++ b/build/build-viewer.js @@ -9,6 +9,7 @@ const fs = require('fs'); const browserify = require('browserify'); const GhPagesApp = require('./gh-pages-app.js'); const {minifyFileTransform} = require('./build-utils.js'); +const {concatRendererCode} = require('./build-report.js'); const htmlReportAssets = require('../report/report-assets.js'); /** @@ -43,7 +44,7 @@ async function run() { ], javascripts: [ await generatorJsPromise, - htmlReportAssets.REPORT_JAVASCRIPT, + concatRendererCode(), fs.readFileSync(require.resolve('idb-keyval/dist/idb-keyval-min.js'), 'utf8'), {path: 'src/*'}, ], diff --git a/build/readme.md b/build/readme.md index c8900c9c67..164f423e2d 100644 --- a/build/readme.md +++ b/build/readme.md @@ -15,7 +15,7 @@ Additionally, there are build processes for: To build the devtools files and roll them into a local checkout of Chromium: ```sh -yarn build-devtools && yarn devtools +yarn devtools ``` diff --git a/docs/releasing.md b/docs/releasing.md index 3f4578516b..87d6c7f32e 100644 --- a/docs/releasing.md +++ b/docs/releasing.md @@ -154,7 +154,6 @@ echo "Complete the _Release publicity_ tasks documented above" ```sh git checkout vx.x.x # Checkout the specific version. -yarn build-devtools yarn devtools ~/src/devtools/devtools-frontend cd ~/src/devtools/devtools-frontend diff --git a/lighthouse-core/scripts/i18n/collect-strings.js b/lighthouse-core/scripts/i18n/collect-strings.js index 06178ab85c..983d5a5990 100644 --- a/lighthouse-core/scripts/i18n/collect-strings.js +++ b/lighthouse-core/scripts/i18n/collect-strings.js @@ -28,7 +28,7 @@ const UISTRINGS_REGEX = /UIStrings = .*?\};\n/s; const foldersWithStrings = [ `${LH_ROOT}/lighthouse-core`, - `${LH_ROOT}/report`, + `${LH_ROOT}/report/renderer`, `${LH_ROOT}/lighthouse-treemap`, path.dirname(require.resolve('lighthouse-stack-packs')) + '/packs', ]; diff --git a/lighthouse-core/scripts/open-devtools.sh b/lighthouse-core/scripts/open-devtools.sh index 1f83ef68e2..33145d5df7 100644 --- a/lighthouse-core/scripts/open-devtools.sh +++ b/lighthouse-core/scripts/open-devtools.sh @@ -36,7 +36,6 @@ if ! which gn ; then export PYTHONPATH="${PYTHONPATH:-}:$BLINK_TOOLS_PATH/latest/third_party/typ" fi -yarn build-devtools yarn devtools "$DEVTOOLS_PATH" cd "$DEVTOOLS_PATH" diff --git a/lighthouse-core/scripts/roll-to-devtools.sh b/lighthouse-core/scripts/roll-to-devtools.sh index 170c7aa438..e99dc27da9 100755 --- a/lighthouse-core/scripts/roll-to-devtools.sh +++ b/lighthouse-core/scripts/roll-to-devtools.sh @@ -39,6 +39,9 @@ mkdir -p "$fe_lh_dir" lh_bg_js="dist/lighthouse-dt-bundle.js" +yarn build-report +yarn build-devtools + # copy lighthouse-dt-bundle (potentially stale) cp -pPR "$lh_bg_js" "$fe_lh_dir/lighthouse-dt-bundle.js" echo -e "$check (Potentially stale) lighthouse-dt-bundle copied." diff --git a/package.json b/package.json index 535bad0db1..0413e87e77 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,8 @@ }, "scripts": { "build-all": "npm-run-posix-or-windows build-all:task", - "build-all:task": "yarn build-cdt-lib && yarn build-devtools && (yarn build-extension & yarn build-lr & yarn build-viewer & yarn build-treemap & yarn build-smokehouse-bundle & wait) && yarn build-pack", - "build-all:task:windows": "yarn build-cdt-lib && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle", + "build-all:task": "yarn build-report && yarn build-cdt-lib && yarn build-devtools && (yarn build-extension & yarn build-lr & yarn build-viewer & yarn build-treemap & yarn build-smokehouse-bundle & wait) && yarn build-pack", + "build-all:task:windows": "yarn build-report && yarn build-cdt-lib && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle", "build-cdt-lib": "node ./build/build-cdt-lib.js", "build-extension": "yarn build-extension-chrome && yarn build-extension-firefox", "build-extension-chrome": "node ./build/build-extension.js chrome", @@ -23,6 +23,7 @@ "build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js", "build-lr": "yarn reset-link && node ./build/build-lightrider-bundles.js", "build-pack": "bash build/build-pack.sh", + "build-report": "node build/build-report.js", "build-treemap": "node ./build/build-treemap.js", "build-viewer": "node ./build/build-viewer.js", "reset-link": "(yarn unlink || true) && yarn link && yarn link lighthouse", @@ -31,7 +32,7 @@ "lint": "[ \"$CI\" = true ] && eslint --quiet -f codeframe . || eslint .", "smoke": "node lighthouse-cli/test/smokehouse/frontends/smokehouse-bin.js", "debug": "node --inspect-brk ./lighthouse-cli/index.js", - "start": "node ./lighthouse-cli/index.js", + "start": "yarn build-report && node ./lighthouse-cli/index.js", "test": "yarn diff:sample-json && yarn lint --quiet && yarn unit && yarn type-check", "test-bundle": "yarn smoke --runner bundle -j=1 --retries=2 --invert-match forms", "test-clients": "jest \"clients/\"", diff --git a/report/assets/standalone-template.html b/report/assets/standalone-template.html index 96c481103e..e7cd816d40 100644 --- a/report/assets/standalone-template.html +++ b/report/assets/standalone-template.html @@ -31,50 +31,10 @@ limitations under the License.
+ - - diff --git a/report/clients/standalone.js b/report/clients/standalone.js new file mode 100644 index 0000000000..b45511233c --- /dev/null +++ b/report/clients/standalone.js @@ -0,0 +1,52 @@ +/** + * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved. + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. + */ +'use strict'; + +/* global document window ga DOM ReportRenderer ReportUIFeatures Logger */ + +(function __initLighthouseReport__() { + const dom = new DOM(document); + const renderer = new ReportRenderer(dom); + const container = dom.find('main', document); + /** @type {LH.ReportResult} */ + // @ts-expect-error + const lhr = window.__LIGHTHOUSE_JSON__; + renderer.renderReport(lhr, container); + + // Hook in JS features and page-level event listeners after the report + // is in the document. + const features = new ReportUIFeatures(dom); + features.initFeatures(lhr); +})(); + +document.addEventListener('lh-analytics', /** @param {Event} e */ e => { + // @ts-expect-error + if (window.ga) ga(e.detail.cmd, e.detail.fields); +}); + +document.addEventListener('lh-log', /** @param {Event} e */ e => { + const el = document.querySelector('#lh-log'); + if (!el) return; + + const logger = new Logger(el); + // @ts-expect-error + const detail = e.detail; + + switch (detail.cmd) { + case 'log': + logger.log(detail.msg); + break; + case 'warn': + logger.warn(detail.msg); + break; + case 'error': + logger.error(detail.msg); + break; + case 'hide': + logger.hide(); + break; + } +}); diff --git a/report/report-assets.js b/report/report-assets.js index b92b031bf6..b54411100f 100644 --- a/report/report-assets.js +++ b/report/report-assets.js @@ -7,25 +7,8 @@ const fs = require('fs'); -const REPORT_TEMPLATE = - fs.readFileSync(__dirname + '/assets/standalone-template.html', 'utf8'); -const REPORT_JAVASCRIPT = [ - fs.readFileSync(__dirname + '/renderer/util.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/dom.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/details-renderer.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/crc-details-renderer.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/snippet-renderer.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/element-screenshot-renderer.js', 'utf8'), - fs.readFileSync(__dirname + '/../lighthouse-core/lib/file-namer.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/logger.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/report-ui-features.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/category-renderer.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/performance-category-renderer.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/pwa-category-renderer.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/report-renderer.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/i18n.js', 'utf8'), - fs.readFileSync(__dirname + '/renderer/text-encoding.js', 'utf8'), -].join(';\n'); +const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/assets/standalone-template.html', 'utf8'); +const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/../dist/report/standalone.js', 'utf8'); const REPORT_CSS = fs.readFileSync(__dirname + '/assets/styles.css', 'utf8'); const REPORT_TEMPLATES = fs.readFileSync(__dirname + '/assets/templates.html', 'utf8');