more improvements

code/lib/cli/src/automigrate/fixes/new-frameworks/new-frameworks.ts

@@ -2,7 +2,12 @@ import chalk from 'chalk';
 import dedent from 'ts-dedent';
 import semver from 'semver';
 import { readConfig, writeConfig } from '@storybook/csf-tools';
-import { getStorybookInfo, loadMainConfig, rendererPackages } from '@storybook/core-common';
+import {
+  frameworkPackages,
+  getStorybookInfo,
+  loadMainConfig,
+  rendererPackages,
+} from '@storybook/core-common';
 
 import type { Fix } from '../../types';
 import type { PackageJsonWithDepsAndDevDeps } from '../../../js-package-manager';
@@ -124,7 +129,15 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
 
     const builderInfo = getBuilderInfo(mainConfig, allDependencies);
 
-    let newFrameworkPackage = packagesMap[rendererPackage][builderInfo.name];
+    // if the user has a new framework already, use it
+    let newFrameworkPackage = Object.keys(frameworkPackages).find(
+      (pkg) => pkg === frameworkPackage
+    );
+
+    if (!newFrameworkPackage) {
+      newFrameworkPackage =
+        packagesMap[rendererPackage] && packagesMap[rendererPackage][builderInfo.name];
+    }
 
     // bail if there is no framework that matches the renderer + builder
     if (!newFrameworkPackage) {
@@ -184,14 +197,20 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
     }
 
     // some frameworks didn't change e.g. Angular, Ember
-    if (newFrameworkPackage !== frameworkPackage && !allDependencies[newFrameworkPackage]) {
+    if (
+      newFrameworkPackage &&
+      newFrameworkPackage !== frameworkPackage &&
+      !allDependencies[newFrameworkPackage]
+    ) {
       dependenciesToAdd.push(newFrameworkPackage);
     }
 
     // only install what's not already installed
-    dependenciesToAdd = dependenciesToAdd.filter((dep) => !allDependencies[dep]);
+    dependenciesToAdd = dependenciesToAdd.filter((dep) => !allDependencies[dep]).filter(Boolean);
     // only uninstall what's installed
-    dependenciesToRemove = dependenciesToRemove.filter((dep) => allDependencies[dep]);
+    dependenciesToRemove = dependenciesToRemove
+      .filter((dep) => allDependencies[dep])
+      .filter(Boolean);
 
     const isProjectAlreadyCorrect =
       hasFrameworkInMainConfig &&

code/lib/cli/src/automigrate/fixes/new-frameworks/utils.test.ts

@@ -113,16 +113,6 @@ describe('getBuilderInfo', () => {
       options: { foo: 'bar' },
     });
   });
-
-  it('should log in case builder is not detected', () => {
-    const logSpy = jest.spyOn(console, 'info');
-    getBuilderInfo({
-      framework: 'storybook-framework-foo',
-    });
-    expect(logSpy).toHaveBeenCalledWith(
-      `Builder couldn't be extracted from storybook-framework-foo. Please report a bug on Github!`
-    );
-  });
 });
 
 describe('getNextjsAddonOptions', () => {

code/lib/cli/src/automigrate/fixes/new-frameworks/utils.ts

@@ -55,7 +55,7 @@ export const getBuilderInfo = (
 ): { name: BuilderType; options: any } => {
   let builderOptions = {};
   let builderName: BuilderType;
-  let builderOrFrameworkName = '';
+  let builderOrFrameworkName;
 
   const { core = {}, framework } = mainConfig;
   const { builder } = core;
@@ -79,14 +79,14 @@ export const getBuilderInfo = (
   }
 
   if (
-    builderOrFrameworkName.includes('vite') ||
+    builderOrFrameworkName?.includes('vite') ||
     dependencies['@storybook/builder-vite'] ||
     dependencies['storybook-builder-vite'] ||
     communityFrameworks.vite.includes(builderOrFrameworkName)
   ) {
     builderName = 'vite';
   } else if (
-    builderOrFrameworkName.includes('webpack') ||
+    builderOrFrameworkName?.includes('webpack') ||
     dependencies['@storybook/builder-webpack5'] ||
     dependencies['@storybook/manager-webpack5'] ||
     dependencies['@storybook/builder-webpack4'] ||
@@ -96,14 +96,8 @@ export const getBuilderInfo = (
     builderName = 'webpack5';
   }
 
-  if (builderName === undefined) {
-    logger.info(
-      `Builder couldn't be extracted from ${builderOrFrameworkName}. Please report a bug on Github!`
-    );
-  }
-
   return {
-    name: builderName || 'webpack5',
+    name: builderName,
     options: builderOptions,
   };
 };