Core and Vite: Use story index as source of truth for Vite paths

code/.eslintrc.js

@@ -33,11 +33,6 @@ module.exports = {
       'error',
       {
         paths: [
-          {
-            name: 'vite',
-            message: 'Please dynamically import from vite instead, to force the use of ESM',
-            allowTypeImports: true,
-          },
           {
             name: 'react-aria',
             message:

code/builders/builder-vite/src/codegen-importfn-script.test.ts

@@ -1,19 +1,41 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { toImportFn } from './codegen-importfn-script';
+import type { StoryIndex } from 'storybook/internal/types';
 
-describe('toImportFn', () => {
-  it('should correctly map story paths to import functions for absolute paths on Linux', async () => {
+import { generateImportFnScriptCode } from './codegen-importfn-script';
+
+describe('generateImportFnScriptCode', () => {
+  it('should correctly map story paths to import functions for POSIX paths', async () => {
     vi.spyOn(process, 'cwd').mockReturnValue('/absolute/path');
 
-    const stories = ['/absolute/path/to/story1.js', '/absolute/path/to/story2.js'];
+    const index: StoryIndex = {
+      v: 5,
+      entries: {
+        'path-to-story': {
+          id: 'path-to-story',
+          title: 'Path to Story',
+          name: 'Default',
+          importPath: './to/abs-story.js',
+          type: 'story',
+          subtype: 'story',
+        },
+        'virtual-story': {
+          id: 'virtual-story',
+          title: 'Virtual Story',
+          name: 'Default',
+          importPath: 'virtual:story.js',
+          type: 'story',
+          subtype: 'story',
+        },
+      },
+    };
 
-    const result = await toImportFn(stories);
+    const result = generateImportFnScriptCode(index);
 
     expect(result).toMatchInlineSnapshot(`
       "const importers = {
-        "./to/story1.js": () => import("/absolute/path/to/story1.js"),
-        "./to/story2.js": () => import("/absolute/path/to/story2.js")
+        "./to/abs-story.js": () => import("/absolute/path/to/abs-story.js"),
+        "virtual:story.js": () => import("virtual:story.js")
       };
 
       export async function importFn(path) {
@@ -22,16 +44,37 @@ describe('toImportFn', () => {
     `);
   });
 
-  it('should correctly map story paths to import functions for absolute paths on Windows', async () => {
+  it('should correctly map story paths to import functions for Windows paths', async () => {
     vi.spyOn(process, 'cwd').mockReturnValue('C:\\absolute\\path');
-    const stories = ['C:\\absolute\\path\\to\\story1.js', 'C:\\absolute\\path\\to\\story2.js'];
 
-    const result = await toImportFn(stories);
+    const index: StoryIndex = {
+      v: 5,
+      entries: {
+        'abs-path-to-story': {
+          id: 'abs-path-to-story',
+          title: 'Absolute Path to Story',
+          name: 'Default',
+          importPath: 'to\\abs-story.js',
+          type: 'story',
+          subtype: 'story',
+        },
+        'virtual-story': {
+          id: 'virtual-story',
+          title: 'Virtual Story',
+          name: 'Default',
+          importPath: 'virtual:story.js',
+          type: 'story',
+          subtype: 'story',
+        },
+      },
+    };
+
+    const result = generateImportFnScriptCode(index);
 
     expect(result).toMatchInlineSnapshot(`
       "const importers = {
-        "./to/story1.js": () => import("C:/absolute/path/to/story1.js"),
-        "./to/story2.js": () => import("C:/absolute/path/to/story2.js")
+        "./to/abs-story.js": () => import("C:/absolute/path/to/abs-story.js"),
+        "virtual:story.js": () => import("virtual:story.js")
       };
 
       export async function importFn(path) {
@@ -40,11 +83,8 @@ describe('toImportFn', () => {
     `);
   });
 
-  it('should handle an empty array of stories', async () => {
-    const root = '/absolute/path';
-    const stories: string[] = [];
-
-    const result = await toImportFn(stories);
+  it('should handle an empty index', async () => {
+    const result = generateImportFnScriptCode({ v: 5, entries: {} });
 
     expect(result).toMatchInlineSnapshot(`
       "const importers = {};

code/builders/builder-vite/src/codegen-importfn-script.ts

@@ -1,39 +1,37 @@
-import type { Options } from 'storybook/internal/types';
+import type { StoryIndex } from 'storybook/internal/types';
 
 import { genDynamicImport, genObjectFromRawEntries } from 'knitwork';
-import { normalize, relative } from 'pathe';
+import { join, normalize, relative } from 'pathe';
 import { dedent } from 'ts-dedent';
 
-import { listStories } from './list-stories';
+import { getUniqueImportPaths } from './utils/unique-import-paths';
 
 /**
- * This file is largely based on
- * https://github.com/storybookjs/storybook/blob/d1195cbd0c61687f1720fefdb772e2f490a46584/lib/core-common/src/utils/to-importFn.ts
+ * This function takes the story index and creates a mapping between the stories' relative paths to
+ * the working directory and their dynamic imports. The import is done in an asynchronous function
+ * to delay loading and to allow Vite to split the code into smaller chunks. It then creates a
+ * function, `importFn(path)`, which resolves a path to an import function and this is called by
+ * Storybook to fetch a story dynamically when needed.
  */
+export function generateImportFnScriptCode(index: StoryIndex): string {
+  const objectEntries: [string, string][] = getUniqueImportPaths(index).map((importPath) => {
+    if (importPath.startsWith('virtual:')) {
+      return [importPath, genDynamicImport(importPath)];
+    }
 
-/**
- * Paths get passed either with no leading './' - e.g. `src/Foo.stories.js`, or with a leading `../`
- * (etc), e.g. `../src/Foo.stories.js`. We want to deal in importPaths relative to the working dir,
- * so we normalize
- */
-function toImportPath(relativePath: string) {
-  return relativePath.startsWith('../') ? relativePath : `./${relativePath}`;
-}
+    /**
+     * Relative paths get passed either with no leading './' - e.g. 'src/Foo.stories.js', or with a
+     * leading '../', e.g. '../src/Foo.stories.js'. We want to deal in importPaths relative to the
+     * working dir, so we normalize
+     */
+    const relativePath = normalize(relative(process.cwd(), importPath));
+    const normalizedRelativePath = relativePath.startsWith('../')
+      ? relativePath
+      : `./${relativePath}`;
 
-/**
- * This function takes an array of stories and creates a mapping between the stories' relative paths
- * to the working directory and their dynamic imports. The import is done in an asynchronous
- * function to delay loading and to allow Vite to split the code into smaller chunks. It then
- * creates a function, `importFn(path)`, which resolves a path to an import function and this is
- * called by Storybook to fetch a story dynamically when needed.
- *
- * @param stories An array of absolute story paths.
- */
-export async function toImportFn(stories: string[]) {
-  const objectEntries = stories.map((file) => {
-    const relativePath = relative(process.cwd(), file);
+    const absolutePath = normalize(join(process.cwd(), importPath));
 
-    return [toImportPath(relativePath), genDynamicImport(normalize(file))] as [string, string];
+    return [normalizedRelativePath, genDynamicImport(absolutePath)];
   });
 
   return dedent`
@@ -44,12 +42,3 @@ export async function toImportFn(stories: string[]) {
     }
   `;
 }
-
-export async function generateImportFnScriptCode(options: Options): Promise<string> {
-  // First we need to get an array of stories and their absolute paths.
-  const stories = await listStories(options);
-
-  // We can then call toImportFn to create a function that can be used to load each story dynamically.
-
-  return await toImportFn(stories);
-}

code/builders/builder-vite/src/optimizeDeps.ts

@@ -1,11 +1,10 @@
-import { relative } from 'node:path';
+import type { StoryIndexGenerator } from 'storybook/internal/core-server';
+import type { Options, StoryIndex } from 'storybook/internal/types';
 
-import type { Options } from 'storybook/internal/types';
-
-import type { UserConfig, InlineConfig as ViteInlineConfig } from 'vite';
+import { type UserConfig, type InlineConfig as ViteInlineConfig, resolveConfig } from 'vite';
 
 import { INCLUDE_CANDIDATES } from './constants';
-import { listStories } from './list-stories';
+import { getUniqueImportPaths } from './utils/unique-import-paths';
 
 /**
  * Helper function which allows us to `filter` with an async predicate. Uses Promise.all for
@@ -17,12 +16,16 @@ const asyncFilter = async (arr: string[], predicate: (val: string) => Promise<bo
 // TODO: This function should be reworked. The code it uses is outdated and we need to investigate
 // More info: https://github.com/storybookjs/storybook/issues/32462#issuecomment-3421326557
 export async function getOptimizeDeps(config: ViteInlineConfig, options: Options) {
-  const extraOptimizeDeps = await options.presets.apply('optimizeViteDeps', []);
+  const [extraOptimizeDeps, storyIndexGenerator] = await Promise.all([
+    options.presets.apply('optimizeViteDeps', []),
+    options.presets.apply<StoryIndexGenerator>('storyIndexGenerator'),
+  ]);
+
+  const index: StoryIndex = (await storyIndexGenerator.getIndex()) ?? {
+    v: 5,
+    entries: {},
+  };
 
-  const { root = process.cwd() } = config;
-  const { normalizePath, resolveConfig } = await import('vite');
-  const absoluteStories = await listStories(options);
-  const stories = absoluteStories.map((storyPath) => normalizePath(relative(root, storyPath)));
   // TODO: check if resolveConfig takes a lot of time, possible optimizations here
   const resolvedConfig = await resolveConfig(config, 'serve', 'development');
 
@@ -33,8 +36,7 @@ export async function getOptimizeDeps(config: ViteInlineConfig, options: Options
 
   const optimizeDeps: UserConfig['optimizeDeps'] = {
     ...config.optimizeDeps,
-    // We don't need to resolve the glob since vite supports globs for entries.
-    entries: stories,
+    entries: getUniqueImportPaths(index),
     // We need Vite to precompile these dependencies, because they contain non-ESM code that would break
     // if we served it directly to the browser.
     include: [...include, ...extraOptimizeDeps, ...(config.optimizeDeps?.include || [])],