docs(config): update to reflect changes in FR

core/config/default-config.js

@@ -123,54 +123,49 @@ const UIStrings = {
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 
-// Ensure all artifact IDs match the typedefs.
-/** @type {Record<keyof LH.FRArtifacts, string>} */
+/** @type {SelfMap<keyof LH.FRArtifacts>} */
 const artifacts = {
-  DevtoolsLog: '',
-  Trace: '',
-  Accessibility: '',
-  AnchorElements: '',
-  CacheContents: '',
-  ConsoleMessages: '',
-  CSSUsage: '',
-  Doctype: '',
-  DOMStats: '',
-  EmbeddedContent: '',
-  FontSize: '',
-  Inputs: '',
-  FullPageScreenshot: '',
-  GlobalListeners: '',
-  IFrameElements: '',
-  ImageElements: '',
-  InstallabilityErrors: '',
-  InspectorIssues: '',
-  JsUsage: '',
-  LinkElements: '',
-  MainDocumentContent: '',
-  MetaElements: '',
-  NetworkUserAgent: '',
-  OptimizedImages: '',
-  PasswordInputsWithPreventedPaste: '',
-  ResponseCompression: '',
-  RobotsTxt: '',
-  ServiceWorker: '',
-  ScriptElements: '',
-  Scripts: '',
-  SourceMaps: '',
-  Stacks: '',
-  TagsBlockingFirstPaint: '',
-  TapTargets: '',
-  TraceElements: '',
-  ViewportDimensions: '',
-  WebAppManifest: '',
-  devtoolsLogs: '',
-  traces: '',
+  DevtoolsLog: 'DevtoolsLog',
+  Trace: 'Trace',
+  Accessibility: 'Accessibility',
+  AnchorElements: 'AnchorElements',
+  CacheContents: 'CacheContents',
+  ConsoleMessages: 'ConsoleMessages',
+  CSSUsage: 'CSSUsage',
+  Doctype: 'Doctype',
+  DOMStats: 'DOMStats',
+  EmbeddedContent: 'EmbeddedContent',
+  FontSize: 'FontSize',
+  Inputs: 'Inputs',
+  FullPageScreenshot: 'FullPageScreenshot',
+  GlobalListeners: 'GlobalListeners',
+  IFrameElements: 'IFrameElements',
+  ImageElements: 'ImageElements',
+  InstallabilityErrors: 'InstallabilityErrors',
+  InspectorIssues: 'InspectorIssues',
+  JsUsage: 'JsUsage',
+  LinkElements: 'LinkElements',
+  MainDocumentContent: 'MainDocumentContent',
+  MetaElements: 'MetaElements',
+  NetworkUserAgent: 'NetworkUserAgent',
+  OptimizedImages: 'OptimizedImages',
+  PasswordInputsWithPreventedPaste: 'PasswordInputsWithPreventedPaste',
+  ResponseCompression: 'ResponseCompression',
+  RobotsTxt: 'RobotsTxt',
+  ServiceWorker: 'ServiceWorker',
+  ScriptElements: 'ScriptElements',
+  Scripts: 'Scripts',
+  SourceMaps: 'SourceMaps',
+  Stacks: 'Stacks',
+  TagsBlockingFirstPaint: 'TagsBlockingFirstPaint',
+  TapTargets: 'TapTargets',
+  TraceElements: 'TraceElements',
+  ViewportDimensions: 'ViewportDimensions',
+  WebAppManifest: 'WebAppManifest',
+  devtoolsLogs: 'devtoolsLogs',
+  traces: 'traces',
 };
 
-for (const key of Object.keys(artifacts)) {
-  artifacts[/** @type {keyof typeof artifacts} */ (key)] = key;
-}
-
 /** @type {LH.Config.Json} */
 const defaultConfig = {
   settings: constants.defaultSettings,

docs/configuration.md

@@ -1,3 +1,8 @@
+<!---
+TODO(rm-legacy): Remove this when legacy path is gone.
+-->
+> **WARNING**: This config format is for configs in version 10.0 and beyond. Please read the [legacy config](#legacy-configs) section if you are using the old config format.
+
 # Lighthouse Configuration
 
 The Lighthouse config object is the primary method of customizing Lighthouse to suit your use case. Using a custom config, you can limit the audits to run, add additional loads of the page under special conditions, add your own custom checks, tweak the scoring, and more.
@@ -10,7 +15,7 @@ You can specify a custom config file when using Lighthouse through the CLI or co
 
 **custom-config.js file**
 ```js
-module.exports = {
+export default {
   extends: 'lighthouse:default',
   settings: {
     onlyAudits: [
@@ -29,9 +34,9 @@ lighthouse --config-path=path/to/custom-config.js https://example.com
 
 **Use config file via Node**
 ```js
-const lighthouse = require('lighthouse');
-const config = require('./path/to/custom-config.js');
-lighthouse('https://example.com/', {port: 9222}, config);
+import lighthouse from 'lighthouse';
+import config from './path/to/custom-config.js';
+await lighthouse('https://example.com/', {port: 9222}, config);
 ```
 
 ## Properties
@@ -79,44 +84,23 @@ For full list see [our config settings typedef](https://github.com/GoogleChrome/
 | onlyAudits | `string[]` | Includes only the specified audits in the final report. Additive with `onlyCategories` and reduces the time to audit a page. |
 | skipAudits | `string[]` | Excludes the specified audits from the final report. Takes priority over `onlyCategories`, not usable in conjuction with `onlyAudits`, and reduces the time to audit a page. |
 
-### `passes: Object[]`
-
-The passes property controls how to load the requested URL and what information to gather about the page while loading. Each entry in the passes array represents one load of the page (e.g. 4 entries in `passes` will load the page 4 times), so be judicious about adding multiple entries here to avoid extending run times.
+### `artifacts: Object[]`
 
-Each `passes` entry defines basic settings such as how long to wait for the page to load and whether to record a trace file. Additionally a list of **gatherers** to use is defined per pass. Gatherers can read information from the page to generate artifacts which are later used by audits to provide you with a Lighthouse report. For more information on implementing a custom gatherer and the role they play in building a Lighthouse report, refer to the [recipes](https://github.com/GoogleChrome/lighthouse/blob/master/docs/recipes/custom-audit). Also note that `artifacts.devtoolsLogs` will be automatically populated for every pass. Gatherers also have access to this data within the `afterPass` as `traceData.devtoolsLog` (However, most will find the higher-level `traceData.networkRecords` more useful).
+The list of artifacts to collect on a single Lighthouse run. This property is required and on extension will be concatenated with the existing set of artifacts.
 
-For list of default pass values, see [our config constants](https://github.com/GoogleChrome/lighthouse/blob/master/core/config/constants.js).
-
-#### Example
 ```js
 {
-  passes: [
-    {
-      passName: 'fastPass',
-      gatherers: ['fast-gatherer'],
-    },
-    {
-      passName: 'slowPass',
-      recordTrace: true,
-      useThrottling: true,
-      networkQuietThresholdMs: 5000,
-      gatherers: ['slow-gatherer'],
-    }
+  artifacts: [
+    {id: 'Accessibility', gatherer: 'accessibility'},
+    {id: 'AnchorElements', gatherer: 'anchor-elements'},
   ]
 }
 ```
 
-#### Options
 | Name | Type | Description |
 | -- | -- | -- |
-| passName | `string` | A unique identifier for the pass used in audits and during config extension. |
-| recordTrace | `boolean` | Records a [trace](https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md#understanding-a-trace) of the pass when enabled. Available to gatherers during `afterPass` as `traceData.trace` and to audits in `artifacts.traces`. |
-| useThrottling | `boolean` | Enables throttling of the pass when enabled. |
-| pauseAfterLoadMs | `number` | The number of milliseconds to wait after the load event before the pass can continue. Used to ensure the page has had time for post-load JavaScript to execute before ending a trace. (Default: 0) |
-| networkQuietThresholdMs | `number` | The number of milliseconds since the last network request to wait before the page should be considered to have reached 'network quiet'. Used to ensure the page has had time for the full waterfall of network requests to complete before ending a trace. (Default: 5000) |
-| pauseAfterNetworkQuietMs | `number` | The number of milliseconds to wait after 'network quiet' before the pass can continue. Used to ensure the page has had time for post-network-quiet JavaScript to execute before ending a trace. (Default: 0) |
-| blockedUrlPatterns | `string[]` | URLs of requests to block while loading the page. Basic wildcard support using `*`.  |
-| gatherers | `string[]` | The list of gatherers to run on this pass. This property is required and on extension will be concatenated with the existing set of gatherers. |
+| id | `string` | Unique identifier for this artifact. This is how the artifact is referenced in audits. |
+| gatherer | `string` | Gatherer used to produce this artifact. Does not need to be unique within the `artifacts` list. |
 
 ### `audits: string[]`
 
@@ -132,7 +116,6 @@ The audits property controls which audits to run and include with your Lighthous
 }
 ```
 
-
 ### `categories: Object|undefined`
 
 The categories property controls how to score and organize the audit results in the report. Each category defined in the config will have an entry in the `categories` property of Lighthouse's output. The category output contains the child audit results along with an overall score for the category.
@@ -211,3 +194,69 @@ The best examples are the ones Lighthouse uses itself! There are several referen
 * [core/config/perf-config.js](https://github.com/GoogleChrome/lighthouse/blob/master/core/config/perf-config.js)
 * [docs/recipes/custom-audit/custom-config.js](https://github.com/GoogleChrome/lighthouse/blob/master/docs/recipes/custom-audit/custom-config.js)
 * [pwmetrics](https://github.com/paulirish/pwmetrics/blob/v4.1.1/lib/perf-config.ts)
+
+## Legacy Configs
+
+Older versions of Lighthouse (pre-10.0) use a slightly different config format. The biggest difference is that the new configs do not include `passes`. If you want to load a page multiple times, we recommend creating a [user flow](https://github.com/GoogleChrome/lighthouse/blob/master/docs/user-flows.md).
+
+- v9 configuration docs: https://github.com/GoogleChrome/lighthouse/blob/branch-9/docs/configuration.md
+
+### `passes: Object[]`
+
+The passes property controls how to load the requested URL and what information to gather about the page while loading. Each entry in the passes array represents one load of the page (e.g. 4 entries in `passes` will load the page 4 times), so be judicious about adding multiple entries here to avoid extending run times.
+
+Each `passes` entry defines basic settings such as how long to wait for the page to load and whether to record a trace file. Additionally a list of **gatherers** to use is defined per pass. Gatherers can read information from the page to generate artifacts which are later used by audits to provide you with a Lighthouse report. For more information on implementing a custom gatherer and the role they play in building a Lighthouse report, refer to the [recipes](https://github.com/GoogleChrome/lighthouse/blob/master/docs/recipes/custom-audit). Also note that `artifacts.devtoolsLogs` will be automatically populated for every pass. Gatherers also have access to this data within the `afterPass` as `traceData.devtoolsLog` (However, most will find the higher-level `traceData.networkRecords` more useful).
+
+For list of default pass values, see [our config constants](https://github.com/GoogleChrome/lighthouse/blob/master/core/config/constants.js).
+
+#### Example
+```js
+{
+  passes: [
+    {
+      passName: 'fastPass',
+      gatherers: ['fast-gatherer'],
+    },
+    {
+      passName: 'slowPass',
+      recordTrace: true,
+      useThrottling: true,
+      networkQuietThresholdMs: 5000,
+      gatherers: ['slow-gatherer'],
+    }
+  ]
+}
+```
+
+#### Options
+| Name | Type | Description |
+| -- | -- | -- |
+| passName | `string` | A unique identifier for the pass used in audits and during config extension. |
+| recordTrace | `boolean` | Records a [trace](https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md#understanding-a-trace) of the pass when enabled. Available to gatherers during `afterPass` as `traceData.trace` and to audits in `artifacts.traces`. |
+| useThrottling | `boolean` | Enables throttling of the pass when enabled. |
+| pauseAfterLoadMs | `number` | The number of milliseconds to wait after the load event before the pass can continue. Used to ensure the page has had time for post-load JavaScript to execute before ending a trace. (Default: 0) |
+| networkQuietThresholdMs | `number` | The number of milliseconds since the last network request to wait before the page should be considered to have reached 'network quiet'. Used to ensure the page has had time for the full waterfall of network requests to complete before ending a trace. (Default: 5000) |
+| pauseAfterNetworkQuietMs | `number` | The number of milliseconds to wait after 'network quiet' before the pass can continue. Used to ensure the page has had time for post-network-quiet JavaScript to execute before ending a trace. (Default: 0) |
+| blockedUrlPatterns | `string[]` | URLs of requests to block while loading the page. Basic wildcard support using `*`.  |
+| gatherers | `string[]` | The list of gatherers to run on this pass. This property is required and on extension will be concatenated with the existing set of gatherers. |
+
+### Migrating to 10.0 format
+
+1. Combine the gatherer lists in [`config.passes`](#passes-object) into [`config.artifacts`](#artifacts-object), giving each artifact a unique ID.
+1. Remove [`config.passes`](#passes-object) property. Pass properties such as `pauseAfterLoadMs` are defined on `config.settings` in 10.0 configs.
+
+### Using legacy configs in 10.0
+
+The old config format can still be used in 10.0 but it's behind a separate path in the CLI and Node API.
+
+**Use config file via CLI**
+```sh
+lighthouse --legacy-navigation --config-path=path/to/custom-config.js https://example.com
+```
+
+**Use config file via Node**
+```js
+import {legacyNavigation} from 'lighthouse';
+import config from './path/to/custom-config.js';
+await legacyNavigation('https://example.com/', {port: 9222}, config);
+```