lighthouse 9.6.7 → 10.0.0

package/eslint-local-rules.cjs

@@ -0,0 +1,106 @@
+/**
+ * @license Copyright 2019 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.
+ */
+'use strict';
+
+/**
+ * @fileoverview A collection of eslint rules written specifically for
+ * Lighthouse. These are included by the eslint-plugin-local-rules plugin.
+ */
+
+const path = require('path');
+
+/** @typedef {import('eslint').Rule.RuleModule} RuleModule */
+
+/**
+ * Use `require.resolve()` to resolve the location of `path` from a location of
+ * `baseDir` and return it. Returns null if unable to resolve a path.
+ * @param {string} path
+ * @param {string} baseDir
+ * @return {string|null}
+ */
+function requireResolveOrNull(path, baseDir) {
+  try {
+    return require.resolve(path, {
+      paths: [baseDir],
+    });
+  } catch (err) {
+    return null;
+  }
+}
+
+/**
+ * An eslint rule ensuring that any require() of a local path (aka not a core
+ * module or a module dependency) includes a file extension (.js' or '.json').
+ * @type {RuleModule}
+ */
+const requireFileExtension = {
+  meta: {
+    docs: {
+      description: 'disallow require() without a file extension',
+      category: 'Best Practices',
+      recommended: false,
+    },
+    schema: [],
+    fixable: 'code',
+  },
+
+  create(context) {
+    return {
+      CallExpression(node) {
+        // Only look at instances of `require(moduleName: string)`.
+        if (node.type !== 'CallExpression') return;
+        if (node.callee.type !== 'Identifier' || node.callee.name !== 'require') return;
+        if (!node.arguments.length) return;
+        const arg0 = node.arguments[0];
+        if (arg0.type !== 'Literal' || typeof arg0.value !== 'string') return;
+
+        const requiredPath = arg0.value;
+
+        // If it's not a local file, we don't care.
+        if (!requiredPath.startsWith('.')) return;
+
+        // Check that `requiredPath` is resolvable from the source file.
+        const contextDirname = path.dirname(context.getFilename());
+        const resolvedRequiredPath = requireResolveOrNull(requiredPath, contextDirname);
+        if (!resolvedRequiredPath) {
+          return context.report({
+            node: node,
+            message: `Cannot resolve module '${requiredPath}'.`,
+          });
+        }
+
+        // If it has a file extension, it's good to go.
+        if (requiredPath.endsWith('.js')) return;
+        if (requiredPath.endsWith('.json')) return;
+
+        context.report({
+          node: node,
+          message: 'Local require path must have a file extension.',
+          fix(fixer) {
+            // Find the correct file extension/filename ending of the requiredPath.
+            let fixedPath = path.relative(contextDirname, resolvedRequiredPath);
+            if (!fixedPath.startsWith('.')) fixedPath = `./${fixedPath}`;
+
+            // Usually `fixedPath.startsWith(requiredPath)` and this will just add
+            // a suffix to the existing path, but sometimes humans write confusing
+            // paths, e.g. './core/lib/../lib/lh-error.js'. To cover both
+            // cases, double check that the paths resolve to the same file.
+            const resolvedFixedPath = requireResolveOrNull(fixedPath, contextDirname);
+
+            // If somehow they don't point to the same file, don't try to fix.
+            if (resolvedFixedPath !== resolvedRequiredPath) return null;
+
+            return fixer.replaceText(arg0, `'${fixedPath}'`);
+          },
+        });
+      },
+    };
+  },
+};
+
+module.exports = {
+  'require-file-extension': requireFileExtension,
+};

package/eslint-local-rules.d.cts

@@ -0,0 +1,6 @@
+declare const _exports: {
+    'require-file-extension': import("eslint").Rule.RuleModule;
+};
+export = _exports;
+export type RuleModule = import('eslint').Rule.RuleModule;
+//# sourceMappingURL=eslint-local-rules.d.cts.map

