diff --git a/.circleci/config.yml b/.circleci/config.yml index 72f3bf9dc225..95ff7dd6304a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -154,6 +154,8 @@ jobs: cd code yarn local-registry --publish - report-workflow-on-failure + - store_artifacts: + path: code/bench/esbuild-metafiles - save_cache: name: Save Yarn cache key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} @@ -164,6 +166,7 @@ jobs: paths: - code/node_modules - scripts/node_modules + - code/bench - code/examples - code/node_modules - code/addons diff --git a/.gitignore b/.gitignore index acfc54475076..f0ad86dc47c4 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ test-results /repros /sandbox /bench +/code/bench .verdaccio-cache .next /.npmrc diff --git a/code/.storybook/bench.stories.tsx b/code/.storybook/bench.stories.tsx new file mode 100644 index 000000000000..5f59a0550eb4 --- /dev/null +++ b/code/.storybook/bench.stories.tsx @@ -0,0 +1,89 @@ +import React from 'react'; + +import type { Meta } from '@storybook/react'; + +// @ts-expect-error - TS doesn't know about import.meta.glob from Vite +const allMetafiles = import.meta.glob([ + '../bench/esbuild-metafiles/**/*.json', + // the core metafile is too big to be loaded automatically in the iframe + '!../bench/esbuild-metafiles/core/core.json', +]); + +const METAFILES_DIR = '../bench/esbuild-metafiles/'; +const PACKAGES_WITHOUT_ORG = ['storybook', 'sb', 'create-storybook']; + +// allows the metafile path to be used in the URL hash +const safeMetafileArg = (path: string) => + path + .replace(METAFILES_DIR, '') + .replaceAll('/', '__') + .replace(/(\w*).json/, '$1'); + +export default { + title: 'Bench', + parameters: { + layout: 'fullscreen', + chromatic: { disableSnapshot: true }, + }, + args: { + metafile: safeMetafileArg(Object.keys(allMetafiles)[0]), + }, + argTypes: { + metafile: { + options: Object.keys(allMetafiles).concat('core - core').map(safeMetafileArg).sort(), + mapping: Object.fromEntries( + Object.keys(allMetafiles).map((path) => [safeMetafileArg(path), path]) + ), + control: { + type: 'select', + labels: Object.fromEntries( + Object.keys(allMetafiles) + .map((path) => { + const [, dirName, subEntry] = /esbuild-metafiles\/(.+)\/(.+).json/.exec(path)!; + const pkgName = PACKAGES_WITHOUT_ORG.includes(dirName) + ? dirName + : `@storybook/${dirName}`; + + return [ + safeMetafileArg(path), + subEntry !== 'metafile' ? `${pkgName} - ${subEntry}` : pkgName, + ]; + }) + .concat([['core - core', '@storybook/core - core - TOO BIG PLEASE UPLOAD MANUALLY']]) + ), + }, + }, + }, + loaders: [ + async ({ args }) => { + if (!args.metafile) { + return; + } + let metafile; + try { + metafile = await allMetafiles[args.metafile](); + } catch (e) { + return; + } + const encodedMetafile = btoa(JSON.stringify(metafile)); + return { encodedMetafile }; + }, + ], + render: (args, { loaded }) => { + const { encodedMetafile = '' } = loaded ?? {}; + + return ( +