From e9dc4e0a35e7b812cb97ec607b7f0a4a35a96988 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 4 Jan 2022 17:17:29 -0500 Subject: [PATCH] Normalize stories in optimizeDeps for entries --- .../codegen-importfn-script.js | 23 ++------------- .../storybook-builder-vite/list-stories.js | 28 +++++++++++++++++++ .../storybook-builder-vite/optimizeDeps.js | 13 ++++----- 3 files changed, 35 insertions(+), 29 deletions(-) create mode 100644 packages/storybook-builder-vite/list-stories.js diff --git a/packages/storybook-builder-vite/codegen-importfn-script.js b/packages/storybook-builder-vite/codegen-importfn-script.js index 9577eee5..3b940b25 100644 --- 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 new file mode 100644 index 00000000..4b3606bc --- /dev/null +++ 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 index 83bd6fa8..6b1a535b 100644 --- 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.