Rename StoriesList => StoryIndex

lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars

@@ -11,7 +11,7 @@ const getProjectAnnotations = () =>
     {{/each}}
   ]);
 
-const fetchStoriesList = async () => {
+const fetchStoryIndex = async () => {
   const result = await fetch('./stories.json');
   return result.json();
 }
@@ -19,7 +19,7 @@ const fetchStoriesList = async () => {
 const channel = createChannel({ page: 'preview' });
 addons.setChannel(channel);
 
-const preview = new PreviewWeb({ importFn, getProjectAnnotations, fetchStoriesList });
+const preview = new PreviewWeb({ importFn, getProjectAnnotations, fetchStoryIndex });
 
 window.__STORYBOOK_PREVIEW__ = preview;
 window.__STORYBOOK_STORY_STORE__ = preview.storyStore;

lib/builder-webpack5/src/preview/virtualModuleModernEntry.js.handlebars

@@ -11,14 +11,14 @@ const getProjectAnnotations = () =>
     {{/each}}
   ]);
 
-const fetchStoriesList = async () => {
+const fetchStoryIndex = async () => {
   const result = await fetch('./stories.json');
   return result.json();
 }
 
 const channel = createChannel({ page: 'preview' });
 addons.setChannel(channel);
-const preview = new PreviewWeb({ importFn, getProjectAnnotations, fetchStoriesList });
+const preview = new PreviewWeb({ importFn, getProjectAnnotations, fetchStoryIndex });
 
 window.__STORYBOOK_PREVIEW__ = preview;
 window.__STORYBOOK_STORY_STORE__ = preview.storyStore;

lib/client-api/src/ClientApi.ts

@@ -486,10 +486,10 @@ Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.m
   }
 
   getStorybook = (): GetStorybookKind<TFramework>[] => {
-    const storiesList = this.getStoriesList();
+    const storyIndex = this.getStoriesList();
 
     const kinds: Record<ComponentTitle, GetStorybookKind<TFramework>> = {};
-    Object.entries(storiesList.stories).forEach(([storyId, { title, name, importPath }]) => {
+    Object.entries(storyIndex.stories).forEach(([storyId, { title, name, importPath }]) => {
       if (!kinds[title]) {
         kinds[title] = { kind: title, fileName: importPath, stories: [] };
       }

lib/core-client/src/preview/start.ts

@@ -69,7 +69,7 @@ export function start<TFramework extends AnyFramework>(
         preview = new PreviewWeb({
           importFn: (path: Path) => clientApi.importFn(path),
           getProjectAnnotations,
-          fetchStoriesList: () => clientApi.getStoriesList(),
+          fetchStoryIndex: () => clientApi.getStoriesList(),
         });
         if (globalWindow) {
           // eslint-disable-next-line no-underscore-dangle

lib/preview-web/src/PreviewWeb.integration.test.ts

@@ -9,7 +9,7 @@ import {
   importFn,
   projectAnnotations,
   getProjectAnnotations,
-  fetchStoriesList,
+  fetchStoryIndex,
   emitter,
   mockChannel,
   waitForRender,
@@ -61,7 +61,7 @@ describe('PreviewWeb', () => {
         storyFn()
       );
       document.location.search = '?id=component-one--a';
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
       await waitForRender();
 
@@ -71,7 +71,7 @@ describe('PreviewWeb', () => {
 
     it('renders docs mode through docs page', async () => {
       document.location.search = '?id=component-one--a&viewMode=docs';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
 
       const docsRoot = window.document.createElement('div');
       // @ts-ignore
@@ -106,7 +106,7 @@ describe('PreviewWeb', () => {
 
     it('renders story mode through the updated stack', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
       await waitForRender();
 

lib/preview-web/src/PreviewWeb.mockdata.ts

@@ -33,7 +33,7 @@ export const projectAnnotations = {
 };
 export const getProjectAnnotations = () => projectAnnotations;
 
-export const storiesList: StoriesList = {
+export const storyIndex: StoriesList = {
   v: 3,
   stories: {
     'component-one--a': {
@@ -53,7 +53,7 @@ export const storiesList: StoriesList = {
     },
   },
 };
-export const fetchStoriesList = async () => storiesList;
+export const fetchStoryIndex = async () => storyIndex;
 
 export const emitter = new EventEmitter();
 export const mockChannel = {

lib/preview-web/src/PreviewWeb.test.ts

@@ -12,7 +12,7 @@ import {
   importFn,
   projectAnnotations,
   getProjectAnnotations,
-  fetchStoriesList,
+  fetchStoryIndex,
   emitter,
   mockChannel,
   waitForEvents,
@@ -75,7 +75,7 @@ describe('PreviewWeb', () => {
           throw err;
         },
         importFn,
-        fetchStoriesList,
+        fetchStoryIndex,
       });
 
       expect(preview.view.showErrorDisplay).toHaveBeenCalled();
@@ -87,14 +87,14 @@ describe('PreviewWeb', () => {
     it('sets globals from the URL', async () => {
       document.location.search = '?id=*&globals=a:c';
 
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
 
       expect(preview.storyStore.globals.get()).toEqual({ a: 'c' });
     });
 
     it('emits the SET_GLOBALS event', async () => {
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.SET_GLOBALS, {
         globals: { a: 'b' },
@@ -106,7 +106,7 @@ describe('PreviewWeb', () => {
       await new PreviewWeb({
         getProjectAnnotations: () => ({}),
         importFn,
-        fetchStoriesList,
+        fetchStoryIndex,
       }).initialize();
 
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.SET_GLOBALS, {
@@ -118,7 +118,7 @@ describe('PreviewWeb', () => {
     it('emits the SET_GLOBALS event from the URL', async () => {
       document.location.search = '?id=*&globals=a:c';
 
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.SET_GLOBALS, {
         globals: { a: 'c' },
@@ -129,7 +129,7 @@ describe('PreviewWeb', () => {
     it('sets args from the URL', async () => {
       document.location.search = '?id=component-one--a&args=foo:url';
 
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
 
       expect(preview.storyStore.args.get('component-one--a')).toEqual({
@@ -142,7 +142,7 @@ describe('PreviewWeb', () => {
     it('selects the story specified in the URL', async () => {
       document.location.search = '?id=component-one--a';
 
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
 
       expect(preview.urlStore.selection).toEqual({
@@ -159,7 +159,7 @@ describe('PreviewWeb', () => {
     it('emits the STORY_SPECIFIED event', async () => {
       document.location.search = '?id=component-one--a';
 
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_SPECIFIED, {
         storyId: 'component-one--a',
@@ -170,7 +170,7 @@ describe('PreviewWeb', () => {
     it('emits the CURRENT_STORY_WAS_SET event', async () => {
       document.location.search = '?id=component-one--a';
 
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.CURRENT_STORY_WAS_SET, {
         storyId: 'component-one--a',
@@ -182,7 +182,7 @@ describe('PreviewWeb', () => {
       it('renders missing', async () => {
         document.location.search = '?id=random';
 
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         expect(preview.view.showNoPreview).toHaveBeenCalled();
@@ -193,7 +193,7 @@ describe('PreviewWeb', () => {
       it.skip('tries again with a specifier if CSF file changes', async () => {
         document.location.search = '?id=component-one--d';
 
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         expect(preview.view.showNoPreview).toHaveBeenCalled();
@@ -220,7 +220,7 @@ describe('PreviewWeb', () => {
       it.skip('DOES NOT try again if CSF file changes if selection changed', async () => {
         document.location.search = '?id=component-one--d';
 
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         expect(preview.view.showNoPreview).toHaveBeenCalled();
@@ -250,7 +250,7 @@ describe('PreviewWeb', () => {
       it.skip('tries again with a specifier if stories list changes', async () => {
         document.location.search = '?id=component-three--d';
 
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         expect(preview.view.showNoPreview).toHaveBeenCalled();
@@ -265,7 +265,7 @@ describe('PreviewWeb', () => {
     });
 
     it('renders missing if no selection', async () => {
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
 
       expect(preview.view.showNoPreview).toHaveBeenCalled();
@@ -276,7 +276,7 @@ describe('PreviewWeb', () => {
       it('calls view.prepareForStory', async () => {
         document.location.search = '?id=component-one--a';
 
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         expect(preview.view.prepareForStory).toHaveBeenCalledWith(
@@ -288,7 +288,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_PREPARED', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
           id: 'component-one--a',
@@ -301,7 +301,7 @@ describe('PreviewWeb', () => {
 
       it('applies loaders with story context', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         await waitForRender();
 
@@ -318,7 +318,7 @@ describe('PreviewWeb', () => {
 
       it('passes loaded context to renderToDOM', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         await waitForRender();
 
@@ -346,7 +346,7 @@ describe('PreviewWeb', () => {
         });
 
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         await waitForRender();
@@ -362,7 +362,7 @@ describe('PreviewWeb', () => {
         });
 
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         await waitForRender();
@@ -378,7 +378,7 @@ describe('PreviewWeb', () => {
         });
 
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         await waitForRender();
@@ -394,7 +394,7 @@ describe('PreviewWeb', () => {
         );
 
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         await waitForRender();
@@ -413,7 +413,7 @@ describe('PreviewWeb', () => {
         );
 
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         await waitForRender();
@@ -424,7 +424,7 @@ describe('PreviewWeb', () => {
 
       it('executes runPlayFunction', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         await waitForRender();
 
@@ -433,7 +433,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_RENDERED', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         await waitForRender();
 
@@ -445,7 +445,7 @@ describe('PreviewWeb', () => {
       it('calls view.prepareForDocs', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
 
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         expect(preview.view.prepareForDocs).toHaveBeenCalled();
@@ -454,7 +454,7 @@ describe('PreviewWeb', () => {
       it('render the docs container with the correct context', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
 
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         await waitForRender();
 
@@ -477,7 +477,7 @@ describe('PreviewWeb', () => {
       it('emits DOCS_RENDERED', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
 
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         await waitForRender();
 
@@ -489,7 +489,7 @@ describe('PreviewWeb', () => {
   describe('onUpdateGlobals', () => {
     it('emits GLOBALS_UPDATED', async () => {
       document.location.search = '?id=component-one--a';
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
       emitter.emit(Events.UPDATE_GLOBALS, { globals: { foo: 'bar' } });
 
@@ -501,7 +501,7 @@ describe('PreviewWeb', () => {
 
     it('sets new globals on the store', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
 
       emitter.emit(Events.UPDATE_GLOBALS, { globals: { foo: 'bar' } });
@@ -511,7 +511,7 @@ describe('PreviewWeb', () => {
 
     it('passes new globals in context to renderToDOM', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
       await waitForRender();
 
@@ -533,7 +533,7 @@ describe('PreviewWeb', () => {
 
     it('emits STORY_RENDERED', async () => {
       document.location.search = '?id=component-one--a';
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
       await waitForRender();
 
       mockChannel.emit.mockClear();
@@ -547,7 +547,7 @@ describe('PreviewWeb', () => {
   describe('onUpdateArgs', () => {
     it('emits STORY_ARGS_UPDATED', async () => {
       document.location.search = '?id=component-one--a';
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
       emitter.emit(Events.UPDATE_STORY_ARGS, {
         storyId: 'component-one--a',
@@ -562,7 +562,7 @@ describe('PreviewWeb', () => {
 
     it('sets new args on the store', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
 
       emitter.emit(Events.UPDATE_STORY_ARGS, {
@@ -578,7 +578,7 @@ describe('PreviewWeb', () => {
 
     it('passes new args in context to renderToDOM', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
       await waitForRender();
 
@@ -604,7 +604,7 @@ describe('PreviewWeb', () => {
 
     it('emits STORY_RENDERED', async () => {
       document.location.search = '?id=component-one--a';
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
       await waitForRender();
 
       mockChannel.emit.mockClear();
@@ -623,7 +623,7 @@ describe('PreviewWeb', () => {
 
         document.location.search = '?id=component-one--a';
         componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate);
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         emitter.emit(Events.UPDATE_STORY_ARGS, {
           storyId: 'component-one--a',
@@ -653,7 +653,7 @@ describe('PreviewWeb', () => {
 
         document.location.search = '?id=component-one--a';
         projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         emitter.emit(Events.UPDATE_STORY_ARGS, {
           storyId: 'component-one--a',
@@ -690,7 +690,7 @@ describe('PreviewWeb', () => {
         });
 
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         await renderToDOMCalled;
         // Story gets rendered with original args
@@ -735,7 +735,7 @@ describe('PreviewWeb', () => {
   describe('onResetArgs', () => {
     it('emits STORY_ARGS_UPDATED', async () => {
       document.location.search = '?id=component-one--a';
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
       mockChannel.emit.mockClear();
       emitter.emit(Events.UPDATE_STORY_ARGS, {
         storyId: 'component-one--a',
@@ -763,7 +763,7 @@ describe('PreviewWeb', () => {
 
     it('resets a single arg', async () => {
       document.location.search = '?id=component-one--a';
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
       mockChannel.emit.mockClear();
       emitter.emit(Events.UPDATE_STORY_ARGS, {
         storyId: 'component-one--a',
@@ -797,7 +797,7 @@ describe('PreviewWeb', () => {
 
     it('resets all args', async () => {
       document.location.search = '?id=component-one--a';
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
       emitter.emit(Events.UPDATE_STORY_ARGS, {
         storyId: 'component-one--a',
         updatedArgs: { foo: 'new', new: 'value' },
@@ -830,7 +830,7 @@ describe('PreviewWeb', () => {
   describe('on FORCE_RE_RENDER', () => {
     it('rerenders the story with the same args', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
       await waitForRender();
 
@@ -849,7 +849,7 @@ describe('PreviewWeb', () => {
   describe('onSetCurrentStory', () => {
     it('updates URL', async () => {
       document.location.search = '?id=component-one--a';
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
       emitter.emit(Events.SET_CURRENT_STORY, {
         storyId: 'component-one--b',
@@ -865,7 +865,7 @@ describe('PreviewWeb', () => {
 
     it('emits CURRENT_STORY_WAS_SET', async () => {
       document.location.search = '?id=component-one--a';
-      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+      await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
       emitter.emit(Events.SET_CURRENT_STORY, {
         storyId: 'component-one--b',
@@ -880,7 +880,7 @@ describe('PreviewWeb', () => {
 
     it('renders missing if the story specified does not exist', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
 
       emitter.emit(Events.SET_CURRENT_STORY, {
@@ -896,7 +896,7 @@ describe('PreviewWeb', () => {
     describe('if the selection is unchanged', () => {
       it('emits STORY_UNCHANGED', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         emitter.emit(Events.SET_CURRENT_STORY, {
@@ -910,7 +910,7 @@ describe('PreviewWeb', () => {
 
       it('does NOT call renderToDOM', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
 
         projectAnnotations.renderToDOM.mockClear();
@@ -929,7 +929,7 @@ describe('PreviewWeb', () => {
     describe('when changing story in story viewMode', () => {
       it('updates URL', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         emitter.emit(Events.SET_CURRENT_STORY, {
           storyId: 'component-one--b',
@@ -945,7 +945,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_CHANGED', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -960,7 +960,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_PREPARED', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -981,7 +981,7 @@ describe('PreviewWeb', () => {
 
       it('applies loaders with story context', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1004,7 +1004,7 @@ describe('PreviewWeb', () => {
 
       it('passes loaded context to renderToDOM', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1033,7 +1033,7 @@ describe('PreviewWeb', () => {
 
       it('renders exception if renderToDOM throws', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1055,7 +1055,7 @@ describe('PreviewWeb', () => {
 
       it('renders error if the story calls showError', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1080,7 +1080,7 @@ describe('PreviewWeb', () => {
 
       it('renders exception if the story calls showException', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1102,7 +1102,7 @@ describe('PreviewWeb', () => {
 
       it('executes runPlayFunction', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1117,7 +1117,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_RENDERED', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1132,7 +1132,7 @@ describe('PreviewWeb', () => {
 
       it('retains any arg changes', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1173,7 +1173,7 @@ describe('PreviewWeb', () => {
           componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate);
 
           document.location.search = '?id=component-one--a';
-          await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+          await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
           emitter.emit(Events.SET_CURRENT_STORY, {
             storyId: 'component-one--b',
@@ -1204,7 +1204,7 @@ describe('PreviewWeb', () => {
 
           document.location.search = '?id=component-one--a';
           projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);
-          await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+          await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
           emitter.emit(Events.SET_CURRENT_STORY, {
             storyId: 'component-one--b',
@@ -1237,7 +1237,7 @@ describe('PreviewWeb', () => {
           });
 
           document.location.search = '?id=component-one--a';
-          await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+          await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
           await renderToDOMCalled;
           // Story gets rendered with original args
@@ -1286,7 +1286,7 @@ describe('PreviewWeb', () => {
     describe('when changing from story viewMode to docs', () => {
       it('updates URL', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         emitter.emit(Events.SET_CURRENT_STORY, {
           storyId: 'component-one--a',
@@ -1302,7 +1302,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_CHANGED', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1317,7 +1317,7 @@ describe('PreviewWeb', () => {
 
       it('calls view.prepareForDocs', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1333,7 +1333,7 @@ describe('PreviewWeb', () => {
 
       it('render the docs container with the correct context', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1361,7 +1361,7 @@ describe('PreviewWeb', () => {
 
       it('emits DOCS_RENDERED', async () => {
         document.location.search = '?id=component-one--a';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1378,7 +1378,7 @@ describe('PreviewWeb', () => {
     describe('when changing from docs viewMode to story', () => {
       it('updates URL', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
 
         emitter.emit(Events.SET_CURRENT_STORY, {
           storyId: 'component-one--a',
@@ -1394,7 +1394,7 @@ describe('PreviewWeb', () => {
 
       it('unmounts docs', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1410,7 +1410,7 @@ describe('PreviewWeb', () => {
       // NOTE: I am not sure this entirely makes sense but this is the behaviour from 6.3
       it('emits STORY_CHANGED', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1425,7 +1425,7 @@ describe('PreviewWeb', () => {
 
       it('calls view.prepareForStory', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1445,7 +1445,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_PREPARED', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1466,7 +1466,7 @@ describe('PreviewWeb', () => {
 
       it('applies loaders with story context', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1489,7 +1489,7 @@ describe('PreviewWeb', () => {
 
       it('passes loaded context to renderToDOM', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1518,7 +1518,7 @@ describe('PreviewWeb', () => {
 
       it('renders exception if renderToDOM throws', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1545,7 +1545,7 @@ describe('PreviewWeb', () => {
         );
 
         document.location.search = '?id=component-one--a&viewMode=docs';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1570,7 +1570,7 @@ describe('PreviewWeb', () => {
         );
 
         document.location.search = '?id=component-one--a&viewMode=docs';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1587,7 +1587,7 @@ describe('PreviewWeb', () => {
 
       it('executes runPlayFunction', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1602,7 +1602,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_RENDERED', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
-        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList }).initialize();
+        await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
         await waitForRender();
 
         mockChannel.emit.mockClear();
@@ -1630,7 +1630,7 @@ describe('PreviewWeb', () => {
 
       it('does not emit STORY_UNCHANGED', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
         mockChannel.emit.mockClear();
@@ -1646,7 +1646,7 @@ describe('PreviewWeb', () => {
 
       it('does not emit STORY_CHANGED', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
         mockChannel.emit.mockClear();
@@ -1659,7 +1659,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_PREPARED with new annotations', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
         mockChannel.emit.mockClear();
@@ -1678,7 +1678,7 @@ describe('PreviewWeb', () => {
 
       it('applies loaders with story context', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1700,7 +1700,7 @@ describe('PreviewWeb', () => {
 
       it('passes loaded context to renderToDOM', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1728,7 +1728,7 @@ describe('PreviewWeb', () => {
 
       it('retains the same delta to the args', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1757,7 +1757,7 @@ describe('PreviewWeb', () => {
 
       it('renders exception if renderToDOM throws', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1776,7 +1776,7 @@ describe('PreviewWeb', () => {
 
       it('renders error if the story calls showError', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1798,7 +1798,7 @@ describe('PreviewWeb', () => {
 
       it('renders exception if the story calls showException', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1817,7 +1817,7 @@ describe('PreviewWeb', () => {
 
       it('executes runPlayFunction', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1831,7 +1831,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_RENDERED', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1853,7 +1853,7 @@ describe('PreviewWeb', () => {
 
       it('emits STORY_UNCHANGED', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1867,7 +1867,7 @@ describe('PreviewWeb', () => {
 
       it('does not re-render the story', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1894,7 +1894,7 @@ describe('PreviewWeb', () => {
 
       it('renders story missing', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1908,7 +1908,7 @@ describe('PreviewWeb', () => {
 
       it('does not re-render the story', async () => {
         document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+        const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
         await preview.initialize();
         await waitForRender();
 
@@ -1929,7 +1929,7 @@ describe('PreviewWeb', () => {
   describe('onGetProjectAnnotationsChanged', () => {
     it('shows an error the new value throws', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
       await waitForRender();
 
@@ -1957,7 +1957,7 @@ describe('PreviewWeb', () => {
 
     it('updates globals to their new values', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
       await waitForRender();
 
@@ -1970,7 +1970,7 @@ describe('PreviewWeb', () => {
 
     it('updates args to their new values', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
       await waitForRender();
 
@@ -1987,7 +1987,7 @@ describe('PreviewWeb', () => {
 
     it('rerenders the current story with new global meta-generated context', async () => {
       document.location.search = '?id=component-one--a';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
       await waitForRender();
 
@@ -2011,7 +2011,7 @@ describe('PreviewWeb', () => {
   describe('onKeydown', () => {
     it('emits PREVIEW_KEYDOWN for regular elements', async () => {
       document.location.search = '?id=component-one--a&viewMode=docs';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
 
       preview.onKeydown({
@@ -2026,7 +2026,7 @@ describe('PreviewWeb', () => {
 
     it('does not emit PREVIEW_KEYDOWN for input elements', async () => {
       document.location.search = '?id=component-one--a&viewMode=docs';
-      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoriesList });
+      const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
       await preview.initialize();
 
       preview.onKeydown({

lib/preview-web/src/PreviewWeb.tsx

@@ -21,7 +21,6 @@ import {
   CSFFile,
   StoryStore,
   StorySpecifier,
-  StoriesList,
 } from '@storybook/store';
 
 import { WebProjectAnnotations, DocsContextProps } from './types';
@@ -59,11 +58,11 @@ export class PreviewWeb<TFramework extends AnyFramework> {
   constructor({
     getProjectAnnotations,
     importFn,
-    fetchStoriesList,
+    fetchStoryIndex,
   }: {
     getProjectAnnotations: () => WebProjectAnnotations<TFramework>;
     importFn: ModuleImportFn;
-    fetchStoriesList: ConstructorParameters<typeof StoryStore>[0]['fetchStoriesList'];
+    fetchStoryIndex: ConstructorParameters<typeof StoryStore>[0]['fetchStoryIndex'];
   }) {
     this.channel = addons.getChannel();
     this.view = new WebView();
@@ -74,7 +73,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     }
 
     this.urlStore = new UrlStore();
-    this.storyStore = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+    this.storyStore = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
   }
 
   getProjectAnnotationsOrRenderError(
@@ -141,7 +140,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     }
 
     const { storySpecifier, viewMode, args } = this.urlStore.selectionSpecifier;
-    const storyId = this.storyStore.storiesList.storyIdFromSpecifier(storySpecifier);
+    const storyId = this.storyStore.storyIndex.storyIdFromSpecifier(storySpecifier);
 
     if (!storyId) {
       this.renderMissingStory(storySpecifier);

lib/store/src/StoriesListStore.ts

@@ -1,75 +0,0 @@
-import { Channel } from '@storybook/addons';
-import { StoryId } from '@storybook/csf';
-
-import { StorySpecifier, Path, StoriesList, StoriesListStory } from './types';
-
-export class StoriesListStore {
-  fetchStoriesList: () => Promise<StoriesList> | StoriesList;
-
-  channel: Channel;
-
-  storiesList: StoriesList;
-
-  constructor({ fetchStoriesList }: { fetchStoriesList: StoriesListStore['fetchStoriesList'] }) {
-    this.fetchStoriesList = fetchStoriesList;
-  }
-
-  async initialize() {
-    return this.cacheStoriesList();
-  }
-
-  initializeSync() {
-    return this.cacheStoriesListSync();
-  }
-
-  async onStoriesChanged() {
-    this.storiesList = await this.fetchStoriesList();
-  }
-
-  async cacheStoriesList() {
-    this.storiesList = await this.fetchStoriesList();
-  }
-
-  async cacheStoriesListSync() {
-    this.storiesList = this.fetchStoriesList() as StoriesList;
-    if (!this.storiesList.v) {
-      throw new Error(
-        `fetchStoriesList() didn't return a stories list, did you pass an async version then call initializeSync()?`
-      );
-    }
-  }
-
-  storyIdFromSpecifier(specifier: StorySpecifier) {
-    const storyIds = Object.keys(this.storiesList.stories);
-    if (specifier === '*') {
-      // '*' means select the first story. If there is none, we have no selection.
-      return storyIds[0];
-    }
-
-    if (typeof specifier === 'string') {
-      // Find the story with the exact id that matches the specifier (see #11571)
-      if (storyIds.indexOf(specifier) >= 0) {
-        return specifier;
-      }
-      // Fallback to the first story that starts with the specifier
-      return storyIds.find((storyId) => storyId.startsWith(specifier));
-    }
-
-    // Try and find a story matching the name/kind, setting no selection if they don't exist.
-    const { name, title } = specifier;
-    const match = Object.entries(this.storiesList.stories).find(
-      ([id, story]) => story.name === name && story.title === title
-    );
-
-    return match && match[0];
-  }
-
-  storyIdToMetadata(storyId: StoryId): StoriesListStory {
-    const storyMetadata = this.storiesList.stories[storyId];
-    if (!storyMetadata) {
-      throw new Error(`Didn't find '${storyId}' in story metadata (\`stories.json\`)`);
-    }
-
-    return storyMetadata;
-  }
-}

lib/store/src/StoryIndexStore.test.ts

@@ -1,9 +1,9 @@
-import { StoriesListStore } from './StoriesListStore';
+import { StoryIndexStore } from './StoryIndexStore';
-import { StoriesList } from './types';
+import { StoryIndex } from './types';
 
 jest.mock('@storybook/channel-websocket', () => () => ({ on: jest.fn() }));
 
-const stories: StoriesList = {
+const stories: StoryIndex = {
   v: 3,
   stories: {
     'component-one--a': {
@@ -23,9 +23,9 @@ const stories: StoriesList = {
     },
   },
 };
-const fetchStoriesList = async () => stories;
+const fetchStoryIndex = async () => stories;
 
-const makeFetchStoriesList = (titlesAndNames) => {
+const makeFetchStoryIndex = (titlesAndNames) => {
   return async () => ({
     v: 3,
     stories: Object.fromEntries(
@@ -41,19 +41,19 @@ const makeFetchStoriesList = (titlesAndNames) => {
   });
 };
 
-describe('StoriesListStore', () => {
+describe('StoryIndexStore', () => {
   describe('storyIdFromSpecifier', () => {
     describe('if you use *', () => {
       it('selects the first story in the store', async () => {
-        const store = new StoriesListStore({ fetchStoriesList });
+        const store = new StoryIndexStore({ fetchStoryIndex });
         await store.initialize();
 
         expect(store.storyIdFromSpecifier('*')).toEqual('component-one--a');
       });
 
       it('selects nothing if there are no stories', async () => {
-        const store = new StoriesListStore({
+        const store = new StoryIndexStore({
-          fetchStoriesList: makeFetchStoriesList([]),
+          fetchStoryIndex: makeFetchStoryIndex([]),
         });
         await store.initialize();
 
@@ -63,15 +63,15 @@ describe('StoriesListStore', () => {
 
     describe('if you use a component or group id', () => {
       it('selects the first story for the component', async () => {
-        const store = new StoriesListStore({ fetchStoriesList });
+        const store = new StoryIndexStore({ fetchStoryIndex });
         await store.initialize();
 
         expect(store.storyIdFromSpecifier('component-two')).toEqual('component-two--c');
       });
 
       it('selects the first story for the group', async () => {
-        const store = new StoriesListStore({
+        const store = new StoryIndexStore({
-          fetchStoriesList: makeFetchStoriesList([
+          fetchStoryIndex: makeFetchStoryIndex([
             ['g1/a', '1'],
             ['g2/a', '1'],
             ['g2/b', '1'],
@@ -84,8 +84,8 @@ describe('StoriesListStore', () => {
 
       // Making sure the fix #11571 doesn't break this
       it('selects the first story if there are two stories in the group of different lengths', async () => {
-        const store = new StoriesListStore({
+        const store = new StoryIndexStore({
-          fetchStoriesList: makeFetchStoriesList([
+          fetchStoryIndex: makeFetchStoryIndex([
             ['a', 'long-long-long'],
             ['a', 'short'],
           ]),
@@ -96,7 +96,7 @@ describe('StoriesListStore', () => {
       });
 
       it('selects nothing if the component or group does not exist', async () => {
-        const store = new StoriesListStore({ fetchStoriesList });
+        const store = new StoryIndexStore({ fetchStoryIndex });
         await store.initialize();
 
         expect(store.storyIdFromSpecifier('random')).toBeUndefined();
@@ -104,14 +104,14 @@ describe('StoriesListStore', () => {
     });
     describe('if you use a storyId', () => {
       it('selects a specific story', async () => {
-        const store = new StoriesListStore({ fetchStoriesList });
+        const store = new StoryIndexStore({ fetchStoryIndex });
         await store.initialize();
 
         expect(store.storyIdFromSpecifier('component-one--a')).toEqual('component-one--a');
       });
 
       it('selects nothing if you the story does not exist', async () => {
-        const store = new StoriesListStore({ fetchStoriesList });
+        const store = new StoryIndexStore({ fetchStoryIndex });
         await store.initialize();
 
         expect(store.storyIdFromSpecifier('component-one--c')).toBeUndefined();
@@ -119,8 +119,8 @@ describe('StoriesListStore', () => {
 
       // See #11571
       it('does NOT select an earlier story that this story id is a prefix of', async () => {
-        const store = new StoriesListStore({
+        const store = new StoryIndexStore({
-          fetchStoriesList: makeFetchStoriesList([
+          fetchStoryIndex: makeFetchStoryIndex([
             ['a', '31'],
             ['a', '3'],
           ]),
@@ -132,24 +132,24 @@ describe('StoriesListStore', () => {
     });
   });
 
-  describe('storyIdToMetadata', () => {
+  describe('storyIdToEntry', () => {
     it('works when the story exists', async () => {
-      const store = new StoriesListStore({ fetchStoriesList });
+      const store = new StoryIndexStore({ fetchStoryIndex });
       await store.initialize();
 
-      expect(store.storyIdToMetadata('component-one--a')).toEqual({
+      expect(store.storyIdToEntry('component-one--a')).toEqual({
         name: 'A',
         title: 'Component One',
         importPath: './src/ComponentOne.stories.js',
       });
 
-      expect(store.storyIdToMetadata('component-one--b')).toEqual({
+      expect(store.storyIdToEntry('component-one--b')).toEqual({
         name: 'B',
         title: 'Component One',
         importPath: './src/ComponentOne.stories.js',
       });
 
-      expect(store.storyIdToMetadata('component-two--c')).toEqual({
+      expect(store.storyIdToEntry('component-two--c')).toEqual({
         name: 'C',
         title: 'Component Two',
         importPath: './src/ComponentTwo.stories.js',
@@ -157,10 +157,10 @@ describe('StoriesListStore', () => {
     });
 
     it('throws when the story does not', async () => {
-      const store = new StoriesListStore({ fetchStoriesList });
+      const store = new StoryIndexStore({ fetchStoryIndex });
       await store.initialize();
 
-      expect(() => store.storyIdToMetadata('random')).toThrow(/Didn't find 'random'/);
+      expect(() => store.storyIdToEntry('random')).toThrow(/Didn't find 'random'/);
     });
   });
 });

lib/store/src/StoryIndexStore.ts

@@ -0,0 +1,80 @@
+import { Channel } from '@storybook/addons';
+import { StoryId } from '@storybook/csf';
+
+import { StorySpecifier, StoryIndex, StoryIndexEntry } from './types';
+
+type MaybePromise<T> = Promise<T> | T;
+
+export class StoryIndexStore {
+  fetchStoryIndex: () => MaybePromise<StoryIndex>;
+
+  channel: Channel;
+
+  stories: Record<StoryId, StoryIndexEntry>;
+
+  constructor({ fetchStoryIndex }: { fetchStoryIndex: StoryIndexStore['fetchStoryIndex'] }) {
+    this.fetchStoryIndex = fetchStoryIndex;
+  }
+
+  async initialize() {
+    return this.cache();
+  }
+
+  initializeSync() {
+    return this.cacheSync();
+  }
+
+  async onStoriesChanged() {
+    const { stories } = await this.fetchStoryIndex();
+    this.stories = stories;
+  }
+
+  async cache() {
+    const { stories } = await this.fetchStoryIndex();
+    this.stories = stories;
+  }
+
+  async cacheSync() {
+    const data = this.fetchStoryIndex() as StoryIndex;
+    if (!data.v) {
+      throw new Error(
+        `fetchStoryIndex() didn't return a stories list, did you pass an async version then call initializeSync()?`
+      );
+    }
+    this.stories = data.stories;
+  }
+
+  storyIdFromSpecifier(specifier: StorySpecifier) {
+    const storyIds = Object.keys(this.stories);
+    if (specifier === '*') {
+      // '*' means select the first story. If there is none, we have no selection.
+      return storyIds[0];
+    }
+
+    if (typeof specifier === 'string') {
+      // Find the story with the exact id that matches the specifier (see #11571)
+      if (storyIds.indexOf(specifier) >= 0) {
+        return specifier;
+      }
+      // Fallback to the first story that starts with the specifier
+      return storyIds.find((storyId) => storyId.startsWith(specifier));
+    }
+
+    // Try and find a story matching the name/kind, setting no selection if they don't exist.
+    const { name, title } = specifier;
+    const match = Object.entries(this.stories).find(
+      ([id, story]) => story.name === name && story.title === title
+    );
+
+    return match && match[0];
+  }
+
+  storyIdToEntry(storyId: StoryId): StoryIndexEntry {
+    const storyEntry = this.stories[storyId];
+    if (!storyEntry) {
+      throw new Error(`Didn't find '${storyId}' in story index (\`stories.json\`)`);
+    }
+
+    return storyEntry;
+  }
+}

lib/store/src/StoryStore.test.ts

@@ -5,7 +5,7 @@ import { HooksContext } from '../../addons/dist/ts3.9/hooks';
 import { prepareStory } from './prepareStory';
 import { processCSFFile } from './processCSFFile';
 import { StoryStore } from './StoryStore';
-import { StoriesList } from './types';
+import { StoryIndex } from './types';
 
 // Spy on prepareStory/processCSFFile
 jest.mock('./prepareStory', () => ({
@@ -42,7 +42,7 @@ const projectAnnotations: ProjectAnnotations<any> = {
   render: jest.fn(),
 };
 
-const storiesList: StoriesList = {
+const storyIndex: StoryIndex = {
   v: 3,
   stories: {
     'component-one--a': {
@@ -62,12 +62,12 @@ const storiesList: StoriesList = {
     },
   },
 };
-const fetchStoriesList = async () => storiesList;
+const fetchStoryIndex = async () => storyIndex;
 
 describe('StoryStore', () => {
   describe('projectAnnotations', () => {
     it('normalizes on initialization', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       expect(store.projectAnnotations.globalTypes).toEqual({
@@ -79,7 +79,7 @@ describe('StoryStore', () => {
     });
 
     it('normalizes on updateProjectAnnotations', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       store.updateProjectAnnotations(projectAnnotations);
@@ -94,7 +94,7 @@ describe('StoryStore', () => {
 
   describe('loadStory', () => {
     it('pulls the story via the importFn', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       importFn.mockClear();
@@ -108,7 +108,7 @@ describe('StoryStore', () => {
     });
 
     it('uses a cache', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       const story = await store.loadStory({ storyId: 'component-one--a' });
@@ -132,7 +132,7 @@ describe('StoryStore', () => {
 
   describe('componentStoriesFromCSFFile', () => {
     it('returns all the stories in the file', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       const csfFile = await store.loadCSFFileByStoryId('component-one--a');
@@ -145,7 +145,7 @@ describe('StoryStore', () => {
 
   describe('getStoryContext', () => {
     it('returns the args and globals correctly', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       const story = await store.loadStory({ storyId: 'component-one--a' });
@@ -157,7 +157,7 @@ describe('StoryStore', () => {
     });
 
     it('returns the args and globals correctly when they change', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       const story = await store.loadStory({ storyId: 'component-one--a' });
@@ -172,7 +172,7 @@ describe('StoryStore', () => {
     });
 
     it('returns the same hooks each time', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       const story = await store.loadStory({ storyId: 'component-one--a' });
@@ -184,7 +184,7 @@ describe('StoryStore', () => {
 
   describe('cleanupStory', () => {
     it('cleans the hooks from the context', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       const story = await store.loadStory({ storyId: 'component-one--a' });
@@ -198,7 +198,7 @@ describe('StoryStore', () => {
 
   describe('loadAllCSFFiles', () => {
     it('imports *all* csf files', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       importFn.mockClear();
@@ -213,14 +213,14 @@ describe('StoryStore', () => {
 
   describe('extract', () => {
     it('throws if you have not called cacheAllCSFFiles', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
 
       expect(() => store.extract()).toThrow(/Cannot call extract/);
     });
 
     it('produces objects with functions and hooks stripped', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
       await store.cacheAllCSFFiles();
 
@@ -332,7 +332,7 @@ describe('StoryStore', () => {
       const store = new StoryStore({
         importFn: docsOnlyImportFn,
         projectAnnotations,
-        fetchStoriesList,
+        fetchStoryIndex,
       });
       await store.initialize();
       await store.cacheAllCSFFiles();
@@ -350,7 +350,7 @@ describe('StoryStore', () => {
 
   describe('getSetStoriesPayload', () => {
     it('maps stories list to payload correctly', async () => {
-      const store = new StoryStore({ importFn, projectAnnotations, fetchStoriesList });
+      const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
       await store.initialize();
       await store.cacheAllCSFFiles();
 

lib/store/src/StoryStore.ts

@@ -10,7 +10,7 @@ import {
 import mapValues from 'lodash/mapValues';
 import pick from 'lodash/pick';
 
-import { StoriesListStore } from './StoriesListStore';
+import { StoryIndexStore } from './StoryIndexStore';
 import { ArgsStore } from './ArgsStore';
 import { GlobalsStore } from './GlobalsStore';
 import { processCSFFile } from './processCSFFile';
@@ -57,7 +57,7 @@ function normalizeProjectAnnotations<TFramework extends AnyFramework>({
 }
 
 export class StoryStore<TFramework extends AnyFramework> {
-  storiesList: StoriesListStore;
+  storyIndex: StoryIndexStore;
 
   importFn: ModuleImportFn;
 
@@ -78,13 +78,13 @@ export class StoryStore<TFramework extends AnyFramework> {
   constructor({
     importFn,
     projectAnnotations,
-    fetchStoriesList,
+    fetchStoryIndex,
   }: {
     importFn: ModuleImportFn;
     projectAnnotations: ProjectAnnotations<TFramework>;
-    fetchStoriesList: ConstructorParameters<typeof StoriesListStore>[0]['fetchStoriesList'];
+    fetchStoryIndex: ConstructorParameters<typeof StoryIndexStore>[0]['fetchStoryIndex'];
   }) {
-    this.storiesList = new StoriesListStore({ fetchStoriesList });
+    this.storyIndex = new StoryIndexStore({ fetchStoryIndex });
     this.importFn = importFn;
     this.projectAnnotations = normalizeProjectAnnotations(projectAnnotations);
 
@@ -98,7 +98,7 @@ export class StoryStore<TFramework extends AnyFramework> {
   }
 
   async initialize({ cacheAllCSFFiles = false }: { cacheAllCSFFiles?: boolean } = {}) {
-    await this.storiesList.initialize();
+    await this.storyIndex.initialize();
 
     if (cacheAllCSFFiles) {
       await this.cacheAllCSFFiles();
@@ -106,7 +106,7 @@ export class StoryStore<TFramework extends AnyFramework> {
   }
 
   initializeSync({ cacheAllCSFFiles = false }: { cacheAllCSFFiles?: boolean } = {}) {
-    this.storiesList.initializeSync();
+    this.storyIndex.initializeSync();
 
     if (cacheAllCSFFiles) {
       this.cacheAllCSFFilesSync();
@@ -123,7 +123,7 @@ export class StoryStore<TFramework extends AnyFramework> {
     this.importFn = importFn;
 
     // We need to refetch the stories list as it may have changed too
-    await this.storiesList.cacheStoriesList();
+    await this.storyIndex.cache();
 
     if (this.cachedCSFFiles) {
       await this.cacheAllCSFFiles();
@@ -131,13 +131,13 @@ export class StoryStore<TFramework extends AnyFramework> {
   }
 
   async loadCSFFileByStoryId(storyId: StoryId): Promise<CSFFile<TFramework>> {
-    const { importPath, title } = this.storiesList.storyIdToMetadata(storyId);
+    const { importPath, title } = this.storyIndex.storyIdToEntry(storyId);
     const moduleExports = await this.importFn(importPath);
     return this.processCSFFileWithCache(moduleExports, title);
   }
 
   loadCSFFileByStoryIdSync(storyId: StoryId): CSFFile<TFramework> {
-    const { importPath, title } = this.storiesList.storyIdToMetadata(storyId);
+    const { importPath, title } = this.storyIndex.storyIdToEntry(storyId);
     const moduleExports = this.importFn(importPath);
     if (Promise.resolve(moduleExports) === moduleExports) {
       throw new Error(
@@ -149,7 +149,7 @@ export class StoryStore<TFramework extends AnyFramework> {
 
   async loadAllCSFFiles(): Promise<Record<Path, CSFFile<TFramework>>> {
     const importPaths: Record<Path, StoryId> = {};
-    Object.entries(this.storiesList.storiesList.stories).forEach(([storyId, { importPath }]) => {
+    Object.entries(this.storyIndex.stories).forEach(([storyId, { importPath }]) => {
       importPaths[importPath] = storyId;
     });
 
@@ -170,7 +170,7 @@ export class StoryStore<TFramework extends AnyFramework> {
 
   loadAllCSFFilesSync(): Record<Path, CSFFile<TFramework>> {
     const importPaths: Record<Path, StoryId> = {};
-    Object.entries(this.storiesList.storiesList.stories).forEach(([storyId, { importPath }]) => {
+    Object.entries(this.storyIndex.stories).forEach(([storyId, { importPath }]) => {
       importPaths[importPath] = storyId;
     });
 
@@ -245,7 +245,7 @@ export class StoryStore<TFramework extends AnyFramework> {
       throw new Error('Cannot call extract() unless you call cacheAllCSFFiles() first.');
     }
 
-    return Object.entries(this.storiesList.storiesList.stories)
+    return Object.entries(this.storyIndex.stories)
       .map(([storyId, { importPath }]) => {
         const csfFile = this.cachedCSFFiles[importPath];
         const story = this.storyFromCSFFile({ storyId, csfFile });
@@ -314,7 +314,7 @@ export class StoryStore<TFramework extends AnyFramework> {
       throw new Error('Cannot call fromId/raw() unless you call cacheAllCSFFiles() first.');
     }
 
-    const { importPath } = this.storiesList.storyIdToMetadata(storyId);
+    const { importPath } = this.storyIndex.storyIdToEntry(storyId);
     if (!importPath) {
       throw new Error(`Unknown storyId ${storyId}`);
     }

lib/store/src/types.ts

@@ -76,15 +76,15 @@ export declare type RenderContext<TFramework extends AnyFramework> = StoryIdenti
   unboundStoryFn: LegacyStoryFn<TFramework>;
 };
 
-export interface StoriesListStory {
+export interface StoryIndexEntry {
   name: StoryName;
   title: ComponentTitle;
   importPath: Path;
 }
 
-export interface StoriesList {
+export interface StoryIndex {
   v: number;
-  stories: Record<StoryId, StoriesListStory>;
+  stories: Record<StoryId, StoryIndexEntry>;
 }
 
 export type StorySpecifier = StoryId | { name: StoryName; title: ComponentTitle } | '*';

yarn.lock

@@ -5677,13 +5677,13 @@ __metadata:
     "@storybook/csf-tools": 6.4.0-alpha.19
     "@storybook/node-logger": 6.4.0-alpha.19
     "@storybook/postinstall": 6.4.0-alpha.19
+    "@storybook/preview-web": 6.4.0-alpha.19
     "@storybook/react": 6.4.0-alpha.19
     "@storybook/source-loader": 6.4.0-alpha.19
     "@storybook/store": 6.4.0-alpha.19
     "@storybook/theming": 6.4.0-alpha.19
     "@storybook/vue": 6.4.0-alpha.19
     "@storybook/web-components": 6.4.0-alpha.19
-    "@storybook/preview-web": 6.4.0-alpha.19
     "@types/cross-spawn": ^6.0.2
     "@types/doctrine": ^0.0.3
     "@types/enzyme": ^3.10.8
@@ -6302,12 +6302,12 @@ __metadata:
     "@storybook/core-common": 6.4.0-alpha.19
     "@storybook/core-events": 6.4.0-alpha.19
     "@storybook/node-logger": 6.4.0-alpha.19
+    "@storybook/preview-web": 6.4.0-alpha.19
     "@storybook/router": 6.4.0-alpha.19
     "@storybook/semver": ^7.3.2
     "@storybook/store": 6.4.0-alpha.19
     "@storybook/theming": 6.4.0-alpha.19
     "@storybook/ui": 6.4.0-alpha.19
-    "@storybook/preview-web": 6.4.0-alpha.19
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/dotenv-webpack": ^3.0.0
     "@types/node": ^14.0.10
@@ -6622,9 +6622,9 @@ __metadata:
     "@storybook/client-logger": 6.4.0-alpha.19
     "@storybook/core-events": 6.4.0-alpha.19
     "@storybook/csf": 0.0.2--canary.d61cd6c.0
+    "@storybook/preview-web": 6.4.0-alpha.19
     "@storybook/store": 6.4.0-alpha.19
     "@storybook/ui": 6.4.0-alpha.19
-    "@storybook/preview-web": 6.4.0-alpha.19
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -6963,8 +6963,8 @@ __metadata:
     "@storybook/core": 6.4.0-alpha.19
     "@storybook/core-common": 6.4.0-alpha.19
     "@storybook/csf": 0.0.2--canary.d61cd6c.0
-    "@storybook/store": 6.4.0-alpha.19
     "@storybook/preview-web": 6.4.0-alpha.19
+    "@storybook/store": 6.4.0-alpha.19
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -7216,6 +7216,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/preview-web@6.4.0-alpha.19, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
+  version: 0.0.0-use.local
+  resolution: "@storybook/preview-web@workspace:lib/preview-web"
+  dependencies:
+    "@storybook/addons": 6.4.0-alpha.19
+    "@storybook/channel-postmessage": 6.4.0-alpha.19
+    "@storybook/client-logger": 6.4.0-alpha.19
+    "@storybook/core-events": 6.4.0-alpha.19
+    "@storybook/csf": 0.0.2--canary.d61cd6c.0
+    "@storybook/store": 6.4.0-alpha.19
+    ansi-to-html: ^0.6.11
+    core-js: ^3.8.2
+    global: ^4.4.0
+    lodash: ^4.17.20
+    qs: ^6.10.0
+    regenerator-runtime: ^0.13.7
+    ts-dedent: ^2.0.0
+    unfetch: ^4.2.0
+    util-deprecate: ^1.0.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  languageName: unknown
+  linkType: soft
+
 "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.253f8c1.0":
   version: 1.0.2-canary.253f8c1.0
   resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.253f8c1.0"
@@ -7347,6 +7372,7 @@ __metadata:
     "@storybook/node-logger": "workspace:*"
     "@storybook/postinstall": "workspace:*"
     "@storybook/preact": "workspace:*"
+    "@storybook/preview-web": "workspace:*"
     "@storybook/react": "workspace:*"
     "@storybook/root": "workspace:*"
     "@storybook/router": "workspace:*"
@@ -7359,7 +7385,6 @@ __metadata:
     "@storybook/ui": "workspace:*"
     "@storybook/vue": "workspace:*"
     "@storybook/web-components": "workspace:*"
-    "@storybook/preview-web": "workspace:*"
     "@testing-library/dom": ^7.29.4
     "@testing-library/jest-dom": ^5.11.9
     "@testing-library/react": ^11.2.2
@@ -7545,8 +7570,8 @@ __metadata:
     "@storybook/core-common": 6.4.0-alpha.19
     "@storybook/csf": 0.0.2--canary.d61cd6c.0
     "@storybook/node-logger": 6.4.0-alpha.19
-    "@storybook/store": 6.4.0-alpha.19
     "@storybook/preview-web": 6.4.0-alpha.19
+    "@storybook/store": 6.4.0-alpha.19
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     fs-extra: ^9.0.1
@@ -7793,8 +7818,8 @@ __metadata:
     "@storybook/core": 6.4.0-alpha.19
     "@storybook/core-common": 6.4.0-alpha.19
     "@storybook/csf": 0.0.2--canary.d61cd6c.0
-    "@storybook/store": 6.4.0-alpha.19
     "@storybook/preview-web": 6.4.0-alpha.19
+    "@storybook/store": 6.4.0-alpha.19
     "@types/webpack-env": ^1.16.0
     babel-plugin-bundled-import-meta: ^0.3.1
     core-js: ^3.8.2
@@ -7814,31 +7839,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preview-web@6.4.0-alpha.19, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
-  version: 0.0.0-use.local
-  resolution: "@storybook/preview-web@workspace:lib/preview-web"
-  dependencies:
-    "@storybook/addons": 6.4.0-alpha.19
-    "@storybook/channel-postmessage": 6.4.0-alpha.19
-    "@storybook/client-logger": 6.4.0-alpha.19
-    "@storybook/core-events": 6.4.0-alpha.19
-    "@storybook/csf": 0.0.2--canary.d61cd6c.0
-    "@storybook/store": 6.4.0-alpha.19
-    ansi-to-html: ^0.6.11
-    core-js: ^3.8.2
-    global: ^4.4.0
-    lodash: ^4.17.20
-    qs: ^6.10.0
-    regenerator-runtime: ^0.13.7
-    ts-dedent: ^2.0.0
-    unfetch: ^4.2.0
-    util-deprecate: ^1.0.2
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  languageName: unknown
-  linkType: soft
-
 "@stroncium/procfs@npm:^1.2.1":
   version: 1.2.1
   resolution: "@stroncium/procfs@npm:1.2.1"