Vite: Don't prefix story import with @fs

Author: tobiasdiez

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

@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { toImportFn } from './codegen-importfn-script';
+
+describe('toImportFn', () => {
+  it('should correctly map story paths to import functions for absolute paths on Linux', async () => {
+    const root = '/absolute/path';
+    const stories = ['/absolute/path/to/story1.js', '/absolute/path/to/story2.js'];
+
+    const result = await toImportFn(root, stories);
+
+    expect(result).toMatchInlineSnapshot(`
+      "const importers = {
+        "./to/story1.js": () => import("/absolute/path/to/story1.js"),
+        "./to/story2.js": () => import("/absolute/path/to/story2.js")
+      };
+
+      export async function importFn(path) {
+        return await importers[path]();
+      }"
+    `);
+  });
+
+  it('should correctly map story paths to import functions for absolute paths on Windows', async () => {
+    const root = 'C:\\absolute\\path';
+    const stories = ['C:\\absolute\\path\\to\\story1.js', 'C:\\absolute\\path\\to\\story2.js'];
+
+    const result = await toImportFn(root, stories);
+
+    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")
+      };
+
+      export async function importFn(path) {
+        return await importers[path]();
+      }"
+    `);
+  });
+
+  it('should handle an empty array of stories', async () => {
+    const root = '/absolute/path';
+    const stories: string[] = [];
+
+    const result = await toImportFn(root, stories);
+
+    expect(result).toMatchInlineSnapshot(`
+      "const importers = {};
+
+      export async function importFn(path) {
+        return await importers[path]();
+      }"
+    `);
+  });
+});

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

@@ -1,7 +1,9 @@
-import { relative } from 'node:path';
-
 import type { Options } from 'storybook/internal/types';
 
+import { genDynamicImport, genImport, genObjectFromRawEntries } from 'knitwork';
+import { normalize, relative } from 'pathe';
+import { dedent } from 'ts-dedent';
+
 import { listStories } from './list-stories';
 
 /**
@@ -21,34 +23,33 @@ function toImportPath(relativePath: string) {
 /**
  * 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. 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.
+ * 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.
  */
-async function toImportFn(stories: string[]) {
-  const { normalizePath } = await import('vite');
+export async function toImportFn(root: string, stories: string[]) {
   const objectEntries = stories.map((file) => {
-    const relativePath = normalizePath(relative(process.cwd(), file));
+    const relativePath = relative(root, file);
 
-    return `  '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`;
+    return [toImportPath(relativePath), genDynamicImport(normalize(file))] as [string, string];
   });
 
-  return `
-    const importers = {
-      ${objectEntries.join(',\n')}
-    };
+  return dedent`
+    const importers = ${genObjectFromRawEntries(objectEntries)};
 
     export async function importFn(path) {
-        return importers[path]();
+      return await importers[path]();
     }
   `;
 }
 
-export async function generateImportFnScriptCode(options: Options) {
+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)).trim();
+  // eslint-disable-next-line @typescript-eslint/return-await
+  return await toImportFn(options.root || process.cwd(), stories);
 }