From be35dd018ab73530cf825d9aa860fdca98ee428d Mon Sep 17 00:00:00 2001
From: Brendan Kenny <bckenny@gmail.com>
Date: Wed, 18 Aug 2021 19:04:27 -0500
Subject: [PATCH 1/2] report: extract independent report-generator types

---
 build/build-bundle.js                         |  2 +-
 build/build-dt-report-resources.js            |  6 ++--
 build/build-lightrider-bundles.js             |  4 +--
 build/build-sample-reports.js                 |  4 +--
 build/build-viewer.js                         |  6 ++--
 clients/devtools-report-assets.js             |  2 +-
 docs/hacking-tips.md                          |  2 +-
 lighthouse-cli/run.js                         |  2 +-
 lighthouse-core/runner.js                     |  2 +-
 .../scripts/build-test-flow-report.js         |  2 +-
 .../scripts/update-flow-fixtures.js           |  2 +-
 lighthouse-viewer/app/src/github-api.js       |  2 +-
 lighthouse-viewer/types/viewer.d.ts           |  3 +-
 report/README.md                              |  2 +-
 report/generator/README.md                    |  9 ++++++
 .../lib => report/generator}/file-namer.js    |  0
 report/{ => generator}/flow-report-assets.js  |  5 ++--
 report/generator/package.json                 |  4 +++
 report/{ => generator}/report-assets.js       |  7 +++--
 report/{ => generator}/report-generator.js    | 13 +++++----
 report/generator/tsconfig.json                | 28 +++++++++++++++++++
 report/{clients => }/package.json             |  0
 report/renderer/file-namer.js                 |  8 ------
 report/renderer/package.json                  |  4 ---
 report/renderer/report-ui-features.js         |  2 +-
 report/test/clients/package.json              |  4 ---
 .../test/generator}/file-namer-test.js        |  2 +-
 report/test/generator/package.json            |  4 +++
 .../{ => generator}/report-generator-test.js  |  4 +--
 report/test/renderer/package.json             |  4 ---
 .../test/renderer/report-ui-features-test.js  |  2 +-
 tsconfig.json                                 |  3 +-
 types/lhr/tsconfig.json                       |  2 +-
 33 files changed, 87 insertions(+), 59 deletions(-)
 create mode 100644 report/generator/README.md
 rename {lighthouse-core/lib => report/generator}/file-namer.js (100%)
 rename report/{ => generator}/flow-report-assets.js (75%)
 create mode 100644 report/generator/package.json
 rename report/{ => generator}/report-assets.js (79%)
 rename report/{ => generator}/report-generator.js (95%)
 create mode 100644 report/generator/tsconfig.json
 rename report/{clients => }/package.json (100%)
 delete mode 100644 report/renderer/file-namer.js
 delete mode 100644 report/renderer/package.json
 delete mode 100644 report/test/clients/package.json
 rename {lighthouse-core/test/lib => report/test/generator}/file-namer-test.js (94%)
 create mode 100644 report/test/generator/package.json
 rename report/test/{ => generator}/report-generator-test.js (97%)
 delete mode 100644 report/test/renderer/package.json

