Normalize stories in optimizeDeps for entries

storybookjs · Jan 4, 2022 · e9dc4e0 · e9dc4e0
1 parent 7470e47
commit e9dc4e0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 29 deletions.
diff --git a/packages/storybook-builder-vite/codegen-importfn-script.js b/packages/storybook-builder-vite/codegen-importfn-script.js
@@ -1,7 +1,6 @@
-const { normalizeStories } = require('@storybook/core-common');
-const glob = require('glob-promise');
 const path = require('path');
 const { normalizePath } = require('vite');
+const { listStories } = require('./list-stories');
 
 /**
  * This file is largely based on https://github.com/storybookjs/storybook/blob/d1195cbd0c61687f1720fefdb772e2f490a46584/lib/core-common/src/utils/to-importFn.ts
@@ -48,25 +47,7 @@ async function toImportFn(stories) {
 module.exports.generateImportFnScriptCode =
     async function generateImportFnScriptCode(options) {
         // First we need to get an array of stories and their absolute paths.
-        const stories = (
-            await Promise.all(
-                normalizeStories(
-                    await options.presets.apply('stories', [], options),
-                    {
-                        configDir: options.configDir,
-                        workingDir: options.configDir,
-                    }
-                ).map(({ directory, files }) => {
-                    const pattern = path.join(directory, files);
-
-                    return glob(
-                        path.isAbsolute(pattern)
-                            ? pattern
-                            : path.join(options.configDir, pattern)
-                    );
-                })
-            )
-        ).reduce((carry, stories) => carry.concat(stories), []);
+        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();

diff --git a/packages/storybook-builder-vite/list-stories.js b/packages/storybook-builder-vite/list-stories.js
@@ -0,0 +1,28 @@
+const path = require('path');
+const glob = require('glob-promise');
+const { normalizeStories } = require('@storybook/core-common');
+
+/**
+ * Return an array of stories and their absolute paths.
+ */
+module.exports.listStories = async function listStories(options) {
+    return (
+        await Promise.all(
+            normalizeStories(
+                await options.presets.apply('stories', [], options),
+                {
+                    configDir: options.configDir,
+                    workingDir: options.configDir,
+                }
+            ).map(({ directory, files }) => {
+                const pattern = path.join(directory, files);
+
+                return glob(
+                    path.isAbsolute(pattern)
+                        ? pattern
+                        : path.join(options.configDir, pattern)
+                );
+            })
+        )
+    ).reduce((carry, stories) => carry.concat(stories), []);
+};
diff --git a/packages/storybook-builder-vite/optimizeDeps.js b/packages/storybook-builder-vite/optimizeDeps.js
@@ -1,15 +1,12 @@
 const path = require('path');
-module.exports.getOptimizeDeps = async (root, options) => {
+const { normalizePath } = require('vite');
+const { listStories } = require('./list-stories');
 
-    const stories = await Promise.all(
-            (
-                await options.presets.apply('stories', [], options)
-            ).map((storyEntry) =>
-                path.relative(root, path.isAbsolute(storyEntry) ? storyEntry : path.join(options.configDir, storyEntry))
-            ));
+module.exports.getOptimizeDeps = async (root, options) => {
+    const absoluteStories = await listStories(options);
+    const stories = absoluteStories.map(storyPath => normalizePath(path.relative(root, storyPath)))
 
     return {
-        // We don't need to resolve the glob since vite supports globs for entries.
         entries: stories,
         // We need Vite to precompile these dependencies, because they contain non-ESM code that would break
         // if we served it directly to the browser.