clients(treemap): convert to ES modules (#12892)

build/build-report.js

@@ -41,20 +41,6 @@ async function buildPsiReport() {
   });
 }
 
-async function buildTreemapReport() {
-  const bundle = await rollup.rollup({
-    input: 'report/clients/treemap.js',
-    plugins: [
-      commonjs(),
-    ],
-  });
-
-  await bundle.write({
-    file: 'dist/report/treemap.js',
-    format: 'iife',
-  });
-}
-
 async function buildEsModulesBundle() {
   const bundle = await rollup.rollup({
     input: 'report/clients/bundle.js',
@@ -110,5 +96,4 @@ module.exports = {
   buildStandaloneReport,
   buildPsiReport,
   buildUmdBundle,
-  buildTreemapReport,
 };

build/build-treemap.js

@@ -8,7 +8,6 @@
 /** @typedef {import('../lighthouse-core/lib/i18n/locales').LhlMessages} LhlMessages */
 
 const fs = require('fs');
-const {buildTreemapReport} = require('./build-report.js');
 const GhPagesApp = require('./gh-pages-app.js');
 const {LH_ROOT} = require('../root.js');
 
@@ -19,10 +18,9 @@ const {LH_ROOT} = require('../root.js');
  */
 function buildStrings() {
   const locales = require('../lighthouse-core/lib/i18n/locales.js');
-  const UIStrings = require(
-    // Prevent `tsc -p .` from evaluating util.js using core types, it is already typchecked by `tsc -p lighthouse-treemap`.
-    '' + '../lighthouse-treemap/app/src/util.js'
-  ).UIStrings;
+  // TODO(esmodules): use dynamic import when build/ is esm.
+  const utilCode = fs.readFileSync(LH_ROOT + '/lighthouse-treemap/app/src/util.js', 'utf-8');
+  const {UIStrings} = eval(utilCode.replace('export ', '') + '\nmodule.exports = TreemapUtil;');
   const strings = /** @type {Record<LH.Locale, LhlMessages>} */ ({});
 
   for (const [locale, lhlMessages] of Object.entries(locales)) {
@@ -46,8 +44,6 @@ function buildStrings() {
  * Build treemap app, optionally deploying to gh-pages if `--deploy` flag was set.
  */
 async function run() {
-  await buildTreemapReport();
-
   const app = new GhPagesApp({
     name: 'treemap',
     appDir: `${LH_ROOT}/lighthouse-treemap/app`,
@@ -68,9 +64,7 @@ async function run() {
       fs.readFileSync(require.resolve('pako/dist/pako_inflate.js'), 'utf-8'),
       /* eslint-enable max-len */
       buildStrings(),
-      {path: '../../lighthouse-viewer/app/src/deps-for-treemap.js', rollup: true},
-      {path: '../../dist/report/treemap.js'},
-      {path: 'src/**/*'},
+      {path: 'src/main.js', rollup: true},
     ],
     assets: [
       {path: 'images/**/*'},

lighthouse-treemap/app/src/main.js

@@ -9,7 +9,14 @@
 
 /* eslint-env browser */
 
-/* globals I18n webtreemap strings TreemapUtil TextEncoding Tabulator Cell Row DragAndDrop Logger GithubApi */
+/* globals webtreemap strings Tabulator Cell Row */
+
+import {TreemapUtil} from './util.js';
+import {DragAndDrop} from '../../../lighthouse-viewer/app/src/drag-and-drop.js';
+import {GithubApi} from '../../../lighthouse-viewer/app/src/github-api.js';
+import {I18n} from '../../../report/renderer/i18n.js';
+import {TextEncoding} from '../../../report/renderer/text-encoding.js';
+import {Logger} from '../../../report/renderer/logger.js';
 
 const DUPLICATED_MODULES_IGNORE_THRESHOLD = 1024;
 const DUPLICATED_MODULES_IGNORE_ROOT_RATIO = 0.01;
@@ -707,7 +714,7 @@ function injectOptions(options) {
  * @param {LhlMessages} localeMessages
  */
 function getStrings(localeMessages) {
-  const strings = /** @type {TreemapUtil['UIStrings']} */ ({});
+  const strings = /** @type {typeof TreemapUtil['UIStrings']} */ ({});
 
   for (const varName of Object.keys(localeMessages)) {
     const key = /** @type {keyof typeof TreemapUtil['UIStrings']} */ (varName);
@@ -777,7 +784,7 @@ class LighthouseTreemap {
     for (const node of document.querySelectorAll('[data-i18n]')) {
       // These strings are guaranteed to (at least) have a default English string in TreemapUtil.UIStrings,
       // so this cannot be undefined as long as `report-ui-features.data-i18n` test passes.
-      const i18nAttr = /** @type {keyof TreemapUtil['UIStrings']} */ (
+      const i18nAttr = /** @type {keyof typeof TreemapUtil['UIStrings']} */ (
         node.getAttribute('data-i18n'));
       node.textContent = TreemapUtil.i18n.strings[i18nAttr];
     }

lighthouse-treemap/app/src/util.js

@@ -11,7 +11,30 @@
 /** @template {string} T @typedef {import('typed-query-selector/parser').ParseSelector<T, Element>} ParseSelector */
 /** @template T @typedef {import('../../../report/renderer/i18n').I18n<T>} I18n */
 
-class TreemapUtil {
+export class TreemapUtil {
+  /** @type {I18n<typeof TreemapUtil['UIStrings']>} */
+  // @ts-expect-error: Is set in main.
+  static i18n = null;
+
+  static UIStrings = {
+    /** Label for a button that alternates between showing or hiding a table. */
+    toggleTableButtonLabel: 'Toggle Table',
+    /** Text for an option in a dropdown menu. When selected, the app shows information for all scripts that were found in a web page. */
+    allScriptsDropdownLabel: 'All Scripts',
+    /** Label for a table column where the values are URLs, JS module names, or arbitrary identifiers. For simplicity, just 'name' is used. */
+    tableColumnName: 'Name',
+    /** Label for column giving the size of a file in bytes. */
+    resourceBytesLabel: 'Resource Bytes',
+    /** Label for a value associated with how many bytes of a script are not executed. */
+    unusedBytesLabel: 'Unused Bytes',
+    /** Label for a column where the values represent how much of a file is used bytes vs unused bytes (coverage). */
+    coverageColumnName: 'Coverage',
+    /** Label for a button that shows everything (or rather, does not highlight any specific mode such as: unused bytes, duplicate bytes, etc). */
+    allLabel: 'All',
+    /** Label for a button that highlights information about duplicate modules (aka: files, javascript resources that were included twice by a web page). */
+    duplicateModulesLabel: 'Duplicate Modules',
+  };
+
   /**
    * @param {LH.Treemap.Node} node
    * @param {(node: NodeWithElement, path: string[]) => void} fn
@@ -191,33 +214,3 @@ TreemapUtil.COLOR_HUES = [
   15.9,
   199.5,
 ];
-
-/** @type {I18n<typeof TreemapUtil['UIStrings']>} */
-// @ts-expect-error: Is set in main.
-TreemapUtil.i18n = null;
-
-TreemapUtil.UIStrings = {
-  /** Label for a button that alternates between showing or hiding a table. */
-  toggleTableButtonLabel: 'Toggle Table',
-  /** Text for an option in a dropdown menu. When selected, the app shows information for all scripts that were found in a web page. */
-  allScriptsDropdownLabel: 'All Scripts',
-  /** Label for a table column where the values are URLs, JS module names, or arbitrary identifiers. For simplicity, just 'name' is used. */
-  tableColumnName: 'Name',
-  /** Label for column giving the size of a file in bytes. */
-  resourceBytesLabel: 'Resource Bytes',
-  /** Label for a value associated with how many bytes of a script are not executed. */
-  unusedBytesLabel: 'Unused Bytes',
-  /** Label for a column where the values represent how much of a file is used bytes vs unused bytes (coverage). */
-  coverageColumnName: 'Coverage',
-  /** Label for a button that shows everything (or rather, does not highlight any specific mode such as: unused bytes, duplicate bytes, etc). */
-  allLabel: 'All',
-  /** Label for a button that highlights information about duplicate modules (aka: files, javascript resources that were included twice by a web page). */
-  duplicateModulesLabel: 'Duplicate Modules',
-};
-
-// node export for testing.
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = TreemapUtil;
-} else {
-  self.TreemapUtil = TreemapUtil;
-}

lighthouse-treemap/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

lighthouse-treemap/test/treemap-test-pptr.js

@@ -9,19 +9,24 @@
 
 /* global document, window */
 
-const fs = require('fs');
-const puppeteer = require('puppeteer');
-const {server} = require('../../lighthouse-cli/test/fixtures/static-server.js');
+import {jest} from '@jest/globals';
+import fs from 'fs';
+import puppeteer from 'puppeteer';
+import {server} from '../../lighthouse-cli/test/fixtures/static-server.js';
+import {LH_ROOT} from '../../root.js';
+
+const debugOptions = JSON.parse(
+  fs.readFileSync(LH_ROOT + '/lighthouse-treemap/app/debug.json', 'utf-8')
+);
 const portNumber = 20202;
 const treemapUrl = `http://localhost:${portNumber}/dist/gh-pages/treemap/index.html`;
-const debugOptions = require('../app/debug.json');
 
 // These tests run in Chromium and have their own timeouts.
 // Make sure we get the more helpful test-specific timeout error instead of jest's generic one.
 jest.setTimeout(35_000);
 
 function getTextEncodingCode() {
-  const code = fs.readFileSync(require.resolve('../../report/renderer/text-encoding.js'), 'utf-8');
+  const code = fs.readFileSync(LH_ROOT + '/report/renderer/text-encoding.js', 'utf-8');
   return code.replace('export ', '');
 }
 

lighthouse-treemap/test/util-test.js

@@ -7,10 +7,11 @@
 
 /* eslint-env jest */
 
-const assert = require('assert');
-const fs = require('fs');
-const jsdom = require('jsdom');
-const TreemapUtil = require('../app/src/util.js');
+import assert from 'assert';
+import fs from 'fs';
+import jsdom from 'jsdom';
+import {TreemapUtil} from '../app/src/util.js';
+import {LH_ROOT} from '../../root.js';
 
 describe('TreemapUtil', () => {
   it('pathsAreEqual works', () => {
@@ -75,7 +76,7 @@ describe('TreemapUtil', () => {
 
   describe('data-i18n', () => {
     it('should have only valid data-i18n values in treemap html', () => {
-      const TREEMAP_INDEX = fs.readFileSync(__dirname + '/../app/index.html', 'utf8');
+      const TREEMAP_INDEX = fs.readFileSync(LH_ROOT + '/lighthouse-treemap/app/index.html', 'utf8');
       const dom = new jsdom.JSDOM(TREEMAP_INDEX);
       for (const node of dom.window.document.querySelectorAll('[data-i18n]')) {
         const val = node.getAttribute('data-i18n');

lighthouse-treemap/types/treemap.d.ts

@@ -1,11 +1,4 @@
-import _TreemapUtil = require('../app/src/util.js');
-import {DragAndDrop as _DragAndDrop} from '../../lighthouse-viewer/app/src/drag-and-drop.js';
-import {FirebaseAuth as _FirebaseAuth} from '../../lighthouse-viewer/app/src/firebase-auth.js';
-import {GithubApi as _GithubApi} from '../../lighthouse-viewer/app/src/github-api.js';
-import {TextEncoding as _TextEncoding} from '../../report/renderer/text-encoding.js';
 import {Logger as _Logger} from '../../report/renderer/logger.js';
-import {I18n as _I18n} from '../../report/renderer/i18n.js';
-import {getFilenamePrefix as _getFilenamePrefix} from '../../report/renderer/file-namer.js';
 import {FirebaseNamespace} from '@firebase/app-types';
 
 declare global {
@@ -38,17 +31,10 @@ declare global {
     render(el: HTMLElement, data: any, options: WebTreeMapOptions): void;
     sort(data: any): void;
   };
-  var TreemapUtil: typeof _TreemapUtil;
-  var TextEncoding: typeof _TextEncoding;
-  var Logger: typeof _Logger;
-  var DragAndDrop: typeof _DragAndDrop;
-  var GithubApi: typeof _GithubApi;
-  var FirebaseAuth: typeof _FirebaseAuth;
+  var logger: _Logger;
   var firebase: Required<FirebaseNamespace>;
   var idbKeyval: typeof import('idb-keyval');
   var strings: Record<LH.Locale, import('../../lighthouse-core/lib/i18n/locales').LhlMessages>;
-  var getFilenamePrefix: typeof _getFilenamePrefix;
-  var I18n: typeof _I18n;
 
   interface Window {
     logger: _Logger;

package.json

@@ -47,7 +47,7 @@
     "unit-core": "yarn jest \"lighthouse-core\"",
     "unit-cli": "yarn jest \"lighthouse-cli/\"",
     "unit-report": "yarn jest \"report/\"",
-    "unit-treemap": "jest \"lighthouse-treemap/.*-test.js\"",
+    "unit-treemap": "yarn jest \"lighthouse-treemap/.*-test.js\"",
     "unit-viewer": "yarn jest \"lighthouse-viewer/.*-test.js\"",
     "unit": "yarn unit-core && yarn unit-cli && yarn unit-report && yarn unit-viewer && yarn unit-treemap",
     "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run unit-core -- --ci && npm run unit-cli -- --ci && npm run unit-report -- --ci && npm run unit-viewer -- --ci && npm run unit-treemap -- --ci",