fix(storybook): preserve storybook module rules (#141)

gravity-ui · May 22, 2024 · 5e09118 · 5e09118
1 parent 3ac1010
commit 5e09118
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 12 deletions.
diff --git a/src/common/webpack/config.ts b/src/common/webpack/config.ts
@@ -111,7 +111,10 @@ export async function webpackConfigFactory(
     return webpackConfig;
 }
 
-export function configureModuleRules(helperOptions: HelperOptions) {
+export function configureModuleRules(
+    helperOptions: HelperOptions,
+    additionalRules: NonNullable<webpack.RuleSetRule['oneOf']> = [],
+) {
     const jsLoader = createJavaScriptLoader(helperOptions);
     return [
         ...createSourceMapRules(!helperOptions.config.disableSourceMapGeneration),
@@ -124,6 +127,7 @@ export function configureModuleRules(helperOptions: HelperOptions) {
                 createIconsRule(helperOptions), // workaround for https://github.com/webpack/webpack/issues/9309
                 createIconsRule(helperOptions, jsLoader),
                 ...createAssetsRules(helperOptions),
+                ...additionalRules,
                 ...createFallbackRules(helperOptions),
             ],
         },
@@ -246,12 +250,11 @@ export function configureResolve({
     config,
     tsLinkedPackages,
 }: HelperOptions): webpack.ResolveOptions {
-    let alias: Record<string, string> = config.alias || {};
+    const alias: Record<string, string> = {...config.alias};
 
-    alias = Object.entries(alias).reduce<Record<string, string>>((result, [key, value]) => {
-        result[key] = path.resolve(paths.app, value);
-        return result;
-    }, {});
+    for (const [key, value] of Object.entries(alias)) {
+        alias[key] = path.resolve(paths.app, value);
+    }
 
     if (isEnvProduction && config.reactProfiling) {
         alias['react-dom$'] = 'react-dom/profiling';
@@ -887,7 +890,8 @@ function configurePlugins(options: HelperOptions): webpack.Configuration['plugin
     return plugins;
 }
 
-function configureOptimization({config}: HelperOptions): webpack.Configuration['optimization'] {
+type Optimization = NonNullable<webpack.Configuration['optimization']>;
+export function configureOptimization({config}: HelperOptions): Optimization {
     const configVendors = config.vendors ?? [];
 
     let vendorsList = [
@@ -912,7 +916,7 @@ function configureOptimization({config}: HelperOptions): webpack.Configuration['
 
     const useVendorsList = vendorsList.length > 0;
 
-    const optimization: webpack.Configuration['optimization'] = {
+    const optimization: Optimization = {
         splitChunks: {
             chunks: 'all',
             cacheGroups: {

diff --git a/src/common/webpack/storybook.ts b/src/common/webpack/storybook.ts
@@ -3,7 +3,7 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import MiniCSSExtractPlugin from 'mini-css-extract-plugin';
 import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin';
 
-import {WebpackMode, configureModuleRules, configureResolve} from './config';
+import {WebpackMode, configureModuleRules, configureOptimization, configureResolve} from './config';
 import {getProjectConfig, normalizeConfig} from '../config';
 import {isLibraryConfig} from '../models';
 
@@ -30,7 +30,11 @@ export async function configureServiceWebpackConfig(
         options = serviceConfig.client;
     }
 
-    const webpackConfig = await configureWebpackConfigForStorybook(mode, options);
+    const webpackConfig = await configureWebpackConfigForStorybook(
+        mode,
+        options,
+        storybookConfig.module?.rules,
+    );
 
     return {
         ...storybookConfig,
@@ -50,17 +54,27 @@ export async function configureServiceWebpackConfig(
                 ...(storybookConfig.resolve?.extensions ?? []),
                 ...(webpackConfig.resolve.extensions || []),
             ],
+            fallback: {
+                ...storybookConfig.resolve?.fallback,
+                ...webpackConfig.resolve.fallback,
+            },
         },
         module: {
             ...storybookConfig.module,
             rules: webpackConfig.module.rules,
         },
+        optimization: {
+            ...storybookConfig.optimization,
+            ...webpackConfig.optimization,
+        },
     };
 }
 
+type ModuleRule = NonNullable<NonNullable<Webpack.Configuration['module']>['rules']>[number];
 export async function configureWebpackConfigForStorybook(
     mode: Mode,
     userConfig: ClientConfig = {},
+    storybookModuleRules: ModuleRule[] = [],
 ) {
     const isEnvDevelopment = mode === WebpackMode.Dev;
     const isEnvProduction = mode === WebpackMode.Prod;
@@ -81,10 +95,19 @@ export async function configureWebpackConfigForStorybook(
 
     return {
         module: {
-            rules: configureModuleRules(helperOptions),
+            rules: configureModuleRules(
+                helperOptions,
+                storybookModuleRules.filter((rule) => rule !== '...') as Exclude<
+                    ModuleRule,
+                    '...'
+                >[],
+            ),
         },
         resolve: configureResolve(helperOptions),
         plugins: configurePlugins(helperOptions),
+        optimization: {
+            minimizer: configureOptimization(helperOptions).minimizer,
+        },
     };
 }
 
@@ -114,7 +137,7 @@ function configurePlugins({isEnvDevelopment, isEnvProduction, config}: HelperOpt
         );
     }
 
-    if (isEnvDevelopment) {
+    if (isEnvDevelopment && !config.disableReactRefresh) {
         plugins.push(new ReactRefreshWebpackPlugin());
     }