Merge pull request #23676 from storybookjs/new-indexer-experimental

Indexers: Mark `indexers` as experimental

code/addons/docs/src/preset.ts

@@ -156,7 +156,7 @@ export const createStoriesMdxIndexer = (legacyMdx1?: boolean): Indexer => ({
   },
 });
 
-const indexers: StorybookConfig['indexers'] = (existingIndexers) =>
+const indexers: StorybookConfig['experimental_indexers'] = (existingIndexers) =>
   [createStoriesMdxIndexer(global.FEATURES?.legacyMdx1)].concat(existingIndexers || []);
 
 const docs = (docsOptions: DocsOptions) => {
@@ -181,4 +181,4 @@ const docsX = docs as any;
 
 ensureReactPeerDeps();
 
-export { webpackX as webpack, indexersX as indexers, docsX as docs };
+export { webpackX as webpack, indexersX as experimental_indexers, docsX as docs };

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

@@ -112,7 +112,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
       presets.apply<StorybookConfig['features']>('features'),
       presets.apply<CoreConfig>('core'),
       presets.apply<StorybookConfig['staticDirs']>('staticDirs'),
-      presets.apply('indexers', []),
+      presets.apply('experimental_indexers', []),
       presets.apply('storyIndexers', []),
       presets.apply('stories'),
       presets.apply<DocsOptions>('docs', {}),

code/lib/core-server/src/presets/common-preset.ts

@@ -199,7 +199,8 @@ export const csfIndexer: Indexer = {
   index: async (fileName, options) => (await readCsf(fileName, options)).parse().indexInputs,
 };
 
-export const indexers: StorybookConfig['indexers'] = (existingIndexers) =>
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const experimental_indexers: StorybookConfig['experimental_indexers'] = (existingIndexers) =>
   [csfIndexer].concat(existingIndexers || []);
 
 export const frameworkOptions = async (

code/lib/core-server/src/utils/getStoryIndexGenerator.ts

@@ -25,7 +25,7 @@ export async function getStoryIndexGenerator(
   };
   const stories = options.presets.apply('stories');
   const deprecatedStoryIndexers = options.presets.apply('storyIndexers', []);
-  const indexers = options.presets.apply('indexers', []);
+  const indexers = options.presets.apply('experimental_indexers', []);
   const docsOptions = options.presets.apply<DocsOptions>('docs', {});
   const normalizedStories = normalizeStories(await stories, directories);
 

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

@@ -369,14 +369,14 @@ export interface StorybookConfig {
 
   /**
    * Process CSF files for the story index.
-   * @soonDeprecated use {@link indexers} instead
+   * @soonDeprecated use {@link experimental_indexers} instead
    */
   storyIndexers?: PresetValue<StoryIndexer[]>;
 
   /**
    * Process CSF files for the story index.
    */
-  indexers?: PresetValue<Indexer[]>;
+  experimental_indexers?: PresetValue<Indexer[]>;
 
   /**
    * Docs related features in index generation

code/renderers/server/src/preset.ts

@@ -8,7 +8,10 @@ type FileContent = {
   stories: { name: StoryName; tags?: Tag[] }[];
 };
 
-export const indexers: StorybookConfig['indexers'] = (existingIndexers) => [
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const experimental_indexers: StorybookConfig['experimental_indexers'] = (
+  existingIndexers
+) => [
   {
     test: /(stories|story)\.(json|ya?ml)$/,
     index: async (fileName) => {

docs/snippets/common/storybook-main-csf-indexer.ts.mdx

@@ -5,29 +5,18 @@ import { readFileSync } from 'fs';
 import { loadCsf } from '@storybook/csf-tools';
 
 export default {
-  indexers = (existingIndexers) => {
-    const index = async (fileName, opts) => {
+  storyIndexers = (indexers) => {
+    const indexer = async (fileName, opts) => {
       const code = readFileSync(fileName, { encoding: 'utf-8' });
-      const csf = (await loadCsf(code, { ...opts, fileName })).parse();
-
-      return Object.entries(csf._stories).map(([exportName, story]) => ({
-        type: 'story',
-        importPath: fileName,
-        exportName,
-        name: story.name,
-        title: csf.meta.title,
-        metaId: csf.meta.id,
-        tags: story.tags ?? csf.meta.tags,
-        __id: story.id,
-      }));
+      return loadCsf(code, { ...opts, fileName }).parse();
     };
 
     return [
       {
         test: /(stories|story)\.[tj]sx?$/,
-        index,
+        indexer,
       },
-      ...(existingIndexers || []),
+      ...(indexers || []),
     ];
   },
 };

docs/snippets/common/storybook-main-story-indexer-main.ts.mdx

@@ -9,35 +9,24 @@ import type { StorybookConfig } from '@storybook/your-framework';
 import { parseCode } from './parseCode';
 
 const config: StorybookConfig = {
-  indexers: (existingIndexers, addonOptions) => {
-    const index = async (fileName, compilationOptions) => {
+  storyIndexers: (indexers, addonOptions) => {
+    const indexer = async (fileName, compilationOptions) => {
       const code = parseCode(fileName, addonOptions);
       const makeTitle = (userTitle) => {
         // Do something with the auto title retrieved by Storybook
         return userTitle;
       };
 
       // Parse the CSF file with makeTitle as a custom context
-      const csf = (await loadCsf(code, { ...compilationOptions, makeTitle, fileName })).parse();
-
-      return Object.entries(csf._stories).map(([exportName, story]) => ({
-        type: 'story',
-        importPath: fileName,
-        exportName,
-        name: story.name,
-        title: csf.meta.title,
-        metaId: csf.meta.id,
-        tags: story.tags ?? csf.meta.tags,
-        __id: story.id,
-      }));
+      return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse();
     };
 
     return [
       {
         test: /\.(md|html)$/,
-        index,
+        indexer,
       },
-      ...(existingIndexers || []),
+      ...(indexers || []),
     ];
   },
 };