report: convert to ES modules

.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,67 @@
+/**
+ * @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 rollup = require('rollup');
+const {terser} = require('rollup-plugin-terser');
+// Only needed b/c getFilenamePrefix loads a commonjs module.
+const commonjs =
+  // @ts-expect-error types are wrong.
+  /** @type {import('rollup-plugin-commonjs').default} */ (require('rollup-plugin-commonjs'));
+
+async function buildStandaloneReport() {
+  const bundle = await rollup.rollup({
+    input: 'report/clients/standalone.js',
+    plugins: [
+      commonjs(),
+      terser(),
+    ],
+  });
+
+  await bundle.write({
+    file: 'report/generated/standalone.js',
+    format: 'iife',
+  });
+}
+
+async function buildViewerReport() {
+  const bundle = await rollup.rollup({
+    input: 'report/clients/viewer.js',
+    plugins: [
+      commonjs(),
+    ],
+  });
+
+  await bundle.write({
+    file: 'dist/viewer-report.js',
+    format: 'iife',
+  });
+}
+
+async function buildEsModulesBundle() {
+  const bundle = await rollup.rollup({
+    input: 'report/clients/bundle.js',
+    plugins: [
+      commonjs(),
+    ],
+  });
+
+  await bundle.write({
+    file: 'dist/report.js',
+    format: 'esm',
+  });
+}
+
+
+if (require.main === module) {
+  buildStandaloneReport();
+  buildEsModulesBundle();
+}
+
+module.exports = {
+  buildStandaloneReport,
+  buildViewerReport,
+};

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 {buildViewerReport} = require('./build-report.js');
 const htmlReportAssets = require('../report/report-assets.js');
 
 /**
@@ -30,6 +31,8 @@ async function run() {
     });
   });
 
+  await buildViewerReport();
+
   const app = new GhPagesApp({
     name: 'viewer',
     appDir: `${__dirname}/../lighthouse-viewer/app`,
@@ -43,7 +46,7 @@ async function run() {
     ],
     javascripts: [
       await generatorJsPromise,
-      htmlReportAssets.REPORT_JAVASCRIPT,
+      fs.readFileSync(__dirname + '/../dist/viewer-report.js', 'utf8'),
       fs.readFileSync(require.resolve('idb-keyval/dist/idb-keyval-min.js'), 'utf8'),
       {path: 'src/*'},
     ],

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/audits/audit.js

@@ -7,7 +7,7 @@
 
 const {isUnderTest} = require('../lib/lh-env.js');
 const statistics = require('../lib/statistics.js');
-const Util = require('../../report/renderer/util.js');
+const Util = require('../util-commonjs.js');
 
 const DEFAULT_PASS = 'defaultPass';
 

lighthouse-core/computed/resource-summary.js

@@ -11,7 +11,7 @@ const URL = require('../lib/url-shim.js');
 const NetworkRequest = require('../lib/network-request.js');
 const MainResource = require('./main-resource.js');
 const Budget = require('../config/budget.js');
-const Util = require('../../report/renderer/util.js');
+const Util = require('../util-commonjs.js');
 
 /** @typedef {{count: number, resourceSize: number, transferSize: number}} ResourceEntry */
 

lighthouse-core/lib/file-namer.js

@@ -34,7 +34,4 @@ function getFilenamePrefix(lhr) {
   return filenamePrefix.replace(/[/?<>\\:*|"]/g, '-');
 }
 
-// don't attempt to export in the browser.
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = {getFilenamePrefix};
-}
+module.exports = {getFilenamePrefix};

lighthouse-core/lib/url-shim.js

@@ -9,7 +9,7 @@
  * URL shim so we keep our code DRY
  */
 
-const Util = require('../../report/renderer/util.js');
+const Util = require('../util-commonjs.js');
 
 /** @typedef {import('./network-request.js')} NetworkRequest */
 

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/copy-util-commonjs.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+##
+# @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.
+##
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+LH_ROOT_DIR="$SCRIPT_DIR/../.."
+
+OUT_FILE="$LH_ROOT_DIR"/lighthouse-core/util-commonjs.js
+
+echo '// @ts-nocheck' > "$OUT_FILE"
+echo '// Auto-generated by lighthouse-core/scripts/copy-util-commonjs.sh' >> "$OUT_FILE"
+echo '// Temporary solution until all our code uses esmodules' >> "$OUT_FILE"
+sed 's/export class Util/class Util/g' "$LH_ROOT_DIR"/report/renderer/util.js >> "$OUT_FILE"
+echo 'module.exports = Util;' >> "$OUT_FILE"

lighthouse-core/scripts/i18n/collect-strings.js

@@ -14,7 +14,7 @@ const path = require('path');
 const assert = require('assert').strict;
 const tsc = require('typescript');
 const MessageParser = require('intl-messageformat-parser').default;
-const Util = require('../../../report/renderer/util.js');
+const Util = require('../../util-commonjs.js');
 const {collectAndBakeCtcStrings} = require('./bake-ctc-to-lhl.js');
 const {pruneObsoleteLhlMessages} = require('./prune-obsolete-lhl-messages.js');
 const {countTranslatedMessages} = require('./count-translated.js');

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,10 +39,21 @@ 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."
 
+# generate report.d.ts
+npx tsc --allowJs --declaration --emitDeclarationOnly dist/report.js
+
+# copy report code $fe_lh_dir
+fe_lh_report_dir="$fe_lh_dir/report/"
+cp dist/report.js dist/report.d.ts "$fe_lh_report_dir"
+echo -e "$check Report code copied."
+
 # copy report generator + cached resources into $fe_lh_dir
 fe_lh_report_assets_dir="$fe_lh_dir/report-assets/"
 rsync -avh dist/dt-report-resources/ "$fe_lh_report_assets_dir" --delete