report: convert to ES modules (#12702)

Author: connorjclark

.github/workflows/ci.yml

@@ -49,6 +49,7 @@ jobs:
     - run: yarn test-legacy-javascript
     - run: yarn i18n:checks
     - run: yarn dogfood-lhci
+    - run: bash 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

build/build-lightrider-bundles.js

@@ -10,6 +10,7 @@ const fs = require('fs');
 const path = require('path');
 const bundleBuilder = require('./build-bundle.js');
 const {minifyFileTransform} = require('./build-utils.js');
+const {buildPsiReport} = require('./build-report.js');
 const {LH_ROOT} = require('../root.js');
 
 const distDir = path.join(LH_ROOT, 'dist', 'lightrider');
@@ -53,6 +54,7 @@ async function run() {
   await Promise.all([
     buildEntryPoint(),
     buildReportGenerator(),
+    buildPsiReport(),
   ]);
 }
 

build/build-report.js

@@ -5,42 +5,96 @@
  */
 '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');
-}
+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 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);
+  const bundle = await rollup.rollup({
+    input: 'report/clients/standalone.js',
+    plugins: [
+      commonjs(),
+      terser(),
+    ],
+  });
+
+  await bundle.write({
+    file: 'dist/report/standalone.js',
+    format: 'iife',
+  });
+}
+
+async function buildPsiReport() {
+  const bundle = await rollup.rollup({
+    input: 'report/clients/psi.js',
+    plugins: [
+      commonjs(),
+    ],
+  });
+
+  await bundle.write({
+    file: 'dist/report/psi.js',
+    format: 'esm',
+  });
+}
+
+async function buildViewerReport() {
+  const bundle = await rollup.rollup({
+    input: 'report/clients/viewer.js',
+    plugins: [
+      commonjs(),
+    ],
+  });
+
+  await bundle.write({
+    file: 'dist/report/viewer.js',
+    format: 'iife',
+  });
+}
+
+async function buildTreemapReport() {
+  const bundle = await rollup.rollup({
+    input: 'report/clients/treemap.js',
+    plugins: [
+      commonjs(),
+    ],
+  });
+
+  await bundle.write({
+    file: 'dist/report/treemap.js',
+    format: 'iife',
+  });
+}
+
+async function buildEsModulesBundle() {
+  const bundle = await rollup.rollup({
+    input: 'report/clients/bundle.js',
+    plugins: [
+      commonjs(),
+    ],
+  });
+
+  await bundle.write({
+    file: 'dist/report/bundle.js',
+    format: 'esm',
+  });
 }
 
 if (require.main === module) {
-  buildStandaloneReport();
+  if (process.argv[2] === '--only-standalone') {
+    buildStandaloneReport();
+  } else {
+    buildStandaloneReport();
+    buildEsModulesBundle();
+  }
 }
 
 module.exports = {
   buildStandaloneReport,
-  concatRendererCode,
+  buildPsiReport,
+  buildViewerReport,
+  buildTreemapReport,
 };

build/build-treemap.js

@@ -8,6 +8,7 @@
 /** @typedef {import('../lighthouse-core/lib/i18n/locales').LhlMessages} LhlMessages */
 
 const fs = require('fs');
+const {buildTreemapReport} = require('./build-report.js');
 const GhPagesApp = require('./gh-pages-app.js');
 const {LH_ROOT} = require('../root.js');
 
@@ -45,6 +46,8 @@ function buildStrings() {
  * Build treemap app, optionally deploying to gh-pages if `--deploy` flag was set.
  */
 async function run() {
+  await buildTreemapReport();
+
   const app = new GhPagesApp({
     name: 'treemap',
     appDir: `${LH_ROOT}/lighthouse-treemap/app`,
@@ -65,9 +68,7 @@ async function run() {
       fs.readFileSync(require.resolve('pako/dist/pako_inflate.js'), 'utf-8'),
       /* eslint-enable max-len */
       buildStrings(),
-      {path: '../../report/renderer/logger.js'},
-      {path: '../../report/renderer/i18n.js'},
-      {path: '../../report/renderer/text-encoding.js'},
+      {path: '../../dist/report/treemap.js'},
       {path: '../../lighthouse-viewer/app/src/drag-and-drop.js'},
       {path: '../../lighthouse-viewer/app/src/github-api.js'},
       {path: '../../lighthouse-viewer/app/src/firebase-auth.js'},

build/build-viewer.js

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

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

@@ -10,7 +10,7 @@ const NetworkRecords = require('./network-records.js');
 const URL = require('../lib/url-shim.js');
 const NetworkRequest = require('../lib/network-request.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/scripts/copy-util-commonjs.sh

@@ -0,0 +1,20 @@
+#!/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.
+##
+
+# TODO(esmodules): delete when consumers of util.js are all esm.
+
+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; s/export const UIStrings = Util.UIStrings;//g' "$LH_ROOT_DIR"/report/renderer/util.js >> "$OUT_FILE"
+echo 'module.exports = Util;' >> "$OUT_FILE"

lighthouse-core/scripts/dogfood-lhci.sh

@@ -36,6 +36,7 @@ if ! echo "$CHANGED_FILES" | grep -E 'report|lhci' > /dev/null; then
 fi
 
 # Generate HTML reports in ./dist/now/
+yarn build-report
 yarn now-build
 
 # Install LHCI

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

@@ -14,7 +14,7 @@ const path = require('path');
 const expect = require('expect');
 const tsc = require('typescript');
 const MessageParser = require('intl-messageformat-parser').default;
-const Util = require('../../../report/renderer/util.js');
+const Util = require('../../../lighthouse-core/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');
@@ -41,6 +41,7 @@ const ignoredPathComponents = [
   '**/test/**',
   '**/*-test.js',
   '**/*-renderer.js',
+  '**/util-commonjs.js',
   'lighthouse-treemap/app/src/main.js',
 ];
 

lighthouse-core/scripts/roll-to-devtools.sh

@@ -42,9 +42,17 @@ lh_bg_js="dist/lighthouse-dt-bundle.js"
 yarn build-report
 yarn build-devtools
 
-# copy lighthouse-dt-bundle (potentially stale)
+# copy lighthouse-dt-bundle
 cp -pPR "$lh_bg_js" "$fe_lh_dir/lighthouse-dt-bundle.js"
-echo -e "$check (Potentially stale) lighthouse-dt-bundle copied."
+echo -e "$check lighthouse-dt-bundle copied."
+
+# generate bundle.d.ts
+npx tsc --allowJs --declaration --emitDeclarationOnly dist/report/bundle.js
+
+# copy report code $fe_lh_dir
+fe_lh_report_dir="$fe_lh_dir/report/"
+cp dist/report/bundle.js dist/report/bundle.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/"

lighthouse-core/test/lib/page-functions-test.js

@@ -5,18 +5,31 @@
  */
 'use strict';
 
-const assert = require('assert').strict;
-const jsdom = require('jsdom');
-const DOM = require('../../../report/renderer/dom.js');
-const pageFunctions = require('../../lib/page-functions.js');
+// TODO(esmodules): Node 14, 16 crash with `--experimental-vm-modules` if require and import
+// are used in the same test file.
+// See https://github.com/GoogleChrome/lighthouse/pull/12702#issuecomment-876832620
+
+/** @type {import('assert').strict} */
+let assert;
+/** @type {import('jsdom').strict} */
+let jsdom;
+/** @type {import('../../lib/page-functions.js')} */
+let pageFunctions;
+/** @type {import('../../../report/renderer/dom.js').DOM} */
+let DOM;
 
 /* eslint-env jest */
 
 describe('Page Functions', () => {
   const url = 'http://www.example.com';
   let dom;
 
-  beforeAll(() => {
+  beforeAll(async () => {
+    assert = (await import('assert')).strict;
+    jsdom = await import('jsdom');
+    pageFunctions = (await import('../../lib/page-functions.js')).default;
+    DOM = (await import('../../../report/renderer/dom.js')).DOM;
+
     const {document, ShadowRoot, Node, HTMLElement} = new jsdom.JSDOM('', {url}).window;
     global.ShadowRoot = ShadowRoot;
     global.Node = Node;