diff --git a/build/build-bundle.js b/build/build-bundle.js
index 5156133c8818..c4eb030a64a2 100644
--- a/build/build-bundle.js
+++ b/build/build-bundle.js
@@ -104,7 +104,7 @@ async function browserifyFile(entryPath, distPath) {
   // Don't include the stringified report in DevTools - see devtools-report-assets.js
   // Don't include in Lightrider - HTML generation isn't supported, so report assets aren't needed.
   if (isDevtools(entryPath) || isLightrider(entryPath)) {
-    bundle.ignore(require.resolve('../report/report-assets.js'));
+    bundle.ignore(require.resolve('../report/generator/report-assets.js'));
   }
 
   // Expose the audits, gatherers, and computed artifacts so they can be dynamically loaded.
diff --git a/build/build-dt-report-resources.js b/build/build-dt-report-resources.js
index f18700a37379..eb9af337b967 100644
--- a/build/build-dt-report-resources.js
+++ b/build/build-dt-report-resources.js
@@ -13,8 +13,8 @@ const {LH_ROOT} = require('../root.js');
 
 const distDir = path.join(LH_ROOT, 'dist', 'dt-report-resources');
 const bundleOutFile = `${distDir}/report-generator.js`;
-const generatorFilename = `./report/report-generator.js`;
-const htmlReportAssets = require('../report/report-assets.js');
+const generatorFilename = `./report/generator/report-generator.js`;
+const htmlReportAssets = require('../report/generator/report-assets.js');
 
 /**
  * Used to save cached resources (Runtime.cachedResources).
@@ -38,7 +38,7 @@ writeFile('report-generator.d.ts', 'export {}');
 
 const pathToReportAssets = require.resolve('../clients/devtools-report-assets.js');
 browserify(generatorFilename, {standalone: 'Lighthouse.ReportGenerator'})
-  // Shims './report/report-assets.js' to resolve to devtools-report-assets.js
+  // Shims './report/generator/report-assets.js' to resolve to devtools-report-assets.js
   .require(pathToReportAssets, {expose: './report-assets.js'})
   .bundle((err, src) => {
     if (err) throw err;
diff --git a/build/build-lightrider-bundles.js b/build/build-lightrider-bundles.js
index 68d71fd9d2de..54863bc3fc06 100644
--- a/build/build-lightrider-bundles.js
+++ b/build/build-lightrider-bundles.js
@@ -17,7 +17,7 @@ const distDir = path.join(LH_ROOT, 'dist', 'lightrider');
 const sourceDir = path.join(LH_ROOT, 'clients', 'lightrider');
 
 const bundleOutFile = `${distDir}/report-generator-bundle.js`;
-const generatorFilename = `./report/report-generator.js`;
+const generatorFilename = `./report/generator/report-generator.js`;
 
 const entrySourceName = 'lightrider-entry.js';
 const entryDistName = 'lighthouse-lr-bundle.js';
@@ -39,7 +39,7 @@ function buildEntryPoint() {
 function buildReportGenerator() {
   browserify(generatorFilename, {standalone: 'ReportGenerator'})
     // Flow report is not used in LR, so don't include flow assets.
-    .ignore(require.resolve('../report/flow-report-assets.js'))
+    .ignore(require.resolve('../report/generator/flow-report-assets.js'))
     // Transform the fs.readFile etc into inline strings.
     .transform('@wardpeet/brfs', {
       readFileTransform: minifyFileTransform,
diff --git a/build/build-sample-reports.js b/build/build-sample-reports.js
index bb35e91b2e0d..8b8d0fb8c18e 100644
--- a/build/build-sample-reports.js
+++ b/build/build-sample-reports.js
@@ -11,12 +11,12 @@
 const fs = require('fs');
 const path = require('path');
 const swapLocale = require('../lighthouse-core/lib/i18n/swap-locale.js');
-const ReportGenerator = require('../lighthouse-core/../report/report-generator.js');
+const ReportGenerator = require('../report/generator/report-generator.js');
 const {defaultSettings} = require('../lighthouse-core/config/constants.js');
 const lighthouse = require('../lighthouse-core/index.js');
 const lhr = /** @type {LH.Result} */ (require('../lighthouse-core/test/results/sample_v2.json'));
 const {LH_ROOT} = require('../root.js');
-const htmlReportAssets = require('../lighthouse-core/../report/report-assets.js');
+const htmlReportAssets = require('../report/generator/report-assets.js');
 
 /** @type {LH.FlowResult} */
 const flowResult = JSON.parse(
diff --git a/build/build-viewer.js b/build/build-viewer.js
index 7bd2124babbf..2c2fd4af5c51 100644
--- a/build/build-viewer.js
+++ b/build/build-viewer.js
@@ -8,7 +8,7 @@
 const browserify = require('browserify');
 const GhPagesApp = require('./gh-pages-app.js');
 const {minifyFileTransform} = require('./build-utils.js');
-const htmlReportAssets = require('../report/report-assets.js');
+const htmlReportAssets = require('../report/generator/report-assets.js');
 const {LH_ROOT} = require('../root.js');
 
 /**
@@ -16,10 +16,10 @@ const {LH_ROOT} = require('../root.js');
  */
 async function run() {
   // JS bundle from browserified ReportGenerator.
-  const generatorFilename = `${LH_ROOT}/report/report-generator.js`;
+  const generatorFilename = `${LH_ROOT}/report/generator/report-generator.js`;
   const generatorBrowserify = browserify(generatorFilename, {standalone: 'ReportGenerator'})
     // Flow report is not used in report viewer, so don't include flow assets.
-    .ignore(require.resolve('../report/flow-report-assets.js'))
+    .ignore(require.resolve('../report/generator/flow-report-assets.js'))
     .transform('@wardpeet/brfs', {
       readFileTransform: minifyFileTransform,
     });
diff --git a/clients/devtools-report-assets.js b/clients/devtools-report-assets.js
index e3077a21eb04..bfdd5f3d872d 100644
--- a/clients/devtools-report-assets.js
+++ b/clients/devtools-report-assets.js
@@ -8,7 +8,7 @@
 /**
  * @fileoverview Instead of loading report assets form the filesystem, in Devtools we must load
  * them via Runtime.cachedResources. We use this module to shim
- * report/report-assets.js in Devtools.
+ * report/generator/report-assets.js in Devtools.
  */
 
 /* global globalThis */
diff --git a/docs/hacking-tips.md b/docs/hacking-tips.md
index 74735a069f92..1d22ef297a3d 100644
--- a/docs/hacking-tips.md
+++ b/docs/hacking-tips.md
@@ -48,7 +48,7 @@ node generate_report.js > temp.report.html; open temp.report.html
 // generate_report.js
 'use strict';
 
-const ReportGenerator = require('./report/report-generator.js');
+const ReportGenerator = require('./report/generator/report-generator.js');
 const results = require('./temp.report.json');
 const html = ReportGenerator.generateReportHtml(results);
 
diff --git a/lighthouse-cli/run.js b/lighthouse-cli/run.js
index ec29c377ffb2..3f5d35f2026d 100644
--- a/lighthouse-cli/run.js
+++ b/lighthouse-cli/run.js
@@ -16,7 +16,7 @@ const ChromeLauncher = require('chrome-launcher');
 const yargsParser = require('yargs-parser');
 const lighthouse = require('../lighthouse-core/index.js');
 const log = require('lighthouse-logger');
-const getFilenamePrefix = require('../lighthouse-core/lib/file-namer.js').getFilenamePrefix;
+const getFilenamePrefix = require('../report/generator/file-namer.js').getFilenamePrefix;
 const assetSaver = require('../lighthouse-core/lib/asset-saver.js');
 const URL = require('../lighthouse-core/lib/url-shim.js');
 
diff --git a/lighthouse-core/runner.js b/lighthouse-core/runner.js
index 2cb70206027a..2c7a7412f3db 100644
--- a/lighthouse-core/runner.js
+++ b/lighthouse-core/runner.js
@@ -18,7 +18,7 @@ const fs = require('fs');
 const path = require('path');
 const URL = require('./lib/url-shim.js');
 const Sentry = require('./lib/sentry.js');
-const generateReport = require('../report/report-generator.js').generateReport;
+const generateReport = require('../report/generator/report-generator.js').generateReport;
 const LHError = require('./lib/lh-error.js');
 
 /** @typedef {import('./gather/connections/connection.js')} Connection */
diff --git a/lighthouse-core/scripts/build-test-flow-report.js b/lighthouse-core/scripts/build-test-flow-report.js
index d81860f994b2..caecc0f9142c 100644
--- a/lighthouse-core/scripts/build-test-flow-report.js
+++ b/lighthouse-core/scripts/build-test-flow-report.js
@@ -10,7 +10,7 @@ const open = require('open');
 const {execFileSync} = require('child_process');
 
 execFileSync(`yarn`, ['build-report']);
-const reportGenerator = require('../../report/report-generator.js');
+const reportGenerator = require('../../report/generator/report-generator.js');
 
 const flow = JSON.parse(fs.readFileSync(
       `${__dirname}/../test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
diff --git a/lighthouse-core/scripts/update-flow-fixtures.js b/lighthouse-core/scripts/update-flow-fixtures.js
index 709da32af36e..2343810fbf25 100644
--- a/lighthouse-core/scripts/update-flow-fixtures.js
+++ b/lighthouse-core/scripts/update-flow-fixtures.js
@@ -9,7 +9,7 @@ const fs = require('fs');
 const open = require('open');
 const puppeteer = require('puppeteer');
 const lighthouse = require('../fraggle-rock/api.js');
-const reportGenerator = require('../../report/report-generator.js');
+const reportGenerator = require('../../report/generator/report-generator.js');
 
 (async () => {
   const browser = await puppeteer.launch({headless: false, slowMo: 50});
diff --git a/lighthouse-viewer/app/src/github-api.js b/lighthouse-viewer/app/src/github-api.js
index b40f37dd0657..0ef5f5591eb9 100644
--- a/lighthouse-viewer/app/src/github-api.js
+++ b/lighthouse-viewer/app/src/github-api.js
@@ -11,7 +11,7 @@
 
 import idbKeyval from 'idb-keyval';
 import {FirebaseAuth} from './firebase-auth.js';
-import {getFilenamePrefix} from '../../../report/renderer/file-namer.js';
+import {getFilenamePrefix} from '../../../report/generator/file-namer.js';
 
 /**
  * Wrapper around the GitHub API for reading/writing gists.
diff --git a/lighthouse-viewer/types/viewer.d.ts b/lighthouse-viewer/types/viewer.d.ts
index 8d95bf2fa031..42136ca2c7da 100644
--- a/lighthouse-viewer/types/viewer.d.ts
+++ b/lighthouse-viewer/types/viewer.d.ts
@@ -4,13 +4,12 @@
  * 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 _ReportGenerator = require('../../report/report-generator.js');
+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 {getFilenamePrefix as _getFilenamePrefix} from '../../report/renderer/file-namer.js';
 import {LighthouseReportViewer as _LighthouseReportViewer} from '../app/src/lighthouse-report-viewer.js';
 import 'google.analytics';
 import {FirebaseNamespace} from '@firebase/app-types';
diff --git a/report/README.md b/report/README.md
index abedd9ebcc6e..c4d4fc2c9cf9 100644
--- a/report/README.md
+++ b/report/README.md
@@ -8,7 +8,7 @@ Example standalone HTML report, delivered by the CLI: [`dbwtest-3.0.3.html`](htt
 
 ### Report Renderer components
 
-1. [`report/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/report/report-generator.js) is the entry point for generating the HTML from Node. It compiles together the HTML string with everything required within it.
+1. [`report/generator/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/report/generator/report-generator.js) is the entry point for generating the HTML from Node. It compiles together the HTML string with everything required within it.
    - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses a browserify transform that takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
 1. [`report/renderer`](https://github.com/GoogleChrome/lighthouse/tree/master/report/renderer) are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.
 1. [`report/assets/standalone-template.html`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/html/report-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/eda3a3e2e271249f261655f9504fd542d6acf0f8/lighthouse-core/report/html/report-template.html#L29-L33)) However, see _Current Uses.._ below for more possibilities.
diff --git a/report/generator/README.md b/report/generator/README.md
new file mode 100644
index 000000000000..c226feb1b208
--- /dev/null
+++ b/report/generator/README.md
@@ -0,0 +1,9 @@
+# Lighthouse Report Generator
+
+## Overview
+
+Lighthouse's report generator is the entry point for creating reports from an **LHR** (Lighthouse Result object). It returns results as HTML, JSON, and CSV.
+
+It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses a browserify transform that takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
+
+Because it's shared between core and the report, dependencies (both code and types) should be kept minimal.
diff --git a/lighthouse-core/lib/file-namer.js b/report/generator/file-namer.js
similarity index 100%
rename from lighthouse-core/lib/file-namer.js
rename to report/generator/file-namer.js
diff --git a/report/flow-report-assets.js b/report/generator/flow-report-assets.js
similarity index 75%
rename from report/flow-report-assets.js
rename to report/generator/flow-report-assets.js
index 423843ab6377..4e0980db305b 100644
--- a/report/flow-report-assets.js
+++ b/report/generator/flow-report-assets.js
@@ -6,11 +6,10 @@
 'use strict';
 
 const fs = require('fs');
-const {LH_ROOT} = require('../root.js');
 
 /* eslint-disable max-len */
-const FLOW_REPORT_TEMPLATE = fs.readFileSync(`${LH_ROOT}/flow-report/assets/standalone-flow-template.html`, 'utf8');
-const FLOW_REPORT_JAVASCRIPT = fs.readFileSync(`${LH_ROOT}/dist/report/flow.js`, 'utf8');
+const FLOW_REPORT_TEMPLATE = fs.readFileSync(`${__dirname}/../../flow-report/assets/standalone-flow-template.html`, 'utf8');
+const FLOW_REPORT_JAVASCRIPT = fs.readFileSync(`${__dirname}/../../dist/report/flow.js`, 'utf8');
 /* eslint-enable max-len */
 
 module.exports = {
diff --git a/report/generator/package.json b/report/generator/package.json
new file mode 100644
index 000000000000..8d10bc1dfd36
--- /dev/null
+++ b/report/generator/package.json
@@ -0,0 +1,4 @@
+{
+  "type": "commonjs",
+  "//": "Preserve commonjs in this directory. Temporary file until converted to type: module"
+}
diff --git a/report/report-assets.js b/report/generator/report-assets.js
similarity index 79%
rename from report/report-assets.js
rename to report/generator/report-assets.js
index e75948497203..1df276806b7c 100644
--- a/report/report-assets.js
+++ b/report/generator/report-assets.js
@@ -8,9 +8,10 @@
 const fs = require('fs');
 const flowReportAssets = require('./flow-report-assets.js');
 
-const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/assets/standalone-template.html', 'utf8');
-const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/../dist/report/standalone.js', 'utf8');
-const REPORT_CSS = fs.readFileSync(__dirname + '/assets/styles.css', 'utf8');
+const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/../assets/standalone-template.html',
+    'utf8');
+const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/../../dist/report/standalone.js', 'utf8');
+const REPORT_CSS = fs.readFileSync(__dirname + '/../assets/styles.css', 'utf8');
 
 // Changes to this export interface should be reflected in build/build-dt-report-resources.js
 // and clients/devtools-report-assets.js
diff --git a/report/report-generator.js b/report/generator/report-generator.js
similarity index 95%
rename from report/report-generator.js
rename to report/generator/report-generator.js
index d2cda665cf7f..a2cc7dbd791a 100644
--- a/report/report-generator.js
+++ b/report/generator/report-generator.js
@@ -7,6 +7,9 @@
 
 const htmlReportAssets = require('./report-assets.js');
 
+/** @typedef {import('../../types/lhr/lhr').default} LHResult */
+/** @typedef {import('../../types/lhr/flow').default} FlowResult */
+
 class ReportGenerator {
   /**
    * Replaces all the specified strings in source without serial replacements.
@@ -40,7 +43,7 @@ class ReportGenerator {
 
   /**
    * Returns the standalone report HTML as a string with the report JSON and renderer JS inlined.
-   * @param {LH.Result} lhr
+   * @param {LHResult} lhr
    * @return {string}
    */
   static generateReportHtml(lhr) {
@@ -58,7 +61,7 @@ class ReportGenerator {
 
   /**
    * Returns the standalone flow report HTML as a string with the report JSON and renderer JS inlined.
-   * @param {LH.FlowResult} flow
+   * @param {FlowResult} flow
    * @return {string}
    */
   static generateFlowReportHtml(flow) {
@@ -81,7 +84,7 @@ class ReportGenerator {
    *  - the score type that is used for the audit
    *  - the score value of the audit
    *
-   * @param {LH.Result} lhr
+   * @param {LHResult} lhr
    * @return {string}
    */
   static generateReportCSV(lhr) {
@@ -118,8 +121,8 @@ class ReportGenerator {
 
   /**
    * Creates the results output in a format based on the `mode`.
-   * @param {LH.Result} lhr
-   * @param {LH.Config.Settings['output']} outputModes
+   * @param {LHResult} lhr
+   * @param {LHResult['configSettings']['output']} outputModes
    * @return {string|string[]}
    */
   static generateReport(lhr, outputModes) {
diff --git a/report/generator/tsconfig.json b/report/generator/tsconfig.json
new file mode 100644
index 000000000000..ef1f5851b7e3
--- /dev/null
+++ b/report/generator/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "../../.tmp/tsbuildinfo/report/generator",
+    "emitDeclarationOnly": true,
+    "declarationMap": true,
+
+    "target": "ES2020",
+    "module": "commonjs",
+    "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,
+  },
+  "references": [
+    {"path": "../../types/lhr/"},
+  ],
+  "include": [
+    "**/*.js",
+  ],
+}
diff --git a/report/clients/package.json b/report/package.json
similarity index 100%
rename from report/clients/package.json
rename to report/package.json
diff --git a/report/renderer/file-namer.js b/report/renderer/file-namer.js
deleted file mode 100644
index 08382666231e..000000000000
--- a/report/renderer/file-namer.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @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';
-
-export {getFilenamePrefix} from '../../lighthouse-core/lib/file-namer.js';
diff --git a/report/renderer/package.json b/report/renderer/package.json
deleted file mode 100644
index bd346284783c..000000000000
--- a/report/renderer/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "type": "module",
-  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
-}
\ No newline at end of file
diff --git a/report/renderer/report-ui-features.js b/report/renderer/report-ui-features.js
index 4a94a057d1a6..fc2cf3724971 100644
--- a/report/renderer/report-ui-features.js
+++ b/report/renderer/report-ui-features.js
@@ -25,7 +25,7 @@
 
 /** @typedef {import('./dom').DOM} DOM */
 
-import {getFilenamePrefix} from './file-namer.js';
+import {getFilenamePrefix} from '../../report/generator/file-namer.js';
 import {ElementScreenshotRenderer} from './element-screenshot-renderer.js';
 import {TextEncoding} from './text-encoding.js';
 import {Util} from './util.js';
diff --git a/report/test/clients/package.json b/report/test/clients/package.json
deleted file mode 100644
index bd346284783c..000000000000
--- a/report/test/clients/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "type": "module",
-  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
-}
\ No newline at end of file
diff --git a/lighthouse-core/test/lib/file-namer-test.js b/report/test/generator/file-namer-test.js
similarity index 94%
rename from lighthouse-core/test/lib/file-namer-test.js
rename to report/test/generator/file-namer-test.js
index 900dff322b86..554b78383476 100644
--- a/lighthouse-core/test/lib/file-namer-test.js
+++ b/report/test/generator/file-namer-test.js
@@ -6,7 +6,7 @@
 'use strict';
 
 const assert = require('assert').strict;
-const getFilenamePrefix = require('../../lib/file-namer.js').getFilenamePrefix;
+const getFilenamePrefix = require('../../generator/file-namer.js').getFilenamePrefix;
 
 /* eslint-env jest */
 describe('file-namer helper', () => {
diff --git a/report/test/generator/package.json b/report/test/generator/package.json
new file mode 100644
index 000000000000..8d10bc1dfd36
--- /dev/null
+++ b/report/test/generator/package.json
@@ -0,0 +1,4 @@
+{
+  "type": "commonjs",
+  "//": "Preserve commonjs in this directory. Temporary file until converted to type: module"
+}
diff --git a/report/test/report-generator-test.js b/report/test/generator/report-generator-test.js
similarity index 97%
rename from report/test/report-generator-test.js
rename to report/test/generator/report-generator-test.js
index 23e158054d7f..6609476f5643 100644
--- a/report/test/report-generator-test.js
+++ b/report/test/generator/report-generator-test.js
@@ -7,8 +7,8 @@
 
 const assert = require('assert').strict;
 const fs = require('fs');
-const ReportGenerator = require('../report-generator.js');
-const sampleResults = require('../../lighthouse-core/test/results/sample_v2.json');
+const ReportGenerator = require('../../generator/report-generator.js');
+const sampleResults = require('../../../lighthouse-core/test/results/sample_v2.json');
 const csvValidator = require('csv-validator');
 
 /* eslint-env jest */
diff --git a/report/test/renderer/package.json b/report/test/renderer/package.json
deleted file mode 100644
index bd346284783c..000000000000
--- a/report/test/renderer/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "type": "module",
-  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
-}
\ No newline at end of file
diff --git a/report/test/renderer/report-ui-features-test.js b/report/test/renderer/report-ui-features-test.js
index 04261b07298e..683043854e75 100644
--- a/report/test/renderer/report-ui-features-test.js
+++ b/report/test/renderer/report-ui-features-test.js
@@ -9,7 +9,7 @@
 
 import {strict as assert} from 'assert';
 import jsdom from 'jsdom';
-import reportAssets from '../../report-assets.js';
+import reportAssets from '../../generator/report-assets.js';
 import {Util} from '../../renderer/util.js';
 import {DOM} from '../../renderer/dom.js';
 import {DetailsRenderer} from '../../renderer/details-renderer.js';
diff --git a/tsconfig.json b/tsconfig.json
index fff850e6c116..f9c06d52f4f9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -38,7 +38,8 @@
     "lighthouse-core/lib/large-javascript-libraries/bundlephobia-database.json",
   ],
   "references": [
-    {"path": "./types/lhr/"}
+    {"path": "./types/lhr/"},
+    {"path": "./report/generator/"}
   ],
   "exclude": [
     "lighthouse-core/test/audits/**/*.js",
diff --git a/types/lhr/tsconfig.json b/types/lhr/tsconfig.json
index 6ec3bfbd0c0c..ebca863c6dcd 100644
--- a/types/lhr/tsconfig.json
+++ b/types/lhr/tsconfig.json
@@ -16,7 +16,7 @@
     // "noErrorTruncation": true,
 
     "composite": true,
-    "outDir": "../../.tmp/tsbuildinfo/lhr",
+    "outDir": "../../.tmp/tsbuildinfo/types/lhr",
   },
   "include": [
     "*.d.ts",

From b714d1666e0feebf81d095efe99b33940e0014d4 Mon Sep 17 00:00:00 2001
From: Brendan Kenny <bckenny@gmail.com>
Date: Thu, 19 Aug 2021 16:11:14 -0500
Subject: [PATCH 2/2] readme feedback

---
 report/README.md           | 2 +-
 report/generator/README.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/report/README.md b/report/README.md
index c4d4fc2c9cf9..9b2c89f69596 100644
--- a/report/README.md
+++ b/report/README.md
@@ -9,7 +9,7 @@ Example standalone HTML report, delivered by the CLI: [`dbwtest-3.0.3.html`](htt
 ### Report Renderer components
 
 1. [`report/generator/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/report/generator/report-generator.js) is the entry point for generating the HTML from Node. It compiles together the HTML string with everything required within it.
-   - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses a browserify transform that takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
+   - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `brfs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
 1. [`report/renderer`](https://github.com/GoogleChrome/lighthouse/tree/master/report/renderer) are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.
 1. [`report/assets/standalone-template.html`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/html/report-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/eda3a3e2e271249f261655f9504fd542d6acf0f8/lighthouse-core/report/html/report-template.html#L29-L33)) However, see _Current Uses.._ below for more possibilities.
 
diff --git a/report/generator/README.md b/report/generator/README.md
index c226feb1b208..3c9ef06d2116 100644
--- a/report/generator/README.md
+++ b/report/generator/README.md
@@ -4,6 +4,6 @@
 
 Lighthouse's report generator is the entry point for creating reports from an **LHR** (Lighthouse Result object). It returns results as HTML, JSON, and CSV.
 
-It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses a browserify transform that takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
+It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `brfs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
 
 Because it's shared between core and the report, dependencies (both code and types) should be kept minimal.