From df0754e2b0a308cbea9736110686b909b5e198ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=90=89=E6=98=93?= <liuxy0551@qq.com>
Date: Wed, 9 Oct 2024 15:07:09 +0800
Subject: [PATCH] feat: #169 ko.config.js support devServer client (#170)

* feat: #169 ko.config.js support devServer client

* docs(changeset): ko.config.js support devServer client
---
 .changeset/spicy-fireants-tell.md             |  5 ++++
 packages/ko/src/actions/dev.ts                | 23 ++++++++++++-------
 packages/ko/src/types.ts                      |  3 +++
 website/docs/configuration.md                 |  3 +++
 .../current/configuration.md                  |  1 +
 5 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/spicy-fireants-tell.md

diff --git a/.changeset/spicy-fireants-tell.md b/.changeset/spicy-fireants-tell.md
new file mode 100644
index 00000000..e8a46c83
--- /dev/null
+++ b/.changeset/spicy-fireants-tell.md
@@ -0,0 +1,5 @@
+---
+'ko': patch
+---
+
+ko.config.js support devServer client
diff --git a/packages/ko/src/actions/dev.ts b/packages/ko/src/actions/dev.ts
index 741ac7e3..2ff564fc 100644
--- a/packages/ko/src/actions/dev.ts
+++ b/packages/ko/src/actions/dev.ts
@@ -17,12 +17,26 @@ class Dev extends ActionFactory {
 
   private get devServerConfig(): DevServerConfiguration {
     const { serve, publicPath } = this.service.config;
-    const { host, port, proxy, staticPath, historyApiFallback = false } = serve;
+    const {
+      host,
+      port,
+      proxy,
+      client = {
+        overlay: {
+          errors: true,
+          warnings: false,
+          runtimeErrors: true,
+        },
+      },
+      staticPath,
+      historyApiFallback = false,
+    } = serve;
     return {
       port,
       host,
       hot: true,
       proxy,
+      client,
       static: {
         directory: staticPath,
         watch: true,
@@ -30,13 +44,6 @@ class Dev extends ActionFactory {
       },
       setupExitSignals: false,
       allowedHosts: 'all',
-      client: {
-        overlay: {
-          errors: true,
-          warnings: false,
-          runtimeErrors: true,
-        },
-      },
       historyApiFallback,
     };
   }
diff --git a/packages/ko/src/types.ts b/packages/ko/src/types.ts
index 3f6b6ef2..24526852 100644
--- a/packages/ko/src/types.ts
+++ b/packages/ko/src/types.ts
@@ -2,6 +2,7 @@ import { Pattern } from 'copy-webpack-plugin';
 import { Plugin } from 'postcss';
 import { IKeys, IOpts } from 'ko-lints';
 import { IOpts as AutoPolyfillsWebpackPluginOptions } from '@dtinsight/auto-polyfills-webpack-plugin';
+import { ClientConfiguration } from 'webpack-dev-server';
 
 export type IOptions = {
   //common configs
@@ -86,6 +87,7 @@ export type IOptions = {
   // dev, or serve configs
   /**
    * Options for the development server.
+   * Docs url: https://webpack.js.org/configuration/dev-server/
    * @param {{proxy?: Record<string, any>, host: string, port: number, staticPath?: string, historyApiFallback?: any, compilationSuccessInfo?: { messages: string[]; notes?: string[] }}}
    */
   serve: {
@@ -93,6 +95,7 @@ export type IOptions = {
     host: string;
     port: number;
     staticPath?: string;
+    client?: boolean | ClientConfiguration | undefined;
     historyApiFallback?: any;
     compilationSuccessInfo?: { messages: string[]; notes?: string[] };
   };
diff --git a/website/docs/configuration.md b/website/docs/configuration.md
index b2a4d6e5..2895bd1b 100644
--- a/website/docs/configuration.md
+++ b/website/docs/configuration.md
@@ -6,6 +6,8 @@ title: Configuration
 You can custom ko's action via **ko.config.js**, below are supported configurations:
 
 ``` typescript
+import { ClientConfiguration } from 'webpack-dev-server';
+
 export type IOptions = {
   //common configs
   cwd: string; //current working directory
@@ -32,6 +34,7 @@ export type IOptions = {
     host: string; // host of dev server
     port: number; // port of dev server
     staticPath?: string; // static path that will be watch of dev server
+    client?: boolean | ClientConfiguration | undefined; // client of dev server
     compilationSuccessInfo?: { messages: string[]; notes?: string[] }; // log after successful compilation, as same as friendly-errors-webpack-plugin
   };
   // experimental features
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/configuration.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/configuration.md
index 0ffdb853..bf3bdfa5 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/configuration.md
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/configuration.md
@@ -32,6 +32,7 @@ export type IOptions = {
     host: string; // 开发服务器的主机名
     port: number; // 开发服务器的端口
     staticPath?: string; // 监视的资源路径
+    client?: boolean | ClientConfiguration | undefined; // 日志、错误捕获等配置项
     compilationSuccessInfo?: { messages: string[]; notes?: string[] }; // 成功编译后的日志，与 friendly-errors-webpack-plugin 相同
   };
   // 实验性功能