Skip to content

Commit

Permalink
chore(deps): upgrade to storybook 7.6.4, preact 10.19.3, esbuild 0.19…
Browse files Browse the repository at this point in the history
….9 (#990)
  • Loading branch information
connorjclark authored Dec 14, 2023
1 parent 939ef03 commit 5d30e52
Show file tree
Hide file tree
Showing 21 changed files with 3,902 additions and 5,507 deletions.
8 changes: 1 addition & 7 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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/'],
Expand Down
19 changes: 11 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
Expand Down
20 changes: 17 additions & 3 deletions packages/server/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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")));
}
15 changes: 8 additions & 7 deletions packages/server/.storybook/preview.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
),
];
7 changes: 4 additions & 3 deletions packages/server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/server/src/ui/components/d3-graph.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 6 additions & 3 deletions packages/server/test/ui/storybook.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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))),
Expand Down
3 changes: 1 addition & 2 deletions packages/utils/src/api-client.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/viewer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions packages/viewer/src/ui/components/report-upload-box.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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;
Expand Down
57 changes: 39 additions & 18 deletions scripts/build-app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down Expand Up @@ -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() {
Expand All @@ -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',
Expand All @@ -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 => {
Expand Down
Loading

0 comments on commit 5d30e52

Please sign in to comment.