Merge pull request #21002 from benmccann/default-builder-2

fix: use Vite by default for Svelte and Vue

code/lib/cli/src/detect-nextjs.test.ts

@@ -1,53 +0,0 @@
-import { detectNextJS } from './detect-nextjs';
-
-test('detect nothing if it fails', () => {
-  const out = detectNextJS({
-    type: 'npm',
-    executeCommand: () => {
-      throw new Error('test error');
-    },
-  });
-  expect(out).toEqual(false);
-});
-
-test('detect from npm ls', () => {
-  const outputFromCommand = `
-/path/to/cwd
-└── next@12.0.7 
-  `;
-  const out = detectNextJS({ type: 'npm', executeCommand: () => outputFromCommand });
-  expect(out).toEqual(12);
-});
-
-test('detect from npm why', () => {
-  const outputFromCommand = `
-next@12.0.7
-node_modules/next
-  next@"^12.0.7" from the root project
-  peer next@">=10.2.0" from eslint-config-next@12.0.7
-  node_modules/eslint-config-next
-    dev eslint-config-next@"^12.0.7" from the root project
-`;
-  const out = detectNextJS({ type: 'npm', executeCommand: () => outputFromCommand });
-  expect(out).toEqual(12);
-});
-
-test('detect from yarn why', () => {
-  const outputFromCommand = `
-yarn why v1.22.18
-[1/4] 🤔  Why do we have the module "next"...?
-[2/4] 🚚  Initialising dependency graph...
-[3/4] 🔍  Finding dependency...
-[4/4] 🚡  Calculating file sizes...
-=> Found "next@12.0.7"
-info Has been hoisted to "next"
-info This module exists because it's specified in "dependencies".
-info Disk size without dependencies: "XX.XXMB"
-info Disk size with unique dependencies: "XX.XXMB"
-info Disk size with transitive dependencies: "XX.XXMB"
-info Number of shared dependencies: XXX
-✨  Done in 0.XXs.
-`;
-  const out = detectNextJS({ type: 'npm', executeCommand: () => outputFromCommand });
-  expect(out).toEqual(12);
-});

code/lib/cli/src/detect-nextjs.ts

@@ -1,30 +0,0 @@
-import type { JsPackageManager } from './js-package-manager';
-
-const regex = /[\s"\n]next.*?(\d+).*/;
-
-export const detectNextJS = (
-  packageManager: Pick<JsPackageManager, 'type' | 'executeCommand'>
-): number | false => {
-  try {
-    let out = '';
-    if (packageManager.type === 'npm') {
-      try {
-        // npm <= v7
-        out = packageManager.executeCommand('npm', ['ls', 'next']);
-      } catch (e2) {
-        // npm >= v8
-        out = packageManager.executeCommand('npm', ['why', 'next']);
-      }
-    } else {
-      out = packageManager.executeCommand('yarn', ['why', 'next']);
-    }
-
-    const [, version] = out.match(regex);
-
-    return version && parseInt(version, 10) ? parseInt(version, 10) : false;
-  } catch (err) {
-    //
-  }
-
-  return false;
-};

code/lib/cli/src/detect.ts

@@ -16,7 +16,7 @@ import {
 } from './project_types';
 import { getBowerJson, paddedLog } from './helpers';
 import type { JsPackageManager, PackageJson, PackageJsonWithMaybeDeps } from './js-package-manager';
-import { detectNextJS } from './detect-nextjs';
+import { detectWebpack } from './detect-webpack';
 
 const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
 
@@ -104,28 +104,34 @@ export function detectFrameworkPreset(
 }
 
 /**
- * Attempts to detect which builder to use, by searching for a vite config file.  If one is found, the vite builder
- * will be used, otherwise, webpack5 is the default.
+ * Attempts to detect which builder to use, by searching for a vite config file or webpack installation.
+ * If neither are found it will choose the default builder based on the project type.
  *
  * @returns CoreBuilder
  */
-export function detectBuilder(packageManager: JsPackageManager) {
+export function detectBuilder(packageManager: JsPackageManager, projectType: ProjectType) {
   const viteConfig = findUp.sync(viteConfigFiles);
-
   if (viteConfig) {
-    paddedLog('Detected vite project, setting builder to @storybook/builder-vite');
+    paddedLog('Detected Vite project. Setting builder to Vite');
     return CoreBuilder.Vite;
   }
 
-  const nextJSVersion = detectNextJS(packageManager);
-  if (nextJSVersion) {
-    if (nextJSVersion >= 11) {
-      return CoreBuilder.Webpack5;
-    }
+  if (detectWebpack(packageManager)) {
+    paddedLog('Detected webpack project. Setting builder to webpack');
+    return CoreBuilder.Webpack5;
   }
 
-  // Fallback to webpack5
-  return CoreBuilder.Webpack5;
+  // Fallback to Vite or Webpack based on project type
+  switch (projectType) {
+    case ProjectType.SVELTE:
+    case ProjectType.SVELTEKIT:
+    case ProjectType.VUE:
+    case ProjectType.VUE3:
+    case ProjectType.SFC_VUE:
+      return CoreBuilder.Vite;
+    default:
+      return CoreBuilder.Webpack5;
+  }
 }
 
 export function isStorybookInstalled(

code/lib/cli/src/initiate.ts

@@ -61,7 +61,7 @@ const installStorybook = <Project extends ProjectType>(
 
   const generatorOptions = {
     language,
-    builder: options.builder || detectBuilder(packageManager),
+    builder: options.builder || detectBuilder(packageManager, projectType),
     linkable: !!options.linkable,
     pnp: pnp || options.usePnp,
   };