From f26ce119cdb6745a79fa9c45219b6f15444d25b9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 6 Apr 2022 22:28:54 +0200 Subject: [PATCH 1/7] improve webpack4-5 detection --- lib/cli/src/detect.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/lib/cli/src/detect.ts b/lib/cli/src/detect.ts index 100972dad9e6..5baa576aefaf 100644 --- a/lib/cli/src/detect.ts +++ b/lib/cli/src/detect.ts @@ -13,7 +13,7 @@ import { CoreBuilder, } from './project_types'; import { getBowerJson, paddedLog } from './helpers'; -import { PackageJson, readPackageJson } from './js-package-manager'; +import { PackageJson, readPackageJson, JsPackageManager } from './js-package-manager'; const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs']; @@ -104,7 +104,7 @@ export function detectFrameworkPreset(packageJson = {}) { * * @returns CoreBuilder */ -export function detectBuilder() { +export function detectBuilder(packageManager: JsPackageManager) { const viteConfig = findUp.sync(viteConfigFiles); if (viteConfig) { @@ -112,6 +112,18 @@ export function detectBuilder() { return CoreBuilder.Vite; } + const out = packageManager.executeCommand(packageManager.type, ['why']); + + // if the user has BOTH webpack 4 and 5 installed already, we'll pick the safest options (4) + if (out.includes('webpack@4') || out.includes('webpack@npm:4')) { + return CoreBuilder.Webpack5; + } + + // the user has webpack 4 installed, but not 5 + if (out.includes('webpack@5') || out.includes('webpack@npm:5')) { + return CoreBuilder.Webpack5; + } + // Fallback to webpack4 return CoreBuilder.Webpack4; } From bc2c241ba2d794b8a694e3fb017e01f764b4b5ab Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 6 Apr 2022 22:29:35 +0200 Subject: [PATCH 2/7] we should actually add these dependencies IMHO, so we can remove the dependencies from core-server at some point --- lib/cli/src/generators/baseGenerator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index d337dcb2cfd5..bc4f098c8b56 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -49,7 +49,7 @@ const defaultOptions: FrameworkOptions = { const builderDependencies = (builder: Builder) => { switch (builder) { case CoreBuilder.Webpack4: - return []; + return ['@storybook/builder-webpack4', '@storybook/manager-webpack4']; case CoreBuilder.Webpack5: return ['@storybook/builder-webpack5', '@storybook/manager-webpack5']; case CoreBuilder.Vite: From e82e9c16ac5c092a1ee1f92424f00d46bd9a2c30 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 6 Apr 2022 22:30:14 +0200 Subject: [PATCH 3/7] call detectBuilder with packageManager --- lib/cli/src/initiate.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts index 61622aead86b..50516c2e9788 100644 --- a/lib/cli/src/initiate.ts +++ b/lib/cli/src/initiate.ts @@ -57,7 +57,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr const generatorOptions = { language, - builder: options.builder || detectBuilder(), + builder: options.builder || detectBuilder(packageManager), linkable: !!options.linkable, commonJs: options.commonJs, }; From 7c4da58af96533ac333f03f1729b70dec1227d23 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 6 Apr 2022 23:32:26 +0200 Subject: [PATCH 4/7] actually search for version of webpack --- lib/cli/src/detect.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/src/detect.ts b/lib/cli/src/detect.ts index 5baa576aefaf..feda9cc9c398 100644 --- a/lib/cli/src/detect.ts +++ b/lib/cli/src/detect.ts @@ -112,7 +112,7 @@ export function detectBuilder(packageManager: JsPackageManager) { return CoreBuilder.Vite; } - const out = packageManager.executeCommand(packageManager.type, ['why']); + const out = packageManager.executeCommand(packageManager.type, ['why', 'webpack']); // if the user has BOTH webpack 4 and 5 installed already, we'll pick the safest options (4) if (out.includes('webpack@4') || out.includes('webpack@npm:4')) { From cf21174e82f9dedc732bb80b511ce08cfb3899de Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 7 Apr 2022 00:11:25 +0200 Subject: [PATCH 5/7] npm v6 has no why, so let's use ls instead --- lib/cli/src/detect.ts | 32 ++++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/lib/cli/src/detect.ts b/lib/cli/src/detect.ts index feda9cc9c398..94ff87bad60e 100644 --- a/lib/cli/src/detect.ts +++ b/lib/cli/src/detect.ts @@ -2,6 +2,7 @@ import path from 'path'; import fs from 'fs'; import findUp from 'find-up'; +import e from 'express'; import { ProjectType, supportedTemplates, @@ -112,16 +113,31 @@ export function detectBuilder(packageManager: JsPackageManager) { return CoreBuilder.Vite; } - const out = packageManager.executeCommand(packageManager.type, ['why', 'webpack']); + try { + let out = ''; + if (packageManager.type === 'npm') { + try { + // npm <= v7 + out = packageManager.executeCommand('npm', ['ls', 'webpack']); + } catch (e2) { + // npm >= v8 + out = packageManager.executeCommand('npm', ['why', 'webpack']); + } + } else { + out = packageManager.executeCommand('yarn', ['why', 'webpack']); + } - // if the user has BOTH webpack 4 and 5 installed already, we'll pick the safest options (4) - if (out.includes('webpack@4') || out.includes('webpack@npm:4')) { - return CoreBuilder.Webpack5; - } + // if the user has BOTH webpack 4 and 5 installed already, we'll pick the safest options (4) + if (out.includes('webpack@4') || out.includes('webpack@npm:4')) { + return CoreBuilder.Webpack5; + } - // the user has webpack 4 installed, but not 5 - if (out.includes('webpack@5') || out.includes('webpack@npm:5')) { - return CoreBuilder.Webpack5; + // the user has webpack 4 installed, but not 5 + if (out.includes('webpack@5') || out.includes('webpack@npm:5')) { + return CoreBuilder.Webpack5; + } + } catch (err) { + // } // Fallback to webpack4 From f607f8370c61111b804c5412dd9e0061998469cb Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 7 Apr 2022 00:13:11 +0200 Subject: [PATCH 6/7] cleanup --- lib/cli/src/detect.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/cli/src/detect.ts b/lib/cli/src/detect.ts index 94ff87bad60e..d9966cb800ee 100644 --- a/lib/cli/src/detect.ts +++ b/lib/cli/src/detect.ts @@ -2,7 +2,6 @@ import path from 'path'; import fs from 'fs'; import findUp from 'find-up'; -import e from 'express'; import { ProjectType, supportedTemplates, From 8ef80854196997a54d2ac4312250743ac912ac56 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 7 Apr 2022 10:26:19 +0800 Subject: [PATCH 7/7] CLI: Use webpack5 auto-detect for vue3 --- lib/cli/src/generators/VUE3/index.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/lib/cli/src/generators/VUE3/index.ts b/lib/cli/src/generators/VUE3/index.ts index 4768b4fee115..db9e4e4cab94 100644 --- a/lib/cli/src/generators/VUE3/index.ts +++ b/lib/cli/src/generators/VUE3/index.ts @@ -1,10 +1,7 @@ import { baseGenerator, Generator } from '../baseGenerator'; -import { CoreBuilder } from '../../project_types'; const generator: Generator = async (packageManager, npmOptions, options) => { - const updatedOptions = { ...options, builder: CoreBuilder.Webpack5 }; - - baseGenerator(packageManager, npmOptions, updatedOptions, 'vue3', { + baseGenerator(packageManager, npmOptions, options, 'vue3', { extraPackages: ['vue-loader@^16.0.0'], }); };