Fix up storybook plugin (fixes #289)

webpro-nl · Oct 12, 2023 · 7488701 · 7488701
1 parent 1239eb3
commit 7488701
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/src/plugins/storybook/README.md b/src/plugins/storybook/README.md
@@ -13,8 +13,8 @@ or `devDependencies`:
 ```json
 {
   "storybook": {
-    "config": [".storybook/{main,manager,test-runner}.{js,ts}"],
-    "entry": [".storybook/preview.{js,jsx,ts,tsx}", "**/*.stories.{js,jsx,ts,tsx}"],
+    "config": [".storybook/{main,test-runner}.{js,ts}"],
+    "entry": [".storybook/{manager,preview}.{js,jsx,ts,tsx}", "**/*.stories.{js,jsx,ts,tsx}"],
     "project": [".storybook/**/*.{js,jsx,ts,tsx}"]
   }
 }

diff --git a/src/plugins/storybook/index.ts b/src/plugins/storybook/index.ts
@@ -1,3 +1,4 @@
+import { dirname, join, relative } from '../../util/path.js';
 import { timerify } from '../../util/Performance.js';
 import { hasDependency, load } from '../../util/plugin.js';
 import { toEntryPattern } from '../../util/protocols.js';
@@ -13,26 +14,34 @@ export const ENABLERS = [/^@storybook\//, '@nrwl/storybook'];
 
 export const isEnabled: IsPluginEnabledCallback = ({ dependencies }) => hasDependency(dependencies, ENABLERS);
 
-export const CONFIG_FILE_PATTERNS = ['.storybook/{main,manager,test-runner}.{js,ts}'];
+export const CONFIG_FILE_PATTERNS = ['.storybook/{main,test-runner}.{js,ts}'];
 
 /** @public */
-export const ENTRY_FILE_PATTERNS = ['.storybook/preview.{js,jsx,ts,tsx}', '**/*.stories.{js,jsx,ts,tsx}'];
+export const STORIES_FILE_PATTERNS = ['**/*.stories.{js,jsx,ts,tsx}'];
+
+/** @public */
+export const ENTRY_FILE_PATTERNS = ['.storybook/{manager,preview}.{js,jsx,ts,tsx}', ...STORIES_FILE_PATTERNS];
 
 export const PROJECT_FILE_PATTERNS = ['.storybook/**/*.{js,jsx,ts,tsx}'];
 
-const findStorybookDependencies: GenericPluginCallback = async (configFilePath, { isProduction }) => {
-  const entryPatterns = ENTRY_FILE_PATTERNS.map(toEntryPattern);
-  if (isProduction) return entryPatterns;
+const findStorybookDependencies: GenericPluginCallback = async (configFilePath, { isProduction, config }) => {
+  const cfg: StorybookConfig = await load(configFilePath);
 
-  const config: StorybookConfig = await load(configFilePath);
+  const stories = (typeof cfg.stories === 'function' ? await cfg.stories(STORIES_FILE_PATTERNS) : cfg.stories)?.map(
+    pattern => relative(join(dirname(configFilePath), pattern))
+  );
+  const cfgPatterns = [...(config?.entry ?? []), ...(stories ?? [])];
+  const entryPatterns = (cfgPatterns.length > 0 ? cfgPatterns : ENTRY_FILE_PATTERNS).map(toEntryPattern);
+
+  if (isProduction) return entryPatterns;
 
-  if (!config) return [];
+  if (!cfg) return [];
 
-  const addons = config.addons?.map(addon => (typeof addon === 'string' ? addon : addon.name)) ?? [];
-  const builder = config?.core?.builder;
+  const addons = cfg.addons?.map(addon => (typeof addon === 'string' ? addon : addon.name)) ?? [];
+  const builder = cfg?.core?.builder;
   const builderPackages =
     builder && /webpack/.test(builder) ? [`@storybook/builder-${builder}`, `@storybook/manager-${builder}`] : [];
-  const frameworks = config.framework?.name ? [config.framework.name] : [];
+  const frameworks = cfg.framework?.name ? [cfg.framework.name] : [];
 
   return [...entryPatterns, ...addons, ...builderPackages, ...frameworks];
 };

diff --git a/src/plugins/storybook/types.ts b/src/plugins/storybook/types.ts
@@ -1,4 +1,5 @@
 export type StorybookConfig = {
+  stories?: string[] | ((patterns: string[]) => Promise<string[]>);
   addons?: (string | { name: string })[];
   core?: {
     builder?: string;

diff --git a/test/plugins/storybook.test.ts b/test/plugins/storybook.test.ts
@@ -9,7 +9,7 @@ test('Find dependencies in Storybook configuration (main.js)', async () => {
   const configFilePath = join(cwd, 'main.js');
   const dependencies = await storybook.findDependencies(configFilePath, {});
   assert.deepEqual(dependencies, [
-    'entry:.storybook/preview.{js,jsx,ts,tsx}',
+    'entry:.storybook/{manager,preview}.{js,jsx,ts,tsx}',
     'entry:**/*.stories.{js,jsx,ts,tsx}',
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',