From 856045343fe1daab6a7c3d02e39956c2686b796f Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Mon, 5 Dec 2022 17:10:57 +0200 Subject: [PATCH] fix(storybook): remove webpack from vite and install webpack if npm (#13631) --- .../configuration-nested.spec.ts.snap | 14 +--- .../__snapshots__/configuration.spec.ts.snap | 84 +++---------------- .../.storybook/main.ts__tmpl__ | 6 +- .../project-files/.storybook/main.js__tmpl__ | 8 +- .../init/__snapshots__/init.spec.ts.snap | 1 + .../storybook/src/generators/init/init.ts | 6 ++ packages/storybook/src/utils/versions.ts | 1 + 7 files changed, 29 insertions(+), 91 deletions(-) diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap index d0d68c2e74896..8fe29372b7a8e 100644 --- a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap +++ b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap @@ -14,20 +14,10 @@ const config: StorybookConfig = { '../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)' ], - addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' + addons: [...(rootMain.addons || []) - ], - webpackFinal: async (config, { configType }: Options) => { - // apply any global webpack configs that might have been specified in .storybook/main.ts - if (rootMain.webpackFinal) { - config = await rootMain.webpackFinal(config, { configType } as Options); - } - - // add your own webpack tweaks if needed - - return config; - }, + ] }; module.exports = config; diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap index f09ee8f020fd7..7feee7fc7e455 100644 --- a/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap @@ -154,20 +154,10 @@ const config: StorybookConfig = { '../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)' ], - addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' + addons: [...(rootMain.addons || []) - ], - webpackFinal: async (config, { configType }: Options) => { - // apply any global webpack configs that might have been specified in .storybook/main.ts - if (rootMain.webpackFinal) { - config = await rootMain.webpackFinal(config, { configType } as Options); - } - - // add your own webpack tweaks if needed - - return config; - }, + ] }; module.exports = config; @@ -213,20 +203,10 @@ const config: StorybookConfig = { '../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)' ], - addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' + addons: [...(rootMain.addons || []) - ], - webpackFinal: async (config, { configType }: Options) => { - // apply any global webpack configs that might have been specified in .storybook/main.ts - if (rootMain.webpackFinal) { - config = await rootMain.webpackFinal(config, { configType } as Options); - } - - // add your own webpack tweaks if needed - - return config; - }, + ] }; module.exports = config; @@ -272,7 +252,7 @@ const config: StorybookConfig = { '../components/**/*.stories.mdx', '../components/**/*.stories.@(js|jsx|ts|tsx)' ], - addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' + addons: [...(rootMain.addons || []) , 'storybook-addon-swc', { @@ -282,17 +262,7 @@ const config: StorybookConfig = { }, } - ], - webpackFinal: async (config, { configType }: Options) => { - // apply any global webpack configs that might have been specified in .storybook/main.ts - if (rootMain.webpackFinal) { - config = await rootMain.webpackFinal(config, { configType } as Options); - } - - // add your own webpack tweaks if needed - - return config; - }, + ] }; module.exports = config; @@ -338,20 +308,10 @@ const config: StorybookConfig = { '../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)' ], - addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' + addons: [...(rootMain.addons || []) - ], - webpackFinal: async (config, { configType }: Options) => { - // apply any global webpack configs that might have been specified in .storybook/main.ts - if (rootMain.webpackFinal) { - config = await rootMain.webpackFinal(config, { configType } as Options); - } - - // add your own webpack tweaks if needed - - return config; - }, + ] }; module.exports = config; @@ -397,20 +357,10 @@ const config: StorybookConfig = { '../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)' ], - addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' + addons: [...(rootMain.addons || []) , 'storybook-addon-swc' - ], - webpackFinal: async (config, { configType }: Options) => { - // apply any global webpack configs that might have been specified in .storybook/main.ts - if (rootMain.webpackFinal) { - config = await rootMain.webpackFinal(config, { configType } as Options); - } - - // add your own webpack tweaks if needed - - return config; - }, + ] }; module.exports = config; @@ -456,20 +406,10 @@ const config: StorybookConfig = { '../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)' ], - addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' + addons: [...(rootMain.addons || []) - ], - webpackFinal: async (config, { configType }: Options) => { - // apply any global webpack configs that might have been specified in .storybook/main.ts - if (rootMain.webpackFinal) { - config = await rootMain.webpackFinal(config, { configType } as Options); - } - - // add your own webpack tweaks if needed - - return config; - }, + ] }; module.exports = config; diff --git a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ b/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ index 585daef9c4f35..ba2ddd8d16345 100644 --- a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ +++ b/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ @@ -13,7 +13,7 @@ const config: StorybookConfig = { '../<%= projectDirectory %>/**/*.stories.mdx', '../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx)' <% } %>], - addons: [...(rootMain.addons || []) <% if(uiFramework === '@storybook/react') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes' <% } %> + addons: [...(rootMain.addons || []) <% if(uiFramework === '@storybook/react' && !usesVite) { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes' <% } %> <% if(usesSwc && !isNextJs) { %>, 'storybook-addon-swc' <% } %> <% if(isNextJs) { %>, 'storybook-addon-swc', { @@ -23,7 +23,7 @@ const config: StorybookConfig = { }, } <% } %> - ], + ]<% if (!usesVite) { %>, webpackFinal: async (config, { configType }: Options) => { // apply any global webpack configs that might have been specified in .storybook/main.ts if (rootMain.webpackFinal) { @@ -33,7 +33,7 @@ const config: StorybookConfig = { // add your own webpack tweaks if needed return config; - }, + },<% } %> }; module.exports = config; diff --git a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ b/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ index e5860fc3fb76a..97dd2edbf5881 100644 --- a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ +++ b/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ @@ -1,6 +1,6 @@ <% if (!isRootProject){ %>const rootMain = require('<%= offsetFromRoot %>../.storybook/<%= rootMainName %>');<% } %> <% if (isRootProject){ %>const rootMain = require('./main.root');<% } %> -<% if (existsRootWebpackConfig){ %>const rootWebpackConfig = require('<%= offsetFromRoot %>../.storybook/webpack.config'); <% } %> +<% if (existsRootWebpackConfig && !usesVite){ %>const rootWebpackConfig = require('<%= offsetFromRoot %>../.storybook/webpack.config'); <% } %> <% if (isNextJs){ %>const path = require('path');<% } %> module.exports = { @@ -13,7 +13,7 @@ module.exports = { '../<%= projectDirectory %>/**/*.stories.mdx', '../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx)' <% } %>], - addons: [...rootMain.addons <% if(uiFramework === '@storybook/react') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes' <% } %> + addons: [...rootMain.addons <% if(uiFramework === '@storybook/react' && !usesVite) { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes' <% } %> <% if(usesSwc && !isNextJs) { %>, 'storybook-addon-swc' <% } %> <% if(isNextJs) { %>, 'storybook-addon-swc', { @@ -23,7 +23,7 @@ module.exports = { }, } <% } %> - ], + ]<% if (!usesVite) { %>, webpackFinal: async (config, { configType }) => { // apply any global webpack configs that might have been specified in .storybook/main.js if (rootMain.webpackFinal) { @@ -39,5 +39,5 @@ module.exports = { // add your own webpack tweaks if needed return config; - }, + },<% } %> }; diff --git a/packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap b/packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap index cfe46a5130333..4ab3096412e9c 100644 --- a/packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap +++ b/packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap @@ -14,6 +14,7 @@ Object { "@storybook/core-server": "~6.5.9", "@storybook/manager-webpack5": "~6.5.9", "existing": "1.0.0", + "html-webpack-plugin": "^5.5.0", "webpack": "^5.64.0", }, "name": "test-name", diff --git a/packages/storybook/src/generators/init/init.ts b/packages/storybook/src/generators/init/init.ts index 92c152913913b..607aeea1fb5c4 100644 --- a/packages/storybook/src/generators/init/init.ts +++ b/packages/storybook/src/generators/init/init.ts @@ -8,6 +8,7 @@ import { updateWorkspaceConfiguration, } from '@nrwl/devkit'; import { isFramework } from '../../utils/utilities'; + import { babelCoreVersion, babelLoaderVersion, @@ -21,11 +22,13 @@ import { urlLoaderVersion, viteBuilderVeresion, webpack5Version, + htmlWebpackPluginVersion, } from '../../utils/versions'; import { Schema } from './schema'; function checkDependenciesInstalled(host: Tree, schema: Schema) { const packageJson = readJson(host, 'package.json'); + const devDependencies = {}; const dependencies = {}; packageJson.dependencies = packageJson.dependencies || {}; @@ -43,6 +46,9 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) { devDependencies['@storybook/manager-webpack5'] = storybookVersion; } + // TODO(katerina): Remove this when Storybook 7.0 is added in Nx + devDependencies['html-webpack-plugin'] = htmlWebpackPluginVersion; + if (isFramework('angular', schema)) { devDependencies['@storybook/angular'] = storybookVersion; devDependencies['webpack'] = webpack5Version; diff --git a/packages/storybook/src/utils/versions.ts b/packages/storybook/src/utils/versions.ts index 21eb1b05dc254..6e76779024849 100644 --- a/packages/storybook/src/utils/versions.ts +++ b/packages/storybook/src/utils/versions.ts @@ -13,3 +13,4 @@ export const storybookSwcAddonVersion = '^1.1.7'; export const storybookNextAddonVersion = '^1.6.6'; export const storybookTestRunnerVersion = '^0.7.2'; export const litHtmlVersion = '^2.3.1'; +export const htmlWebpackPluginVersion = '^5.5.0';