From ce07a0ad6a2323fa3619a6e4de59fa792a988e21 Mon Sep 17 00:00:00 2001
From: clocher Zhong <jeoy_z@126.com>
Date: Thu, 3 Mar 2022 15:44:14 +0800
Subject: [PATCH] feat(config): hmr add disable port config (#6624)

Co-authored-by: zhongyi <zhongyi@kuaishou.com>
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 docs/config/index.md                           |  4 +++-
 packages/vite/src/client/client.ts             |  7 +++++--
 .../vite/src/node/plugins/clientInjections.ts  | 18 +++++++++---------
 packages/vite/src/node/server/hmr.ts           |  2 +-
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/docs/config/index.md b/docs/config/index.md
index d4ee7a96a6fa67..27234b01a9b4af 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -508,12 +508,14 @@ export default defineConfig(async ({ command, mode }) => {
 
 ### server.hmr
 
-- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`
+- **Type:** `boolean | { protocol?: string, host?: string, port?: number | false, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`
 
   Disable or configure HMR connection (in cases where the HMR websocket must use a different address from the http server).
 
   Set `server.hmr.overlay` to `false` to disable the server error overlay.
 
+  Set `server.hmr.port` to `false` when connecting to a domain without a port.
+
   `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server.
 
   When using `server.middlewareMode` or `server.https`, assigning `server.hmr.server` to your HTTP(S) server will process HMR connection requests through your server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port.
diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index 076e11e1e31aba..a9e8fb639de958 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -15,7 +15,7 @@ import '@vite/env'
 declare const __BASE__: string
 declare const __HMR_PROTOCOL__: string
 declare const __HMR_HOSTNAME__: string
-declare const __HMR_PORT__: string
+declare const __HMR_PORT__: string | false
 declare const __HMR_TIMEOUT__: number
 declare const __HMR_ENABLE_OVERLAY__: boolean
 
@@ -24,7 +24,10 @@ console.log('[vite] connecting...')
 // use server configuration, then fallback to inference
 const socketProtocol =
   __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
-const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
+const socketHost = __HMR_PORT__
+  ? `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
+  : `${__HMR_HOSTNAME__ || location.hostname}`
+
 const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
 const base = __BASE__ || '/'
 
diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts
index 1c9a0d393327c7..e86bec0826d72f 100644
--- a/packages/vite/src/node/plugins/clientInjections.ts
+++ b/packages/vite/src/node/plugins/clientInjections.ts
@@ -23,7 +23,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
         const protocol = options.protocol || null
         const timeout = options.timeout || 30000
         const overlay = options.overlay !== false
-        let port: number | string | undefined
+        let port: number | string | false | undefined
         if (isObject(config.server.hmr)) {
           port = config.server.hmr.clientPort || config.server.hmr.port
         }
@@ -41,14 +41,14 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
         }
 
         return code
-          .replace(`__MODE__`, JSON.stringify(config.mode))
-          .replace(`__BASE__`, JSON.stringify(config.base))
-          .replace(`__DEFINES__`, serializeDefine(config.define || {}))
-          .replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol))
-          .replace(`__HMR_HOSTNAME__`, JSON.stringify(host))
-          .replace(`__HMR_PORT__`, JSON.stringify(port))
-          .replace(`__HMR_TIMEOUT__`, JSON.stringify(timeout))
-          .replace(`__HMR_ENABLE_OVERLAY__`, JSON.stringify(overlay))
+          .replace(/__MODE__/g, JSON.stringify(config.mode))
+          .replace(/__BASE__/g, JSON.stringify(config.base))
+          .replace(/__DEFINES__/g, serializeDefine(config.define || {}))
+          .replace(/__HMR_PROTOCOL__/g, JSON.stringify(protocol))
+          .replace(/__HMR_HOSTNAME__/g, JSON.stringify(host))
+          .replace(/__HMR_PORT__/g, JSON.stringify(port))
+          .replace(/__HMR_TIMEOUT__/g, JSON.stringify(timeout))
+          .replace(/__HMR_ENABLE_OVERLAY__/g, JSON.stringify(overlay))
       } else if (!options?.ssr && code.includes('process.env.NODE_ENV')) {
         // replace process.env.NODE_ENV instead of defining a global
         // for it to avoid shimming a `process` object during dev,
diff --git a/packages/vite/src/node/server/hmr.ts b/packages/vite/src/node/server/hmr.ts
index 3e5be4cf599c03..eae184a64f4773 100644
--- a/packages/vite/src/node/server/hmr.ts
+++ b/packages/vite/src/node/server/hmr.ts
@@ -18,7 +18,7 @@ const normalizedClientDir = normalizePath(CLIENT_DIR)
 export interface HmrOptions {
   protocol?: string
   host?: string
-  port?: number
+  port?: number | false
   clientPort?: number
   path?: string
   timeout?: number