Manifests: Refactor from componentManifestGenerator to extensible manifests preset property

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 {
@@ -10,16 +10,21 @@ import {
 } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 import { getPrecedingUpgrade, telemetry } from 'storybook/internal/telemetry';
-import type { BuilderOptions, CLIOptions, LoadOptions, Options } from 'storybook/internal/types';
+import type {
+  BuilderOptions,
+  CLIOptions,
+  LoadOptions,
+  Options,
+} from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
 
 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 { writeManifests } from './utils/manifests/manifests';
 import { buildOrThrow } from './utils/build-or-throw';
 import { copyAllStaticFilesRelativeToMain } from './utils/copy-all-static-files';
 import { getBuilders } from './utils/get-builders';
@@ -148,29 +153,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);