diff --git a/build/build-report.js b/build/build-report.js index d4ca39814b97..e24ed09a520a 100644 --- a/build/build-report.js +++ b/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', @@ -98,5 +84,4 @@ module.exports = { buildStandaloneReport, buildPsiReport, buildUmdBundle, - buildTreemapReport, }; diff --git a/build/build-treemap.js b/build/build-treemap.js index c85a8bd24f56..63f4b724ec63 100644 --- a/build/build-treemap.js +++ b/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} */ ({}); 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/**/*'}, diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js index 602c92ba1a90..dc9c12b67bd2 100644 --- a/lighthouse-treemap/app/src/main.js +++ b/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]; } diff --git a/lighthouse-treemap/app/src/util.js b/lighthouse-treemap/app/src/util.js index 0e07dc17e649..e89f21bd3f6a 100644 --- a/lighthouse-treemap/app/src/util.js +++ b/lighthouse-treemap/app/src/util.js @@ -11,7 +11,30 @@ /** @template {string} T @typedef {import('typed-query-selector/parser').ParseSelector} ParseSelector */ /** @template T @typedef {import('../../../report/renderer/i18n').I18n} I18n */ -class TreemapUtil { +export class TreemapUtil { + /** @type {I18n} */ + // @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} */ -// @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; -} diff --git a/lighthouse-treemap/package.json b/lighthouse-treemap/package.json new file mode 100644 index 000000000000..bd346284783c --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/lighthouse-treemap/test/treemap-test-pptr.js b/lighthouse-treemap/test/treemap-test-pptr.js index 0fe5e63307ce..a6a517e926fc 100644 --- a/lighthouse-treemap/test/treemap-test-pptr.js +++ b/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 ', ''); } diff --git a/lighthouse-treemap/test/util-test.js b/lighthouse-treemap/test/util-test.js index dd7715d1c628..2bd90c53ab49 100644 --- a/lighthouse-treemap/test/util-test.js +++ b/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'); diff --git a/lighthouse-treemap/types/treemap.d.ts b/lighthouse-treemap/types/treemap.d.ts index a2219afe8431..94be41f9f3e6 100644 --- a/lighthouse-treemap/types/treemap.d.ts +++ b/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; var idbKeyval: typeof import('idb-keyval'); var strings: Record; - var getFilenamePrefix: typeof _getFilenamePrefix; - var I18n: typeof _I18n; interface Window { logger: _Logger; diff --git a/lighthouse-viewer/app/src/deps-for-treemap.js b/lighthouse-viewer/app/src/deps-for-treemap.js deleted file mode 100644 index 56b6dace8fe6..000000000000 --- a/lighthouse-viewer/app/src/deps-for-treemap.js +++ /dev/null @@ -1,19 +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'; - -// TODO(esmodules): remove when treemap is esm. - -import {GithubApi} from './github-api.js'; -import {FirebaseAuth} from './firebase-auth.js'; -import {DragAndDrop} from './drag-and-drop.js'; - -// @ts-expect-error -window.GithubApi = GithubApi; -// @ts-expect-error -window.FirebaseAuth = FirebaseAuth; -// @ts-expect-error -window.DragAndDrop = DragAndDrop; diff --git a/package.json b/package.json index 1af5db1d71aa..f7f1dbc1fc8f 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,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", diff --git a/report/clients/treemap.js b/report/clients/treemap.js deleted file mode 100644 index 896a4752f5cb..000000000000 --- a/report/clients/treemap.js +++ /dev/null @@ -1,21 +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'; - -/* global window */ - -// TODO(esmodules): delete when treemap app is esm. - -import {I18n} from '../renderer/i18n.js'; -import {Logger} from '../renderer/logger.js'; -import {TextEncoding} from '../renderer/text-encoding.js'; - -// @ts-expect-error -window.I18n = I18n; -// @ts-expect-error -window.Logger = Logger; -// @ts-expect-error -window.TextEncoding = TextEncoding;