React: Create a components manifest html page

code/core/package.json

@@ -314,6 +314,7 @@
     "react-textarea-autosize": "^8.3.0",
     "react-transition-group": "^4.4.5",
     "require-from-string": "^2.0.2",
+    "resolve": "^1.22.11",
     "resolve.exports": "^2.0.3",
     "sirv": "^2.0.4",
     "slash": "^5.0.0",

code/core/src/common/index.ts

@@ -45,6 +45,7 @@ export * from './js-package-manager';
 export * from './utils/scan-and-transform-files';
 export * from './utils/transform-imports';
 export * from '../shared/utils/module';
+export * from './utils/utils';
 
 export { versions };
 

code/core/src/common/utils/interpret-files.ts

@@ -1,18 +1,58 @@
 import { existsSync } from 'node:fs';
+import { extname } from 'node:path';
+
+import resolve from 'resolve';
 
 export const supportedExtensions = [
   '.js',
-  '.mjs',
-  '.cjs',
-  '.jsx',
   '.ts',
+  '.jsx',
+  '.tsx',
+  '.mjs',
   '.mts',
+  '.mtsx',
+  '.cjs',
   '.cts',
-  '.tsx',
+  '.ctsx',
 ] as const;
 
 export function getInterpretedFile(pathToFile: string) {
   return supportedExtensions
     .map((ext) => (pathToFile.endsWith(ext) ? pathToFile : `${pathToFile}${ext}`))
     .find((candidate) => existsSync(candidate));
 }
+
+export function resolveImport(id: string, options: resolve.SyncOpts): string {
+  const mergedOptions: resolve.SyncOpts = {
+    extensions: supportedExtensions,
+    packageFilter(pkg) {
+      // Prefer 'module' over 'main' if available
+      if (pkg.module) {
+        pkg.main = pkg.module;
+      }
+      return pkg;
+    },
+    ...options,
+  };
+
+  try {
+    return resolve.sync(id, { ...mergedOptions });
+  } catch (error) {
+    const ext = extname(id);
+
+    // if we try to import a JavaScript file it might be that we are actually pointing to
+    // a TypeScript file. This can happen in ES modules as TypeScript requires to import other
+    // TypeScript files with .js extensions
+    // https://www.typescriptlang.org/docs/handbook/esm-node.html#type-in-packagejson-and-new-extensions
+    const newId = ['.js', '.mjs', '.cjs'].includes(ext)
+      ? `${id.slice(0, -2)}ts`
+      : ext === '.jsx'
+        ? `${id.slice(0, -3)}tsx`
+        : null;
+
+    if (!newId) {
+      throw error;
+    }
+    return resolve.sync(newId, { ...mergedOptions, extensions: [] });
+  }
+}

code/core/src/common/utils/utils.ts

@@ -0,0 +1,26 @@
+// Object.groupBy polyfill
+export const groupBy = <K extends PropertyKey, T>(
+  items: T[],
+  keySelector: (item: T, index: number) => K
+) => {
+  return items.reduce<Record<K, T[]>>(
+    (acc, item, index) => {
+      const key = keySelector(item, index);
+      acc[key] ??= [];
+      acc[key].push(item);
+      return acc;
+    },
+    {} as Record<K, T[]>
+  );
+};
+
+// This invariant allows for lazy evaluation of the message, which we need to avoid excessive computation.
+export function invariant(
+  condition: unknown,
+  message?: string | (() => string)
+): asserts condition {
+  if (condition) {
+    return;
+  }
+  throw new Error((typeof message === 'function' ? message() : message) ?? 'Invariant failed');
+}

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

@@ -12,13 +12,14 @@ import {
 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 ComponentManifestGenerator } from 'storybook/internal/types';
+import { type ComponentManifestGenerator, type ComponentsManifest } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
 
 import picocolors from 'picocolors';
 
 import { resolvePackageDir } from '../shared/utils/module';
+import { renderManifestComponentsPage } from './manifest';
 import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
 import { buildOrThrow } from './utils/build-or-throw';
 import { copyAllStaticFilesRelativeToMain } from './utils/copy-all-static-files';
@@ -180,6 +181,10 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
             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));

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

@@ -1,14 +1,15 @@
 import { logConfig } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 import { MissingBuilderError } from 'storybook/internal/server-errors';
-import type { Options } from 'storybook/internal/types';
+import type { ComponentsManifest, Options } from 'storybook/internal/types';
 import { type ComponentManifestGenerator } 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';
@@ -165,6 +166,34 @@ export async function storybookDevServer(options: Options) {
         return;
       }
     });
+
+    app.get('/manifests/components.html', async (req, res) => {
+      try {
+        const componentManifestGenerator: ComponentManifestGenerator = await options.presets.apply(
+          'experimental_componentManifestGenerator'
+        );
+        const indexGenerator = await initializedStoryIndexGenerator;
+
+        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');
+        res.end(`<pre>${e instanceof Error ? e.toString() : String(e)}</pre>`);
+      }
+    });
   }
   // Now the preview has successfully started, we can count this as a 'dev' event.
   doTelemetry(app, core, initializedStoryIndexGenerator as Promise<StoryIndexGenerator>, options);