Build: Write and store esbuild metafiles

.circleci/config.yml

@@ -154,6 +154,8 @@ jobs:
             cd code
             yarn local-registry --publish
       - report-workflow-on-failure
+      - store_artifacts: 
+          path: bench/esbuild-metafiles
       - save_cache:
           name: Save Yarn cache
           key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
@@ -175,6 +177,7 @@ jobs:
             - code/ui
             - code/renderers
             - code/presets
+            - bench
             - .verdaccio-cache
   lint:
     executor:
@@ -258,8 +261,8 @@ jobs:
           root: .
           paths:
             - code/coverage
-      - report-workflow-on-failure
-      - cancel-workflow-on-failure
+            - report-workflow-on-failure
+            - cancel-workflow-on-failure
   coverage:
     executor:
       class: small

code/.storybook/bench.stories.tsx

@@ -0,0 +1,123 @@
+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 following metafiles are too big to be loaded automatically in the iframe
+    '!**/core-0.cjs.json',
+    '!**/core-2.esm.json',
+  ],
+  {
+    // eagerly loading is not ideal because it imports all metafiles upfront,
+    // but it's the only way to create the argTypes from this list,
+    // as otherwise it would be an async operation
+    eager: true,
+  }
+);
+
+const METAFILES_DIR = '../../bench/esbuild-metafiles/';
+const METAFILE_DIR_PKG_NAME_MAP = {
+  cli: 'storybook',
+  'cli-sb': 'sb',
+  'cli-storybook': '@storybook/cli',
+  'create-storybook': 'create-storybook',
+  docs: '@storybook/addon-docs',
+  'addon-test': '@storybook/experimental-addon-test',
+} as const;
+const TOO_BIG_METAFILES = ['@storybook/core core-0.cjs', '@storybook/core core-2.esm'];
+
+// allows the metafile path to be used in the URL hash
+const safeMetafileArg = (path: string) =>
+  path.replace(METAFILES_DIR, '').replaceAll('/', '_SLASH_').replaceAll('.', '_DOT_');
+
+export default {
+  title: 'Bench',
+  parameters: {
+    layout: 'fullscreen',
+    chromatic: { disableSnapshot: true },
+  },
+  argTypes: {
+    metafile: {
+      options: Object.keys(allMetafiles).map(safeMetafileArg).concat(TOO_BIG_METAFILES),
+      mapping: Object.fromEntries(
+        Object.keys(allMetafiles).map((path) => [safeMetafileArg(path), path])
+      ),
+      control: {
+        type: 'select',
+        labels: Object.fromEntries(
+          Object.keys(allMetafiles)
+            .concat(TOO_BIG_METAFILES)
+            .map((path) => {
+              if (TOO_BIG_METAFILES.includes(path)) {
+                return [path, `${path} - TOO BIG PLEASE UPLOAD MANUALLY`];
+              }
+              // example path: ../../bench/esbuild-metafiles/actions/previewEntries-esm.json
+
+              const pkgDir = path.split('/').at(-2)!; // 'actions'
+              const basename = path.split('/').at(-1)!.split('.').at(0)!; // 'previewEntries-esm'
+              const entriesMatch = path.match(/\w+Entries/); // ['previewEntries']
+
+              let pkgName;
+              if (pkgDir in METAFILE_DIR_PKG_NAME_MAP) {
+                pkgName = METAFILE_DIR_PKG_NAME_MAP[pkgDir];
+              } else if (entriesMatch) {
+                // only addons have specific xEntries files
+                pkgName = `@storybook/addon-${pkgDir}`;
+              } else {
+                pkgName = `@storybook/${pkgDir}`;
+              }
+
+              let extraInfo = '';
+
+              if (pkgDir === 'core') {
+                extraInfo = `- ${basename} `;
+              } else if (entriesMatch) {
+                extraInfo = `- ${entriesMatch[0]} `;
+              }
+              const moduleType = path.includes('cjs') ? 'CJS' : 'ESM';
+
+              return [safeMetafileArg(path), `${pkgName} ${extraInfo}- ${moduleType}`];
+            })
+        ),
+      },
+    },
+  },
+  render: (args) => {
+    if (!args.metafile) {
+      return (
+        <div
+          style={{
+            width: '100%',
+            height: '100vh',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <span>
+            Select a metafile in the <code>metafile</code> Control
+          </span>
+        </div>
+      );
+    }
+    const metafile = allMetafiles[args.metafile];
+    const encodedMetafile = btoa(JSON.stringify(metafile));
+
+    return (
+      <iframe
+        // esbuild analyzer has a hidden feature to load a base64-encoded metafile from the the URL hash
+        // see https://github.com/esbuild/esbuild.github.io/blob/ccf70086543a034495834b4135e15e91a3ffceb8/src/analyze/index.ts#L113-L116
+        src={`https://esbuild.github.io/analyze/#${encodedMetafile}`}
+        style={{ border: 'none', width: '100%', height: '100vh' }}
+        key={args.metafile} // force re-render on args change
+      />
+    );
+  },
+} satisfies Meta;
+
+export const ESBuildAnalyzer = {
+  name: 'ESBuild Metafiles',
+};

code/.storybook/main.ts

@@ -7,6 +7,7 @@ const managerApiPath = join(__dirname, '../core/src/manager-api');
 
 const config: StorybookConfig = {
   stories: [
+    './*.stories.@(js|jsx|ts|tsx)',
     {
       directory: '../core/template/stories',
       titlePrefix: 'core',

code/core/scripts/prep.ts

@@ -15,6 +15,7 @@ import {
   process,
 } from '../../../scripts/prepare/tools';
 import pkg from '../package.json';
+import meta from '../src/components/components/Badge/Badge.stories';
 import { globalsModuleInfoMap } from '../src/manager/globals-module-info';
 import { getBundles, getEntries, getFinals } from './entries';
 import { generatePackageJsonFile } from './helpers/generatePackageJsonFile';
@@ -306,27 +307,37 @@ async function run() {
         console.log(`compiled ${chalk.cyan(filename)}`);
       });
     } else {
+      // repo root/bench/esbuild-metafiles/core
+      const metafilesDir = join(__dirname, '..', '..', '..', 'bench', 'esbuild-metafiles', 'core');
+      if (existsSync(metafilesDir)) {
+        await rm(metafilesDir, { recursive: true });
+      }
+      await mkdir(metafilesDir, { recursive: true });
+
       await Promise.all(
         compile.map(async (context, index) => {
           const out = await context.rebuild();
           await context.dispose();
 
-          if (out.metafile) {
-            const { outputs } = out.metafile;
-            const keys = Object.keys(outputs);
-            const format = keys.every((key) => key.endsWith('.js')) ? 'esm' : 'cjs';
-            const outName =
-              keys.length === 1 ? dirname(keys[0]).replace('dist/', '') : `meta-${format}-${index}`;
-
-            if (!existsSync('report')) {
-              mkdirSync('report');
-            }
-            await writeFile(`report/${outName}.json`, JSON.stringify(out.metafile, null, 2));
-            await writeFile(
-              `report/${outName}.txt`,
-              await esbuild.analyzeMetafile(out.metafile, { color: false, verbose: false })
-            );
+          if (!out.metafile) {
+            return;
           }
+
+          const { outputs } = out.metafile;
+          const keys = Object.keys(outputs);
+          const format = keys.every((key) => key.endsWith('.js')) ? 'esm' : 'cjs';
+          const moduleName =
+            keys.length === 1 ? dirname(keys[0]).replace('dist/', '') : `core-${index}`;
+          const basename = `${moduleName}.${format}`;
+
+          await writeFile(
+            join(metafilesDir, `${basename}.json`),
+            JSON.stringify(out.metafile, null, 2)
+          );
+          await writeFile(
+            join(metafilesDir, `${basename}.txt`),
+            await esbuild.analyzeMetafile(out.metafile, { color: false, verbose: false })
+          );
         })
       );
     }

code/lib/instrumenter/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "instrumenter",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

code/lib/test/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "test",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

code/nx.json

@@ -52,7 +52,7 @@
         "{workspaceRoot}/../scripts/prepare/{bundle,addon-bundle,esm-bundle}.ts"
       ],
       "dependsOn": ["^build"],
-      "outputs": ["{projectRoot}/dist"],
+      "outputs": ["{projectRoot}/dist", "{workspaceRoot}/../bench/esbuild-metafiles/{projectName}"],
       "cache": true
     },
     "test": {