From 42d560d5158404fc2b1ae2dfccc2582e4c941b42 Mon Sep 17 00:00:00 2001 From: Chen Gang Date: Tue, 29 Sep 2020 11:36:21 +0800 Subject: [PATCH] automatically configure wsPort in html file --- snowpack/assets/hmr-client.js | 9 ++++++--- snowpack/src/build/build-import-proxy.ts | 8 +++++++- snowpack/src/commands/build.ts | 3 ++- snowpack/src/commands/dev.ts | 7 ++++++- snowpack/src/config.ts | 2 +- snowpack/src/hmr-server-engine.ts | 9 ++++++--- snowpack/src/types/snowpack.ts | 2 +- test-dev/__snapshots__/dev.test.ts.snap | 2 +- 8 files changed, 30 insertions(+), 12 deletions(-) diff --git a/snowpack/assets/hmr-client.js b/snowpack/assets/hmr-client.js index 008ca3cf60..9a9d402151 100644 --- a/snowpack/assets/hmr-client.js +++ b/snowpack/assets/hmr-client.js @@ -34,9 +34,12 @@ function sendSocketMessage(msg) { _sendSocketMessage(msg); } } -const socketURL = - (typeof window !== 'undefined' && window.HMR_WEBSOCKET_URL) || - (location.protocol === 'http:' ? 'ws://' : 'wss://') + location.host + '/'; +let socketURL = typeof window !== 'undefined' && window.HMR_WEBSOCKET_URL; +if (!socketURL) { + const socketHost = typeof window !== 'undefined' && window.HMR_WEBSOCKET_PORT ? + `${location.hostname}:${window.HMR_WEBSOCKET_PORT}` : location.host + socketURL = (location.protocol === 'http:' ? 'ws://' : 'wss://') + socketHost + '/'; +} const socket = new WebSocket(socketURL, 'esm-hmr'); socket.addEventListener('open', () => { diff --git a/snowpack/src/build/build-import-proxy.ts b/snowpack/src/build/build-import-proxy.ts index d098440ac8..1b27b85e35 100644 --- a/snowpack/src/build/build-import-proxy.ts +++ b/snowpack/src/build/build-import-proxy.ts @@ -54,12 +54,14 @@ export function wrapImportMeta({ export function wrapHtmlResponse({ code, hmr, + hmrPort, isDev, config, mode, }: { code: string; hmr: boolean; + hmrPort?: number; isDev: boolean; config: SnowpackConfig; mode: 'development' | 'production'; @@ -88,7 +90,11 @@ export function wrapHtmlResponse({ // Any code not containing `` is assumed to be a code snippet/partial. const isFullPage = code.startsWith(''); if (hmr && isFullPage) { - let hmrScript = `\n`; + } + hmrScript += ``; diff --git a/snowpack/src/commands/build.ts b/snowpack/src/commands/build.ts index 33e1acbf7a..9b7b3e4f4a 100644 --- a/snowpack/src/commands/build.ts +++ b/snowpack/src/commands/build.ts @@ -156,6 +156,7 @@ class FileBuilder { code = wrapHtmlResponse({ code, hmr: getIsHmrEnabled(this.config), + hmrPort: hmrEngine ? hmrEngine.port : undefined, isDev: false, config: this.config, mode: 'production', @@ -474,7 +475,7 @@ export async function command(commandOptions: CommandOptions) { if (hmrEngine) { logger.info( `[HMR] WebSocket URL available at ${colors.cyan( - `ws://localhost:${config.devOptions.hmrPort}`, + `ws://localhost:${hmrEngine.port}`, )}`, ); } diff --git a/snowpack/src/commands/dev.ts b/snowpack/src/commands/dev.ts index dd6b834d2b..3eb6bb6900 100644 --- a/snowpack/src/commands/dev.ts +++ b/snowpack/src/commands/dev.ts @@ -572,6 +572,7 @@ export async function startServer(commandOptions: CommandOptions) { code = wrapHtmlResponse({ code: code as string, hmr: isHmr, + hmrPort: hmrEngine.port !== port ? hmrEngine.port : undefined, isDev: true, config, mode: 'development', @@ -989,7 +990,11 @@ export async function startServer(commandOptions: CommandOptions) { .listen(port); const {hmrDelay} = config.devOptions; - const hmrEngine = new EsmHmrEngine({server, delay: hmrDelay}); + const hmrEngineOptions = Object.assign( + {delay: hmrDelay}, + config.devOptions.hmrPort ? {port: config.devOptions.hmrPort} : {server, port}, + ); + const hmrEngine = new EsmHmrEngine(hmrEngineOptions); onProcessExit(() => { hmrEngine.disconnectAllClients(); }); diff --git a/snowpack/src/config.ts b/snowpack/src/config.ts index 88b787ab9f..269958e0d0 100644 --- a/snowpack/src/config.ts +++ b/snowpack/src/config.ts @@ -49,7 +49,7 @@ const DEFAULT_CONFIG: Partial = { output: 'dashboard', fallback: 'index.html', hmrDelay: 0, - hmrPort: 12321, + hmrPort: undefined, hmrErrorOverlay: true, }, buildOptions: { diff --git a/snowpack/src/hmr-server-engine.ts b/snowpack/src/hmr-server-engine.ts index 5c17b8ac6d..f3dac9a3be 100644 --- a/snowpack/src/hmr-server-engine.ts +++ b/snowpack/src/hmr-server-engine.ts @@ -24,6 +24,7 @@ type HMRMessage = }; const DEFAULT_CONNECT_DELAY = 2000; +const DEFAULT_PORT = 12321; interface EsmHmrEngineOptionsCommon { delay?: number; @@ -32,10 +33,10 @@ interface EsmHmrEngineOptionsCommon { type EsmHmrEngineOptions = ( | { server: http.Server | http2.Http2Server; - port?: undefined; + port: number; } | { - port: number; + port?: number; server?: undefined; } ) & @@ -49,11 +50,13 @@ export class EsmHmrEngine { private currentBatch: HMRMessage[] = []; private currentBatchTimeout: NodeJS.Timer | null = null; private cachedConnectErrors: Set = new Set(); + readonly port: number = 0; constructor(options: EsmHmrEngineOptions) { + this.port = options.port || DEFAULT_PORT; const wss = options.server ? new WebSocket.Server({noServer: true}) - : new WebSocket.Server({port: options.port}); + : new WebSocket.Server({port: this.port}); if (options.delay) { this.delay = options.delay; } diff --git a/snowpack/src/types/snowpack.ts b/snowpack/src/types/snowpack.ts index dc92b21b14..2673355c4f 100644 --- a/snowpack/src/types/snowpack.ts +++ b/snowpack/src/types/snowpack.ts @@ -141,7 +141,7 @@ export interface SnowpackConfig { output: 'stream' | 'dashboard'; hmr?: boolean; hmrDelay: number; - hmrPort: number; + hmrPort: number | undefined; hmrErrorOverlay: boolean; }; installOptions: InstallOptions; diff --git a/test-dev/__snapshots__/dev.test.ts.snap b/test-dev/__snapshots__/dev.test.ts.snap index 7e33e80ef5..86fbc788b4 100644 --- a/test-dev/__snapshots__/dev.test.ts.snap +++ b/test-dev/__snapshots__/dev.test.ts.snap @@ -10,7 +10,7 @@ exports[`snowpack dev smoke: html 1`] = ` Snowpack App - +