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: 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

.gitignore

@@ -12,6 +12,7 @@ test-results
 /repros
 /sandbox
 /bench
+/code/bench
 .verdaccio-cache
 .next
 /.npmrc

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 (
+      <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/addons/a11y/project.json

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

code/addons/actions/project.json

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

code/addons/backgrounds/project.json

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

code/addons/controls/project.json

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

code/addons/docs/project.json

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

code/addons/essentials/project.json

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

code/addons/gfm/project.json

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

code/addons/highlight/project.json

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

code/addons/interactions/project.json

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

code/addons/jest/project.json

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

code/addons/links/project.json

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

code/addons/measure/project.json

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

code/addons/onboarding/project.json

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

code/addons/outline/project.json

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

code/addons/storysource/project.json

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

code/addons/test/project.json

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

code/addons/themes/project.json

@@ -1,5 +1,5 @@
 {
-  "name": "themes",
+  "name": "addon-themes",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "targets": {
     "build": {}

code/addons/toolbars/project.json

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

code/addons/viewport/project.json

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

code/core/scripts/prep.ts

@@ -3,6 +3,8 @@ import { existsSync, mkdirSync, watch } from 'node:fs';
 import { mkdir, rm, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 
+import type { Metafile } from 'esbuild';
+
 import {
   chalk,
   dedent,
@@ -306,27 +308,58 @@ async function run() {
         console.log(`compiled ${chalk.cyan(filename)}`);
       });
     } else {
-      await Promise.all(
-        compile.map(async (context, index) => {
-          const out = await context.rebuild();
+      // 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 });
+
+      const outputs = await Promise.all(
+        compile.map(async (context) => {
+          const output = 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 })
-            );
-          }
+          return output;
+        })
+      );
+
+      const metafileByModule: Record<string, Metafile> = {};
+
+      for (const currentOutput of outputs) {
+        if (!currentOutput.metafile) {
+          continue;
+        }
+
+        const keys = Object.keys(currentOutput.metafile.outputs);
+        const moduleName = keys.length === 1 ? dirname(keys[0]).replace('dist/', '') : 'core';
+
+        const existingMetafile = metafileByModule[moduleName];
+
+        if (existingMetafile) {
+          existingMetafile.inputs = {
+            ...existingMetafile.inputs,
+            ...currentOutput.metafile.inputs,
+          };
+          existingMetafile.outputs = {
+            ...existingMetafile.outputs,
+            ...currentOutput.metafile.outputs,
+          };
+        } else {
+          metafileByModule[moduleName] = currentOutput.metafile;
+        }
+      }
+
+      await Promise.all(
+        Object.entries(metafileByModule).map(async ([moduleName, metafile]) => {
+          await writeFile(
+            join(metafilesDir, `${moduleName}.json`),
+            JSON.stringify(metafile, null, 2)
+          );
+          await writeFile(
+            join(metafilesDir, `${moduleName}.txt`),
+            await esbuild.analyzeMetafile(metafile, { color: false, verbose: false })
+          );
         })
       );
     }

code/lib/cli-sb/project.json

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

code/lib/cli-storybook/project.json

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

code/lib/cli/project.json

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

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": {