Manifests: Refactor from componentManifestGenerator to extensible manifests preset property

code/.eslintrc.js

@@ -51,6 +51,12 @@ module.exports = {
               "Don't import from react-aria-components root, but use the react-aria-components/patched-dist/ComponentX entrypoints which are optimised for tree-shaking. Might require addition patching of the package if using new, unpatched components. See https://github.com/storybookjs/storybook/pull/32594",
             allowTypeImports: true,
           },
+          {
+            name: 'es-toolkit',
+            message:
+              "Don't import from es-toolkit root, but use the sub-exports like es-toolkit/array entrypoints instead which are optimised for tree-shaking.",
+            allowTypeImports: true,
+          },
         ],
       },
     ],

code/addons/docs/package.json

@@ -93,7 +93,7 @@
     "@types/color-convert": "^2.0.0",
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "color-convert": "^2.0.1",
-    "es-toolkit": "^1.36.0",
+    "es-toolkit": "^1.43.0",
     "github-slugger": "^2.0.0",
     "markdown-to-jsx": "^7.7.2",
     "memoizerific": "^1.11.3",

code/addons/vitest/package.json

@@ -79,7 +79,7 @@
     "@vitest/browser-playwright": "^4.0.14",
     "@vitest/runner": "^4.0.14",
     "empathic": "^2.0.0",
-    "es-toolkit": "^1.36.0",
+    "es-toolkit": "^1.43.0",
     "istanbul-lib-report": "^3.0.1",
     "micromatch": "^4.0.8",
     "pathe": "^1.1.2",

code/core/package.json

@@ -274,7 +274,7 @@
     "downshift": "^9.0.4",
     "ejs": "^3.1.10",
     "empathic": "^2.0.0",
-    "es-toolkit": "^1.36.0",
+    "es-toolkit": "^1.43.0",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0",
     "execa": "^8.0.1",
     "exsolve": "^1.0.7",

code/core/src/core-server/build-static.ts

@@ -1,4 +1,4 @@
-import { cp, mkdir, writeFile } from 'node:fs/promises';
+import { cp, mkdir } from 'node:fs/promises';
 import { rm } from 'node:fs/promises';
 
 import {
@@ -18,12 +18,12 @@ import { join, relative, resolve } from 'pathe';
 import picocolors from 'picocolors';
 
 import { resolvePackageDir } from '../shared/utils/module';
-import { renderManifestComponentsPage } from './manifest';
 import type { StoryIndexGenerator } from './utils/StoryIndexGenerator';
 import { buildOrThrow } from './utils/build-or-throw';
 import { copyAllStaticFilesRelativeToMain } from './utils/copy-all-static-files';
 import { getBuilders } from './utils/get-builders';
 import { writeIndexJson } from './utils/index-json';
+import { writeManifests } from './utils/manifests/manifests';
 import { extractStorybookMetadata } from './utils/metadata';
 import { outputStats } from './utils/output-stats';
 import { summarizeIndex } from './utils/summarizeIndex';
@@ -148,29 +148,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
     );
 
     if (features?.experimentalComponentsManifest) {
-      const componentManifestGenerator = await presets.apply(
-        'experimental_componentManifestGenerator'
-      );
-      const indexGenerator = await storyIndexGeneratorPromise;
-      if (componentManifestGenerator && indexGenerator) {
-        try {
-          const manifests = await componentManifestGenerator(
-            indexGenerator as unknown as import('storybook/internal/core-server').StoryIndexGenerator
-          );
-          await mkdir(join(options.outputDir, 'manifests'), { recursive: true });
-          await writeFile(
-            join(options.outputDir, 'manifests', 'components.json'),
-            JSON.stringify(manifests)
-          );
-          await writeFile(
-            join(options.outputDir, 'manifests', 'components.html'),
-            renderManifestComponentsPage(manifests)
-          );
-        } catch (e) {
-          logger.error('Failed to generate manifests/components.json');
-          logger.error(e instanceof Error ? e : String(e));
-        }
-      }
+      effects.push(writeManifests(options.outputDir, presets));
     }
   }
 

