build: add build step for report

.github/workflows/ci.yml

@@ -49,6 +49,7 @@ jobs:
     - run: yarn test-legacy-javascript
     - run: yarn i18n:checks
     - run: yarn dogfood-lhci
+    - run: sh lighthouse-core/scripts/copy-util-commonjs.sh
 
     # Fail if any changes were written to any source files or generated untracked files (ex, from: build/build-cdt-lib.js).
     - run: git add -A && git diff --cached --exit-code

.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
 

.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

build/build-report.js

@@ -0,0 +1,38 @@
+/**
+ * @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');
+
+async function buildStandaloneReport() {
+  const REPORT_JAVASCRIPT = [
+    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'),
+    fs.readFileSync(__dirname + '/../report/clients/standalone.js', 'utf8'),
+  ].join(';\n');
+  fs.writeFileSync(__dirname + '/../report/generated/standalone.js', REPORT_JAVASCRIPT);
+}
+
+if (require.main === module) {
+  buildStandaloneReport();
+}
+
+module.exports = {
+  buildStandaloneReport,
+};

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 {buildStandaloneReport} = require('./build-report.js');
 const htmlReportAssets = require('../report/report-assets.js');
 
 /**
@@ -30,6 +31,8 @@ async function run() {
     });
   });
 
+  await buildStandaloneReport();
+
   const app = new GhPagesApp({
     name: 'viewer',
     appDir: `${__dirname}/../lighthouse-viewer/app`,

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
 ```
 
 

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

lighthouse-core/runner.js

@@ -169,6 +169,16 @@ class Runner {
         assetSaver.saveLhr(lhr, path);
       }
 
+      // Build report if in local dev env so we don't have to run a watch command.
+      const forHtml = settings.output === 'html' ||
+        (Array.isArray(settings.output) && settings.output.includes('html'));
+      if (forHtml && !global.isDevtools && !global.isLightrider &&
+          fs.existsSync('dist') && fs.existsSync('.git')) {
+        // Prevent bundling.
+        const buildReportPath = '../build/build-report.js';
+        await require(buildReportPath).buildStandaloneReport();
+      }
+
       // Create the HTML, JSON, and/or CSV string
       const report = generateReport(lhr, settings.output);
 

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"

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."

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",

report/assets/standalone-template.html

@@ -31,50 +31,10 @@
 
   <div id="lh-log"></div>
 
+  <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
   <script>%%LIGHTHOUSE_JAVASCRIPT%%
   //# sourceURL=compiled-reportrenderer.js
   </script>
-  <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
   <script>console.log('window.__LIGHTHOUSE_JSON__', __LIGHTHOUSE_JSON__);</script>
-  <script>
-    function __initLighthouseReport__() {
-      const dom = new DOM(document);
-      const renderer = new ReportRenderer(dom);
-
-      const container = document.querySelector('main');
-      renderer.renderReport(window.__LIGHTHOUSE_JSON__, container);
-
-      // Hook in JS features and page-level event listeners after the report
-      // is in the document.
-      const features = new ReportUIFeatures(dom);
-      features.initFeatures(window.__LIGHTHOUSE_JSON__);
-    }
-    window.addEventListener('DOMContentLoaded', __initLighthouseReport__);
-
-    document.addEventListener('lh-analytics', e => {
-      if (window.ga) {
-        ga(e.detail.cmd, e.detail.fields);
-      }
-    });
-
-    document.addEventListener('lh-log', e => {
-      const logger = new Logger(document.querySelector('#lh-log'));
-
-      switch (e.detail.cmd) {
-        case 'log':
-          logger.log(e.detail.msg);
-          break;
-        case 'warn':
-          logger.warn(e.detail.msg);
-          break;
-        case 'error':
-          logger.error(e.detail.msg);
-          break;
-        case 'hide':
-          logger.hide();
-          break;
-      }
-    });
-  </script>
 </body>
 </html>

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;
+  }
+});

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 + '/generated/standalone.js', 'utf8');
 const REPORT_CSS = fs.readFileSync(__dirname + '/assets/styles.css', 'utf8');
 const REPORT_TEMPLATES = fs.readFileSync(__dirname + '/assets/templates.html', 'utf8');