From 0adaf29a72bf7cb775f15b98cedde8e3a9f5167d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 28 Nov 2023 09:26:16 +0100 Subject: [PATCH 1/2] Webpack5: Load babel-options only when necessary --- code/builders/builder-webpack5/src/index.ts | 2 -- .../builder-webpack5/src/preview/iframe-webpack.config.ts | 5 ++--- code/builders/builder-webpack5/src/preview/loaders.ts | 7 ++++--- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/code/builders/builder-webpack5/src/index.ts b/code/builders/builder-webpack5/src/index.ts index 53c4fba32df5..b4725b4a1f4c 100644 --- a/code/builders/builder-webpack5/src/index.ts +++ b/code/builders/builder-webpack5/src/index.ts @@ -61,7 +61,6 @@ export const executor = { export const getConfig: WebpackBuilder['getConfig'] = async (options) => { const { presets } = options; const typescriptOptions = await presets.apply('typescript', {}, options); - const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions }); const frameworkOptions = await presets.apply('frameworkOptions'); return presets.apply( @@ -69,7 +68,6 @@ export const getConfig: WebpackBuilder['getConfig'] = async (options) => { {}, { ...options, - babelOptions, typescriptOptions, frameworkOptions, } diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index f1598a66e5da..773d5a9d14bb 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -57,7 +57,7 @@ const storybookPaths: Record = { }; export default async ( - options: Options & Record & { typescriptOptions: TypescriptOptions } + options: Options & { typescriptOptions: TypescriptOptions } ): Promise => { const { outputDir = join('.', 'public'), @@ -66,7 +66,6 @@ export default async ( configType, presets, previewUrl, - babelOptions, typescriptOptions, features, } = options; @@ -240,7 +239,7 @@ export default async ( }, builderOptions.useSWC ? await createSWCLoader(Object.keys(virtualModuleMapping), options) - : createBabelLoader(babelOptions, typescriptOptions, Object.keys(virtualModuleMapping)), + : await createBabelLoader(options, typescriptOptions, Object.keys(virtualModuleMapping)), { test: /\.md$/, type: 'asset/source', diff --git a/code/builders/builder-webpack5/src/preview/loaders.ts b/code/builders/builder-webpack5/src/preview/loaders.ts index f10bd93a5ebc..868d35ba394c 100644 --- a/code/builders/builder-webpack5/src/preview/loaders.ts +++ b/code/builders/builder-webpack5/src/preview/loaders.ts @@ -5,18 +5,19 @@ import { logger } from '@storybook/node-logger'; import type { Options } from '@storybook/types'; import type { TypescriptOptions } from '../types'; -export const createBabelLoader = ( - options: any, +export const createBabelLoader = async ( + options: Options & { typescriptOptions: TypescriptOptions }, typescriptOptions: TypescriptOptions, excludes: string[] = [] ) => { logger.info(dedent`Using Babel compiler`); + const babelOptions = await options.presets.apply('babel', {}, options); return { test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/, use: [ { loader: require.resolve('babel-loader'), - options, + options: babelOptions, }, ], include: [getProjectRoot()], From 99dab60105021a3b1944dc3cf12ba7635273215e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 28 Nov 2023 09:57:34 +0100 Subject: [PATCH 2/2] Fix CRA --- .../create-react-app/src/helpers/processCraConfig.ts | 12 ++++-------- code/presets/create-react-app/src/index.ts | 2 +- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/code/presets/create-react-app/src/helpers/processCraConfig.ts b/code/presets/create-react-app/src/helpers/processCraConfig.ts index 25024ada0351..59a55f961625 100644 --- a/code/presets/create-react-app/src/helpers/processCraConfig.ts +++ b/code/presets/create-react-app/src/helpers/processCraConfig.ts @@ -19,10 +19,10 @@ const testMatch = (rule: RuleSetRule, string: string): boolean => { : isRegExp(rule.test) && rule.test.test(string); }; -export const processCraConfig = ( +export const processCraConfig = async ( craWebpackConfig: Configuration, options: PluginOptions -): RuleSetRule[] => { +): Promise => { const configDir = resolve(options.configDir); /* @@ -37,6 +37,7 @@ export const processCraConfig = ( */ const storybookVersion = semver.coerce(options.packageJson.version) || ''; const isStorybook530 = semver.gte(storybookVersion, '5.3.0'); + const babelOptions = await options.presets.apply('babel'); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion return craWebpackConfig.module!.rules.reduce((rules, rule): RuleSetRule[] => { @@ -108,12 +109,7 @@ export const processCraConfig = ( overrides: TransformOptions[] | null; }; - const { - extends: _extends, - plugins, - presets, - overrides, - } = (options as any).babelOptions; + const { extends: _extends, plugins, presets, overrides } = babelOptions; return { ...oneOfRule, diff --git a/code/presets/create-react-app/src/index.ts b/code/presets/create-react-app/src/index.ts index e480e438ef91..fceb3b0de9ff 100644 --- a/code/presets/create-react-app/src/index.ts +++ b/code/presets/create-react-app/src/index.ts @@ -92,7 +92,7 @@ const webpack = async ( // Select the relevant CRA rules and add the Storybook config directory. logger.info(`=> Modifying Create React App rules.`); - const craRules = processCraConfig(craWebpackConfig, options); + const craRules = await processCraConfig(craWebpackConfig, options); // NOTE: These are set by default in Storybook 6. const isStorybook6 = semver.gte(options.packageJson.version || '', '6.0.0');