package/esm-utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Commonjs equivalent of `require.resolve`.
+ * @param {string} packageName
+ */
+export function resolveModulePath(packageName: string): string;
+/**
+ * @param {ImportMeta} importMeta
+ */
+export function getModulePath(importMeta: ImportMeta): string;
+/**
+ * @param {ImportMeta} importMeta
+ */
+export function getModuleDirectory(importMeta: ImportMeta): string;
+//# sourceMappingURL=esm-utils.d.ts.map

package/esm-utils.js

@@ -0,0 +1,38 @@
+/**
+ * @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.
+ */
+
+import {createRequire} from 'module';
+import url from 'url';
+import path from 'path';
+
+/**
+ * Commonjs equivalent of `require.resolve`.
+ * @param {string} packageName
+ */
+function resolveModulePath(packageName) {
+  const require = createRequire(import.meta.url);
+  return require.resolve(packageName);
+}
+
+/**
+ * @param {ImportMeta} importMeta
+ */
+function getModulePath(importMeta) {
+  return url.fileURLToPath(importMeta.url);
+}
+
+/**
+ * @param {ImportMeta} importMeta
+ */
+function getModuleDirectory(importMeta) {
+  return path.dirname(getModulePath(importMeta));
+}
+
+export {
+  resolveModulePath,
+  getModulePath,
+  getModuleDirectory,
+};

package/flow-report/api.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @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.
+ */
+export declare function renderFlowReport(flowResult: LH.FlowResult, root: HTMLElement, options?: LH.FlowReportOptions): void;
+//# sourceMappingURL=api.d.ts.map

package/flow-report/assets/standalone-flow-template.html

@@ -19,7 +19,7 @@ limitations under the License.
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
-  <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
+  <link rel="icon" href='data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="m14 7 10-7 10 7v10h5v7h-5l5 24H9l5-24H9v-7h5V7Z" fill="%23F63"/><path d="M31.561 24H14l-1.689 8.105L31.561 24ZM18.983 48H9l1.022-4.907L35.723 32.27l1.663 7.98L18.983 48Z" fill="%23FFA385"/><path fill="%23FF3" d="M20.5 10h7v7h-7z"/></svg>'>
   <title>Lighthouse Flow Report</title>
   <style>/*%%LIGHTHOUSE_FLOW_CSS%%*/</style>
   <style>body {margin: 0}</style>

package/flow-report/clients/standalone.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @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.
+ */
+export {};
+//# sourceMappingURL=standalone.d.ts.map

package/flow-report/src/app.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @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.
+ */
+import { FunctionComponent } from 'preact';
+export declare const App: FunctionComponent<{
+    flowResult: LH.FlowResult;
+    options?: LH.FlowReportOptions;
+}>;
+//# sourceMappingURL=app.d.ts.map

package/flow-report/src/app.tsx

@@ -16,7 +16,7 @@ import {Header} from './header';
 import {I18nProvider} from './i18n/i18n';
 import {Styles} from './wrappers/styles';
 
