feat(hmr): vitejs#3093 add config.server.hmr.runtimePort option

Sociosarbis · Apr 23, 2021 · 162f090 · 162f090
1 parent 5fe9a69
commit 162f090
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/docs/config/index.md b/docs/config/index.md
@@ -415,12 +415,14 @@ export default async ({ command, mode }) => {
 
 ### server.hmr
 
-- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean }`
+- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, runtimePort?: string }`
 
   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.runtimePort` to any runtime code which interpreted as a port. e.g. `'window.location.port'` and `(() => window.location.port)()`
+
 ### server.watch
 
 - **Type:** `object`

diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts
@@ -24,20 +24,23 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
         const timeout = options.timeout || 30000
         const overlay = options.overlay !== false
         let port
-        if (config.server.middlewareMode) {
-          port = String(
-            (typeof config.server.hmr === 'object' && config.server.hmr.port) ||
-              24678
-          )
-        } else {
-          port = String(options.port || config.server.port!)
-        }
-        let hmrBase = config.base
-        if (options.path) {
-          hmrBase = path.posix.join(hmrBase, options.path)
-        }
-        if (hmrBase !== '/') {
-          port = path.posix.normalize(`${port}${hmrBase}`)
+        if (!options.runtimePort) {
+          if (config.server.middlewareMode) {
+            port = String(
+              (typeof config.server.hmr === 'object' &&
+                config.server.hmr.port) ||
+                24678
+            )
+          } else {
+            port = String(options.port || config.server.port!)
+          }
+          let hmrBase = config.base
+          if (options.path) {
+            hmrBase = path.posix.join(hmrBase, options.path)
+          }
+          if (hmrBase !== '/') {
+            port = path.posix.normalize(`${port}${hmrBase}`)
+          }
         }
 
         return code
@@ -47,7 +50,10 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
           .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_PORT__`,
+            options.runtimePort ? options.runtimePort : JSON.stringify(port)
+          )
           .replace(`__HMR_TIMEOUT__`, JSON.stringify(timeout))
           .replace(`__HMR_ENABLE_OVERLAY__`, JSON.stringify(overlay))
       } else if (code.includes('process.env.NODE_ENV')) {

diff --git a/packages/vite/src/node/server/hmr.ts b/packages/vite/src/node/server/hmr.ts
@@ -23,6 +23,7 @@ export interface HmrOptions {
   timeout?: number
   overlay?: boolean
   server?: Server
+  runtimePort?: string
 }
 
 export interface HmrContext {