chore(deps): upgrade to storybook 7.6.4, preact 10.19.3, esbuild 0.19.9

.eslintrc.js

@@ -9,13 +9,7 @@ module.exports = {
   root: true,
   // Start with google standard style and disable the prettier-controlled rules
   //     https://github.com/google/eslint-config-google/blob/master/index.js
-  extends: [
-    'eslint:recommended',
-    'plugin:import/errors',
-    'plugin:import/warnings',
-    'google',
-    'prettier',
-  ],
+  extends: ['eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings', 'google', 'prettier', 'plugin:storybook/recommended'],
   // Use the prettier plugin to enforce prettier violations
   plugins: ['prettier', 'import'],
   ignorePatterns: ['dist/'],

package.json

@@ -29,13 +29,14 @@
     "test:unit:ci": "jest"
   },
   "devDependencies": {
-    "@chialab/esbuild-plugin-html": "^0.17.2",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/addon-storyshots": "^6.5.13",
-    "@storybook/addon-storyshots-puppeteer": "^6.5.13",
-    "@storybook/addons": "^6.5.13",
-    "@storybook/preact": "^6.5.13",
+    "@chialab/esbuild-plugin-html": "^0.17.3",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-storyshots": "^7.6.4",
+    "@storybook/addon-storyshots-puppeteer": "^7.6.4",
+    "@storybook/addons": "^7.6.4",
+    "@storybook/preact": "^7.6.4",
+    "@storybook/preact-webpack5": "^7.6.4",
     "@testing-library/dom": "^5.4.0",
     "@types/bluebird": "^3.5.42",
     "@types/body-parser": "^1.17.0",
@@ -56,7 +57,7 @@
     "@types/yargs": "^12.0.8",
     "@types/yargs-parser": "^11.0.0",
     "@typescript-eslint/parser": "^6.14.0",
-    "esbuild": "^0.15.13",
+    "esbuild": "^0.19.9",
     "eslint": "^8.8.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.3.0",
@@ -65,6 +66,7 @@
     "eslint-plugin-jest": "^26.0.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.4.3",
     "jest-circus": "^29.4.3",
@@ -82,6 +84,7 @@
     "puppeteer-core": "^21.6.1",
     "rimraf": "^3.0.2",
     "sqlite3": "^5.1.2",
+    "storybook": "^7.6.4",
     "ts-jest": "^29.1.1",
     "typescript": "^5.3.3"
   }

packages/server/.storybook/main.js

@@ -3,9 +3,23 @@
  * 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';
