Convert report renderer to esmodules (perma-draft PR)

.github/workflows/ci.yml

@@ -49,6 +49,7 @@ jobs:
     - run: yarn test-legacy-javascript
     - run: yarn i18n:checks
     - run: yarn dogfood-lhci
+    - run: sh lighthouse-core/scripts/copy-util-commonjs.sh
 
     # Fail if any changes were written to any source files or generated untracked files (ex, from: build/build-cdt-lib.js).
     - run: git add -A && git diff --cached --exit-code

build/build-dt-report-resources.js

@@ -28,11 +28,11 @@ function writeFile(name, content) {
 fs.rmdirSync(distDir, {recursive: true});
 fs.mkdirSync(distDir);
 
-writeFile('report.js', htmlReportAssets.REPORT_JAVASCRIPT);
+writeFile('report.js', htmlReportAssets.REPORT_JAVASCRIPT); // TODO remove
 writeFile('report.css', htmlReportAssets.REPORT_CSS);
 writeFile('template.html', htmlReportAssets.REPORT_TEMPLATE);
 writeFile('templates.html', htmlReportAssets.REPORT_TEMPLATES);
-writeFile('report.d.ts', 'export {}');
+writeFile('report.d.ts', 'export {}'); // TODO remove
 writeFile('report-generator.d.ts', 'export {}');
 
 const pathToReportAssets = require.resolve('../clients/devtools-report-assets.js');

build/build-report.js

@@ -0,0 +1,53 @@
+/**
+ * @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';
+
+// TODO: where to output?
+// standalone: lighthouse-core/report/html/renderer/generated/standalone.js + checking into source seems simplest for publishing.
+// esmodules bundle (for devtools/whatever): dist/report.mjs seems good. don't check in cuz dont need it for publishing.
+
+const rollup = require('rollup');
+const commonjs =
+  // @ts-expect-error types are wrong.
+  /** @type {import('rollup-plugin-commonjs').default} */ (require('rollup-plugin-commonjs'));
+
+async function buildStandaloneReport() {
+  const bundle = await rollup.rollup({
+    input: 'lighthouse-core/report/html/renderer/standalone.js',
+    plugins: [
+      commonjs(),
+    ],
+  });
+
+  await bundle.write({
+    file: 'lighthouse-core/report/html/renderer/generated/standalone.js',
+    format: 'iife',
+  });
+
+  // TODO: run thru terser.
+}
+
+async function buildEsModulesBundle() {
+  const bundle = await rollup.rollup({
+    input: 'lighthouse-core/report/html/renderer/common/index.js',
+    plugins: [
+      commonjs(),
+    ],
+  });
+
+  await bundle.write({
+    file: 'dist/report.mjs',
+    format: 'esm',
+  });
+}
+
+buildStandaloneReport();
+// TODO buildPsiReport(); ?
+buildEsModulesBundle();
+
+module.exports = {
+  buildStandaloneReport,
+};

clients/devtools-report-assets.js

@@ -25,7 +25,7 @@ module.exports = {
     return cachedResources.get('third_party/lighthouse/report-assets/report.css');
   },
   get REPORT_JAVASCRIPT() {
-    return cachedResources.get('third_party/lighthouse/report-assets/report.js');
+    return cachedResources.get('third_party/lighthouse/report/standalone.js');
   },
   get REPORT_TEMPLATE() {
     return cachedResources.get('third_party/lighthouse/report-assets/template.html');

lighthouse-core/audits/audit.js

@@ -7,7 +7,7 @@
 
 const {isUnderTest} = require('../lib/lh-env.js');
 const statistics = require('../lib/statistics.js');
-const Util = require('../report/html/renderer/util.js');
+const Util = require('../util-commonjs.js');
 
 const DEFAULT_PASS = 'defaultPass';
 

lighthouse-core/computed/resource-summary.js

@@ -11,7 +11,7 @@ const URL = require('../lib/url-shim.js');
 const NetworkRequest = require('../lib/network-request.js');
 const MainResource = require('./main-resource.js');
 const Budget = require('../config/budget.js');
-const Util = require('../report/html/renderer/util.js');
+const Util = require('../util-commonjs.js');
 
 /** @typedef {{count: number, resourceSize: number, transferSize: number}} ResourceEntry */
 

lighthouse-core/lib/file-namer.js

@@ -34,7 +34,4 @@ function getFilenamePrefix(lhr) {
   return filenamePrefix.replace(/[/?<>\\:*|"]/g, '-');
 }
 
-// don't attempt to export in the browser.
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = {getFilenamePrefix};
-}
+module.exports = {getFilenamePrefix};

lighthouse-core/lib/url-shim.js

@@ -9,7 +9,7 @@
  * URL shim so we keep our code DRY
  */
 
-const Util = require('../report/html/renderer/util.js');
+const Util = require('../util-commonjs.js');
 
 /** @typedef {import('./network-request.js')} NetworkRequest */
 

lighthouse-core/report/html/html-report-assets.js

@@ -8,23 +8,7 @@
 const fs = require('fs');
 
 const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/report-template.html', 'utf8');
-const REPORT_JAVASCRIPT = [
-  fs.readFileSync(__dirname + '/renderer/util.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/dom.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/details-renderer.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/crc-details-renderer.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/snippet-renderer.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/element-screenshot-renderer.js', 'utf8'),
-  fs.readFileSync(__dirname + '/../../lib/file-namer.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/logger.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/report-ui-features.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/category-renderer.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/performance-category-renderer.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/pwa-category-renderer.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/report-renderer.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/i18n.js', 'utf8'),
-  fs.readFileSync(__dirname + '/renderer/text-encoding.js', 'utf8'),
-].join(';\n');
+const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/renderer/generated/standalone.js', 'utf8');
 const REPORT_CSS = fs.readFileSync(__dirname + '/report-styles.css', 'utf8');
 const REPORT_TEMPLATES = fs.readFileSync(__dirname + '/templates.html', 'utf8');
 

lighthouse-core/report/html/renderer/category-renderer.js → lighthouse-core/report/html/renderer/common/category-renderer.js

@@ -16,15 +16,14 @@
  */
 'use strict';
 
-/* globals self, Util */
-
-/** @typedef {import('./dom.js')} DOM */
-/** @typedef {import('./report-renderer.js')} ReportRenderer */
-/** @typedef {import('./details-renderer.js')} DetailsRenderer */
-/** @typedef {import('./util.js')} Util */
+/** @typedef {import('./dom.js').DOM} DOM */
+/** @typedef {import('./report-renderer.js').ReportRenderer} ReportRenderer */
+/** @typedef {import('./details-renderer.js').DetailsRenderer} DetailsRenderer */
 /** @typedef {'failed'|'warning'|'manual'|'passed'|'notApplicable'} TopLevelClumpId */
 
-class CategoryRenderer {
+import {Util} from './util.js';
+
+export class CategoryRenderer {
   /**
    * @param {DOM} dom
    * @param {DetailsRenderer} detailsRenderer
@@ -502,9 +501,3 @@ class CategoryRenderer {
     permalinkEl.id = id;
   }
 }
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = CategoryRenderer;
-} else {
-  self.CategoryRenderer = CategoryRenderer;
-}

lighthouse-core/report/html/renderer/crc-details-renderer.js → lighthouse-core/report/html/renderer/common/crc-details-renderer.js

@@ -21,12 +21,12 @@
  * critical request chains network tree.
  */
 
-/* globals self Util */
+/** @typedef {import('./dom.js').DOM} DOM */
+/** @typedef {import('./details-renderer.js').DetailsRenderer} DetailsRenderer */
 
-/** @typedef {import('./dom.js')} DOM */
-/** @typedef {import('./details-renderer.js')} DetailsRenderer */
+import {Util} from './util.js';
 
-class CriticalRequestChainRenderer {
+export class CriticalRequestChainRenderer {
   /**
    * Create render context for critical-request-chain tree display.
    * @param {LH.Audit.SimpleCriticalRequestNode} tree
@@ -193,13 +193,6 @@ class CriticalRequestChainRenderer {
 // Alias b/c the name is really long.
 const CRCRenderer = CriticalRequestChainRenderer;
 
-// Allow Node require()'ing.
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = CriticalRequestChainRenderer;
-} else {
-  self.CriticalRequestChainRenderer = CriticalRequestChainRenderer;
-}
-
 /** @typedef {{
       node: LH.Audit.SimpleCriticalRequestNode[string],
       isLastChild: boolean,

lighthouse-core/report/html/renderer/details-renderer.js → lighthouse-core/report/html/renderer/common/details-renderer.js

@@ -16,9 +16,7 @@
  */
 'use strict';
 
-/* globals self CriticalRequestChainRenderer SnippetRenderer ElementScreenshotRenderer Util */
-
-/** @typedef {import('./dom.js')} DOM */
+/** @typedef {import('./dom.js').DOM} DOM */
 
 // Convenience types for localized AuditDetails.
 /** @typedef {LH.FormattedIcu<LH.Audit.Details>} AuditDetails */
@@ -27,9 +25,14 @@
 /** @typedef {LH.FormattedIcu<LH.Audit.Details.TableItem>} TableItem */
 /** @typedef {LH.FormattedIcu<LH.Audit.Details.ItemValue>} TableItemValue */
 
+import {Util} from './util.js';
+import {CriticalRequestChainRenderer} from './crc-details-renderer.js';
+import {SnippetRenderer} from './snippet-renderer.js';
+import {ElementScreenshotRenderer} from './element-screenshot-renderer.js';
+
 const URL_PREFIXES = ['http://', 'https://', 'data:'];
 
-class DetailsRenderer {
+export class DetailsRenderer {
   /**
    * @param {DOM} dom
    * @param {{fullPageScreenshot?: LH.Artifacts.FullPageScreenshot}} [options]
@@ -614,9 +617,3 @@ class DetailsRenderer {
     return pre;
   }
 }
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = DetailsRenderer;
-} else {
-  self.DetailsRenderer = DetailsRenderer;
-}

lighthouse-core/report/html/renderer/dom.js → lighthouse-core/report/html/renderer/common/dom.js

@@ -16,12 +16,12 @@
  */
 'use strict';
 
-/* globals self Util */
-
 /** @typedef {HTMLElementTagNameMap & {[id: string]: HTMLElement}} HTMLElementByTagName */
 /** @template {string} T @typedef {import('typed-query-selector/parser').ParseSelector<T, Element>} ParseSelector */
 
-class DOM {
+import {Util} from './util.js';
+
+export class DOM {
   /**
    * @param {Document} document
    */
@@ -129,6 +129,7 @@ class DOM {
    * Resets the "stamped" state of the templates.
    */
   resetTemplates() {
+    // TODO: this should only act on `templateContext`
     this.findAll('template[data-stamped]', this._document).forEach(t => {
       t.removeAttribute('data-stamped');
     });
@@ -242,9 +243,3 @@ class DOM {
     return elements;
   }
 }
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = DOM;
-} else {
-  self.DOM = DOM;
-}

lighthouse-core/report/html/renderer/element-screenshot-renderer.js → lighthouse-core/report/html/renderer/common/element-screenshot-renderer.js

@@ -11,9 +11,7 @@
  *   2. Display coords (DC suffix): that match the CSS pixel coordinate space of the LH report's page.
  */
 
-/* globals self Util */
-
-/** @typedef {import('./dom.js')} DOM */
+/** @typedef {import('./dom.js').DOM} DOM */
 /** @typedef {LH.Artifacts.Rect} Rect */
 /** @typedef {{width: number, height: number}} Size */
 
@@ -26,6 +24,8 @@
  * @property {LH.Artifacts.FullPageScreenshot} fullPageScreenshot
  */
 
+import {Util} from './util.js';
+
 /**
  * @param {LH.Artifacts.FullPageScreenshot['screenshot']} screenshot
  * @param {LH.Artifacts.Rect} rect
@@ -59,7 +59,7 @@ function getRectCenterPoint(rect) {
   };
 }
 
-class ElementScreenshotRenderer {
+export class ElementScreenshotRenderer {
   /**
    * Given the location of an element and the sizes of the preview and screenshot,
    * compute the absolute positions (in screenshot coordinate scale) of the screenshot content
@@ -288,9 +288,3 @@ class ElementScreenshotRenderer {
     return containerEl;
   }
 }
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = ElementScreenshotRenderer;
-} else {
-  self.ElementScreenshotRenderer = ElementScreenshotRenderer;
-}

lighthouse-core/report/html/renderer/common/file-namer.js

@@ -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.
+ */
+'use strict';
+
+// export * from '../../../lib/file-namer.js';
+
+export {getFilenamePrefix} from '../../../../lib/file-namer.js';

lighthouse-core/report/html/renderer/i18n.js → lighthouse-core/report/html/renderer/common/i18n.js

@@ -5,8 +5,6 @@
  */
 'use strict';
 
-/* globals self */
-
 // Not named `NBSP` because that creates a duplicate identifier (util.js).
 const NBSP2 = '\xa0';
 const KiB = 1024;
@@ -15,7 +13,7 @@ const MiB = KiB * KiB;
 /**
  * @template T
  */
-class I18n {
+export class I18n {
   /**
    * @param {LH.Locale} locale
    * @param {T} strings
@@ -72,7 +70,7 @@ class I18n {
    */
   formatBytesToMiB(size, granularity = 0.1) {
     const formatter = this._byteFormatterForGranularity(granularity);
-    const kbs = formatter.format(Math.round(size / 1024 ** 2 / granularity) * granularity);
+    const kbs = formatter.format(Math.round(size / (1024 ** 2) / granularity) * granularity);
     return `${kbs}${NBSP2}MiB`;
   }
 
@@ -198,9 +196,3 @@ class I18n {
     return parts.join(' ');
   }
 }
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = I18n;
-} else {
-  self.I18n = I18n;
-}

lighthouse-core/report/html/renderer/common/index.js

@@ -0,0 +1,22 @@
+/**
+ * @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 {CategoryRenderer} from './category-renderer.js';
+export {CriticalRequestChainRenderer} from './crc-details-renderer.js';
+export {DetailsRenderer} from './details-renderer.js';
+export {DOM} from './dom.js';
+export {ElementScreenshotRenderer} from './element-screenshot-renderer.js';
+export {getFilenamePrefix} from './file-namer.js';
+export {I18n} from './i18n.js';
+export {Logger} from './logger.js';
+export {PerformanceCategoryRenderer} from './performance-category-renderer.js';
+export {PwaCategoryRenderer} from './pwa-category-renderer.js';
+export {ReportRenderer} from './report-renderer.js';
+export {ReportUIFeatures} from './report-ui-features.js';
+export {SnippetRenderer} from './snippet-renderer.js';
+export {TextEncoding} from './text-encoding.js';
+export {Util} from './util.js';