feat(Client): add react-refresh plugin options to config

README.md

@@ -205,7 +205,7 @@ With this `{rootDir}/src/ui/tsconfig.json`:
   - `options` (`import('https').ServerOptions`) — allow to provide your own certificate.
 - `watchOptions` — a set of options used to customize watch mode, [more](https://webpack.js.org/configuration/watch/#watchoptions)
   - `watchPackages` (`boolean`) - watch all changes in `node_modules`.
-- `disableReactRefresh` (`boolean`) — disable `react-refresh` in dev mode.
+- `reactRefresh` (`false | (options: ReactRefreshPluginOptions) => ReactRefreshPluginOptions`) — disable or configure `react-refresh` in dev mode, [more](https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/API.md#options)
 - `detectCircularDependencies` (`true | CircularDependenciesOptions`) - detect modules with circular dependencies, [more](https://github.com/aackerman/circular-dependency-plugin)
 - `lazyCompilation` (`true | LazyCompilationConfig`) — enable experimental [lazy compilation](https://webpack.js.org/configuration/experiments/#experimentslazycompilation) feature
   - `true` — enable feature

src/common/config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import * as path from 'node:path';
 import _ from 'lodash';
 
@@ -199,6 +200,9 @@ async function normalizeClientConfig(client: ClientConfig, mode?: 'dev' | 'build
     const normalizedConfig: NormalizedClientConfig = {
         ...client,
         forkTsChecker: client.disableForkTsChecker ? false : client.forkTsChecker,
+        reactRefresh: client.disableReactRefresh
+            ? false
+            : client.reactRefresh ?? ((options) => options),
         newJsxTransform: client.newJsxTransform ?? true,
         publicPathPrefix: client.publicPathPrefix || '',
         modules: client.modules && remapPaths(client.modules),

src/common/models/index.ts

@@ -19,6 +19,7 @@ import type {SentryWebpackPluginOptions} from '@sentry/webpack-plugin';
 import type {WebpackMode} from '../webpack/config';
 import type {UploadOptions} from '../s3-upload/upload';
 import type {TerserOptions} from 'terser-webpack-plugin';
+import type {ReactRefreshPluginOptions} from '@pmmmwh/react-refresh-webpack-plugin/types/lib/types';
 
 export interface Entities<T> {
     data: Record<string, T>;
@@ -141,9 +142,13 @@ export interface ClientConfig {
     statoscopeConfig?: Partial<StatoscopeOptions>;
     reactProfiling?: boolean;
     /**
-     *  Disable react-refresh in dev mode
+     * Disable react-refresh in dev mode
+     *
+     * @deprecated use `reactRefresh: false` instead
      */
     disableReactRefresh?: boolean;
+    /** Disable or configure react-refresh in dev mode */
+    reactRefresh?: false | ((options: ReactRefreshPluginOptions) => ReactRefreshPluginOptions);
     /**
      * Detect modules with circular dependencies
      */
@@ -238,6 +243,7 @@ export type NormalizedClientConfig = Omit<
     | 'lazyCompilation'
     | 'devServer'
     | 'disableForkTsChecker'
+    | 'disableReactRefresh'
 > & {
     publicPathPrefix: string;
     hiddenSourceMap: boolean;
@@ -257,6 +263,7 @@ export type NormalizedClientConfig = Omit<
         config: Babel.TransformOptions,
         options: {configType: `${WebpackMode}`},
     ) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
+    reactRefresh: NonNullable<ClientConfig['reactRefresh']>;
 };
 
 export type NormalizedServerConfig = Omit<ServerConfig, 'port' | 'inspect' | 'inspectBrk'> & {

src/common/webpack/config.ts

@@ -268,7 +268,7 @@ function createJavaScriptLoader({
     config,
 }: HelperOptions): webpack.RuleSetUseItem {
     const plugins: Babel.PluginItem[] = [];
-    if (isEnvDevelopment && !config.disableReactRefresh) {
+    if (isEnvDevelopment && config.reactRefresh !== false) {
         plugins.push([
             require.resolve('react-refresh/babel'),
             config.devServer?.webSocketPath
@@ -670,14 +670,16 @@ function configurePlugins(options: HelperOptions): webpack.Configuration['plugin
         );
     }
 
-    if (isEnvDevelopment && !config.disableReactRefresh) {
+    if (isEnvDevelopment && config.reactRefresh !== false) {
         const {webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`)} =
             config.devServer || {};
         plugins.push(
-            new ReactRefreshWebpackPlugin({
-                overlay: {sockPath: webSocketPath},
-                exclude: [/node_modules/, /\.worker\.[jt]sx?$/],
-            }),
+            new ReactRefreshWebpackPlugin(
+                config.reactRefresh({
+                    overlay: {sockPath: webSocketPath},
+                    exclude: [/node_modules/, /\.worker\.[jt]sx?$/],
+                }),
+            ),
         );
     }