lighthouse 10.4.0-dev.20230719 → 10.4.0-dev.20230720

package/cli/test/smokehouse/lighthouse-runners/bundle.js

@@ -17,7 +17,7 @@ import {Worker, isMainThread, parentPort, workerData} from 'worker_threads';
 import {once} from 'events';
 
 import puppeteer from 'puppeteer-core';
-import ChromeLauncher from 'chrome-launcher';
+import * as ChromeLauncher from 'chrome-launcher';
 
 import {LH_ROOT} from '../../../../root.js';
 import {loadArtifacts, saveArtifacts} from '../../../../core/lib/asset-saver.js';

package/cli/test/smokehouse/lighthouse-runners/cli.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../../../../../../types/internal/lighthouse-logger.d.ts" />
 /**
  * Launch Chrome and do a full Lighthouse run via the Lighthouse CLI.
  * @param {string} url

package/cli/test/smokehouse/report-assert.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../../../../../types/internal/lighthouse-logger.d.ts" />
 export type Difference = {
     path: string;
     actual: any;

package/core/config/constants.js

@@ -17,7 +17,7 @@ const throttling = {
   DEVTOOLS_RTT_ADJUSTMENT_FACTOR,
   DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR,
   // These values align with WebPageTest's definition of "Fast 3G"
-  // But offer similar charateristics to roughly the 75th percentile of 4G connections.
+  // But offer similar characteristics to roughly the 75th percentile of 4G connections.
   mobileSlow4G: {
     rttMs: 150,
     throughputKbps: 1.6 * 1024,

package/core/gather/driver/execution-context.js

@@ -108,7 +108,7 @@ class ExecutionContext {
         ${ExecutionContext._cachedNativesPreamble};
         globalThis.__lighthouseExecutionContextUniqueIdentifier =
           ${uniqueExecutionContextIdentifier};
-        ${pageFunctions.esbuildFunctionNameStubString}
+        ${pageFunctions.esbuildFunctionWrapperString}
         return new Promise(function (resolve) {
           return Promise.resolve()
             .then(_ => ${expression})
@@ -277,13 +277,20 @@ class ExecutionContext {
    * @return {string}
    */
   static serializeDeps(deps) {
-    deps = [pageFunctions.esbuildFunctionNameStubString, ...deps || []];
+    deps = [pageFunctions.esbuildFunctionWrapperString, ...deps || []];
     return deps.map(dep => {
       if (typeof dep === 'function') {
         // esbuild will change the actual function name (ie. function actualName() {})
-        // always, despite minification settings, but preserve the real name in `actualName.name`
-        // (see esbuildFunctionNameStubString).
-        return `const ${dep.name} = ${dep}`;
+        // always, and preserve the real name in `actualName.name`.
+        // See esbuildFunctionWrapperString.
+        const output = dep.toString();
+        const runtimeName = pageFunctions.getRuntimeFunctionName(dep);
+        if (runtimeName !== dep.name) {
+          // In addition to exposing the mangled name, also expose the original as an alias.
+          return `${output}; const ${dep.name} = ${runtimeName};`;
+        } else {
+          return output;
+        }
       } else {
         return dep;
       }

package/core/gather/gatherers/trace-elements.js

@@ -23,6 +23,7 @@ import {ProcessedNavigation} from '../../computed/processed-navigation.js';
 import {LighthouseError} from '../../lib/lh-error.js';
 import {Responsiveness} from '../../computed/metrics/responsiveness.js';
 import {CumulativeLayoutShift} from '../../computed/metrics/cumulative-layout-shift.js';
+import {ExecutionContext} from '../driver/execution-context.js';
 
 /** @typedef {{nodeId: number, score?: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
 
@@ -284,12 +285,15 @@ class TraceElements extends BaseGatherer {
         try {
           const objectId = await resolveNodeIdToObjectId(session, backendNodeId);
           if (!objectId) continue;
+
+          const deps = ExecutionContext.serializeDeps([
+            pageFunctions.getNodeDetails,
+            getNodeDetailsData,
+          ]);
           response = await session.sendCommand('Runtime.callFunctionOn', {
             objectId,
             functionDeclaration: `function () {
-              ${pageFunctions.esbuildFunctionNameStubString}
-              ${getNodeDetailsData.toString()};
-              ${pageFunctions.getNodeDetails};
+              ${deps}
               return getNodeDetailsData.call(this);
             }`,
             returnByValue: true,

package/core/lib/page-functions.d.ts

@@ -11,7 +11,8 @@ export namespace pageFunctions {
     export { wrapRequestIdleCallback };
     export { getBoundingClientRect };
     export { truncate };
-    export { esbuildFunctionNameStubString };
+    export { esbuildFunctionWrapperString };
+    export { getRuntimeFunctionName };
 }
 /**
  * `typed-query-selector`'s CSS selector parser.
@@ -50,11 +51,11 @@ declare function wrapRuntimeEvalErrorInBrowser(err?: string | Error | undefined)
 };
 /**
  * @template {string} T
- * @param {T} selector Optional simple CSS selector to filter nodes on.
+ * @param {T=} selector Optional simple CSS selector to filter nodes on.
  *     Combinators are not supported.
  * @return {Array<ParseSelector<T>>}
  */
-declare function getElementsInDocument<T extends string>(selector: T): import("typed-query-selector/parser").ParseSelector<T, Element>[];
+declare function getElementsInDocument<T extends string>(selector?: T | undefined): import("typed-query-selector/parser").ParseSelector<T, Element>[];
 /**
  * Gets the opening tag text of the given node.
  * @param {Element|ShadowRoot} element
@@ -158,6 +159,11 @@ declare function truncate(string: string, characterLimit: number): string;
 declare namespace truncate {
     function toString(): string;
 }
-declare const esbuildFunctionNameStubString: "var __name=(fn)=>fn;";
+declare const esbuildFunctionWrapperString: string;
+/**
+ * @param {Function} fn
+ * @return {string}
+ */
+declare function getRuntimeFunctionName(fn: Function): string;
 export {};
 //# sourceMappingURL=page-functions.d.ts.map

package/core/lib/page-functions.js

@@ -4,6 +4,8 @@
  * 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 {createRequire} from 'module';
+
 import {Util} from '../../shared/util.js';
 
 /**
@@ -50,7 +52,7 @@ function wrapRuntimeEvalErrorInBrowser(err) {
 
 /**
  * @template {string} T
- * @param {T} selector Optional simple CSS selector to filter nodes on.
+ * @param {T=} selector Optional simple CSS selector to filter nodes on.
  *     Combinators are not supported.
  * @return {Array<ParseSelector<T>>}
  */
@@ -513,24 +515,89 @@ function truncate(string, characterLimit) {
   return Util.truncate(string, characterLimit);
 }
 
+function isBundledEnvironment() {
+  // If we're in DevTools or LightRider, we are definitely bundled.
+  // TODO: refactor and delete `global.isDevtools`.
+  if (global.isDevtools || global.isLightrider) return true;
+
+  const require = createRequire(import.meta.url);
+
+  try {
+    // Not foolproof, but `lighthouse-logger` is a dependency of lighthouse that should always be resolvable.
+    // `require.resolve` will only throw in atypical/bundled environments.
+    require.resolve('lighthouse-logger');
+    return false;
+  } catch (err) {
+    return true;
+  }
+}
+
 // This is to support bundled lighthouse.
 // esbuild calls every function with a builtin `__name` (since we set keepNames: true),
 // whose purpose is to store the real name of the function so that esbuild can rename it to avoid
 // collisions. Anywhere we inject dynamically generated code at runtime for the browser to process,
 // we must manually include this function (because esbuild only does so once at the top scope of
 // the bundle, which is irrelevant for code executed in the browser).
-const esbuildFunctionNameStubString = 'var __name=(fn)=>fn;';
+// When minified, esbuild will mangle the name of this wrapper function, so we need to determine what it
+// is at runtime in order to recreate it within the page.
+const esbuildFunctionWrapperString = createEsbuildFunctionWrapper();
 
-/** @type {string} */
-const truncateRawString = truncate.toString();
-truncate.toString = () => `function truncate(string, characterLimit) {
+function createEsbuildFunctionWrapper() {
+  if (!isBundledEnvironment()) {
+    return '';
+  }
+
+  const functionAsString = (()=>{
+    // eslint-disable-next-line no-unused-vars
+    const a = ()=>{};
+  }).toString()
+    // When not minified, esbuild annotates the call to this function wrapper with PURE.
+    // We know further that the name of the wrapper function should be `__name`, but let's not
+    // hardcode that. Remove the PURE annotation to simplify the regex.
+    .replace('/* @__PURE__ */', '');
+  const functionStringMatch = functionAsString.match(/=\s*([\w_]+)\(/);
+  if (!functionStringMatch) {
+    throw new Error('Could not determine esbuild function wrapper name');
+  }
+
+  /**
+   * @param {Function} fn
+   * @param {string} value
+   */
+  const esbuildFunctionWrapper = (fn, value) =>
+    Object.defineProperty(fn, 'name', {value, configurable: true});
+  const wrapperFnName = functionStringMatch[1];
+  return `let ${wrapperFnName}=${esbuildFunctionWrapper}`;
+}
+
+/**
+ * @param {Function} fn
+ * @return {string}
+ */
+function getRuntimeFunctionName(fn) {
+  const match = fn.toString().match(/function ([\w$]+)/);
+  if (!match) throw new Error(`could not find function name for: ${fn}`);
+  return match[1];
+}
+
+// We setup a number of our page functions to automatically include their dependencies.
+// Because of esbuild bundling, we must refer to the actual (mangled) runtime function name.
+/** @type {Record<string, string>} */
+const names = {
+  truncate: getRuntimeFunctionName(truncate),
+  getNodeLabel: getRuntimeFunctionName(getNodeLabel),
+  getOuterHTMLSnippet: getRuntimeFunctionName(getOuterHTMLSnippet),
+  getNodeDetails: getRuntimeFunctionName(getNodeDetails),
+};
+
+truncate.toString = () => `function ${names.truncate}(string, characterLimit) {
   const Util = { ${Util.truncate} };
-  return (${truncateRawString})(string, characterLimit);
+  return Util.truncate(string, characterLimit);
 }`;
 
 /** @type {string} */
 const getNodeLabelRawString = getNodeLabel.toString();
-getNodeLabel.toString = () => `function getNodeLabel(element) {
+getNodeLabel.toString = () => `function ${names.getNodeLabel}(element) {
   ${truncate};
   return (${getNodeLabelRawString})(element);
 }`;
@@ -538,14 +605,14 @@ getNodeLabel.toString = () => `function getNodeLabel(element) {
 /** @type {string} */
 const getOuterHTMLSnippetRawString = getOuterHTMLSnippet.toString();
 // eslint-disable-next-line max-len
-getOuterHTMLSnippet.toString = () => `function getOuterHTMLSnippet(element, ignoreAttrs = [], snippetCharacterLimit = 500) {
+getOuterHTMLSnippet.toString = () => `function ${names.getOuterHTMLSnippet}(element, ignoreAttrs = [], snippetCharacterLimit = 500) {
   ${truncate};
   return (${getOuterHTMLSnippetRawString})(element, ignoreAttrs, snippetCharacterLimit);
 }`;
 
 /** @type {string} */
 const getNodeDetailsRawString = getNodeDetails.toString();
-getNodeDetails.toString = () => `function getNodeDetails(element) {
+getNodeDetails.toString = () => `function ${names.getNodeDetails}(element) {
   ${truncate};
   ${getNodePath};
   ${getNodeSelector};
@@ -568,5 +635,6 @@ export const pageFunctions = {
   wrapRequestIdleCallback,
   getBoundingClientRect,
   truncate,
-  esbuildFunctionNameStubString,
+  esbuildFunctionWrapperString,
+  getRuntimeFunctionName,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "10.4.0-dev.20230719",
+  "version": "10.4.0-dev.20230720",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -181,7 +181,7 @@
   "dependencies": {
     "@sentry/node": "^6.17.4",
     "axe-core": "4.7.2",
-    "chrome-launcher": "^0.15.2",
+    "chrome-launcher": "^1.0.0",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.1",
     "devtools-protocol": "0.0.1155343",
@@ -190,7 +190,7 @@
     "intl-messageformat": "^4.4.0",
     "jpeg-js": "^0.4.4",
     "js-library-detector": "^6.6.0",
-    "lighthouse-logger": "^1.4.1",
+    "lighthouse-logger": "^2.0.1",
     "lighthouse-stack-packs": "1.11.0",
     "lodash": "^4.17.21",
     "lookup-closest-locale": "6.2.0",

package/readme.md

@@ -337,6 +337,8 @@ 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.
+
 * **[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.
 
 * **[Screpy](https://screpy.com)** - Screpy is a web analysis tool that can analyze all pages of your websites in one dashboard and monitor them with your team. It's powered by Lighthouse and it also includes some different analysis tools (SERP, W3C, Uptime, etc). Screpy has free and paid plans.

package/types/internal/lighthouse-logger.d.ts

@@ -1,34 +0,0 @@
-/**
- * @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.
- */
-
-declare module 'lighthouse-logger' {
-  interface Status {
-    msg: string;
-    id: string;
-    args?: any[];
-  }
-  export function setLevel(level: string): void;
-  export function isVerbose(): boolean;
-  export function formatProtocol(prefix: string, data: Object, level?: string): void;
-  export function log(title: string, ...args: any[]): void;
-  export function warn(title: string, ...args: any[]): void;
-  export function error(title: string, ...args: any[]): void;
-  export function verbose(title: string, ...args: any[]): void;
-  export function time(status: Status, level?: string): void;
-  export function timeEnd(status: Status, level?: string): void;
-  export function reset(): string;
-  export const cross: string;
-  export const dim: string;
-  export const tick: string;
-  export const bold: string;
-  export const purple: string;
-  export function redify(message: any): string;
-  export function greenify(message: any): string;
-  /** Retrieves and clears all stored time entries */
-  export function takeTimeEntries(): PerformanceEntry[];
-  export function getTimeEntries(): PerformanceEntry[];
-  export const events: import('events').EventEmitter;
-}