report: convert generator to ES modules

build/build-bundle.js

@@ -116,7 +116,8 @@ async function buildBundle(entryPath, distPath, opts = {minify: true}) {
   // Don't include the stringified report in DevTools - see devtools-report-assets.js
   // Don't include in Lightrider - HTML generation isn't supported, so report assets aren't needed.
   if (isDevtools(entryPath) || isLightrider(entryPath)) {
-    modulesToIgnore.push(require.resolve('../report/generator/report-assets.js'));
+    shimsObj[require.resolve('../report/generator/report-assets.js')] =
+      'export const reportAssets = {}';
   }
 
   // Don't include locales in DevTools.

build/build-dt-report-resources.js

@@ -35,9 +35,8 @@ async function buildReportGenerator() {
     input: 'report/generator/report-generator.js',
     plugins: [
       rollupPlugins.shim({
-        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export default {}',
+        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export const flowReportAssets = {}',
       }),
-      rollupPlugins.commonjs(),
       rollupPlugins.nodeResolve(),
       rollupPlugins.removeModuleDirCalls(),
       rollupPlugins.inlineFs({verbose: Boolean(process.env.DEBUG)}),

build/build-lightrider-bundles.js

@@ -34,10 +34,9 @@ async function buildReportGenerator() {
       rollupPlugins.removeModuleDirCalls(),
       rollupPlugins.inlineFs({verbose: Boolean(process.env.DEBUG)}),
       rollupPlugins.shim({
-        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export default {}',
+        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export const flowReportAssets = {}',
         'fs': 'export default {}',
       }),
-      rollupPlugins.commonjs(),
     ],
   });
 

build/build-sample-reports.js

@@ -12,7 +12,7 @@ import path from 'path';
 
 import {swapLocale} from '../shared/localization/swap-locale.js';
 import {swapFlowLocale} from '../shared/localization/swap-flow-locale.js';
-import ReportGenerator from '../report/generator/report-generator.js';
+import {ReportGenerator} from '../report/generator/report-generator.js';
 import {defaultSettings} from '../core/config/constants.js';
 import lighthouse from '../core/index.js';
 import {LH_ROOT} from '../root.js';

build/build-viewer.js

@@ -18,12 +18,11 @@ async function buildReportGenerator() {
   const bundle = await rollup({
     input: 'report/generator/report-generator.js',
     plugins: [
-      rollupPlugins.removeModuleDirCalls(),
       rollupPlugins.shim({
-        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export default {}',
+        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export const flowReportAssets = {}',
       }),
-      rollupPlugins.commonjs(),
       rollupPlugins.nodeResolve(),
+      rollupPlugins.removeModuleDirCalls(),
       rollupPlugins.inlineFs({verbose: Boolean(process.env.DEBUG)}),
     ],
   });
@@ -52,11 +51,26 @@ async function main() {
     ],
     javascripts: [
       reportGeneratorJs,
+      'window.ReportGenerator = window.ReportGenerator.ReportGenerator',
       {path: require.resolve('pako/dist/pako_inflate.js')},
       {path: 'src/main.js', rollup: true, rollupPlugins: [
+        rollupPlugins.replace({
+          delimiters: ['', ''],
+          values: {
+            'getModuleDirectory(import.meta)': '""',
+          },
+        }),
         rollupPlugins.shim({
           './locales.js': 'export const locales = {};',
-          'module': 'export const createRequire = () => {throw new Error}',
+          'module': `
+            export const createRequire = () => {
+              return {
+                resolve() {
+                  throw new Error('createRequire.resolve is not supported in bundled Lighthouse');
+                },
+              };
+            };
+          `,
         }),
         rollupPlugins.typescript({
           tsconfig: 'flow-report/tsconfig.json',

core/fraggle-rock/api.js

@@ -9,7 +9,7 @@ import {UserFlow, auditGatherSteps} from './user-flow.js';
 import {snapshotGather} from './gather/snapshot-runner.js';
 import {startTimespanGather} from './gather/timespan-runner.js';
 import {navigationGather} from './gather/navigation-runner.js';
-import ReportGenerator from '../../report/generator/report-generator.js';
+import {ReportGenerator} from '../../report/generator/report-generator.js';
 import {Runner} from '../runner.js';
 
 /**

core/fraggle-rock/user-flow.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-import ReportGenerator from '../../report/generator/report-generator.js';
+import {ReportGenerator} from '../../report/generator/report-generator.js';
 import {snapshotGather} from './gather/snapshot-runner.js';
 import {startTimespanGather} from './gather/timespan-runner.js';
 import {navigationGather} from './gather/navigation-runner.js';

core/runner.js

@@ -17,7 +17,7 @@ import * as assetSaver from './lib/asset-saver.js';
 import fs from 'fs';
 import path from 'path';
 import {Sentry} from './lib/sentry.js';
-import ReportGenerator from '../report/generator/report-generator.js';
+import {ReportGenerator} from '../report/generator/report-generator.js';
 import {LighthouseError} from './lib/lh-error.js';
 import {lighthouseVersion} from '../root.js';
 import {getModuleDirectory} from '../esm-utils.js';

core/scripts/build-test-flow-report.js

@@ -10,12 +10,12 @@ import fs from 'fs';
 
 import open from 'open';
 
-import reportGenerator from '../../report/generator/report-generator.js';
+import {ReportGenerator} from '../../report/generator/report-generator.js';
 import {LH_ROOT} from '../../root.js';
 import {readJson} from '../test/test-utils.js';
 
 const flow = readJson('core/test/fixtures/fraggle-rock/reports/sample-flow-result.json');
-const htmlReport = reportGenerator.generateFlowReportHtml(flow);
+const htmlReport = ReportGenerator.generateFlowReportHtml(flow);
 const filepath = `${LH_ROOT}/dist/sample-reports/flow-report/index.html`;
 fs.writeFileSync(filepath, htmlReport);
 open(filepath);

flow-report/test/flow-report-pptr-test.ts

@@ -6,7 +6,7 @@
 
 import puppeteer, {Browser, Page} from 'puppeteer';
 
-import ReportGenerator from '../../report/generator/report-generator.js';
+import {ReportGenerator} from '../../report/generator/report-generator.js';
 import {flowResult} from './sample-flow';
 
 describe('Lighthouse Flow Report', () => {

report/generator/file-namer.js

@@ -54,4 +54,8 @@ function getFlowResultFilenamePrefix(flowResult) {
   return getFilenamePrefix(name, lhr.fetchTime);
 }
 
-module.exports = {getLhrFilenamePrefix, getFilenamePrefix, getFlowResultFilenamePrefix};
+export {
+  getLhrFilenamePrefix,
+  getFilenamePrefix,
+  getFlowResultFilenamePrefix,
+};

report/generator/flow-report-assets.js

@@ -5,16 +5,20 @@
  */
 'use strict';
 
-const fs = require('fs');
+import fs from 'fs';
+
+import {getModuleDirectory} from '../../esm-utils.js';
+
+const moduleDir = getModuleDirectory(import.meta);
 
 /* eslint-disable max-len */
-const FLOW_REPORT_TEMPLATE = fs.readFileSync(`${__dirname}/../../flow-report/assets/standalone-flow-template.html`, 'utf8');
-const REGULAR_REPORT_CSS = fs.readFileSync(__dirname + '/../assets/styles.css', 'utf8');
-const FLOW_REPORT_CSS = fs.readFileSync(`${__dirname}/../../flow-report/assets/styles.css`, 'utf8');
-const FLOW_REPORT_JAVASCRIPT = fs.readFileSync(`${__dirname}/../../dist/report/flow.js`, 'utf8');
+const FLOW_REPORT_TEMPLATE = fs.readFileSync(`${moduleDir}/../../flow-report/assets/standalone-flow-template.html`, 'utf8');
+const REGULAR_REPORT_CSS = fs.readFileSync(moduleDir + '/../assets/styles.css', 'utf8');
+const FLOW_REPORT_CSS = fs.readFileSync(`${moduleDir}/../../flow-report/assets/styles.css`, 'utf8');
+const FLOW_REPORT_JAVASCRIPT = fs.readFileSync(`${moduleDir}/../../dist/report/flow.js`, 'utf8');
 /* eslint-enable max-len */
 
-module.exports = {
+export const flowReportAssets = {
   FLOW_REPORT_TEMPLATE,
   FLOW_REPORT_CSS: [REGULAR_REPORT_CSS, FLOW_REPORT_CSS].join('\n'),
   FLOW_REPORT_JAVASCRIPT,

report/generator/report-assets.js

@@ -5,15 +5,18 @@
  */
 'use strict';
 
-const fs = require('fs');
+import fs from 'fs';
 
-const flowReportAssets = require('./flow-report-assets.js');
+import {flowReportAssets} from './flow-report-assets.js';
+import {getModuleDirectory} from '../../esm-utils.js';
 
-const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/../assets/standalone-template.html',
+const moduleDir = getModuleDirectory(import.meta);
+
+const REPORT_TEMPLATE = fs.readFileSync(moduleDir + '/../assets/standalone-template.html',
     'utf8');
-const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/../../dist/report/standalone.js', 'utf8');
+const REPORT_JAVASCRIPT = fs.readFileSync(moduleDir + '/../../dist/report/standalone.js', 'utf8');
 
-module.exports = {
+export const reportAssets = {
   REPORT_TEMPLATE,
   REPORT_JAVASCRIPT,
   // Flow report assets are not needed for every bundle.

report/generator/report-generator.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const htmlReportAssets = require('./report-assets.js');
+import {reportAssets} from './report-assets.js';
 
 /** @typedef {import('../../types/lhr/lhr').default} LHResult */
 /** @typedef {import('../../types/lhr/flow').default} FlowResult */
@@ -50,9 +50,9 @@ class ReportGenerator {
     const sanitizedJson = ReportGenerator.sanitizeJson(lhr);
     // terser does its own sanitization, but keep this basic replace for when
     // we want to generate a report without minification.
-    const sanitizedJavascript = htmlReportAssets.REPORT_JAVASCRIPT.replace(/<\//g, '\\u003c/');
+    const sanitizedJavascript = reportAssets.REPORT_JAVASCRIPT.replace(/<\//g, '\\u003c/');
 
-    return ReportGenerator.replaceStrings(htmlReportAssets.REPORT_TEMPLATE, [
+    return ReportGenerator.replaceStrings(reportAssets.REPORT_TEMPLATE, [
       {search: '%%LIGHTHOUSE_JSON%%', replacement: sanitizedJson},
       {search: '%%LIGHTHOUSE_JAVASCRIPT%%', replacement: sanitizedJavascript},
     ]);
@@ -65,11 +65,11 @@ class ReportGenerator {
    */
   static generateFlowReportHtml(flow) {
     const sanitizedJson = ReportGenerator.sanitizeJson(flow);
-    return ReportGenerator.replaceStrings(htmlReportAssets.FLOW_REPORT_TEMPLATE, [
+    return ReportGenerator.replaceStrings(reportAssets.FLOW_REPORT_TEMPLATE, [
       /* eslint-disable max-len */
       {search: '%%LIGHTHOUSE_FLOW_JSON%%', replacement: sanitizedJson},
-      {search: '%%LIGHTHOUSE_FLOW_JAVASCRIPT%%', replacement: htmlReportAssets.FLOW_REPORT_JAVASCRIPT},
-      {search: '/*%%LIGHTHOUSE_FLOW_CSS%%*/', replacement: htmlReportAssets.FLOW_REPORT_CSS},
+      {search: '%%LIGHTHOUSE_FLOW_JAVASCRIPT%%', replacement: reportAssets.FLOW_REPORT_JAVASCRIPT},
+      {search: '/*%%LIGHTHOUSE_FLOW_CSS%%*/', replacement: reportAssets.FLOW_REPORT_CSS},
       /* eslint-enable max-len */
     ]);
   }
@@ -174,4 +174,4 @@ class ReportGenerator {
   }
 }
 
-module.exports = ReportGenerator;
+export {ReportGenerator};

report/generator/tsconfig.json

@@ -11,5 +11,6 @@
   ],
   "include": [
     "**/*.js",
+    "../../esm-utils.js",
   ],
 }

report/test/generator/file-namer-test.js

@@ -5,9 +5,9 @@
  */
 'use strict';
 
-const assert = require('assert').strict;
+import {strict as assert} from 'assert';
 
-const getLhrFilenamePrefix = require('../../generator/file-namer.js').getLhrFilenamePrefix;
+import {getLhrFilenamePrefix} from '../../generator/file-namer.js';
 
 describe('file-namer helper', () => {
   it('generates filename prefixes', () => {

report/test/generator/report-generator-test.js

@@ -7,16 +7,15 @@
 
 /* eslint-disable no-irregular-whitespace */
 
-const assert = require('assert').strict;
-const fs = require('fs');
+import {strict as assert} from 'assert';
+import fs from 'fs';
 
-const csvValidator = require('csv-validator');
+import csvValidator from 'csv-validator';
 
-const ReportGenerator = require('../../generator/report-generator.js');
-// const {readJson} = require('../../../root.js');
-// TODO(esmodules): remove when this folder is esm
-// const sampleResults = readJson('core/test/results/sample_v2.json');
-const sampleResults = require('../../../core/test/results/sample_v2.json');
+import {ReportGenerator} from '../../generator/report-generator.js';
+import {readJson} from '../../../core/test/test-utils.js';
+
+const sampleResults = readJson('core/test/results/sample_v2.json');
 
 describe('ReportGenerator', () => {
   describe('#replaceStrings', () => {

report/test/renderer/report-renderer-axe-test.js

@@ -6,7 +6,7 @@
 
 import puppeteer from 'puppeteer';
 
-import reportGenerator from '../../generator/report-generator.js';
+import {ReportGenerator} from '../../generator/report-generator.js';
 import {axeSource} from '../../../core/lib/axe.js';
 import {readJson} from '../../../core/test/test-utils.js';
 
@@ -28,7 +28,7 @@ describe('ReportRendererAxe', () => {
     // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
     it('renders without axe violations', async () => {
       const page = await browser.newPage();
-      const htmlReport = reportGenerator.generateReportHtml(sampleResults);
+      const htmlReport = ReportGenerator.generateReportHtml(sampleResults);
       await page.setContent(htmlReport);
 
       // Superset of Lighthouse's aXe config

report/test/renderer/report-ui-features-test.js

@@ -9,7 +9,7 @@ import {strict as assert} from 'assert';
 import jsdom from 'jsdom';
 import jestMock from 'jest-mock';
 
-import reportAssets from '../../generator/report-assets.js';
+import {reportAssets} from '../../generator/report-assets.js';
 import {Util} from '../../renderer/util.js';
 import {DOM} from '../../renderer/dom.js';
 import {DetailsRenderer} from '../../renderer/details-renderer.js';

viewer/types/viewer.d.ts

@@ -4,7 +4,7 @@
  * 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.
  */
 
-import _ReportGenerator = require('../../report/generator/report-generator.js');
+import {ReportGenerator as _ReportGenerator} from '../../report/generator/report-generator.js';
 import {Logger as _Logger} from '../../report/renderer/logger.js';
 import {LighthouseReportViewer as _LighthouseReportViewer} from '../app/src/lighthouse-report-viewer.js';
 import 'google.analytics';