feat(service): allow override babel transform options

README.md

@@ -192,7 +192,8 @@ With this `{rootDir}/src/ui/tsconfig.json`:
 - `forkTsCheker` (`false | ForkTsCheckerWebpackPluginOptions`) - config for ForkTsCheckerWebpackPlugin [more](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options). If `false`, ForkTsCheckerWebpackPlugin will be disabled.
 - `cache` (`boolean | FileCacheOptions | MemoryCacheOptions`) — Cache the generated webpack modules and chunks to improve build speed. [more](https://webpack.js.org/configuration/cache/)
 - `babelCacheDirectory` (`boolean | string`) — Set directory for babel-loader cache (`default: node_modules/.cache/babel-loader``)
-- `webpack` (`(config: webpack.Configuration, options: {configType: 'development' | 'production'}) => webpack.Configuration | Promise<webpack.Configuration>`) - Allow override the default configuration
+- `babel` (`(config: babel.TransformOptions, options: {configType: 'development' | 'production'}) => babel.TransformOptions | Promise<babel.TransformOptions>`) - Allow override the default babel transform options.
+- `webpack` (`(config: webpack.Configuration, options: {configType: 'development' | 'production'}) => webpack.Configuration | Promise<webpack.Configuration>`) - Allow override the default configuration.
 
 ##### Dev build
 

src/common/config.ts

@@ -177,15 +177,16 @@
 }
 
 async function normalizeClientConfig(client: ClientConfig, mode?: 'dev' | 'build' | string) {
     client.newJsxTransform = client.newJsxTransform ?? true;
     client.publicPathPrefix = client.publicPathPrefix || '';
     client.modules = client.modules && remapPaths(client.modules);
     client.includes = client.includes && remapPaths(client.includes);
     client.images = client.images && remapPaths(client.images);
     client.hiddenSourceMap = client.hiddenSourceMap ?? true;
     client.svgr = client.svgr ?? {};
     client.entryFilter = client.entryFilter && splitPaths(client.entryFilter);
     client.webpack = typeof client.webpack === 'function' ? client.webpack : (config) => config;
+    client.babel = typeof client.babel === 'function' ? client.babel : (config) => config;
 
     if (mode === 'dev') {
         if (client.lazyCompilation) {

src/common/models/index.ts

@@ -9,6 +9,7 @@ import type {
     MemoryCacheOptions,
     ResolveOptions,
 } from 'webpack';
+import type * as Babel from '@babel/core';
 import type {ServerConfiguration} from 'webpack-dev-server';
 import type {Options as CircularDependenciesOptions} from 'circular-dependency-plugin';
 import type {Config as SvgrConfig} from '@svgr/core';
@@ -192,6 +193,13 @@ export interface ClientConfig {
         config: Configuration,
         options: {configType: `${WebpackMode}`},
     ) => Configuration | Promise<Configuration>;
+    /**
+     * Modify or return a custom Babel config.
+     */
+    babel?: (
+        config: Babel.TransformOptions,
+        options: {configType: `${WebpackMode}`},
+    ) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
 }
 
 interface CdnUploadConfig {
@@ -239,6 +247,10 @@ export type NormalizedClientConfig = Omit<
         options: {configType: `${WebpackMode}`},
     ) => Configuration | Promise<Configuration>;
     debugWebpack?: boolean;
+    babel: (
+        config: Babel.TransformOptions,
+        options: {configType: `${WebpackMode}`},
+    ) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
 };
 
 export type NormalizedServerConfig = Omit<ServerConfig, 'serverPort'> & {

src/common/webpack/config.ts

@@ -13,10 +13,12 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import MomentTimezoneDataPlugin from 'moment-timezone-data-webpack-plugin';
 import StatoscopeWebpackPlugin from '@statoscope/webpack-plugin';
 import CircularDependencyPlugin from 'circular-dependency-plugin';
+import {sentryWebpackPlugin} from '@sentry/webpack-plugin';
+
 import type TerserWebpackPlugin from 'terser-webpack-plugin';
 import type * as Lightningcss from 'lightningcss';
 import type CssMinimizerWebpackPlugin from 'css-minimizer-webpack-plugin';
-import {sentryWebpackPlugin} from '@sentry/webpack-plugin';
+import type * as Babel from '@babel/core';
 
 import paths from '../paths';
 import tempData from '../tempData';
@@ -36,6 +38,7 @@ export interface HelperOptions {
     logger?: Logger;
     isEnvDevelopment: boolean;
     isEnvProduction: boolean;
+    configType: `${WebpackMode}`;
     updateIncludes?: (
         values: string[],
         options?: {includeRootAssets?: boolean; includeRootStyles?: boolean},
@@ -65,6 +68,7 @@ export async function webpackConfigFactory(
         isEnvProduction,
         updateIncludes,
         tsLinkedPackages,
+        configType: webpackMode,
     };
 
     let webpackConfig: webpack.Configuration = {
@@ -325,36 +329,48 @@ function configureOutput({
 function createJavaScriptLoader({
     isEnvProduction,
     isEnvDevelopment,
+    configType,
     config,
 }: HelperOptions): webpack.RuleSetUseItem {
+    const plugins: Babel.PluginItem[] = [];
+    if (isEnvDevelopment && !config.disableReactRefresh) {
+        plugins.push([
+            require.resolve('react-refresh/babel'),
+            config.devServer?.webSocketPath
+                ? {
+                      overlay: {
+                          sockPath: config.devServer.webSocketPath,
+                      },
+                  }
+                : undefined,
+        ]);
+    }
+    if (isEnvProduction) {
+        plugins.push([
+            require.resolve('babel-plugin-import'),
+            {libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false},
+        ]);
+    }
+
+    const transformOptions = config.babel(
+        {
+            presets: [babelPreset(config)],
+            plugins,
+        },
+        {configType},
+    );
+
     return {
         loader: require.resolve('babel-loader'),
         options: {
+            sourceType: 'unambiguous',
+            ...transformOptions,
             babelrc: false,
             configFile: false,
-            presets: [babelPreset(config)],
-            plugins: [
-                isEnvDevelopment &&
-                    !config.disableReactRefresh && [
-                        require.resolve('react-refresh/babel'),
-                        config.devServer?.webSocketPath
-                            ? {
-                                  overlay: {
-                                      sockPath: config.devServer.webSocketPath,
-                                  },
-                              }
-                            : undefined,
-                    ],
-                isEnvProduction && [
-                    require.resolve('babel-plugin-import'),
-                    {libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false},
-                ],
-            ].filter(Boolean),
-            sourceType: 'unambiguous',
-            cacheDirectory: config.babelCacheDirectory ? config.babelCacheDirectory : true,
-            cacheCompression: isEnvProduction,
             compact: isEnvProduction,
-            sourceMap: !config.disableSourceMapGeneration,
+            sourceMaps: !config.disableSourceMapGeneration,
+            cacheCompression: isEnvProduction,
+            cacheDirectory: config.babelCacheDirectory ? config.babelCacheDirectory : true,
         },
     };
 }
@@ -415,21 +431,13 @@ function createWorkerRule(options: HelperOptions): webpack.RuleSetRule {
     };
 }
 
-function createSassStylesRule({
-    isEnvDevelopment,
-    isEnvProduction,
-    config,
-}: HelperOptions): webpack.RuleSetRule {
-    const loaders = getCssLoaders({
-        isEnvDevelopment,
-        isEnvProduction,
-        config,
-    });
+function createSassStylesRule(options: HelperOptions): webpack.RuleSetRule {
+    const loaders = getCssLoaders(options);
 
     loaders.push({
         loader: require.resolve('resolve-url-loader'),
         options: {
-            sourceMap: !config.disableSourceMapGeneration,
+            sourceMap: !options.config.disableSourceMapGeneration,
         },
     });
 
@@ -445,24 +453,16 @@ function createSassStylesRule({
 
     return {
         test: /\.scss$/,
-        sideEffects: isEnvProduction ? true : undefined,
+        sideEffects: options.isEnvProduction ? true : undefined,
         use: loaders,
     };
 }
 
-function createStylesRule({
-    isEnvDevelopment,
-    isEnvProduction,
-    config,
-}: HelperOptions): webpack.RuleSetRule {
-    const loaders = getCssLoaders({
-        isEnvDevelopment,
-        isEnvProduction,
-        config,
-    });
+function createStylesRule(options: HelperOptions): webpack.RuleSetRule {
+    const loaders = getCssLoaders(options);
     return {
         test: /\.css$/,
-        sideEffects: isEnvProduction ? true : undefined,
+        sideEffects: options.isEnvProduction ? true : undefined,
         use: loaders,
     };
 }

src/common/webpack/storybook.ts

@@ -76,6 +76,7 @@ export async function configureWebpackConfigForStorybook(
         isEnvDevelopment,
         isEnvProduction,
         config: config.client,
+        configType: mode,
     };
 
     return {

src/index.ts

@@ -5,4 +5,6 @@ export {
 export * from './common/s3-upload';
 export {createTransformPathsToLocalModules} from './common/typescript/transformers';
 export {defineConfig} from './common/models';
+export {babelPreset} from './common/babel';
+
 export type {ProjectConfig, ServiceConfig, LibraryConfig, ProjectFileConfig} from './common/models';