clients: convert devtools and lightrider entries to ES modules (#13722)

Author: connorjclark

clients/devtools-entry.js clients/devtools/devtools-entry.js

@@ -7,20 +7,22 @@
 
 /* global globalThis */
 
-const lighthouse = require('../lighthouse-core/index.js');
-const {navigation, startTimespan, snapshot} = require('../lighthouse-core/fraggle-rock/api.js');
-const RawProtocol = require('../lighthouse-core/gather/connections/raw.js');
-const log = require('lighthouse-logger');
-const {lookupLocale} = require('../lighthouse-core/lib/i18n/i18n.js');
-const {registerLocaleData, getCanonicalLocales} = require('../shared/localization/format.js');
-const constants = require('../lighthouse-core/config/constants.js');
+import {Buffer} from 'buffer';
 
-/** @typedef {import('../lighthouse-core/gather/connections/connection.js')} Connection */
+import lighthouse from '../../lighthouse-core/index.js';
+import {navigation, startTimespan, snapshot} from '../../lighthouse-core/fraggle-rock/api.js';
+import RawProtocol from '../../lighthouse-core/gather/connections/raw.js';
+import log from 'lighthouse-logger';
+import {lookupLocale} from '../../lighthouse-core/lib/i18n/i18n.js';
+import {registerLocaleData, getCanonicalLocales} from '../../shared/localization/format.js';
+import constants from '../../lighthouse-core/config/constants.js';
+
+/** @typedef {import('../../lighthouse-core/gather/connections/connection.js')} Connection */
 
 // Rollup seems to overlook some references to `Buffer`, so it must be made explicit.
 // (`parseSourceMapFromDataUrl` breaks without this)
 /** @type {BufferConstructor} */
-globalThis.Buffer = require('buffer').Buffer;
+globalThis.Buffer = Buffer;
 
 /**
  * Returns a config, which runs only certain categories.

clients/devtools/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

clients/lightrider/lightrider-entry.js

@@ -7,23 +7,28 @@
 
 /* global globalThis */
 
-const lighthouse = require('../../lighthouse-core/index.js');
+import {Buffer} from 'buffer';
 
-const LHError = require('../../lighthouse-core/lib/lh-error.js');
-const preprocessor = require('../../lighthouse-core/lib/proto-preprocessor.js');
-const assetSaver = require('../../lighthouse-core/lib/asset-saver.js');
+import lighthouse from '../../lighthouse-core/index.js';
+import LHError from '../../lighthouse-core/lib/lh-error.js';
+import preprocessor from '../../lighthouse-core/lib/proto-preprocessor.js';
+import assetSaver from '../../lighthouse-core/lib/asset-saver.js';
+
+import mobileConfig from '../../lighthouse-core/config/lr-mobile-config.js';
+import desktopConfig from '../../lighthouse-core/config/lr-desktop-config.js';
 
 /** @type {Record<'mobile'|'desktop', LH.Config.Json>} */
 const LR_PRESETS = {
-  mobile: require('../../lighthouse-core/config/lr-mobile-config.js'),
-  desktop: require('../../lighthouse-core/config/lr-desktop-config.js'),
+  mobile: mobileConfig,
+  desktop: desktopConfig,
 };
 
 /** @typedef {import('../../lighthouse-core/gather/connections/connection.js')} Connection */
 
 // Rollup seems to overlook some references to `Buffer`, so it must be made explicit.
 // (`parseSourceMapFromDataUrl` breaks without this)
-globalThis.Buffer = require('buffer').Buffer;
+/** @type {BufferConstructor} */
+globalThis.Buffer = Buffer;
 
 /**
  * Run lighthouse for connection and provide similar results as in CLI.
@@ -35,7 +40,7 @@ globalThis.Buffer = require('buffer').Buffer;
  * @param {{lrDevice?: 'desktop'|'mobile', categoryIDs?: Array<string>, logAssets: boolean, configOverride?: LH.Config.Json}} lrOpts Options coming from Lightrider
  * @return {Promise<string>}
  */
-async function runLighthouseInLR(connection, url, flags, lrOpts) {
+export async function runLighthouseInLR(connection, url, flags, lrOpts) {
   const {lrDevice, categoryIDs, logAssets, configOverride} = lrOpts;
 
   // Certain fixes need to kick in under LR, see https://github.com/GoogleChrome/lighthouse/issues/5839
@@ -98,13 +103,6 @@ async function runLighthouseInLR(connection, url, flags, lrOpts) {
   }
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-  // Export for require()ing into unit tests.
-  module.exports = {
-    runLighthouseInLR,
-  };
-}
-
 // Expose on window for browser-residing consumers of file.
 if (typeof window !== 'undefined') {
   // @ts-expect-error - not worth typing a property on `window`.

clients/lightrider/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

clients/test/lightrider-entry-test.js clients/test/lightrider/lightrider-entry-test.js

@@ -5,10 +5,11 @@
  */
 'use strict';
 
-const assert = require('assert').strict;
-const lhBackground = require('../lightrider/lightrider-entry.js');
-const Runner = require('../../lighthouse-core/runner.js');
-const LHError = require('../../lighthouse-core/lib/lh-error.js');
+import {jest} from '@jest/globals';
+import {strict as assert} from 'assert';
+import {runLighthouseInLR} from '../../lightrider/lightrider-entry.js';
+import Runner from '../../../lighthouse-core/runner.js';
+import LHError from '../../../lighthouse-core/lib/lh-error.js';
 
 /* eslint-env jest */
 
@@ -31,7 +32,7 @@ describe('lightrider-entry', () => {
       const url = 'https://example.com';
       const output = 'json';
 
-      const result = await lhBackground.runLighthouseInLR(mockConnection, url, {output}, {});
+      const result = await runLighthouseInLR(mockConnection, url, {output}, {});
       const parsedResult = JSON.parse(result);
       assert.strictEqual(parsedResult.runtimeError.code, connectionError.code);
       assert.ok(parsedResult.runtimeError.message.includes(connectionError.friendlyMessage));
@@ -52,7 +53,7 @@ describe('lightrider-entry', () => {
       const url = 'https://example.com';
       const output = 'json';
 
-      const result = await lhBackground.runLighthouseInLR(mockConnection, url, {output}, {});
+      const result = await runLighthouseInLR(mockConnection, url, {output}, {});
       const parsedResult = JSON.parse(result);
       assert.strictEqual(parsedResult.runtimeError.code, LHError.UNKNOWN_ERROR);
       assert.ok(parsedResult.runtimeError.message.includes(errorMsg));
@@ -64,7 +65,7 @@ describe('lightrider-entry', () => {
       const mockConnection = {};
       const url = 'https://example.com';
 
-      await lhBackground.runLighthouseInLR(mockConnection, url, {}, {});
+      await runLighthouseInLR(mockConnection, url, {}, {});
       const config = runStub.mock.calls[0][1].config;
       assert.equal(config.settings.channel, 'lr');
 
@@ -78,7 +79,7 @@ describe('lightrider-entry', () => {
       const url = 'https://example.com';
 
       const lrDevice = 'desktop';
-      await lhBackground.runLighthouseInLR(mockConnection, url, {}, {lrDevice});
+      await runLighthouseInLR(mockConnection, url, {}, {lrDevice});
       const config = runStub.mock.calls[0][1].config;
       assert.equal(config.settings.formFactor, 'desktop');
 
@@ -92,7 +93,7 @@ describe('lightrider-entry', () => {
       const url = 'https://example.com';
 
       const lrDevice = 'mobile';
-      await lhBackground.runLighthouseInLR(mockConnection, url, {}, {lrDevice});
+      await runLighthouseInLR(mockConnection, url, {}, {lrDevice});
       const config = runStub.mock.calls[0][1].config;
       assert.equal(config.settings.formFactor, 'mobile');
 
@@ -111,7 +112,7 @@ describe('lightrider-entry', () => {
           onlyAudits: ['network-requests'],
         },
       };
-      await lhBackground.runLighthouseInLR(mockConnection, url, {}, {configOverride});
+      await runLighthouseInLR(mockConnection, url, {}, {configOverride});
       const config = runStub.mock.calls[0][1].config;
       assert.equal(config.settings.onlyAudits.length, 1);
       assert.equal(config.settings.onlyAudits[0], 'network-requests');
@@ -141,7 +142,7 @@ describe('lightrider-entry', () => {
       const lrFlags = {
         logAssets: true,
       };
-      const resultJson = await lhBackground.runLighthouseInLR(mockConnection, url, {}, lrFlags);
+      const resultJson = await runLighthouseInLR(mockConnection, url, {}, lrFlags);
       const result = JSON.parse(resultJson);
       expect(result.artifacts).toMatchObject({
         Artifact: {

clients/test/lightrider/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

package.json

@@ -20,7 +20,7 @@
     "build-extension": "yarn build-extension-chrome && yarn build-extension-firefox",
     "build-extension-chrome": "node ./build/build-extension.js chrome",
     "build-extension-firefox": "node ./build/build-extension.js firefox",
-    "build-devtools": "yarn reset-link && node ./build/build-bundle.js clients/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js",
+    "build-devtools": "yarn reset-link && node ./build/build-bundle.js clients/devtools/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js",
     "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",