From f1a0c219374290f8a9e6f4542cdbf2761b391308 Mon Sep 17 00:00:00 2001
From: Daniels L <dannlee@gmail.com>
Date: Thu, 6 Oct 2022 00:23:12 -0700
Subject: [PATCH] fix: ensure devserver client options are configurable (#2034)

* fix: ensure devserver client options are configurable

When a custom `webpackConfig.devServer.client` option is set, they are
currently being overridden by the `baseConfig.client` field.

Ensure that field is extendible by consumers while also ensuring the
base config values stay fixed.

https://github.com/styleguidist/react-styleguidist/issues/2033

* fix: ensure all devServer options are overridable; add tests
---
 src/scripts/__tests__/create-server.spec.ts | 44 +++++++++++++++++++++
 src/scripts/create-server.ts                |  7 ++--
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/scripts/__tests__/create-server.spec.ts b/src/scripts/__tests__/create-server.spec.ts
index 76b0c63e4..4b1c91494 100644
--- a/src/scripts/__tests__/create-server.spec.ts
+++ b/src/scripts/__tests__/create-server.spec.ts
@@ -61,3 +61,47 @@ test('createServer should return an object containing a development Webpack comp
 	expect(output.chunkFilename).toBe('build/[name].js');
 	done();
 });
+
+test('createServer should apply some base config options', () => {
+	process.chdir('test/apps/basic');
+	const config = {
+		...getConfig(),
+		serverHost: 'localhost',
+		serverPort: 6000,
+	};
+	const result = createServer(config, 'development');
+	expect(result).toBeTruthy();
+	expect(result.compiler).toBeTruthy();
+	expect(result.compiler.options.devServer).toMatchObject({
+		host: 'localhost',
+		port: 6000,
+		compress: true,
+		hot: true,
+		client: { logging: 'none' },
+		webSocketServer: 'ws',
+	});
+});
+
+test('createServer should allow overriding default devServer options', () => {
+	process.chdir('test/apps/basic');
+	const config = {
+		...getConfig(),
+		webpackConfig: {
+			devServer: {
+				client: {
+					overlay: false,
+					progress: true,
+				},
+			},
+		},
+	};
+	const result = createServer(config, 'development');
+	expect(result).toBeTruthy();
+	expect(result.compiler).toBeTruthy();
+	expect(result.compiler.options.devServer).toMatchObject({
+		client: {
+			overlay: false,
+			progress: true,
+		},
+	});
+});
diff --git a/src/scripts/create-server.ts b/src/scripts/create-server.ts
index 814f9b010..3b4272c0f 100644
--- a/src/scripts/create-server.ts
+++ b/src/scripts/create-server.ts
@@ -33,13 +33,14 @@ export default function createServer(
 		},
 	};
 
-	const webpackDevServerConfig: Configuration = {
-		...webpackConfig.devServer,
+	// Allow custom devServer options to override base config.
+	webpackConfig.devServer = {
 		...baseConfig,
+		...webpackConfig.devServer,
 	};
 
 	const compiler = webpack(webpackConfig);
-	const devServer = new WebpackDevServer(webpackDevServerConfig, compiler);
+	const devServer = new WebpackDevServer(webpackConfig.devServer, compiler);
 
 	// User defined customizations
 	if (config.configureServer) {