lighthouse 9.6.8 → 10.0.0

package/report/test/renderer/report-utils-test.js

@@ -0,0 +1,219 @@
+/**
+ * @license Copyright 2017 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.
+ */
+
+import assert from 'assert/strict';
+
+import {ReportUtils} from '../../renderer/report-utils.js';
+import {I18nFormatter} from '../../renderer/i18n-formatter.js';
+import {readJson} from '../../../core/test/test-utils.js';
+import {Globals} from '../../renderer/report-globals.js';
+
+const sampleResult = readJson('../../../core/test/results/sample_v2.json', import.meta);
+
+describe('util helpers', () => {
+  beforeEach(() => {
+    Globals.apply({
+      providedStrings: {},
+      i18n: new I18nFormatter('en'),
+      reportJson: null,
+    });
+  });
+
+  afterEach(() => {
+    Globals.i18n = undefined;
+  });
+
+  it('calculates a score ratings', () => {
+    assert.equal(ReportUtils.calculateRating(0.0), 'fail');
+    assert.equal(ReportUtils.calculateRating(0.10), 'fail');
+    assert.equal(ReportUtils.calculateRating(0.45), 'fail');
+    assert.equal(ReportUtils.calculateRating(0.5), 'average');
+    assert.equal(ReportUtils.calculateRating(0.75), 'average');
+    assert.equal(ReportUtils.calculateRating(0.80), 'average');
+    assert.equal(ReportUtils.calculateRating(0.90), 'pass');
+    assert.equal(ReportUtils.calculateRating(1.00), 'pass');
+  });
+
+  it('builds device emulation string', () => {
+    const get = settings => ReportUtils.getEmulationDescriptions(settings).deviceEmulation;
+    /* eslint-disable max-len */
+    assert.equal(get({formFactor: 'mobile', screenEmulation: {disabled: false, mobile: true}}), 'Emulated Moto G Power');
+    assert.equal(get({formFactor: 'mobile', screenEmulation: {disabled: true, mobile: true}}), 'No emulation');
+    assert.equal(get({formFactor: 'mobile', screenEmulation: {disabled: true, mobile: true}, channel: 'devtools'}), 'Emulated Moto G Power');
+    assert.equal(get({formFactor: 'desktop', screenEmulation: {disabled: false, mobile: false}}), 'Emulated Desktop');
+    assert.equal(get({formFactor: 'desktop', screenEmulation: {disabled: true, mobile: false}}), 'No emulation');
+    assert.equal(get({formFactor: 'desktop', screenEmulation: {disabled: true, mobile: true}, channel: 'devtools'}), 'Emulated Desktop');
+    /* eslint-enable max-len */
+  });
+
+  it('builds throttling strings when provided', () => {
+    const descriptions = ReportUtils.getEmulationDescriptions({
+      throttlingMethod: 'provided',
+      screenEmulation: {disabled: true},
+    });
+    assert.equal(descriptions.cpuThrottling, 'Provided by environment');
+    assert.equal(descriptions.networkThrottling, 'Provided by environment');
+    assert.equal(descriptions.screenEmulation, undefined);
+  });
+
+  it('builds throttling strings when devtools', () => {
+    const descriptions = ReportUtils.getEmulationDescriptions({
+      throttlingMethod: 'devtools',
+      throttling: {
+        cpuSlowdownMultiplier: 4.5,
+        requestLatencyMs: 565,
+        downloadThroughputKbps: 1400.00000000001,
+        uploadThroughputKbps: 600,
+      },
+      screenEmulation: {disabled: true},
+    });
+
+    // eslint-disable-next-line max-len
+    assert.equal(descriptions.networkThrottling, '565\xa0ms HTTP RTT, 1,400\xa0kb/s down, 600\xa0kb/s up (DevTools)');
+    assert.equal(descriptions.cpuThrottling, '4.5x slowdown (DevTools)');
+  });
+
+  it('builds throttling strings when simulate', () => {
+    const descriptions = ReportUtils.getEmulationDescriptions({
+      throttlingMethod: 'simulate',
+      throttling: {
+        cpuSlowdownMultiplier: 2,
+        rttMs: 150,
+        throughputKbps: 1600,
+      },
+      screenEmulation: {width: 100, height: 100, deviceScaleFactor: 2},
+    });
+
+    // eslint-disable-next-line max-len
+    assert.equal(descriptions.networkThrottling, '150\xa0ms TCP RTT, 1,600\xa0kb/s throughput (Simulated)');
+    assert.equal(descriptions.cpuThrottling, '2x slowdown (Simulated)');
+    assert.equal(descriptions.screenEmulation, '100x100, DPR 2');
+  });
+
+  describe('#prepareReportResult', () => {
+    it('appends stack pack descriptions to auditRefs', () => {
+      const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
+      const iconDataURL = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3C/svg%3E';
+      clonedSampleResult.stackPacks = [{
+        id: 'snackpack',
+        title: 'SnackPack',
+        iconDataURL,
+        descriptions: {
+          'unused-css-rules': 'Consider using snacks in packs.',
+        },
+      }];
+      const preparedResult = ReportUtils.prepareReportResult(clonedSampleResult);
+
+      const perfAuditRefs = preparedResult.categories.performance.auditRefs;
+      const unusedCssRef = perfAuditRefs.find(ref => ref.id === 'unused-css-rules');
+      assert.deepStrictEqual(unusedCssRef.stackPacks, [{
+        title: 'SnackPack',
+        iconDataURL,
+        description: 'Consider using snacks in packs.',
+      }]);
+
+      // No stack pack on audit wth no stack pack.
+      const interactiveRef = perfAuditRefs.find(ref => ref.id === 'interactive');
+      assert.strictEqual(interactiveRef.stackPacks, undefined);
+    });
+
+    it('identifies entities on items of tables with urls', () => {
+      const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
+
+      const auditsWithTableDetails = Object.values(clonedSampleResult.audits)
+        .filter(audit => audit.details?.type === 'table');
+      assert.notEqual(auditsWithTableDetails.length, 0);
+
+      // collect audit names that might have urls
+      const auditsThatDontHaveUrls = ['bf-cache', 'font-size']; // no urls in data-set
+      const auditsWithUrls = auditsWithTableDetails.filter(audit => {
+        if (auditsThatDontHaveUrls.includes(audit.id)) return false;
+        const urlFields = ['url', 'source-location'];
+        return audit.details.headings.some(heading =>
+          urlFields.includes(heading.valueType) ||
+          urlFields.includes(heading.subItemsHeading?.valueType)
+        );
+      }).map(audit => audit.id);
+      assert.notEqual(auditsWithUrls.length, 0);
+
+      const preparedResult = ReportUtils.prepareReportResult(clonedSampleResult);
+
+      // ensure each audit that had urls detected to have marked entities.
+      for (const id of auditsWithUrls) {
+        const foundEntities = preparedResult.audits[id].details.items.some(item => item.entity);
+        assert.equal(foundEntities, true);
+      }
+    });
+  });
+
+  describe('#shouldDisplayAsFraction', () => {
+    it('returns true for timespan and snapshot', () => {
+      expect(ReportUtils.shouldDisplayAsFraction('navigation')).toEqual(false);
+      expect(ReportUtils.shouldDisplayAsFraction('timespan')).toEqual(true);
+      expect(ReportUtils.shouldDisplayAsFraction('snapshot')).toEqual(true);
+      expect(ReportUtils.shouldDisplayAsFraction(undefined)).toEqual(false);
+    });
+  });
+
+  describe('#calculateCategoryFraction', () => {
+    it('returns passed audits and total audits', () => {
+      const category = {
+        id: 'performance',
+        auditRefs: [
+          {weight: 3, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 2, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 0, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}, group: 'metrics'},
+        ],
+      };
+      const fraction = ReportUtils.calculateCategoryFraction(category);
+      expect(fraction).toEqual({
+        numPassableAudits: 4,
+        numPassed: 3,
+        numInformative: 0,
+        totalWeight: 6,
+      });
+    });
+
+    it('ignores manual audits, N/A audits, and hidden audits', () => {
+      const category = {
+        id: 'performance',
+        auditRefs: [
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'hidden'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'metrics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'notApplicable'}, group: 'metrics'},
+        ],
+      };
+      const fraction = ReportUtils.calculateCategoryFraction(category);
+      expect(fraction).toEqual({
+        numPassableAudits: 1,
+        numPassed: 1,
+        numInformative: 0,
+        totalWeight: 1,
+      });
+    });
+
+    it('tracks informative audits separately', () => {
+      const category = {
+        id: 'performance',
+        auditRefs: [
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 0, result: {score: 1, scoreDisplayMode: 'informative'}, group: 'metrics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'informative'}, group: 'metrics'},
+        ],
+      };
+      const fraction = ReportUtils.calculateCategoryFraction(category);
+      expect(fraction).toEqual({
+        numPassableAudits: 2,
+        numPassed: 2,
+        numInformative: 2,
+        totalWeight: 2,
+      });
+    });
+  });
+});

