Merge pull request #30071 from storybookjs/shilman/build-index

Author: shilman

code/core/src/bin/index.ts

@@ -6,7 +6,7 @@ import versions from '../common/versions';
 
 const args = process.argv.slice(2);
 
-if (['dev', 'build'].includes(args[0])) {
+if (['dev', 'build', 'index'].includes(args[0])) {
   require('storybook/internal/cli/bin');
 } else {
   let command;

code/core/src/cli/bin/index.ts

@@ -10,6 +10,7 @@ import invariant from 'tiny-invariant';
 
 import { version } from '../../../package.json';
 import { build } from '../build';
+import { buildIndex as index } from '../buildIndex';
 import { dev } from '../dev';
 
 addToGlobalContext('cliVersion', versions.storybook);
@@ -133,6 +134,34 @@ command('build')
     }).catch(() => process.exit(1));
   });
 
+command('index')
+  .option('-o, --output-file <file-name>', 'JSON file to output index')
+  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
+  .option('--quiet', 'Suppress verbose build output')
+  .option('--loglevel <level>', 'Control level of logging during build')
+  .action(async (options) => {
+    const { env } = process;
+    env.NODE_ENV = env.NODE_ENV || 'production';
+
+    const pkg = await findPackage(__dirname);
+    invariant(pkg, 'Failed to find the closest package.json file.');
+
+    logger.setLevel(options.loglevel);
+    consoleLogger.log(picocolors.bold(`${pkg.name} v${pkg.version}\n`));
+
+    // The key is the field created in `options` variable for
+    // each command line argument. Value is the env variable.
+    getEnvConfig(options, {
+      configDir: 'SBCONFIG_CONFIG_DIR',
+      outputFile: 'SBCONFIG_OUTPUT_FILE',
+    });
+
+    await index({
+      ...options,
+      packageJson: pkg,
+    }).catch(() => process.exit(1));
+  });
+
 program.on('command:*', ([invalidCmd]) => {
   consoleLogger.error(
     ' Invalid command: %s.\n See --help for a list of available commands.',

code/core/src/cli/buildIndex.ts

@@ -0,0 +1,28 @@
+import { cache } from 'storybook/internal/common';
+import { buildIndexStandalone, withTelemetry } from 'storybook/internal/core-server';
+import type { BuilderOptions, CLIBaseOptions } from 'storybook/internal/types';
+
+export interface CLIIndexOptions extends CLIBaseOptions {
+  configDir?: string;
+  outputFile?: string;
+}
+
+export const buildIndex = async (
+  cliOptions: CLIIndexOptions & { packageJson?: Record<string, any> }
+) => {
+  const options = {
+    ...cliOptions,
+    configDir: cliOptions.configDir || '.storybook',
+    outputFile: cliOptions.outputFile || 'index.json',
+    ignorePreview: true,
+    configType: 'PRODUCTION' as BuilderOptions['configType'],
+    cache,
+    packageJson: cliOptions.packageJson,
+  };
+  const presetOptions = {
+    ...options,
+    corePresets: [],
+    overridePresets: [],
+  };
+  await withTelemetry('index', { cliOptions, presetOptions }, () => buildIndexStandalone(options));
+};

code/core/src/core-server/build-index.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+
+import { buildIndex } from './build-index';
+
+describe('buildIndex', () => {
+  it('should build index', async () => {
+    const index = await buildIndex({
+      configDir: `${__dirname}/utils/__mockdata__`,
+    });
+    expect(index).toMatchInlineSnapshot(`
+      {
+        "entries": {
+          "my-component-a--story-one": {
+            "componentPath": undefined,
+            "id": "my-component-a--story-one",
+            "importPath": "./core/src/core-server/utils/__mockdata__/docs-id-generation/A.stories.jsx",
+            "name": "Story One",
+            "tags": [
+              "dev",
+              "test",
+              "autodocs",
+            ],
+            "title": "A",
+            "type": "story",
+          },
+          "my-component-b--docs": {
+            "id": "my-component-b--docs",
+            "importPath": "./core/src/core-server/utils/__mockdata__/docs-id-generation/B.docs.mdx",
+            "name": "Docs",
+            "storiesImports": [
+              "./core/src/core-server/utils/__mockdata__/docs-id-generation/B.stories.jsx",
+            ],
+            "tags": [
+              "dev",
+              "test",
+              "attached-mdx",
+            ],
+            "title": "B",
+            "type": "docs",
+          },
+          "my-component-b--story-one": {
+            "componentPath": undefined,
+            "id": "my-component-b--story-one",
+            "importPath": "./core/src/core-server/utils/__mockdata__/docs-id-generation/B.stories.jsx",
+            "name": "Story One",
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "title": "B",
+            "type": "story",
+          },
+        },
+        "v": 5,
+      }
+    `);
+  });
+});

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

@@ -0,0 +1,42 @@
+import { writeFile } from 'node:fs/promises';
+
+import { normalizeStories } from 'storybook/internal/common';
+import { logger } from 'storybook/internal/node-logger';
+import type { BuilderOptions, CLIOptions, LoadOptions } from 'storybook/internal/types';
+
+import { loadStorybook } from './load';
+import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
+
+export type BuildIndexOptions = CLIOptions & LoadOptions & BuilderOptions;
+
+export const buildIndex = async (options: BuildIndexOptions) => {
+  const { presets } = await loadStorybook(options);
+  const [indexers, stories, docsOptions] = await Promise.all([
+    presets.apply('experimental_indexers', []),
+    presets.apply('stories', []),
+    presets.apply('docs', {}),
+  ]);
+
+  const { configDir } = options;
+  const workingDir = process.cwd();
+  const directories = {
+    configDir,
+    workingDir,
+  };
+  const normalizedStories = normalizeStories(stories, directories);
+  const generator = new StoryIndexGenerator(normalizedStories, {
+    ...directories,
+    indexers,
+    docs: docsOptions,
+    build: {},
+  });
+
+  await generator.initialize();
+  return generator.getIndex();
+};
+
+export const buildIndexStandalone = async (options: BuildIndexOptions & { outputFile: string }) => {
+  const index = await buildIndex(options);
+  logger.info(`Writing index to ${options.outputFile}`);
+  await writeFile(options.outputFile, JSON.stringify(index));
+};

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

@@ -1,5 +1,4 @@
-import { existsSync } from 'node:fs';
-import { cp, mkdir, readdir } from 'node:fs/promises';
+import { cp, mkdir } from 'node:fs/promises';
 import { rm } from 'node:fs/promises';
 import { dirname, join, relative, resolve } from 'node:path';
 

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

@@ -4,6 +4,7 @@ export { getPreviewHeadTemplate, getPreviewBodyTemplate } from 'storybook/intern
 
 export * from './build-static';
 export * from './build-dev';
+export * from './build-index';
 export * from './withTelemetry';
 export { default as build } from './standalone';
 export { mapStaticDir } from './utils/server-statics';

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

@@ -1,6 +1,7 @@
 import { dirname } from 'node:path';
 
 import { buildDevStandalone } from './build-dev';
+import { buildIndexStandalone } from './build-index';
 import { buildStaticStandalone } from './build-static';
 
 async function build(options: any = {}, frameworkOptions: any = {}) {
@@ -26,7 +27,11 @@ async function build(options: any = {}, frameworkOptions: any = {}) {
     return buildStaticStandalone(commonOptions);
   }
 
-  throw new Error(`'mode' parameter should be either 'dev' or 'static'`);
+  if (mode === 'index') {
+    return buildIndexStandalone(commonOptions);
+  }
+
+  throw new Error(`'mode' parameter should be either 'dev', 'static', or 'index'`);
 }
 
 export default build;

code/core/src/core-server/utils/__mockdata__/main.js

@@ -0,0 +1,4 @@
+export default {
+  stories: ['docs-id-generation/*.(stories|docs).*'],
+  framework: '@storybook/react-vite',
+};

code/core/src/telemetry/types.ts

@@ -8,6 +8,7 @@ export type EventType =
   | 'boot'
   | 'dev'
   | 'build'
+  | 'index'
   | 'upgrade'
   | 'init'
   | 'scaffolded-empty'

code/core/src/types/modules/core-common.ts

@@ -160,17 +160,22 @@ export interface LoadOptions {
   extendServer?: (server: HttpServer) => void;
 }
 
-export interface CLIOptions {
+export interface CLIBaseOptions {
+  disableTelemetry?: boolean;
+  enableCrashReports?: boolean;
+  configDir?: string;
+  loglevel?: string;
+  quiet?: boolean;
+}
+
+export interface CLIOptions extends CLIBaseOptions {
   port?: number;
   ignorePreview?: boolean;
   previewUrl?: string;
   forceBuildPreview?: boolean;
-  disableTelemetry?: boolean;
-  enableCrashReports?: boolean;
   host?: string;
   initialPath?: string;
   exactPort?: boolean;
-  configDir?: string;
   https?: boolean;
   sslCa?: string[];
   sslCert?: string;
@@ -179,8 +184,6 @@ export interface CLIOptions {
   managerCache?: boolean;
   open?: boolean;
   ci?: boolean;
-  loglevel?: string;
-  quiet?: boolean;
   versionUpdates?: boolean;
   docs?: boolean;
   test?: boolean;