automatically configure wsPort in html file (#1147)

FredKSchott · Oct 14, 2020 · a7991a8 · a7991a8 · vercel · Oct 14, 2020
1 parent 33833ba
commit a7991a8
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 12 deletions.
diff --git 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
@@ -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 `<!DOCTYPE html>` is assumed to be a code snippet/partial.
   const isFullPage = code.startsWith('<!DOCTYPE html>');
   if (hmr && isFullPage) {
-    let hmrScript = `<script type="module" integrity="${SRI_CLIENT_HMR_SNOWPACK}" src="${getMetaUrlPath(
+    let hmrScript = ``;
+    if (hmrPort) {
+      hmrScript += `<script type="text/javascript">window.HMR_WEBSOCKET_PORT=${hmrPort}</script>\n`;
+    }
+    hmrScript += `<script type="module" integrity="${SRI_CLIENT_HMR_SNOWPACK}" src="${getMetaUrlPath(
       'hmr-client.js',
       config,
     )}"></script>`;

diff --git 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
@@ -581,6 +581,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',
@@ -1010,7 +1011,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
@@ -49,7 +49,7 @@ const DEFAULT_CONFIG: Partial<SnowpackConfig> = {
     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
@@ -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<HMRMessage> = 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
@@ -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
@@ -10,7 +10,7 @@ exports[`snowpack dev smoke: html 1`] = `
     <meta name=\\"description\\" content=\\"Web site created using create-snowpack-app\\" />
     <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/index.css\\" />
     <title>Snowpack App</title>
-  <script type=\\"module\\" integrity=\\"sha384-SyNG1azQc4Pnqnk9u4TrKAXskp47aq9Zj8HDof3MZ57tq1p+rSl5recyqsc08CcH\\" src=\\"/__snowpack__/hmr-client.js\\"></script><script type=\\"module\\" integrity=\\"sha384-ZHQS30EqaFTVzyH5XP0i+sVAiN0+DiOd1AikxE6LsJbQaA40xjdaXluCLs/7hPlM\\" src=\\"/__snowpack__/hmr-error-overlay.js\\"></script></head>
+  <script type=\\"module\\" integrity=\\"sha384-Z1OPSs1KV1TOmQHeoGF8XyUQcMaBnM0p0xip/dmSSpZWySqHrGOuQ5R4sSJgwPrM\\" src=\\"/__snowpack__/hmr-client.js\\"></script><script type=\\"module\\" integrity=\\"sha384-ZHQS30EqaFTVzyH5XP0i+sVAiN0+DiOd1AikxE6LsJbQaA40xjdaXluCLs/7hPlM\\" src=\\"/__snowpack__/hmr-error-overlay.js\\"></script></head>
   <body>
     <img id=\\"img\\" src=\\"/logo.svg\\" />
     <canvas id=\\"canvas\\"></canvas>