-function getAnchorElement(hashState: LH.FlowResult.HashState|null) {
+function getAnchorElement(hashState: LH.HashState|null) {
   if (!hashState || !hashState.anchor) return null;
   return document.getElementById(hashState.anchor);
 }

package/flow-report/src/common.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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.
+ */
+import { FunctionComponent } from 'preact';
+declare const Separator: FunctionComponent;
+declare const FlowStepIcon: FunctionComponent<{
+    mode: LH.Result.GatherMode;
+}>;
+declare const FlowSegment: FunctionComponent<{
+    mode?: LH.Result.GatherMode;
+}>;
+declare const FlowStepThumbnail: FunctionComponent<{
+    lhr: LH.Result;
+    width?: number;
+    height?: number;
+}>;
+export { Separator, FlowStepIcon, FlowSegment, FlowStepThumbnail, };
+//# sourceMappingURL=common.d.ts.map

package/flow-report/src/common.tsx

@@ -8,7 +8,8 @@ import {FunctionComponent} from 'preact';
 import {useEffect, useState} from 'preact/hooks';
 
 import {NavigationIcon, SnapshotIcon, TimespanIcon} from './icons';
-import {getFilmstripFrames, getScreenDimensions, getFullPageScreenshot} from './util';
+import {getFilmstripFrames, getScreenDimensions} from './util';
+import {Util} from '../../shared/util.js';
 
 const ANIMATION_FRAME_DURATION_MS = 500;
 
@@ -76,7 +77,6 @@ const FlowStepThumbnail: FunctionComponent<{
   width?: number,
   height?: number,
 }> = ({lhr, width, height}) => {
-  const fullPageScreenshot = getFullPageScreenshot(lhr);
   const frames = getFilmstripFrames(lhr);
 
   // Resize the image to fit the viewport aspect ratio.
@@ -99,7 +99,7 @@ const FlowStepThumbnail: FunctionComponent<{
       return <FlowStepAnimatedThumbnail frames={frames} width={width} height={height} />;
     }
   } else {
-    thumbnail = fullPageScreenshot?.screenshot.data;
+    thumbnail = Util.getFullPageScreenshot(lhr)?.screenshot.data;
   }
 
   return <>

package/flow-report/src/header.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @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.
+ */
+import { FunctionComponent } from 'preact';
+export declare const Header: FunctionComponent<{
+    hashState: LH.HashState;
+}>;
+//# sourceMappingURL=header.d.ts.map

package/flow-report/src/header.tsx

@@ -29,7 +29,7 @@ const HeaderThumbnail: FunctionComponent<{
   );
 };
 
