feat: support dev.client configuration (#5678)

.changeset/weak-rings-tie.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/uni-builder': patch
+---
+
+feat: support dev.client configuration
+
+feat: 支持 dev.client 配置项

packages/cli/uni-builder/src/shared/devServer.ts

@@ -69,6 +69,7 @@ export const transformToRsbuildServerOptions = (
       client: {
         path: '/webpack-hmr',
         overlay: false,
+        ...(devConfig.client || {}),
       },
     },
     options: devServer,

packages/document/builder-doc/docs/en/config/tools/devServer.md

@@ -76,6 +76,10 @@ export default {
 
 #### client
 
+:::warning
+**Deprecated**: This configuration is deprecated, please use [dev.client](https://modernjs.dev/en/configure/app/dev/client) instead.
+:::
+
 - **Type:**
 
 ```ts

packages/document/builder-doc/docs/zh/config/tools/devServer.md

@@ -76,6 +76,10 @@ export default {
 
 #### client
 
+:::warning
+**Deprecated**：该配置已废弃，请使用 [dev.client](https://modernjs.dev/configure/app/dev/client) 代替。
+:::
+
 - **类型：**
 
 ```ts

packages/document/main-doc/docs/en/configure/app/dev/client.mdx

@@ -0,0 +1,42 @@
+---
+sidebar_label: client
+---
+
+# dev.client
+
+Configure the client code injected by Modern.js during the development process. This can be used to set the WebSocket URL for HMR.
+
+- **Type:**
+
+```ts
+type Client = {
+  /** Specify the protocol name for the WebSocket request */
+  protocol?: 'ws' | 'wss';
+  /** Specify the path for the WebSocket request */
+  path?: string;
+  /** Specify the port number for the WebSocket request */
+  port?: string;
+  /** Specify the host for the WebSocket request */
+  host?: string;
+  /**
+   * Shows overlay in the browser when there are compiler errors
+   * This feature requires the current browser version to support [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+   */
+  overlay?: boolean;
+};
+```
+
+- **Default:**
+
+```js
+const defaultConfig = {
+  path: '/webpack-hmr',
+  // Defaults to the port number of the dev server
+  port: '',
+  host: location.hostname,
+  protocol: location.protocol === 'https:' ? 'wss' : 'ws',
+  overlay: false,
+};
+```
+
+For detailed usage, please refer to [Rsbuild - dev.client](https://rsbuild.dev/config/dev/client).

packages/document/main-doc/docs/zh/configure/app/dev/client.mdx

@@ -0,0 +1,42 @@
+---
+sidebar_label: client
+---
+
+# dev.client
+
+配置 Modern.js 在开发过程中注入的 client 代码，可以用于设置热更新对应的 WebSocket URL。
+
+- **类型：**
+
+```ts
+type Client = {
+  /** 指定 WebSocket 请求的协议名称 */
+  protocol?: 'ws' | 'wss';
+  /** 指定 WebSocket 请求的路径 */
+  path?: string;
+  /** 指定 WebSocket 请求的端口号 */
+  port?: string;
+  /** 指定 WebSocket 请求的 host */
+  host?: string;
+  /**
+   * 当出现编译错误时，在浏览器中显示遮盖
+   * 该功能需要当前浏览器版本支持 [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+   */
+  overlay?: boolean;
+};
+```
+
+- **默认值：**
+
+```js
+const defaultConfig = {
+  path: '/webpack-hmr',
+  // 默认为开发服务器的端口号
+  port: '',
+  host: location.hostname,
+  protocol: location.protocol === 'https:' ? 'wss' : 'ws',
+  overlay: true,
+};
+```
+
+详细用法可参考 [Rsbuild - dev.client](https://rsbuild.dev/zh/config/dev/client)。