package/report/test/renderer/snippet-renderer-test.js

@@ -3,18 +3,15 @@
  * 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';
 
-/* eslint-env jest */
-
-import {strict as assert} from 'assert';
+import assert from 'assert/strict';
 
 import jsdom from 'jsdom';
 
-import {Util} from '../../renderer/util.js';
-import {I18n} from '../../renderer/i18n.js';
+import {I18nFormatter} from '../../renderer/i18n-formatter.js';
 import {DOM} from '../../renderer/dom.js';
 import {SnippetRenderer} from '../../renderer/snippet-renderer.js';
+import {Globals} from '../../renderer/report-globals.js';
 
 /* Generates a snippet lines array like this (for a single range from 1 to 4):
   [
@@ -57,14 +54,18 @@ function makeSnippetDetails({
 describe('DetailsRenderer', () => {
   let dom;
 
-  beforeAll(() => {
-    Util.i18n = new I18n('en', {...Util.UIStrings});
+  before(() => {
+    Globals.apply({
+      providedStrings: {},
+      i18n: new I18nFormatter('en'),
+      reportJson: null,
+    });
     const {document} = new jsdom.JSDOM().window;
     dom = new DOM(document);
   });
 
-  afterAll(() => {
-    Util.i18n = undefined;
+  after(() => {
+    Globals.i18n = undefined;
   });
 
   function renderSnippet(details) {

package/report/test/renderer/text-encoding-test.js

@@ -3,7 +3,6 @@
  * 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';
 
 import fs from 'fs';
 
@@ -12,14 +11,12 @@ import pako from 'pako';
 import {TextEncoding} from '../../renderer/text-encoding.js';
 import {LH_ROOT} from '../../../root.js';
 
-/* eslint-env jest */
-
 describe('TextEncoding', () => {
-  beforeAll(() => {
+  before(() => {
     global.window = {pako};
   });
 
-  afterAll(() => {
+  after(() => {
     global.window = undefined;
   });
 

package/report/test-assets/faux-psi.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @param {any} lhr
+ * @param {Element} container
+ */
+declare function renderLHReport(lhr: any, container: Element): Promise<void>;
+/**
+ * @param {LH.Locale} locale
+ */
+declare function swapLhrLocale(locale: LH.Locale): Promise<void>;
+/**
+ * Tweak the LHR to make the desktop and mobile reports easier to identify.
+ * Adjusted: Perf category name and score, and emoji placed on top of key screenshots.
+ * @param {LH.Result} lhr
+ * @param {string} tabId
+ */
+declare function distinguishLHR(lhr: LH.Result, tabId: string): Promise<void>;
+/**
+ * Add 📱 and 💻 emoji on top of screenshot
+ * @param {string} datauri
+ * @param {string} tabId
+ */
+declare function decorateScreenshot(datauri: string, tabId: string): Promise<string>;
+type lighthouseRenderer = typeof import("../clients/bundle.js");
+/**
+ * @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.
+ */
+/** @fileoverview This file exercises two LH reports within the same DOM. */
+/** @typedef {import('../clients/bundle.js')} lighthouseRenderer */
+/** @type {lighthouseRenderer} */
+declare const lighthouseRenderer: lighthouseRenderer;
+declare function wait(ms?: number): Promise<any>;
+//# sourceMappingURL=faux-psi.d.ts.map

package/report/tsconfig.json

@@ -1,8 +1,6 @@
 {
   "extends": "../tsconfig-base.json",
   "compilerOptions": {
-    "outDir": "../.tmp/tsbuildinfo/report",
-
     // Limit to base JS and DOM defs.
     "lib": ["es2020", "dom", "dom.iterable"],
     // Don't include any types from node_modules/.
@@ -16,6 +14,7 @@
   "include": [
     "**/*.js",
     "types/**/*.d.ts",
+    "../core/lib/lighthouse-compatibility.js",
   ],
   "exclude": [
     "generator/**/*.js",

package/report/types/augment-dom.d.ts

@@ -10,7 +10,7 @@
  */
 
 // Import to augment querySelector/querySelectorAll with stricter type checking.
-import '../../types/query-selector';
+import '../../types/internal/query-selector';
 
 declare global {
   var CompressionStream: {

package/root.d.ts

@@ -0,0 +1,3 @@
+export const LH_ROOT: string;
+export const lighthouseVersion: any;
+//# sourceMappingURL=root.d.ts.map

package/root.js

@@ -3,26 +3,16 @@
  * 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 fs = require('fs');
-const path = require('path');
-const url = require('url');
+import fs from 'fs';
 
-// import {dirname} from 'path';
-// import {fileURLToPath} from 'url';
+import {getModuleDirectory} from './esm-utils.js';
 
-module.exports = {
-  LH_ROOT: __dirname,
-  /**
-   * Return parsed json object.
-   * Resolves path relative to importMeta.url (if provided) or LH_ROOT (if not provided).
-   * @param {string} filePath Can be an absolute or relative path.
-   * @param {ImportMeta=} importMeta
-   */
-  readJson(filePath, importMeta) {
-    const dir = importMeta ? path.dirname(url.fileURLToPath(importMeta.url)) : __dirname;
-    filePath = path.resolve(dir, filePath);
-    return JSON.parse(fs.readFileSync(filePath, 'utf-8'));
-  },
+const LH_ROOT = getModuleDirectory(import.meta);
+const pkg = JSON.parse(fs.readFileSync(`${LH_ROOT}/package.json`, 'utf-8'));
+const lighthouseVersion = pkg.version;
+
+export {
+  LH_ROOT,
+  lighthouseVersion,
 };

package/shared/localization/format.d.ts

@@ -0,0 +1,106 @@
+export type MessageElement = import('intl-messageformat-parser').Element;
+export type ArgumentElement = import('intl-messageformat-parser').ArgumentElement;
+export const DEFAULT_LOCALE: "en-US";
+/** @param {string[]} pathInLHR */
+export function _formatPathAsString(pathInLHR: string[]): string;
+/**
+ * Function to retrieve all 'argumentElement's from an ICU message. An argumentElement
+ * is an ICU element with an argument in it, like '{varName}' or '{varName, number, bytes}'. This
+ * differs from 'messageElement's which are just arbitrary text in a message.
+ *
+ * Notes:
+ *  This function will recursively inspect plural elements for nested argumentElements.
+ *
+ *  We need to find all the elements from the plural format sections, but
+ *  they need to be deduplicated. I.e. "=1{hello {icu}} =other{hello {icu}}"
+ *  the variable "icu" would appear twice if it wasn't de duplicated. And they cannot
+ *  be stored in a set because they are not equal since their locations are different,
+ *  thus they are stored via a Map keyed on the "id" which is the ICU varName.
+ *
+ * @param {Array<MessageElement>} icuElements
+ * @param {Map<string, ArgumentElement>} [seenElementsById]
+ * @return {Map<string, ArgumentElement>}
+ */
+export function collectAllCustomElementsFromICU(icuElements: Array<MessageElement>, seenElementsById?: Map<string, import("intl-messageformat-parser").ArgumentElement> | undefined): Map<string, ArgumentElement>;
+/**
+ * Returns whether `icuMessageOrNot`` is an `LH.IcuMessage` instance.
+ * @param {unknown} icuMessageOrNot
+ * @return {icuMessageOrNot is LH.IcuMessage}
+ */
+export function isIcuMessage(icuMessageOrNot: unknown): icuMessageOrNot is import("../../types/lhr/i18n.js").IcuMessage;
+/**
+ * Get the localized and formatted form of `icuMessageOrRawString` if it's an
+ * LH.IcuMessage, or get it back directly if it's already a string.
+ * Warning: this function throws if `icuMessageOrRawString` is not the expected
+ * type (use function from `createIcuMessageFn` to create a valid LH.IcuMessage)
+ * or `locale` isn't supported (use `lookupLocale` to find a valid locale).
+ * @param {LH.IcuMessage | string} icuMessageOrRawString
+ * @param {LH.Locale} locale
+ * @return {string}
+ */
+export function getFormatted(icuMessageOrRawString: LH.IcuMessage | string, locale: LH.Locale): string;
+/**
+ * @param {LH.Locale} locale
+ * @return {Record<string, string>}
+ */
+export function getRendererFormattedStrings(locale: LH.Locale): Record<string, string>;
+/**
+ * Recursively walk the input object, looking for property values that are
+ * `LH.IcuMessage`s and replace them with their localized values. Primarily
+ * used with the full LHR or a Config as input.
+ * Returns a map of locations that were replaced to the `IcuMessage` that was at
+ * that location.
+ * @param {unknown} inputObject
+ * @param {LH.Locale} locale
+ * @return {LH.Result.IcuMessagePaths}
+ */
+export function replaceIcuMessages(inputObject: unknown, locale: LH.Locale): LH.Result.IcuMessagePaths;
+/**
+ * Returns whether the `requestedLocale` is registered and available for use
+ * @param {LH.Locale} requestedLocale
+ * @return {boolean}
+ */
+export function hasLocale(requestedLocale: LH.Locale): boolean;
+/**
+ * Populate the i18n string lookup dict with locale data
+ * Used when the host environment selects the locale and serves lighthouse the intended locale file
+ * @see https://docs.google.com/document/d/1jnt3BqKB-4q3AE94UWFA0Gqspx8Sd_jivlB7gQMlmfk/edit
+ * @param {LH.Locale} locale
+ * @param {import('./locales').LhlMessages} lhlMessages
+ */
+export function registerLocaleData(locale: LH.Locale, lhlMessages: import('./locales').LhlMessages): void;
+/**
+ * Format string `message` by localizing `values` and inserting them. `message`
+ * is assumed to already be in the given locale.
+ * If you need to localize a messagem `getFormatted` is probably what you want.
+ * @param {string} message
+ * @param {Record<string, string | number>|undefined} values
+ * @param {LH.Locale} locale
+ * @return {string}
+ */
+export function formatMessage(message: string, values: Record<string, string | number> | undefined, locale: LH.Locale): string;
+/**
+ * @param {string} i18nMessageId
+ */
+export function getIcuMessageIdParts(i18nMessageId: string): {
+    filename: string;
+    key: string;
+};
+/**
+ * Returns a list of available locales.
+ *  - if full build, this includes all canonical locales, aliases, and any locale added
+ *      via `registerLocaleData`.
+ *  - if bundled and locale messages have been stripped (locales.js shimmed), this includes
+ *      only DEFAULT_LOCALE and any locales from `registerLocaleData`.
+ * @return {Array<LH.Locale>}
+ */
+export function getAvailableLocales(): Array<LH.Locale>;
+/**
+ * Returns a list of canonical locales, as defined by the existent message files.
+ * In practice, each of these may have aliases in the full list returned by
+ * `getAvailableLocales()`.
+ * TODO: create a CanonicalLocale type
+ * @return {Array<string>}
+ */
+export function getCanonicalLocales(): Array<string>;
+//# sourceMappingURL=format.d.ts.map

package/shared/localization/format.js

@@ -3,17 +3,19 @@
  * 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 fs = require('fs');
+import fs from 'fs';
 
-const MessageFormat = require('intl-messageformat');
-const {isObjectOfUnknownValues, isObjectOrArrayOfUnknownValues} = require('../type-verifiers.js');
+import IntlMessageFormat from 'intl-messageformat';
+
+import {getModuleDirectory} from '../../esm-utils.js';
+import {isObjectOfUnknownValues, isObjectOrArrayOfUnknownValues} from '../type-verifiers.js';
+import {locales} from './locales.js';
+
+const moduleDir = getModuleDirectory(import.meta);
 
 /** Contains available locales with messages. May be an empty object if bundled. */
-/** @type {import('./locales')} */
-// @ts-expect-error TODO(esmodules): remove when file is es modules.
-const LOCALE_MESSAGES = require('./locales.js').default || require('./locales.js');
+const LOCALE_MESSAGES = locales;
 
 const DEFAULT_LOCALE = 'en-US';
 
@@ -23,7 +25,7 @@ const DEFAULT_LOCALE = 'en-US';
  * These locales are considered the "canonical" locales. We support other locales which
  * are simply aliases to one of these. ex: es-AR (alias) -> es-419 (canonical)
  */
-const CANONICAL_LOCALES = fs.readdirSync(__dirname + '/locales/')
+const CANONICAL_LOCALES = fs.readdirSync(moduleDir + '/locales/')
   .filter(basename => basename.endsWith('.json') && !basename.endsWith('.ctc.json'))
   .map(locale => locale.replace('.json', ''))
   .sort();
@@ -95,12 +97,12 @@ function collectAllCustomElementsFromICU(icuElements, seenElementsById = new Map
  * Returns a copy of the `values` object, with the values formatted based on how
  * they will be used in their icuMessage, e.g. KB or milliseconds. The original
  * object is unchanged.
- * @param {MessageFormat.IntlMessageFormat} messageFormatter
+ * @param {IntlMessageFormat} messageFormatter
  * @param {Readonly<Record<string, string | number>>} values
  * @param {string} lhlMessage Used for clear error logging.
  * @return {Record<string, string | number>}
  */
-function _preformatValues(messageFormatter, values, lhlMessage) {
+function _preformatValues(messageFormatter, values = {}, lhlMessage) {
   const elementMap = collectAllCustomElementsFromICU(messageFormatter.getAst().elements);
   const argumentElements = [...elementMap.values()];
 
@@ -147,7 +149,7 @@ function _preformatValues(messageFormatter, values, lhlMessage) {
   for (const valueId of Object.keys(values)) {
     if (valueId in formattedValues) continue;
 
-    // errorCode is a special case always allowed to help LHError ease-of-use.
+    // errorCode is a special case always allowed to help LighthouseError ease-of-use.
     if (valueId === 'errorCode') {
       formattedValues.errorCode = values.errorCode;
       continue;
@@ -165,18 +167,19 @@ function _preformatValues(messageFormatter, values, lhlMessage) {
  * is assumed to already be in the given locale.
  * If you need to localize a messagem `getFormatted` is probably what you want.
  * @param {string} message
- * @param {Record<string, string | number>} values
+ * @param {Record<string, string | number>|undefined} values
  * @param {LH.Locale} locale
  * @return {string}
  */
-function formatMessage(message, values = {}, locale) {
+function formatMessage(message, values, locale) {
+  // Parsing and formatting can be slow. Don't attempt if the string can't
+  // contain ICU placeholders, in which case formatting is already complete.
+  if (!message.includes('{') && values === undefined) return message;
+
   // When using accented english, force the use of a different locale for number formatting.
   const localeForMessageFormat = (locale === 'en-XA' || locale === 'en-XL') ? 'de-DE' : locale;
 
-  // This package is not correctly bundled by Rollup.
-  /** @type {typeof MessageFormat.IntlMessageFormat} */
-  const MessageFormatCtor = MessageFormat.IntlMessageFormat || MessageFormat;
-  const formatter = new MessageFormatCtor(message, localeForMessageFormat, formats);
+  const formatter = new IntlMessageFormat(message, localeForMessageFormat, formats);
 
   // Preformat values for the message format like KB and milliseconds.
   const valuesForMessageFormat = _preformatValues(formatter, values, message);
@@ -218,12 +221,15 @@ function getRendererFormattedStrings(locale) {
 
   // If `localeMessages` is empty in the bundled and DEFAULT_LOCALE case, this
   // will be empty and the report will fall back to the util UIStrings for these.
-  const icuMessageIds = Object.keys(localeMessages).filter(f => f.startsWith('report/'));
+  const icuMessageIds = Object.keys(localeMessages)
+    .filter(f => f.startsWith('report/renderer/report-utils.js'));
   /** @type {Record<string, string>} */
   const strings = {};
   for (const icuMessageId of icuMessageIds) {
     const {filename, key} = getIcuMessageIdParts(icuMessageId);
-    if (!filename.endsWith('util.js')) throw new Error(`Unexpected message: ${icuMessageId}`);
+    if (!filename.endsWith('report-utils.js')) {
+      throw new Error(`Unexpected message: ${icuMessageId}`);
+    }
 
     strings[key] = localeMessages[icuMessageId].message;
   }
@@ -379,7 +385,7 @@ function _getLocaleMessages(locale) {
 }
 
 /**
- * Returns whether the `requestedLocale` can be used.
+ * Returns whether the `requestedLocale` is registered and available for use
  * @param {LH.Locale} requestedLocale
  * @return {boolean}
  */
@@ -439,7 +445,7 @@ function getIcuMessageIdParts(i18nMessageId) {
   return {filename, key};
 }
 
-module.exports = {
+export {
   DEFAULT_LOCALE,
   _formatPathAsString,
   collectAllCustomElementsFromICU,

package/shared/localization/i18n-module.d.ts

@@ -0,0 +1,4 @@
+import { swapLocale } from "./swap-locale.js";
+import * as format from "./format.js";
+export { swapLocale, format };
+//# sourceMappingURL=i18n-module.d.ts.map

package/shared/localization/i18n-module.js

@@ -3,7 +3,11 @@
  * 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';
 
-module.exports.swapLocale = require('./swap-locale.js');
-module.exports.format = require('./format.js');
+import * as format from './format.js';
+import {swapLocale} from './swap-locale.js';
+
+export {
+  swapLocale,
+  format,
+};