lighthouse 11.1.0-dev.20231004 → 11.1.0-dev.20231006

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "11.1.0-dev.20231004",
+  "version": "11.1.0-dev.20231006",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -98,6 +98,7 @@
   },
   "devDependencies": {
     "@build-tracker/cli": "^1.0.0-beta.15",
+    "@formatjs/icu-messageformat-parser": "^2.6.2",
     "@esbuild-kit/esm-loader": "^2.1.1",
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@jest/fake-timers": "^28.1.0",
@@ -152,7 +153,6 @@
     "gh-pages": "^2.0.1",
     "glob": "^7.1.3",
     "idb-keyval": "2.2.0",
-    "intl-messageformat-parser": "^1.8.1",
     "jest-mock": "^27.3.0",
     "jest-snapshot": "^28.1.0",
     "jsdom": "^12.2.0",
@@ -188,7 +188,7 @@
     "devtools-protocol": "0.0.1200039",
     "enquirer": "^2.3.6",
     "http-link-header": "^1.1.1",
-    "intl-messageformat": "^4.4.0",
+    "intl-messageformat": "^10.5.3",
     "jpeg-js": "^0.4.4",
     "js-library-detector": "^6.7.0",
     "lighthouse-logger": "^2.0.1",

package/readme.md

@@ -338,7 +338,7 @@ This section details services that have integrated Lighthouse data. If you're wo
 
 * **[Treo](https://treo.sh)** - Treo is Lighthouse as a Service. It provides regression testing, geographical regions, custom networks, and integrations with GitHub & Slack. Treo is a paid product with plans for solo-developers and teams.
 
-* **[PageVitals](https://pagevitals.com)** - PageVitals combines Lighthouse, CrUX and real-user monitoring data to monitor the performance of websites. See how your website performs over time and get alerted if it gets too slow. Drill down and find the real cause of any performance issue. PageVitals is a paid product with a free 14-day trial.
+* **[PageVitals](https://pagevitals.com)** - PageVitals combines Lighthouse, CrUX and field testing to monitor the performance of websites. See how your website performs over time and get alerted if it gets too slow. Drill down and find the real cause of any performance issue. PageVitals is a paid product with a free 14-day trial.
 
 * **[Alertdesk](https://www.alertdesk.com/)** - Alertdesk is based on Lighthouse and helps you to keep track of your site’s quality & performance. Run daily quality & performance tests from both Mobile and Desktop and dive into the powerful & intuitive reports. You can also monitor your uptime (every minute - 24/7) & domain health. Alertdesk is a paid product with a free 14-day trial.
 

package/shared/localization/format.d.ts

@@ -1,27 +1,25 @@
-export type MessageElement = import('intl-messageformat-parser').Element;
-export type ArgumentElement = import('intl-messageformat-parser').ArgumentElement;
+export type MessageFormatElement = import('@formatjs/icu-messageformat-parser').MessageFormatElement;
 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.
+ * Function to retrieve all elements from an ICU message AST that are associated
+ * with a named input, like '{varName}' or '{varName, number, bytes}'. This
+ * differs from literal message types which are just arbitrary text.
  *
- * Notes:
- *  This function will recursively inspect plural elements for nested argumentElements.
+ * This function recursively inspects plural elements for nested elements,
+ * but since the output is a Map they are deduplicated.
+ * e.g. "=1{hello {icu}} =other{hello {icu}}" will produce one element in the output,
+ * with "icu" as its key.
  *
- *  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.
+ * TODO: don't do that deduplication because messages within a plural message could be number
+ * messages with different styles.
  *
- * @param {Array<MessageElement>} icuElements
- * @param {Map<string, ArgumentElement>} [seenElementsById]
- * @return {Map<string, ArgumentElement>}
+ * @param {Array<MessageFormatElement>} icuElements
+ * @param {Map<string, MessageFormatElement>} [customElements]
+ * @return {Map<string, MessageFormatElement>}
  */
-export function collectAllCustomElementsFromICU(icuElements: Array<MessageElement>, seenElementsById?: Map<string, import("intl-messageformat-parser").ArgumentElement> | undefined): Map<string, ArgumentElement>;
+export function collectAllCustomElementsFromICU(icuElements: Array<MessageFormatElement>, customElements?: Map<string, import("@formatjs/icu-messageformat-parser").MessageFormatElement> | undefined): Map<string, MessageFormatElement>;
 /**
  * Returns whether `icuMessageOrNot`` is an `LH.IcuMessage` instance.
  * @param {unknown} icuMessageOrNot
@@ -103,4 +101,11 @@ export function getAvailableLocales(): Array<LH.Locale>;
  * @return {Array<string>}
  */
 export function getCanonicalLocales(): Array<string>;
+/**
+ * Our strings were made when \ was the escape character, but now it is '. To avoid churn,
+ * let's convert to the new style in memory.
+ * @param {string} message
+ * @return {string}
+ */
+export function escapeIcuMessage(message: string): string;
 //# sourceMappingURL=format.d.ts.map

package/shared/localization/format.js

@@ -12,6 +12,19 @@ import {getModuleDirectory} from '../esm-utils.js';
 import {isObjectOfUnknownValues, isObjectOrArrayOfUnknownValues} from '../type-verifiers.js';
 import {locales} from './locales.js';
 
+// From @formatjs/icu-messageformat-parser - copy here so we don't need to bundle all that.
+const TYPE = /** @type {const} */ ({
+  literal: 0,
+  argument: 1,
+  number: 2,
+  date: 3,
+  time: 4,
+  select: 5,
+  plural: 6,
+  pound: 7,
+  tag: 8,
+});
+
 const moduleDir = getModuleDirectory(import.meta);
 
 /** Contains available locales with messages. May be an empty object if bundled. */
@@ -30,11 +43,11 @@ const CANONICAL_LOCALES = fs.readdirSync(moduleDir + '/locales/')
   .map(locale => locale.replace('.json', ''))
   .sort();
 
-/** @typedef {import('intl-messageformat-parser').Element} MessageElement */
-/** @typedef {import('intl-messageformat-parser').ArgumentElement} ArgumentElement */
+/** @typedef {import('@formatjs/icu-messageformat-parser').MessageFormatElement} MessageFormatElement */
 
 const MESSAGE_I18N_ID_REGEX = / | [^\s]+$/;
 
+/** @type {Partial<import('intl-messageformat').Formats>} */
 const formats = {
   number: {
     bytes: {
@@ -57,40 +70,39 @@ const formats = {
 };
 
 /**
- * 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.
+ * Function to retrieve all elements from an ICU message AST that are associated
+ * with a named input, like '{varName}' or '{varName, number, bytes}'. This
+ * differs from literal message types which are just arbitrary text.
  *
- * Notes:
- *  This function will recursively inspect plural elements for nested argumentElements.
+ * This function recursively inspects plural elements for nested elements,
+ * but since the output is a Map they are deduplicated.
+ * e.g. "=1{hello {icu}} =other{hello {icu}}" will produce one element in the output,
+ * with "icu" as its key.
  *
- *  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.
+ * TODO: don't do that deduplication because messages within a plural message could be number
+ * messages with different styles.
  *
- * @param {Array<MessageElement>} icuElements
- * @param {Map<string, ArgumentElement>} [seenElementsById]
- * @return {Map<string, ArgumentElement>}
+ * @param {Array<MessageFormatElement>} icuElements
+ * @param {Map<string, MessageFormatElement>} [customElements]
+ * @return {Map<string, MessageFormatElement>}
  */
-function collectAllCustomElementsFromICU(icuElements, seenElementsById = new Map()) {
+function collectAllCustomElementsFromICU(icuElements, customElements = new Map()) {
   for (const el of icuElements) {
-    // We are only interested in elements that need ICU formatting (argumentElements)
-    if (el.type !== 'argumentElement') continue;
+    if (el.type === TYPE.literal || el.type === TYPE.pound) continue;
 
-    seenElementsById.set(el.id, el);
+    customElements.set(el.value, el);
 
     // Plurals need to be inspected recursively
-    if (!el.format || el.format.type !== 'pluralFormat') continue;
-    // Look at all options of the plural (=1{} =other{}...)
-    for (const option of el.format.options) {
-      // Run collections on each option's elements
-      collectAllCustomElementsFromICU(option.value.elements, seenElementsById);
+    if (el.type === TYPE.plural) {
+      // Look at all options of the plural (=1{} =other{}...)
+      for (const option of Object.values(el.options)) {
+        // Run collections on each option's elements
+        collectAllCustomElementsFromICU(option.value, customElements);
+      }
     }
   }
 
-  return seenElementsById;
+  return customElements;
 }
 
 /**
@@ -103,15 +115,14 @@ function collectAllCustomElementsFromICU(icuElements, seenElementsById = new Map
  * @return {Record<string, string | number>}
  */
 function _preformatValues(messageFormatter, values = {}, lhlMessage) {
-  const elementMap = collectAllCustomElementsFromICU(messageFormatter.getAst().elements);
-  const argumentElements = [...elementMap.values()];
+  const customElements = collectAllCustomElementsFromICU(messageFormatter.getAst());
 
   /** @type {Record<string, string | number>} */
   const formattedValues = {};
 
-  for (const {id, format} of argumentElements) {
+  for (const [id, element] of customElements) {
     // Throw an error if a message's value isn't provided
-    if (id && (id in values) === false) {
+    if (!(id in values)) {
       throw new Error(`ICU Message "${lhlMessage}" contains a value reference ("${id}") ` +
         `that wasn't provided`);
     }
@@ -119,7 +130,7 @@ function _preformatValues(messageFormatter, values = {}, lhlMessage) {
     const value = values[id];
 
     // Direct `{id}` replacement and non-numeric values need no formatting.
-    if (!format || format.type !== 'numberFormat') {
+    if (element.type !== TYPE.number) {
       formattedValues[id] = value;
       continue;
     }
@@ -130,13 +141,13 @@ function _preformatValues(messageFormatter, values = {}, lhlMessage) {
     }
 
     // Format values for known styles.
-    if (format.style === 'milliseconds') {
+    if (element.style === 'milliseconds') {
       // Round all milliseconds to the nearest 10.
       formattedValues[id] = Math.round(value / 10) * 10;
-    } else if (format.style === 'seconds' && id === 'timeInMs') {
+    } else if (element.style === 'seconds' && id === 'timeInMs') {
       // Convert all seconds to the correct unit (currently only for `timeInMs`).
       formattedValues[id] = Math.round(value / 100) / 10;
-    } else if (format.style === 'bytes') {
+    } else if (element.style === 'bytes') {
       // Replace all the bytes with KB.
       formattedValues[id] = value / 1024;
     } else {
@@ -162,6 +173,19 @@ function _preformatValues(messageFormatter, values = {}, lhlMessage) {
   return formattedValues;
 }
 
+/**
+ * Our strings were made when \ was the escape character, but now it is '. To avoid churn,
+ * let's convert to the new style in memory.
+ * @param {string} message
+ * @return {string}
+ */
+function escapeIcuMessage(message) {
+  return message
+    .replace(/'/g, `''`)
+    .replace(/\\{/g, `'{`)
+    .replace(/\\}/g, `'}`);
+}
+
 /**
  * Format string `message` by localizing `values` and inserting them. `message`
  * is assumed to already be in the given locale.
@@ -172,19 +196,31 @@ function _preformatValues(messageFormatter, values = {}, lhlMessage) {
  * @return {string}
  */
 function formatMessage(message, values, locale) {
+  message = escapeIcuMessage(message);
+
   // 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;
 
-  const formatter = new IntlMessageFormat(message, localeForMessageFormat, formats);
+  // This package is not correctly bundled.
+  /** @type {typeof IntlMessageFormat} */
+  // @ts-expect-error bundler woes
+  const IntlMessageFormatCtor = IntlMessageFormat.IntlMessageFormat || IntlMessageFormat;
+  const formatter = new IntlMessageFormatCtor(message, localeForMessageFormat, formats, {
+    ignoreTag: true,
+  });
 
   // Preformat values for the message format like KB and milliseconds.
   const valuesForMessageFormat = _preformatValues(formatter, values, message);
 
-  return formatter.format(valuesForMessageFormat);
+  const formattedResult = formatter.format(valuesForMessageFormat);
+  // We only format to strings.
+  if (typeof formattedResult !== 'string') {
+    throw new Error('unexpected formatted result');
+  }
+  return formattedResult;
 }
 
 /**
@@ -459,4 +495,5 @@ export {
   getIcuMessageIdParts,
   getAvailableLocales,
   getCanonicalLocales,
+  escapeIcuMessage,
 };

package/shared/type-verifiers.d.ts

@@ -19,5 +19,5 @@ export function isObjectOfUnknownValues(val: unknown): val is Record<string, unk
  * @param {unknown} val
  * @return {val is Record<string, unknown>|Array<unknown>}
  */
-export function isObjectOrArrayOfUnknownValues(val: unknown): val is unknown[] | Record<string, unknown>;
+export function isObjectOrArrayOfUnknownValues(val: unknown): val is Record<string, unknown> | unknown[];
 //# sourceMappingURL=type-verifiers.d.ts.map