lighthouse 12.4.0-dev.20250302 → 12.4.0-dev.20250303

package/core/audits/insights/image-delivery-insight.js

@@ -4,15 +4,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as ImageDeliveryInsightModule from '@paulirish/trace_engine/models/trace/insights/ImageDelivery.js';
 import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ImageDelivery.js';
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {adaptInsightToAuditProduct} from './insight-audit.js';
+import {TraceEngineResult} from '../../computed/trace-engine-result.js';
 
 // eslint-disable-next-line max-len
 const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js', UIStrings);
 
+const getOptimizationMessage =
+  // @ts-expect-error TODO(cjamcl): update trace engine lib to modify types accordingly.
+  // right now return type of getOptimizationMessage is wrongly `string`.
+  TraceEngineResult.localizeFunction(str_, ImageDeliveryInsightModule.getOptimizationMessage);
+
 class ImageDeliveryInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -46,10 +53,6 @@ class ImageDeliveryInsight extends Audit {
         return;
       }
 
-      const relatedEventsMap = insight.relatedEvents && !Array.isArray(insight.relatedEvents) ?
-        insight.relatedEvents :
-        null;
-
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
         /* eslint-disable max-len */
@@ -66,11 +69,9 @@ class ImageDeliveryInsight extends Audit {
         wastedBytes: image.byteSavings,
         subItems: {
           type: /** @type {const} */ ('subitems'),
-          // TODO: when strings update to remove number from "reason" uistrings, update this
-          // to use `image.optimizations.map(...)` and construct strings from the type.
-          items: (relatedEventsMap?.get(image.request) ?? []).map((reason, i) => ({
-            reason,
-            wastedBytes: image.optimizations[i].byteSavings,
+          items: image.optimizations.map(optimization => ({
+            reason: getOptimizationMessage(optimization),
+            wastedBytes: optimization.byteSavings,
           })),
         },
       }));

package/core/computed/trace-engine-result.d.ts

@@ -13,6 +13,33 @@ declare class TraceEngineResult {
      * @return {Promise<LH.Artifacts.TraceEngineResult>}
      */
     static runTraceEngine(traceEvents: LH.TraceEvent[]): Promise<LH.Artifacts.TraceEngineResult>;
+    /**
+     * Adapts the given DevTools function that returns a localized string to one
+     * that returns a LH.IcuMessage.
+     *
+     * @template {any[]} Args
+     * @template {import('../lib/trace-engine.js').DevToolsIcuMessage} Ret
+     * @param {ReturnType<i18n.createIcuMessageFn>} str_
+     * @param {(...args: Args) => Ret} fn
+     * @return {(...args: Args) => LH.IcuMessage}
+     */
+    static localizeFunction<Args extends any[], Ret extends import("../lib/trace-engine.js").DevToolsIcuMessage>(str_: ReturnType<typeof i18n.createIcuMessageFn>, fn: (...args: Args) => Ret): (...args: Args) => LH.IcuMessage;
+    /**
+     * Converts the input parameters given to `i18nString` usages in DevTools to a
+     * LH.IcuMessage.
+     *
+     * @param {ReturnType<i18n.createIcuMessageFn>} str_
+     * @param {import('../lib/trace-engine.js').DevToolsIcuMessage} traceEngineI18nObject
+     * @return {LH.IcuMessage}
+     */
+    static localize(str_: ReturnType<typeof i18n.createIcuMessageFn>, traceEngineI18nObject: import("../lib/trace-engine.js").DevToolsIcuMessage): LH.IcuMessage;
+    /**
+     * Recursively finds all DevToolsIcuMessage objects and replaces them with LH.IcuMessage.
+     *
+     * @param {ReturnType<i18n.createIcuMessageFn>} str_
+     * @param {object} object
+     */
+    static localizeObject(str_: ReturnType<typeof i18n.createIcuMessageFn>, object: object): void;
     /**
      * @param {import('@paulirish/trace_engine/models/trace/insights/types.js').TraceInsightSets} insightSets
      */
@@ -27,4 +54,5 @@ declare class TraceEngineResult {
     }, context: LH.Artifacts.ComputedContext): Promise<LH.Artifacts.TraceEngineResult>;
 }
 import * as LH from '../../types/lh.js';
+import * as i18n from '../lib/i18n/i18n.js';
 //# sourceMappingURL=trace-engine-result.d.ts.map

package/core/computed/trace-engine-result.js

@@ -33,9 +33,57 @@ class TraceEngineResult {
   }
 
   /**
-   * @param {import('@paulirish/trace_engine/models/trace/insights/types.js').TraceInsightSets} insightSets
+   * Adapts the given DevTools function that returns a localized string to one
+   * that returns a LH.IcuMessage.
+   *
+   * @template {any[]} Args
+   * @template {import('../lib/trace-engine.js').DevToolsIcuMessage} Ret
+   * @param {ReturnType<i18n.createIcuMessageFn>} str_
+   * @param {(...args: Args) => Ret} fn
+   * @return {(...args: Args) => LH.IcuMessage}
    */
