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

build/build-report.js

@@ -5,42 +5,84 @@
  */
 '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 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 if (process.argv[2] === '--only-bundle') {
+    buildEsModulesBundle();
+  } else {
+    buildStandaloneReport();
+    buildEsModulesBundle();
+  }
 }
 
 module.exports = {
   buildStandaloneReport,
-  concatRendererCode,
+  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');
 
 /**
@@ -44,6 +45,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: `${__dirname}/../lighthouse-treemap/app`,
@@ -64,9 +67,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'},
+      fs.readFileSync(__dirname + '/../dist/report/treemap.js', 'utf8'),
       {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');
 
 /**
@@ -31,6 +31,8 @@ async function run() {
     });
   });
 
+  await buildViewerReport();
+
   const app = new GhPagesApp({
     name: 'viewer',
     appDir: `${__dirname}/../lighthouse-viewer/app`,
@@ -44,7 +46,7 @@ async function run() {
     ],
     javascripts: [
       await generatorJsPromise,
-      concatRendererCode(),
+      fs.readFileSync(__dirname + '/../dist/report/viewer.js', 'utf8'),
       fs.readFileSync(require.resolve('idb-keyval/dist/idb-keyval-min.js'), 'utf8'),
       {path: 'src/*'},
     ],

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/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' "$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 expect = require('expect');
 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/roll-to-devtools.sh

@@ -39,13 +39,21 @@ mkdir -p "$fe_lh_dir"
 
 lh_bg_js="dist/lighthouse-dt-bundle.js"
 
-yarn build-report
+yarn build-report --only-bundle
 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

lighthouse-core/test/test-utils.js

@@ -8,6 +8,8 @@
 /* eslint-env jest */
 
 const fs = require('fs');
+const url = require('url');
+const path = require('path');
 const i18n = require('../lib/i18n/i18n.js');
 const mockCommands = require('./gather/mock-commands.js');
 const {default: {toBeCloseTo}} = require('expect/build/matchers.js');
@@ -283,6 +285,14 @@ function isNode12SmallIcu() {
     Intl.NumberFormat.supportedLocalesOf('es').length === 0;
 }
 
+/**
+ * @param {ImportMeta} importMeta
+ * @return {string}
+ */
+function esmGetDirname(importMeta) {
+  return path.dirname(url.fileURLToPath(importMeta.url));
+}
+
 module.exports = {
   getProtoRoundTrip,
   loadSourceMapFixture,
@@ -293,5 +303,6 @@ module.exports = {
   flushAllTimersAndMicrotasks,
   makeMocksForGatherRunner,
   isNode12SmallIcu,
+  esmGetDirname,
   ...mockCommands,
 };