+'use strict';;
+import { dirname, join } from "path";
 
 module.exports = {
-  stories: ['../src/**/*.stories.jsx'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+ stories: ['../src/**/*.stories.jsx'],
+ addons: [getAbsolutePath("@storybook/addon-actions"), getAbsolutePath("@storybook/addon-links")],
+
+ framework: {
+  name: getAbsolutePath("@storybook/preact-webpack5"),
+  options: {}
+ },
+
+ docs: {
+  autodocs: true
+ }
 };
+
+function getAbsolutePath(value) {
+ return dirname(require.resolve(join(value, "package.json")));
+}

packages/server/.storybook/preview.jsx

@@ -10,13 +10,14 @@ const {h} = require('preact');
 require('./preview.css');
 require('../src/ui/app.css');
 
-const {addDecorator} = require('@storybook/preact');
-addDecorator(storyFn => (
-  <div id="storybook-test-root">
-    {storyFn()}
-  </div>
-));
-
 export const parameters = {
   layout: 'centered',
 };
+
+export const decorators = [
+  storyFn => (
+    <div id="storybook-test-root">
+      {storyFn()}
+    </div>
+  ),
+];

packages/server/package.json

@@ -16,8 +16,8 @@
     "build:esbuild": "node ../../scripts/build-app.js build ./src/ui/index.html ./dist /app/",
     "build:watch": "node ../../scripts/build-app.js watch ./src/ui/index.html ./dist /app/",
     "build:source-map-explorer": "npm run clean && npm run build && ../../scripts/source-map-explorer.sh",
-    "build:storybook": "build-storybook",
-    "start:storybook": "start-storybook -p 6006"
+    "build:storybook": "storybook build",
+    "start:storybook": "storybook dev -p 6006"
   },
   "dependencies": {
     "@lhci/utils": "0.1.0",
@@ -38,7 +38,8 @@
     "clsx": "^1.0.4",
     "d3": "^5.15.0",
     "plotly.js": "^1.48.3",
-    "preact": "^10.0.1",
+    "preact": "^10.19.3",
+    "preact-jsx-runtime": "^1.2.0",
     "preact-async-route": "^2.2.1",
     "preact-router": "^3.1.0",
     "@fontsource/material-icons": "^4.4.5",

packages/server/src/ui/components/d3-graph.jsx

@@ -59,7 +59,7 @@ export function findRootSvg(rootEl, margin) {
  * @param {{className?: string, data: T, render: (el: HTMLElement, data: T) => void, computeRerenderKey: (data: T) => string, update?: (el: HTMLElement, data: T) => void, computeUpdateKey?: (data: T) => string}} props
  */
 export const D3Graph = props => {
-  const graphElRef = useRef(/** @type {HTMLElement|undefined} */ (undefined));
+  const graphElRef = useRef(/** @type {HTMLDivElement|null} */ (null));
   const updateKey = props.computeUpdateKey ? props.computeUpdateKey(props.data) : '';
   const rerender = () => {
     if (!graphElRef.current) return;

packages/server/test/ui/storybook.test.jsx

@@ -23,6 +23,9 @@ if (process.env.CI && require('os').platform() !== 'darwin') {
   };
 }
 
+// TODO: We need to migrate away from this.
+// https://storybook.js.org/docs/writing-tests/storyshots-migration-guide
+
 initStoryshots({
   configPath: path.join(__dirname, '../../.storybook'),
   suite: 'Image Storyshots',
@@ -47,9 +50,9 @@ initStoryshots({
       await page.waitForTimeout(2000);
 
       const dimensions = await page.evaluate(() => {
-        // Note: #root is made by storybook, #storybook-test-root is made by us in preview.jsx
-        // #root > #storybook-test-root > some_element_being_tested
-        const elements = [...document.querySelectorAll('#root, #root *')];
+        // Note: #storybook-root is made by storybook, #storybook-test-root is made by us in preview.jsx
+        // #storybook-root > #storybook-test-root > some_element_being_tested
+        const elements = [...document.querySelectorAll('#storybook-root, #storybook-root *')];
         return {
           width: Math.ceil(Math.max(...elements.map(e => e.clientWidth))),
           height: Math.ceil(Math.max(...elements.map(e => e.clientHeight))),

packages/utils/src/api-client.js

@@ -6,15 +6,14 @@
 'use strict';
 
 const log = require('debug')('lhci:utils:api-client');
-const URL = require('url').URL;
 const fetch = require('isomorphic-fetch');
 
 /** @type {(s: string) => string} */
 const btoa = typeof window === 'undefined' ? s => Buffer.from(s).toString('base64') : window.btoa; // eslint-disable-line no-undef
 
 class ApiClient {
   /**
-   * @param {{rootURL: string, fetch?: import('isomorphic-fetch'), URL?: typeof import('url').URL, extraHeaders?: Record<string, string>, basicAuth?: LHCI.ServerCommand.Options['basicAuth']}} options
+   * @param {{rootURL: string, fetch?: import('isomorphic-fetch'), URL?: typeof URL, extraHeaders?: Record<string, string>, basicAuth?: LHCI.ServerCommand.Options['basicAuth']}} options
    */
   constructor(options) {
     this._rootURL = options.rootURL;

packages/viewer/package.json

@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "clsx": "^1.0.4",
-    "preact": "^10.0.1",
+    "preact": "^10.19.3",
     "@fontsource/material-icons": "^4.4.5",
     "@fontsource/roboto": "^4.4.5",
     "@fontsource/roboto-mono": "^4.4.5"

packages/viewer/src/ui/components/report-upload-box.jsx

@@ -91,7 +91,7 @@ function handleFileInput(props, fileList) {
   });
 }
 
-/** @param {ReportUploadBoxProps} props @param {import('preact/hooks').Ref<DragData>} dragTargetRef @param {(b: boolean) => void} setIsDragging @param {Event} e */
+/** @param {ReportUploadBoxProps} props @param {import('preact/hooks').MutableRef<DragData>} dragTargetRef @param {(b: boolean) => void} setIsDragging @param {Event} e */
 function handleDragEnter(props, dragTargetRef, setIsDragging, e) {
   if (!(e.target instanceof HTMLElement)) return;
   e.stopPropagation();
@@ -100,7 +100,7 @@ function handleDragEnter(props, dragTargetRef, setIsDragging, e) {
   dragTargetRef.current = e.target;
 }
 
-/** @param {ReportUploadBoxProps} props @param {import('preact/hooks').Ref<DragData>} dragTargetRef @param {(b: boolean) => void} setIsDragging @param {Event} e */
+/** @param {ReportUploadBoxProps} props @param {import('preact/hooks').MutableRef<DragData>} dragTargetRef @param {(b: boolean) => void} setIsDragging @param {Event} e */
 function handleDragLeave(props, dragTargetRef, setIsDragging, e) {
   if (e.target !== dragTargetRef.current) return;
   e.stopPropagation();
@@ -116,7 +116,7 @@ function handleDragOver(props, dragTargetRef, setIsDragging, e) {
   e.preventDefault();
 }
 
-/** @param {Pick<ReportUploadBoxProps, 'addToast'|'setReport'>} props @param {import('preact/hooks').Ref<DragData>} dragTargetRef @param {(b: boolean) => void} setIsDragging @param {Event} e */
+/** @param {Pick<ReportUploadBoxProps, 'addToast'|'setReport'>} props @param {import('preact/hooks').MutableRef<DragData>} dragTargetRef @param {(b: boolean) => void} setIsDragging @param {Event} e */
 function handleDrop(props, dragTargetRef, setIsDragging, e) {
   if (!dragTargetRef.current) return;
   if (!(e instanceof DragEvent)) return;

scripts/build-app.js

@@ -37,6 +37,7 @@ function fixHtmlSubresourceUrls(result, buildOptions) {
 
   const htmls = Object.keys(result.metafile.outputs).filter(o => o.endsWith('.html'));
   const csss = Object.keys(result.metafile.outputs).filter(o => o.endsWith('.css'));
+  const jss = Object.keys(result.metafile.outputs).filter(o => o.endsWith('.js'));
   if (htmls.length !== 1) throw new Error('expected exactly one generated html ' + htmls);
   if (csss.length !== 1) throw new Error('expected exactly one generated css ' + csss);
   const htmlDistPath = htmls[0];
@@ -68,8 +69,15 @@ function fixHtmlSubresourceUrls(result, buildOptions) {
   // Rewrite the CSS, making sure we don't source icons relative to the chunks/css file.
   const newCssText = fs
     .readFileSync(cssDistPath, 'utf-8')
-    .replaceAll(`url(./assets`, `url(../assets`);
+    .replaceAll(`url("./assets`, `url("../assets`);
   fs.writeFileSync(cssDistPath, newCssText);
+
+  for (const jsPath of jss) {
+    const newJsText = fs
+      .readFileSync(jsPath, 'utf-8')
+      .replaceAll('sourceMappingURL=chunks/', 'sourceMappingURL=');
+    fs.writeFileSync(jsPath, newJsText);
+  }
 }
 
 async function main() {
@@ -81,7 +89,29 @@ async function main() {
     assetNames: 'assets/[name]-[hash]',
     // See the special handling in fixHtmlSubresourceUrls.
     chunkNames: `chunks/[name]-[hash]`,
-    plugins: [htmlPlugin()],
+    target: 'ES2021',
+    plugins: [
+      htmlPlugin(),
+      {
+        name: 'onEndPlugin',
+        setup(b) {
+          b.onEnd((result) => {
+            // For some reason onEnd fires twice, but only the second one has
+            // the html output. Maybe issue with html plugin?
+            if (!result.metafile?.outputs['dist/index.html']) {
+              return;
+            }
+
+            if (result) {
+              fixHtmlSubresourceUrls(result, buildOptions);
+              console.log('Built.', new Date());
+            }
+            if (result.errors.length) console.error(result.errors);
+            if (result.warnings.length) console.warn(result.warnings);
+          });
+        },
+      }
+    ],
     loader: {
       '.svg': 'file',
       '.woff': 'file',
@@ -96,24 +126,15 @@ async function main() {
     minify: true,
     sourcemap: true,
     jsxFactory: 'h',
-    watch:
-      command === 'watch'
-        ? {
-            onRebuild(err, result) {
-              if (!err && result) {
-                fixHtmlSubresourceUrls(result, buildOptions);
-              }
-            },
-          }
-        : undefined,
   };
 
-  const result = await esbuild.build(buildOptions);
-  fixHtmlSubresourceUrls(result, buildOptions);
-
-  console.log('Built.', new Date());
-  if (result.errors.length) console.error(result.errors);
-  if (result.warnings.length) console.warn(result.warnings);
+  const context = await esbuild.context(buildOptions);
+  await context.rebuild();
+  if (command === 'watch') {
+    await context.watch();
+  } else {
+    await context.dispose();
+  }
 }
 
 main().catch(err => {