-export const Header: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
+export const Header: FunctionComponent<{hashState: LH.HashState}> =
 ({hashState}) => {
   const flowResult = useFlowResult();
   const {index} = hashState;

package/flow-report/src/help-dialog.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @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.
+ */
+import { FunctionComponent } from 'preact';
+export declare const HelpDialog: FunctionComponent<{
+    onClose: () => void;
+}>;
+//# sourceMappingURL=help-dialog.d.ts.map

package/flow-report/src/i18n/i18n.d.ts

@@ -0,0 +1,212 @@
+/**
+ * @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.
+ */
+import { FunctionComponent } from 'preact';
+import { I18nFormatter } from '../../../report/renderer/i18n-formatter';
+declare function useI18n(): {
+    formatter: I18nFormatter;
+    strings: {
+        navigationDescription: string;
+        timespanDescription: string;
+        snapshotDescription: string;
+        navigationLongDescription: string;
+        timespanLongDescription: string;
+        snapshotLongDescription: string;
+        navigationReport: string;
+        timespanReport: string;
+        snapshotReport: string;
+        summary: string;
+        allReports: string;
+        title: string;
+        categories: string;
+        categoryPerformance: string;
+        categoryAccessibility: string;
+        categoryBestPractices: string;
+        categorySeo: string;
+        categoryProgressiveWebApp: string;
+        desktop: string;
+        mobile: string;
+        ratingPass: string;
+        ratingAverage: string;
+        ratingFail: string;
+        ratingError: string;
+        navigationReportCount: string;
+        timespanReportCount: string;
+        snapshotReportCount: string;
+        save: string;
+        helpLabel: string;
+        helpDialogTitle: string;
+        helpUseCaseInstructionNavigation: string;
+        helpUseCaseInstructionTimespan: string;
+        helpUseCaseInstructionSnapshot: string;
+        helpUseCaseNavigation1: string;
+        helpUseCaseNavigation2: string;
+        helpUseCaseNavigation3: string;
+        helpUseCaseTimespan1: string;
+        helpUseCaseTimespan2: string;
+        helpUseCaseSnapshot1: string;
+        helpUseCaseSnapshot2: string;
+        passedAuditCount: string;
+        passableAuditCount: string;
+        informativeAuditCount: string;
+        highestImpact: string;
+        varianceDisclaimer: string;
+        calculatorLink: string;
+        showRelevantAudits: string;
+        opportunityResourceColumnLabel: string;
+        opportunitySavingsColumnLabel: string;
+        errorMissingAuditInfo: string;
+        errorLabel: string;
+        warningHeader: string;
+        warningAuditsGroupTitle: string;
+        passedAuditsGroupTitle: string;
+        notApplicableAuditsGroupTitle: string;
+        manualAuditsGroupTitle: string;
+        toplevelWarningsMessage: string;
+        crcInitialNavigation: string;
+        crcLongestDurationLabel: string;
+        snippetExpandButtonLabel: string;
+        snippetCollapseButtonLabel: string;
+        lsPerformanceCategoryDescription: string;
+        labDataTitle: string;
+        thirdPartyResourcesLabel: string;
+        viewTreemapLabel: string;
+        viewTraceLabel: string;
+        viewOriginalTraceLabel: string;
+        dropdownPrintSummary: string;
+        dropdownPrintExpanded: string;
+        dropdownCopyJSON: string;
+        dropdownSaveHTML: string;
+        dropdownSaveJSON: string;
+        dropdownViewer: string;
+        dropdownSaveGist: string;
+        dropdownDarkTheme: string;
+        runtimeSettingsDevice: string;
+        runtimeSettingsNetworkThrottling: string;
+        runtimeSettingsCPUThrottling: string;
+        runtimeSettingsUANetwork: string;
+        runtimeSettingsBenchmark: string;
+        runtimeSettingsAxeVersion: string;
+        runtimeSettingsScreenEmulation: string;
+        footerIssue: string;
+        runtimeNoEmulation: string;
+        runtimeMobileEmulation: string;
+        runtimeDesktopEmulation: string;
+        runtimeUnknown: string;
+        runtimeSingleLoad: string;
+        runtimeAnalysisWindow: string;
+        runtimeSingleLoadTooltip: string;
+        throttlingProvided: string;
+        show: string;
+        hide: string;
+        expandView: string;
+        collapseView: string;
+        runtimeSlow4g: string;
+        runtimeCustom: string;
+    };
+};
+declare function useLocalizedStrings(): {
+    navigationDescription: string;
+    timespanDescription: string;
+    snapshotDescription: string;
+    navigationLongDescription: string;
+    timespanLongDescription: string;
+    snapshotLongDescription: string;
+    navigationReport: string;
+    timespanReport: string;
+    snapshotReport: string;
+    summary: string;
+    allReports: string;
+    title: string;
+    categories: string;
+    categoryPerformance: string;
+    categoryAccessibility: string;
+    categoryBestPractices: string;
+    categorySeo: string;
+    categoryProgressiveWebApp: string;
+    desktop: string;
+    mobile: string;
+    ratingPass: string;
+    ratingAverage: string;
+    ratingFail: string;
+    ratingError: string;
+    navigationReportCount: string;
+    timespanReportCount: string;
+    snapshotReportCount: string;
+    save: string;
+    helpLabel: string;
+    helpDialogTitle: string;
+    helpUseCaseInstructionNavigation: string;
+    helpUseCaseInstructionTimespan: string;
+    helpUseCaseInstructionSnapshot: string;
+    helpUseCaseNavigation1: string;
+    helpUseCaseNavigation2: string;
+    helpUseCaseNavigation3: string;
+    helpUseCaseTimespan1: string;
+    helpUseCaseTimespan2: string;
+    helpUseCaseSnapshot1: string;
+    helpUseCaseSnapshot2: string;
+    passedAuditCount: string;
+    passableAuditCount: string;
+    informativeAuditCount: string;
+    highestImpact: string;
+    varianceDisclaimer: string;
+    calculatorLink: string;
+    showRelevantAudits: string;
+    opportunityResourceColumnLabel: string;
+    opportunitySavingsColumnLabel: string;
+    errorMissingAuditInfo: string;
+    errorLabel: string;
+    warningHeader: string;
+    warningAuditsGroupTitle: string;
+    passedAuditsGroupTitle: string;
+    notApplicableAuditsGroupTitle: string;
+    manualAuditsGroupTitle: string;
+    toplevelWarningsMessage: string;
+    crcInitialNavigation: string;
+    crcLongestDurationLabel: string;
+    snippetExpandButtonLabel: string;
+    snippetCollapseButtonLabel: string;
+    lsPerformanceCategoryDescription: string;
+    labDataTitle: string;
+    thirdPartyResourcesLabel: string;
+    viewTreemapLabel: string;
+    viewTraceLabel: string;
+    viewOriginalTraceLabel: string;
+    dropdownPrintSummary: string;
+    dropdownPrintExpanded: string;
+    dropdownCopyJSON: string;
+    dropdownSaveHTML: string;
+    dropdownSaveJSON: string;
+    dropdownViewer: string;
+    dropdownSaveGist: string;
+    dropdownDarkTheme: string;
+    runtimeSettingsDevice: string;
+    runtimeSettingsNetworkThrottling: string;
+    runtimeSettingsCPUThrottling: string;
+    runtimeSettingsUANetwork: string;
+    runtimeSettingsBenchmark: string;
+    runtimeSettingsAxeVersion: string;
+    runtimeSettingsScreenEmulation: string;
+    footerIssue: string;
+    runtimeNoEmulation: string;
+    runtimeMobileEmulation: string;
+    runtimeDesktopEmulation: string;
+    runtimeUnknown: string;
+    runtimeSingleLoad: string;
+    runtimeAnalysisWindow: string;
+    runtimeSingleLoadTooltip: string;
+    throttlingProvided: string;
+    show: string;
+    hide: string;
+    expandView: string;
+    collapseView: string;
+    runtimeSlow4g: string;
+    runtimeCustom: string;
+};
+declare function useStringFormatter(): (str: string, values?: Record<string, string | number>) => string;
+declare const I18nProvider: FunctionComponent;
+export { useI18n, useLocalizedStrings, useStringFormatter, I18nProvider, };
+//# sourceMappingURL=i18n.d.ts.map

package/flow-report/src/i18n/i18n.tsx

@@ -8,13 +8,17 @@ import {createContext, FunctionComponent} from 'preact';
 import {useContext, useMemo} from 'preact/hooks';
 
 import {formatMessage} from '../../../shared/localization/format';
-import {I18n} from '../../../report/renderer/i18n';
+import {I18nFormatter} from '../../../report/renderer/i18n-formatter';
 import {UIStrings} from './ui-strings';
 import {useFlowResult} from '../util';
-import strings from './localized-strings';
-import {Util} from '../../../report/renderer/util';
+import strings from './localized-strings.js';
+import {UIStrings as ReportUIStrings} from '../../../report/renderer/report-utils.js';
+import {Globals} from '../../../report/renderer/report-globals.js';
 
-const I18nContext = createContext(new I18n('en-US', {...Util.UIStrings, ...UIStrings}));
+const I18nContext = createContext({
+  formatter: new I18nFormatter('en-US'),
+  strings: {...ReportUIStrings, ...UIStrings},
+});
 
 function useLhrLocale() {
   const flowResult = useFlowResult();
@@ -51,23 +55,24 @@ const I18nProvider: FunctionComponent = ({children}) => {
   const {locale, lhrStrings} = useLhrLocale();
 
   const i18n = useMemo(() => {
-    const i18n = new I18n(locale, {
-      // Set any missing lhr strings to default (english) values.
-      ...Util.UIStrings,
-      // Preload with strings from the first lhr.
-      // Used for legacy report components imported into the flow report.
-      ...lhrStrings,
-      // Set any missing flow strings to default (english) values.
-      ...UIStrings,
-      // `strings` is generated in build/build-report.js
-      ...strings[locale],
+    Globals.apply({
+      providedStrings: {
+        // Preload with strings from the first lhr.
+        // Used for legacy report components imported into the flow report.
+        ...lhrStrings,
+        // Set any missing flow strings to default (english) values.
+        ...UIStrings,
+        // `strings` is generated in build/build-report.js
+        ...strings[locale],
+      },
+      i18n: new I18nFormatter(locale),
+      reportJson: null,
     });
 
-    // Initialize renderer util i18n for strings rendered in wrapped components.
-    // TODO: Don't attach global i18n to `Util`.
-    Util.i18n = i18n;
-
-    return i18n;
+    return {
+      formatter: Globals.i18n,
+      strings: Globals.strings as typeof UIStrings & typeof ReportUIStrings,
+    };
   }, [locale, lhrStrings]);
 
   return (

package/flow-report/src/i18n/localized-strings.d.ts

@@ -0,0 +1,9 @@
+export default strings;
+/**
+ * @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.
+ */
+/** @type {Record<LH.Locale, import('./ui-strings.js').UIStringsType>} */
+declare const strings: Record<LH.Locale, import('./ui-strings.js').UIStringsType>;
+//# sourceMappingURL=localized-strings.d.ts.map

package/flow-report/src/i18n/ui-strings.d.ts

@@ -0,0 +1,48 @@
+export namespace UIStrings {
+    const navigationDescription: string;
+    const timespanDescription: string;
+    const snapshotDescription: string;
+    const navigationLongDescription: string;
+    const timespanLongDescription: string;
+    const snapshotLongDescription: string;
+    const navigationReport: string;
+    const timespanReport: string;
+    const snapshotReport: string;
+    const summary: string;
+    const allReports: string;
+    const title: string;
+    const categories: string;
+    const categoryPerformance: string;
+    const categoryAccessibility: string;
+    const categoryBestPractices: string;
+    const categorySeo: string;
+    const categoryProgressiveWebApp: string;
+    const desktop: string;
+    const mobile: string;
+    const ratingPass: string;
+    const ratingAverage: string;
+    const ratingFail: string;
+    const ratingError: string;
+    const navigationReportCount: string;
+    const timespanReportCount: string;
+    const snapshotReportCount: string;
+    const save: string;
+    const helpLabel: string;
+    const helpDialogTitle: string;
+    const helpUseCaseInstructionNavigation: string;
+    const helpUseCaseInstructionTimespan: string;
+    const helpUseCaseInstructionSnapshot: string;
+    const helpUseCaseNavigation1: string;
+    const helpUseCaseNavigation2: string;
+    const helpUseCaseNavigation3: string;
+    const helpUseCaseTimespan1: string;
+    const helpUseCaseTimespan2: string;
+    const helpUseCaseSnapshot1: string;
+    const helpUseCaseSnapshot2: string;
+    const passedAuditCount: string;
+    const passableAuditCount: string;
+    const informativeAuditCount: string;
+    const highestImpact: string;
+}
+export type UIStringsType = typeof UIStrings;
+//# sourceMappingURL=ui-strings.d.ts.map

package/flow-report/src/icons.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @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.
+ */
+import { FunctionComponent } from 'preact';
+declare const SummaryIcon: FunctionComponent;
+declare const NavigationIcon: FunctionComponent;
+declare const TimespanIcon: FunctionComponent;
+declare const SnapshotIcon: FunctionComponent;
+declare const CloseIcon: FunctionComponent;
+declare const EnvIcon: FunctionComponent;
+declare const NetworkIcon: FunctionComponent;
+declare const CpuIcon: FunctionComponent;
+declare const HamburgerIcon: FunctionComponent;
+declare const InfoIcon: FunctionComponent;
+export { SummaryIcon, NavigationIcon, TimespanIcon, SnapshotIcon, CloseIcon, EnvIcon, NetworkIcon, CpuIcon, HamburgerIcon, InfoIcon, };
+//# sourceMappingURL=icons.d.ts.map