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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

JReinhold merged 44 commits into next from jeppe/custom-indexer-importpath

Dec 19, 2025

+488 −441

code/.eslintrc.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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:
@@ Expand Down @@

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,40 +1,40 @@
  
    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.

     */

    /**

     * 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}`;

    }

    /**

     * 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);

        return [toImportPath(relativePath), genDynamicImport(normalize(file))] as [string, string];

      });

    export function generateImportFnScriptCode(index: StoryIndex): string {

      const objectEntries: [path: string, importStatement: string][] = getUniqueImportPaths(index).map(

        (importPath) => {

          if (importPath.startsWith('virtual:')) {

            return [importPath, genDynamicImport(importPath)];

          }

          /**

           * 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}`;

          const absolutePath = normalize(join(process.cwd(), importPath));

          return [normalizedRelativePath, genDynamicImport(absolutePath)];

        }

      );

      return dedent`

        const importers = ${genObjectFromRawEntries(objectEntries)};

    @@ -44,12 +44,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/list-stories.ts

This file was deleted.

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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,13 @@ 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();

      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 +33,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 || [])],

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!