fix vue generators

storybookjs · Aug 23, 2023 · bdf3573 · bdf3573
1 parent 2fb57f0
commit bdf3573
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 29 deletions.
diff --git a/code/lib/cli/src/generators/VUE/index.ts b/code/lib/cli/src/generators/VUE/index.ts
@@ -3,9 +3,10 @@ import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  const extraPackages = options.builder === CoreBuilder.Webpack5 ? ['vue-loader@^15.7.0'] : [];
   await baseGenerator(packageManager, npmOptions, options, 'vue', {
-    extraPackages,
+    extraPackages: async ({ builder }) => {
+      return builder === CoreBuilder.Webpack5 ? ['vue-loader@^15.7.0'] : [];
+    },
   });
 };
 

diff --git a/code/lib/cli/src/generators/VUE3/index.ts b/code/lib/cli/src/generators/VUE3/index.ts
@@ -3,12 +3,12 @@ import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  const extraPackages =
-    options.builder === CoreBuilder.Webpack5
-      ? ['vue-loader@^17.0.0', '@vue/compiler-sfc@^3.2.0']
-      : [];
   await baseGenerator(packageManager, npmOptions, options, 'vue3', {
-    extraPackages,
+    extraPackages: async ({ builder }) => {
+      return builder === CoreBuilder.Webpack5
+        ? ['vue-loader@^17.0.0', '@vue/compiler-sfc@^3.2.0']
+        : [];
+    },
   });
 };
 

diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
@@ -11,7 +11,7 @@ import type { JsPackageManager } from '../js-package-manager';
 import { getPackageDetails } from '../js-package-manager';
 import { getBabelPresets, writeBabelConfigFile } from '../babel-config';
 import packageVersions from '../versions';
-import type { FrameworkOptions, GeneratorOptions } from './types';
+import type { FrameworkDetails, FrameworkOptions, GeneratorOptions } from './types';
 import {
   configureEslintPlugin,
   extractEslintInfo,
@@ -108,14 +108,7 @@ const getFrameworkDetails = (
   language: SupportedLanguage,
   framework?: SupportedFrameworks,
   shouldApplyRequireWrapperOnPackageNames?: boolean
-): {
-  type: 'framework' | 'renderer';
-  packages: string[];
-  builder?: string;
-  framework?: string;
-  renderer?: string;
-  rendererId: SupportedRenderers;
-} => {
+): FrameworkDetails => {
   const frameworkPackage = getFrameworkPackage(framework, renderer, builder);
 
   const frameworkPackagePath = shouldApplyRequireWrapperOnPackageNames
@@ -211,13 +204,7 @@ export async function baseGenerator(
     ...options,
   };
 
-  const {
-    packages: frameworkPackages,
-    type,
-    rendererId,
-    framework: frameworkInclude,
-    builder: builderInclude,
-  } = getFrameworkDetails(
+  const frameworkDetails = getFrameworkDetails(
     renderer,
     builder,
     pnp,
@@ -226,18 +213,31 @@ export async function baseGenerator(
     shouldApplyRequireWrapperOnPackageNames
   );
 
+  const {
+    packages: frameworkPackages,
+    type,
+    rendererId,
+    framework: frameworkInclude,
+    builder: builderInclude,
+  } = frameworkDetails;
+
+  const extraAddonsToInstall =
+    typeof extraAddonPackages === 'function'
+      ? await extraAddonPackages(frameworkDetails)
+      : extraAddonPackages;
+
   // added to main.js
   const addons = [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    ...stripVersions(extraAddonPackages),
+    ...stripVersions(extraAddonsToInstall),
   ];
   // added to package.json
   const addonPackages = [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/blocks',
-    ...extraAddonPackages,
+    ...extraAddonsToInstall,
   ];
 
   if (hasInteractiveStories(rendererId)) {
@@ -272,12 +272,15 @@ export async function baseGenerator(
     );
   }
 
+  const extraPackagesToInstall =
+    typeof extraPackages === 'function' ? await extraPackages(frameworkDetails) : extraPackages;
+
   const allPackages = [
     'storybook',
     getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`,
     ...frameworkPackages,
     ...addonPackages,
-    ...extraPackages,
+    ...extraPackagesToInstall,
   ].filter(Boolean);
 
   const packages = [...new Set(allPackages)].filter(

diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts
@@ -1,5 +1,5 @@
 import type { NpmOptions } from '../NpmOptions';
-import type { SupportedLanguage, Builder, ProjectType } from '../project_types';
+import type { SupportedLanguage, Builder, ProjectType, SupportedRenderers } from '../project_types';
 import type { JsPackageManager, PackageManagerName } from '../js-package-manager/JsPackageManager';
 import type { FrameworkPreviewParts } from './configure';
 
@@ -14,9 +14,17 @@ export type GeneratorOptions = {
   yes: boolean;
 };
 
+export interface FrameworkDetails {
+  type: 'framework' | 'renderer';
+  packages: string[];
+  builder?: string;
+  framework?: string;
+  renderer?: string;
+  rendererId: SupportedRenderers;
+}
 export interface FrameworkOptions {
-  extraPackages?: string[];
-  extraAddons?: string[];
+  extraPackages?: string[] | ((details: FrameworkDetails) => Promise<string[]>);
+  extraAddons?: string[] | ((details: FrameworkDetails) => Promise<string[]>);
   staticDir?: string;
   addScripts?: boolean;
   addMainFile?: boolean;