report: extract independent report types

.eslintrc.js

@@ -6,6 +6,8 @@
 'use strict';
 
 module.exports = {
+  // All subdirectory eslintrcs extend from this one.
+  root: true,
   // start with google standard style
   //     https://github.com/google/eslint-config-google/blob/master/index.js
   extends: ['eslint:recommended', 'google'],

clients/.eslintrc.js

@@ -6,7 +6,6 @@
 'use strict';
 
 module.exports = {
-  extends: '../.eslintrc.js',
   env: {
     browser: true,
   },

lighthouse-core/util-commonjs.js

@@ -391,7 +391,7 @@ class Util {
   }
 
   /**
-   * @param {LH.Config.Settings} settings
+   * @param {LH.Result['configSettings']} settings
    * @return {!Array<{name: string, description: string}>}
    */
   static getEnvironmentDisplayValues(settings) {
@@ -414,7 +414,7 @@ class Util {
   }
 
   /**
-   * @param {LH.Config.Settings} settings
+   * @param {LH.Result['configSettings']} settings
    * @return {{deviceEmulation: string, networkThrottling: string, cpuThrottling: string}}
    */
   static getEmulationDescriptions(settings) {

lighthouse-treemap/types/treemap.d.ts

@@ -1,6 +1,9 @@
 import {Logger as _Logger} from '../../report/renderer/logger.js';
 import {FirebaseNamespace} from '@firebase/app-types';
 
+// Import for needed DOM type augmentation.
+import '../../report/types/augment-dom';
+
 declare global {
   class WebTreeMap {
     constructor(data: any, options: WebTreeMapOptions);
@@ -45,5 +48,3 @@ declare global {
     signal?: AbortSignal;
   }
 }
-
-export {};

lighthouse-viewer/.eslintrc.js

@@ -6,7 +6,6 @@
 'use strict';
 
 module.exports = {
-  extends: '../.eslintrc.js',
   env: {
     browser: true,
   },

lighthouse-viewer/types/viewer.d.ts

@@ -5,16 +5,13 @@
  */
 
 import _ReportGenerator = require('../../report/generator/report-generator.js');
-import {DOM as _DOM} from '../../report/renderer/dom.js';
-import {ReportRenderer as _ReportRenderer} from '../../report/renderer/report-renderer.js';
-import {ReportUIFeatures as _ReportUIFeatures} from '../../report/renderer/report-ui-features.js';
 import {Logger as _Logger} from '../../report/renderer/logger.js';
-import {TextEncoding as _TextEncoding} from '../../report/renderer/text-encoding.js';
 import {LighthouseReportViewer as _LighthouseReportViewer} from '../app/src/lighthouse-report-viewer.js';
-import 'google.analytics';
 import {FirebaseNamespace} from '@firebase/app-types';
-import '@firebase/auth-types';
+import _ReportResult from '../../report/types/report-result';
 
+// Import for needed DOM type augmentation.
+import '../../report/types/augment-dom';
 
 declare global {
   var ReportGenerator: typeof _ReportGenerator;
@@ -29,7 +26,9 @@ declare global {
     // Inserted by viewer build.
     LH_CURRENT_VERSION: string;
   }
+
+  // Expose global types in LH namespace.
+  module LH {
+    export import ReportResult = _ReportResult;
+  }
 }
-
-// empty export to keep file a module
-export {}

package.json

@@ -68,7 +68,7 @@
     "dogfood-lhci": "./lighthouse-core/scripts/dogfood-lhci.sh",
     "timing-trace": "node lighthouse-core/scripts/generate-timing-trace.js",
     "changelog": "conventional-changelog --config ./build/changelog-generator/index.js --infile changelog.md --same-file",
-    "type-check": "tsc -b . && tsc -p lighthouse-viewer/ && tsc -p lighthouse-treemap/ && tsc -p flow-report/",
+    "type-check": "tsc -b . && tsc -b report/ && tsc -p lighthouse-viewer/ && tsc -p lighthouse-treemap/ && tsc -p flow-report/",
     "i18n:checks": "./lighthouse-core/scripts/i18n/assert-strings-collected.sh",
     "i18n:collect-strings": "node lighthouse-core/scripts/i18n/collect-strings.js",
     "update:lantern-baseline": "node lighthouse-core/scripts/lantern/update-baseline-lantern-values.js",

report/.eslintrc.cjs

@@ -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.
+ */
+'use strict';
+
+/**
+ * eslint does not support ESM rc files, so this must be a .cjs file.
+ * @see https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-file-formats
+ * @see https://github.com/eslint/eslint/issues/13481
+ */
+
+module.exports = {
+  env: {
+    browser: true,
+  },
+};

report/clients/psi.js

@@ -24,8 +24,6 @@ import {PerformanceCategoryRenderer} from '../renderer/performance-category-rend
 import {ReportUIFeatures} from '../renderer/report-ui-features.js';
 import {Util} from '../renderer/util.js';
 
-/* global window */
-
 /** @typedef {{scoreGaugeEl: Element, perfCategoryEl: Element, finalScreenshotDataUri: string|null, scoreScaleEl: Element, installFeatures: Function}} PrepareLabDataResult */
 
 /**

report/clients/standalone.js

@@ -11,7 +11,7 @@
  * The renderer code is bundled and injected into the report HTML along with the JSON report.
  */
 
-/* global document window ga */
+/* global ga */
 
 import {DOM} from '../renderer/dom.js';
 import {Logger} from '../renderer/logger.js';

report/renderer/details-renderer.js

@@ -35,7 +35,7 @@ const URL_PREFIXES = ['http://', 'https://', 'data:'];
 export class DetailsRenderer {
   /**
    * @param {DOM} dom
-   * @param {{fullPageScreenshot?: LH.Artifacts.FullPageScreenshot}} [options]
+   * @param {{fullPageScreenshot?: LH.Audit.Details.FullPageScreenshot}} [options]
    */
   constructor(dom, options = {}) {
     this._dom = dom;

report/renderer/element-screenshot-renderer.js

@@ -12,21 +12,21 @@
  */
 
 /** @typedef {import('./dom.js').DOM} DOM */
-/** @typedef {LH.Artifacts.Rect} Rect */
+/** @typedef {LH.Audit.Details.Rect} Rect */
 /** @typedef {{width: number, height: number}} Size */
 
 /**
  * @typedef InstallOverlayFeatureParams
  * @property {DOM} dom
  * @property {Element} reportEl
  * @property {Element} overlayContainerEl
- * @property {LH.Artifacts.FullPageScreenshot} fullPageScreenshot
+ * @property {LH.Audit.Details.FullPageScreenshot} fullPageScreenshot
  */
 
 import {Util} from './util.js';
 
 /**
- * @param {LH.Artifacts.FullPageScreenshot['screenshot']} screenshot
+ * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
  * @param {LH.Audit.Details.Rect} rect
  * @return {boolean}
  */
@@ -98,7 +98,7 @@ export class ElementScreenshotRenderer {
    * @param {DOM} dom
    * @param {HTMLElement} maskEl
    * @param {{left: number, top: number}} positionClip
-   * @param {LH.Artifacts.Rect} elementRect
+   * @param {Rect} elementRect
    * @param {Size} elementPreviewSize
    */
   static renderClipPathInScreenshot(dom, maskEl, positionClip, elementRect, elementPreviewSize) {
@@ -132,7 +132,7 @@ export class ElementScreenshotRenderer {
    * Allows for multiple Lighthouse reports to be rendered on the page, each with their
    * own full page screenshot.
    * @param {HTMLElement} el
-   * @param {LH.Artifacts.FullPageScreenshot['screenshot']} screenshot
+   * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
    */
   static installFullPageScreenshot(el, screenshot) {
     el.style.setProperty('--element-screenshot-url', `url(${screenshot.data})`);
@@ -195,7 +195,7 @@ export class ElementScreenshotRenderer {
   /**
    * Given the size of the element in the screenshot and the total available size of our preview container,
    * compute the factor by which we need to zoom out to view the entire element with context.
-   * @param {LH.Artifacts.Rect} elementRectSC
+   * @param {Rect} elementRectSC
    * @param {Size} renderContainerSizeDC
    * @return {number}
    */
@@ -214,8 +214,8 @@ export class ElementScreenshotRenderer {
    * Used to render both the thumbnail preview in details tables and the full-page screenshot in the lightbox.
    * Returns null if element rect is outside screenshot bounds.
    * @param {DOM} dom
-   * @param {LH.Artifacts.FullPageScreenshot['screenshot']} screenshot
-   * @param {LH.Artifacts.Rect} elementRectSC Region of screenshot to highlight.
+   * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+   * @param {Rect} elementRectSC Region of screenshot to highlight.
    * @param {Size} maxRenderSizeDC e.g. maxThumbnailSize or maxLightboxSize.
    * @return {Element|null}
    */

report/renderer/logger.js

@@ -40,7 +40,7 @@ export class Logger {
     this.el.textContent = msg;
     this.el.classList.add('show');
     if (autoHide) {
-      this._id = setTimeout(_ => {
+      this._id = setTimeout(() => {
         this.el.classList.remove('show');
       }, 7000);
     }
@@ -61,7 +61,7 @@ export class Logger {
 
     // Rethrow to make sure it's auditable as an error, but in a setTimeout so page
     // recovers gracefully and user can try loading a report again.
-    setTimeout(_ => {
+    setTimeout(() => {
       throw new Error(msg);
     }, 0);
   }

report/renderer/report-ui-features.js

@@ -16,8 +16,6 @@
  */
 'use strict';
 
-/* eslint-env browser */
-
 /**
  * @fileoverview Adds tools button, print, and other dynamic functionality to
  * the report.
@@ -707,7 +705,7 @@ export class ReportUIFeatures {
 
     // cleanup.
     this._document.body.removeChild(a);
-    setTimeout(_ => URL.revokeObjectURL(a.href), 500);
+    setTimeout(() => URL.revokeObjectURL(a.href), 500);
   }
 
   /**

report/renderer/text-encoding.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-/* global btoa atob window CompressionStream Response */
+/* global CompressionStream */
 
 const btoa_ = typeof btoa !== 'undefined' ?
   btoa :

report/renderer/util.js

@@ -388,7 +388,7 @@ export class Util {
   }
 
   /**
-   * @param {LH.Config.Settings} settings
+   * @param {LH.Result['configSettings']} settings
    * @return {!Array<{name: string, description: string}>}
    */
   static getEnvironmentDisplayValues(settings) {
@@ -411,7 +411,7 @@ export class Util {
   }
 
   /**
-   * @param {LH.Config.Settings} settings
+   * @param {LH.Result['configSettings']} settings
    * @return {{deviceEmulation: string, networkThrottling: string, cpuThrottling: string}}
    */
   static getEmulationDescriptions(settings) {

report/test-assets/faux-psi.js

@@ -7,8 +7,6 @@
 
 /** @fileoverview This file is a glorified call of prepareLabData. */
 
-/* global document window */
-
 /** @typedef {import('../clients/psi.js').PrepareLabDataResult} PrepareLabDataResult */
 
 (async function __initPsiReports__() {

report/test/renderer/category-renderer-test.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-/* eslint-env jest, browser */
+/* eslint-env jest */
 
 import {strict as assert} from 'assert';
 

report/test/renderer/performance-category-renderer-test.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-/* eslint-env jest, browser */
+/* eslint-env jest */
 
 import {strict as assert} from 'assert';
 

report/test/renderer/pwa-category-renderer-test.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-/* eslint-env jest, browser */
+/* eslint-env jest */
 
 import {strict as assert} from 'assert';
 

report/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "../.tmp/tsbuildinfo/report",
+    "emitDeclarationOnly": true,
+    "declarationMap": true,
+
+    // Limit to base JS and DOM defs.
+    "lib": ["es2020", "dom", "dom.iterable"],
+    // Don't include any node_module types.
+    "types": [],
+    "target": "es2020",
+    "module": "es2020",
+    "moduleResolution": "node",
+
+    "allowJs": true,
+    "checkJs": true,
+    "strict": true,
+    // TODO: remove the next line to be fully `strict`.
+    "useUnknownInCatchVariables": false,
+
+    // "listFiles": true,
+    // "noErrorTruncation": true,
+    "extendedDiagnostics": true,
+  },
+  "include": [
+    "**/*.js",
+    "types/**/*.d.ts",
+  ],
+  "references": [
+    {"path": "../types/lhr/"},
+    {"path": "./generator/"}
+  ],
+  "exclude": [
+    "generator/**/*.js",
+    // These test files require further changes before they can be type checked.
+    "test/**/*.js",
+  ],
+}

report/types/augment-dom.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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.
+ */
+
+/**
+ * @fileoverview Augment global scope with needed DOM APIs that are newer or not
+ * widely supported enough to be in tsc's lib `dom`.
+ */
+
+// Import to augment querySelector/querySelectorAll with stricter type checking.
+import '../../types/query-selector';
+
+declare global {
+  var CompressionStream: {
+    prototype: CompressionStream,
+    new (format: string): CompressionStream,
+  };
+
+  interface CompressionStream extends GenericTransformStream {
+    readonly format: string;
+  }
+}

report/types/buffer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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.
+ */
+
+/**
+ * A minimal type for Node's `Buffer` to avoid importing all Node types for
+ * atob/btoa fallback for testing `text-encoding.js`.
+ */
+
+declare global {
+  class Buffer {
+    static from(str: string, encoding?: string): Buffer;
+    toString(encoding?: string): string;
+  }
+}
+
+export {}