code/core/src/core-server/dev-server.ts

@@ -1,22 +1,21 @@
 import { logConfig, normalizeStories } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 import { MissingBuilderError } from 'storybook/internal/server-errors';
-import type { ComponentsManifest, Options } from 'storybook/internal/types';
-import { type ComponentManifestGenerator } from 'storybook/internal/types';
+import type { Options } from 'storybook/internal/types';
 
 import compression from '@polka/compression';
 import polka from 'polka';
 import invariant from 'tiny-invariant';
 
 import { telemetry } from '../telemetry';
-import { renderManifestComponentsPage } from './manifest';
 import { type StoryIndexGenerator } from './utils/StoryIndexGenerator';
 import { doTelemetry } from './utils/doTelemetry';
 import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders';
 import { getCachingMiddleware } from './utils/get-caching-middleware';
 import { getServerChannel } from './utils/get-server-channel';
 import { getAccessControlMiddleware } from './utils/getAccessControlMiddleware';
 import { registerIndexJsonRoute } from './utils/index-json';
+import { registerManifests } from './utils/manifests/manifests';
 import { useStorybookMetadata } from './utils/metadata';
 import { getMiddleware } from './utils/middleware';
 import { openInBrowser } from './utils/open-browser/open-in-browser';
@@ -162,59 +161,7 @@ export async function storybookDevServer(options: Options) {
 
   const features = await options.presets.apply('features');
   if (features?.experimentalComponentsManifest) {
-    app.use('/manifests/components.json', async (req, res) => {
-      try {
-        const componentManifestGenerator = await options.presets.apply(
-          'experimental_componentManifestGenerator'
-        );
-        const indexGenerator = await storyIndexGeneratorPromise;
-        if (componentManifestGenerator && indexGenerator) {
-          const manifest = await componentManifestGenerator(
-            indexGenerator as unknown as import('storybook/internal/core-server').StoryIndexGenerator
-          );
-          res.setHeader('Content-Type', 'application/json');
-          res.end(JSON.stringify(manifest));
-          return;
-        }
-        res.statusCode = 400;
-        res.end('No component manifest generator configured.');
-        return;
-      } catch (e) {
-        logger.error(e instanceof Error ? e : String(e));
-        res.statusCode = 500;
-        res.end(e instanceof Error ? e.toString() : String(e));
-        return;
-      }
-    });
-
-    app.get('/manifests/components.html', async (req, res) => {
-      try {
-        const componentManifestGenerator = await options.presets.apply(
-          'experimental_componentManifestGenerator'
-        );
-        const indexGenerator = await storyIndexGeneratorPromise;
-
-        if (!componentManifestGenerator || !indexGenerator) {
-          res.statusCode = 400;
-          res.setHeader('Content-Type', 'text/html; charset=utf-8');
-          res.end(`<pre>No component manifest generator configured.</pre>`);
-          return;
-        }
-
-        const manifest = (await componentManifestGenerator(
-          indexGenerator as unknown as import('storybook/internal/core-server').StoryIndexGenerator
-        )) as ComponentsManifest;
-
-        res.setHeader('Content-Type', 'text/html; charset=utf-8');
-        res.end(renderManifestComponentsPage(manifest));
-      } catch (e) {
-        // logger?.error?.(e instanceof Error ? e : String(e));
-        res.statusCode = 500;
-        res.setHeader('Content-Type', 'text/html; charset=utf-8');
-        invariant(e instanceof Error);
-        res.end(`<pre>${e.stack}</pre>`);
-      }
-    });
+    registerManifests({ app, presets: options.presets });
   }
   // Now the preview has successfully started, we can count this as a 'dev' event.
   doTelemetry(app, core, storyIndexGeneratorPromise, options);