-  static localizeInsights(insightSets) {
+  static localizeFunction(str_, fn) {
+    return (...args) => this.localize(str_, fn(...args));
+  }
+
+  /**
+   * Converts the input parameters given to `i18nString` usages in DevTools to a
+   * LH.IcuMessage.
+   *
+   * @param {ReturnType<i18n.createIcuMessageFn>} str_
+   * @param {import('../lib/trace-engine.js').DevToolsIcuMessage} traceEngineI18nObject
+   * @return {LH.IcuMessage}
+   */
+  static localize(str_, traceEngineI18nObject) {
+    /** @type {Record<string, string|number>|undefined} */
+    let values;
+    if (traceEngineI18nObject.values) {
+      values = {};
+      for (const [key, value] of Object.entries(traceEngineI18nObject.values)) {
+        if (value && typeof value === 'object' && '__i18nBytes' in value) {
+          values[key] = value.__i18nBytes;
+          // TODO: use an actual byte formatter. Right now, this shows the exact number of bytes.
+        } else if (value && typeof value === 'object' && 'i18nId' in value) {
+          // TODO: add support for str_ values to be IcuMessage. For now, we translate it here.
+          // This means that locale swapping won't work for this portion of the IcuMessage.
+          // @ts-expect-error
+          values[key] = str_(value.i18nId, value.values).formattedDefault;
+        } else {
+          values[key] = value;
+        }
+      }
+    }
+
+    return str_(traceEngineI18nObject.i18nId, values);
+  }
+
+  /**
+   * Recursively finds all DevToolsIcuMessage objects and replaces them with LH.IcuMessage.
+   *
+   * @param {ReturnType<i18n.createIcuMessageFn>} str_
+   * @param {object} object
+   */
+  static localizeObject(str_, object) {
     /**
      * Execute `cb(traceEngineI18nObject)` on every i18n object, recursively. The cb return
      * value replaces traceEngineI18nObject.
@@ -79,6 +127,33 @@ class TraceEngineResult {
       }
     }
 
+    // Pass `{i18nId: string, values?: {}}` through Lighthouse's i18n pipeline.
+    // This is equivalent to if we directly did `str_(UIStrings.whatever, ...)`
+    recursiveReplaceLocalizableStrings(object, (traceEngineI18nObject) => {
+      let values = traceEngineI18nObject.values;
+      if (values) {
+        values = structuredClone(values);
+        for (const [key, value] of Object.entries(values)) {
+          if (value && typeof value === 'object' && '__i18nBytes' in value) {
+            // @ts-expect-error
+            values[key] = value.__i18nBytes;
+            // TODO: use an actual byte formatter. Right now, this shows the exact number of bytes.
+          } else if (value && typeof value === 'object' && 'i18nId' in value) {
+            // TODO: add support for str_ values to be IcuMessage.
+            // @ts-expect-error
+            values[key] = str_(value.i18nId, value.values).formattedDefault;
+          }
+        }
+      }
+
+      return str_(traceEngineI18nObject.i18nId, values);
+    }, new Set());
+  }
+
+  /**
+   * @param {import('@paulirish/trace_engine/models/trace/insights/types.js').TraceInsightSets} insightSets
+   */
+  static localizeInsights(insightSets) {
     for (const insightSet of insightSets.values()) {
       for (const [name, model] of Object.entries(insightSet.model)) {
         if (model instanceof Error) {
@@ -96,28 +171,7 @@ class TraceEngineResult {
 
         const key = `node_modules/@paulirish/trace_engine/models/trace/insights/${name}.js`;
         const str_ = i18n.createIcuMessageFn(key, traceEngineUIStrings);
-
-        // Pass `{i18nId: string, values?: {}}` through Lighthouse's i18n pipeline.
-        // This is equivalent to if we directly did `str_(UIStrings.whatever, ...)`
-        recursiveReplaceLocalizableStrings(model, (traceEngineI18nObject) => {
-          let values = traceEngineI18nObject.values;
-          if (values) {
-            values = structuredClone(values);
-            for (const [key, value] of Object.entries(values)) {
-              if (value && typeof value === 'object' && '__i18nBytes' in value) {
-                // @ts-expect-error
-                values[key] = value.__i18nBytes;
-                // TODO: use an actual byte formatter. Right now, this shows the exact number of bytes.
-              } else if (value && typeof value === 'object' && 'i18nId' in value) {
-                // TODO: add support for str_ values to be IcuMessage.
-                // @ts-expect-error
-                values[key] = str_(value.i18nId, value.values).formattedDefault;
-              }
-            }
-          }
-
-          return str_(traceEngineI18nObject.i18nId, values);
-        }, new Set());
+        this.localizeObject(str_, model);
       }
     }
   }

package/core/lib/trace-engine.d.ts

@@ -4,6 +4,12 @@ export type SaneSyntheticLayoutShift = SyntheticLayoutShift & {
         data: NonNullable<SyntheticLayoutShift["args"]["data"]>;
     };
 };
+export type DevToolsIcuMessage = {
+    i18nId: string;
+    values: Record<string, string | number | {
+        __i18nBytes: number;
+    }>;
+};
 export const TraceProcessor: typeof TraceEngine.Processor.TraceProcessor;
 export const TraceHandlers: typeof TraceEngine.Handlers.ModelHandlers;
 export const Insights: typeof TraceEngine.Insights;

package/core/lib/trace-engine.js

@@ -4,6 +4,7 @@ import {polyfillDOMRect} from './polyfill-dom-rect.js';
 
 /** @typedef {import('@paulirish/trace_engine').Types.Events.SyntheticLayoutShift} SyntheticLayoutShift */
 /** @typedef {SyntheticLayoutShift & {args: {data: NonNullable<SyntheticLayoutShift['args']['data']>}}} SaneSyntheticLayoutShift */
+/** @typedef {{i18nId: string, values: Record<string, string|number|{__i18nBytes: number}>}} DevToolsIcuMessage */
 
 polyfillDOMRect();
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "12.4.0-dev.20250302",
+  "version": "12.4.0-dev.20250303",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {