Refactor stories-json to use generator

lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -2,15 +2,36 @@ import path from 'path';
 import fs from 'fs-extra';
 import glob from 'globby';
 
-import { autoTitle, sortStories, Path, StoryIndex, StoryIndexEntry } from '@storybook/store';
+import { autoTitleFromSpecifier, sortStories, Path, StoryIndex } from '@storybook/store';
 import { NormalizedStoriesSpecifier } from '@storybook/core-common';
 import { logger } from '@storybook/node-logger';
 import { readCsfOrMdx, getStorySortParameter } from '@storybook/csf-tools';
 
+function sortExtractedStories(
+  stories: StoryIndex['stories'],
+  storySortParameter: any,
+  fileNameOrder: string[]
+) {
+  const sortableStories = Object.entries(stories).map(([id, story]) => [
+    id,
+    { id, kind: story.title, story: story.name, ...story },
+    { fileName: story.importPath },
+  ]);
+  sortStories(sortableStories, storySortParameter, fileNameOrder);
+  return sortableStories.reduce((acc, item) => {
+    const storyId = item[0] as string;
+    acc[storyId] = stories[storyId];
+    return acc;
+  }, {} as StoryIndex['stories']);
+}
+
 export class StoryIndexGenerator {
   // An internal cache mapping specifiers to a set of path=><set of stories>
   // Later, we'll combine each of these subsets together to form the full index
-  private storyIndexEntries: Map<NormalizedStoriesSpecifier, Record<Path, StoryIndex['stories']>>;
+  private storyIndexEntries: Map<
+    NormalizedStoriesSpecifier,
+    Record<Path, StoryIndex['stories'] | false>
+  >;
 
   constructor(
     public readonly specifiers: NormalizedStoriesSpecifier[],
@@ -23,11 +44,11 @@ export class StoryIndexGenerator {
     // Find all matching paths for each specifier
     await Promise.all(
       this.specifiers.map(async (specifier) => {
-        const pathToSubIndex = {} as Record<Path, StoryIndex['stories']>;
+        const pathToSubIndex = {} as Record<Path, StoryIndex['stories'] | false>;
 
         const files = await glob(path.join(this.configDir, specifier.glob));
         files.forEach((fileName: Path) => {
-          pathToSubIndex[fileName] = {};
+          pathToSubIndex[fileName] = false;
         });
 
         this.storyIndexEntries.set(specifier, pathToSubIndex);
@@ -44,7 +65,7 @@ export class StoryIndexGenerator {
         const entry = this.storyIndexEntries.get(specifier);
         await Promise.all(
           Object.keys(entry).map(async (fileName) => {
-            if (!entry[fileName]) this.extractStories(specifier, fileName);
+            if (!entry[fileName]) await this.extractStories(specifier, fileName);
           })
         );
       })
@@ -59,18 +80,21 @@ export class StoryIndexGenerator {
       return;
     }
     try {
-      const stories = this.storyIndexEntries.get(specifier)[absolutePath];
+      const entry = this.storyIndexEntries.get(specifier);
+      const fileStories = {} as StoryIndex['stories'];
 
       const importPath = relativePath[0] === '.' ? relativePath : `./${relativePath}`;
-      const defaultTitle = autoTitle(importPath, [specifier]);
+      const defaultTitle = autoTitleFromSpecifier(importPath, specifier);
       const csf = (await readCsfOrMdx(absolutePath, { defaultTitle })).parse();
       csf.stories.forEach(({ id, name }) => {
-        stories[id] = {
+        fileStories[id] = {
           title: csf.meta.title,
           name,
           importPath,
         };
       });
+
+      entry[absolutePath] = fileStories;
     } catch (err) {
       logger.warn(`🚨 Extraction error on ${relativePath}: ${err}`);
       logger.warn(`🚨 ${err.stack}`);
@@ -92,11 +116,11 @@ export class StoryIndexGenerator {
     });
 
     const storySortParameter = await this.getStorySortParameter();
-    // TODO: Sort the stories
+    const sorted = sortExtractedStories(stories, storySortParameter, this.storyFileNames());
 
     return {
       v: 3,
-      stories,
+      stories: sorted,
     };
   }
 
@@ -112,4 +136,9 @@ export class StoryIndexGenerator {
 
     return storySortParameter;
   }
+
+  // Get the story file names in "imported order"
+  storyFileNames() {
+    return Array.from(this.storyIndexEntries.values()).flatMap((r) => Object.keys(r));
+  }
 }

lib/core-server/src/utils/stories-json.ts

@@ -1,99 +1,17 @@
-import path from 'path';
 import fs from 'fs-extra';
-import glob from 'globby';
-import { logger } from '@storybook/node-logger';
 import { Options, normalizeStories, NormalizedStoriesSpecifier } from '@storybook/core-common';
-import { autoTitle, sortStories } from '@storybook/store';
-import { readCsfOrMdx, getStorySortParameter } from '@storybook/csf-tools';
-import { title } from 'process';
-
-interface ExtractedStory {
-  title: string;
-  name: string;
-  importPath: string;
-}
-
-type ExtractedStories = Record<string, ExtractedStory>;
-
-function sortExtractedStories(
-  stories: ExtractedStories,
-  storySortParameter: any,
-  fileNameOrder: string[]
-) {
-  const sortableStories = Object.entries(stories).map(([id, story]) => [
-    id,
-    { id, kind: story.title, story: story.name, ...story },
-    { fileName: story.importPath },
-  ]);
-  sortStories(sortableStories, storySortParameter, fileNameOrder);
-  return sortableStories.reduce((acc, item) => {
-    const storyId = item[0] as string;
-    acc[storyId] = stories[storyId];
-    return acc;
-  }, {} as ExtractedStories);
-}
-
-async function extractStories(normalizedStories: NormalizedStoriesSpecifier[], configDir: string) {
-  const storiesGlobs = normalizedStories.map((s) => s.glob);
-  const storyFiles: string[] = [];
-  await Promise.all(
-    storiesGlobs.map(async (storiesGlob) => {
-      const files = await glob(path.join(configDir, storiesGlob));
-      storyFiles.push(...files);
-    })
-  );
-  logger.info(`⚙️ Processing ${storyFiles.length} story files from ${storiesGlobs}`);
-
-  const stories: ExtractedStories = {};
-  await Promise.all(
-    storyFiles.map(async (absolutePath) => {
-      const ext = path.extname(absolutePath);
-      const relativePath = path.relative(configDir, absolutePath);
-      if (!['.js', '.jsx', '.ts', '.tsx', '.mdx'].includes(ext)) {
-        logger.info(`Skipping ${ext} file ${relativePath}`);
-        return;
-      }
-      try {
-        const importPath = relativePath[0] === '.' ? relativePath : `./${relativePath}`;
-        const defaultTitle = autoTitle(importPath, normalizedStories);
-        const csf = (await readCsfOrMdx(absolutePath, { defaultTitle })).parse();
-        csf.stories.forEach(({ id, name }) => {
-          stories[id] = {
-            title: csf.meta.title,
-            name,
-            importPath,
-          };
-        });
-      } catch (err) {
-        logger.warn(`🚨 Extraction error on ${relativePath}: ${err}`);
-        logger.warn(`🚨 ${err.stack}`);
-        throw err;
-      }
-    })
-  );
-
-  const previewFile = ['js', 'jsx', 'ts', 'tsx']
-    .map((ext) => path.join(configDir, `preview.${ext}`))
-    .find((fname) => fs.existsSync(fname));
-
-  let storySortParameter;
-  if (previewFile) {
-    const previewCode = (await fs.readFile(previewFile, 'utf-8')).toString();
-    storySortParameter = await getStorySortParameter(previewCode);
-  }
-
-  const sorted = sortExtractedStories(stories, storySortParameter, storyFiles);
-
-  return sorted;
-}
+import { StoryIndexGenerator } from './StoryIndexGenerator';
 
 export async function extractStoriesJson(
   outputFile: string,
   normalizedStories: NormalizedStoriesSpecifier[],
   configDir: string
 ) {
-  const stories = await extractStories(normalizedStories, configDir);
-  await fs.writeJson(outputFile, { v: 3, stories });
+  const generator = new StoryIndexGenerator(normalizedStories, configDir);
+  await generator.initialize();
+
+  const index = await generator.getIndex();
+  await fs.writeJson(outputFile, index);
 }
 
 export async function useStoriesJson(router: any, options: Options) {
@@ -101,19 +19,17 @@ export async function useStoriesJson(router: any, options: Options) {
     configDir: options.configDir,
     workingDir: process.cwd(),
   });
+
   router.use('/stories.json', async (_req: any, res: any) => {
-    extractStories(normalized, options.configDir)
-      .then((stories: ExtractedStories) => {
-        res.header('Content-Type', 'application/json');
-        return res.send(
-          JSON.stringify({
-            v: 3,
-            stories,
-          })
-        );
-      })
-      .catch((err: Error) => {
-        res.status(500).send(err.message);
-      });
+    const generator = new StoryIndexGenerator(normalized, options.configDir);
+    await generator.initialize();
+
+    try {
+      const index = await generator.getIndex();
+      res.header('Content-Type', 'application/json');
+      return res.send(JSON.stringify(index));
+    } catch (err) {
+      return res.status(500).send(err.message);
+    }
   });
 }

lib/store/src/autoTitle.ts

@@ -32,7 +32,7 @@ const startCaseTitle = (title: string) => {
   return title.split('/').map(startCase).join('/');
 };
 
-export const autoTitleFromEntry = (fileName: string, entry: NormalizedStoriesSpecifier) => {
+export const autoTitleFromSpecifier = (fileName: string, entry: NormalizedStoriesSpecifier) => {
   const { directory, titlePrefix = '' } = entry.specifier || {};
   // On Windows, backslashes are used in paths, which can cause problems here
   // slash makes sure we always handle paths with unix-style forward slash
@@ -49,7 +49,7 @@ export const autoTitleFromEntry = (fileName: string, entry: NormalizedStoriesSpe
 
 export const autoTitle = (fileName: string, storiesEntries: NormalizedStoriesSpecifier[]) => {
   for (let i = 0; i < storiesEntries.length; i += 1) {
-    const title = autoTitleFromEntry(fileName, storiesEntries[i]);
+    const title = autoTitleFromSpecifier(fileName, storiesEntries[i]);
     if (title) return title;
   }
   return undefined;