Allow creating dev server without opening port.

snowpack/src/commands/build.ts

@@ -423,7 +423,9 @@ export async function build(commandOptions: CommandOptions): Promise<SnowpackBui
       path.resolve(internalFilesBuildLoc, 'hmr-error-overlay.js'),
       HMR_OVERLAY_CODE,
     );
-    hmrEngine = new EsmHmrEngine({port: config.devOptions.hmrPort});
+    hmrEngine = new EsmHmrEngine({
+      port: config.devOptions.hmrPort,
+    });
   }
 
   logger.info(colors.yellow('! building source files...'));

snowpack/src/commands/dev.ts

@@ -53,7 +53,7 @@ import {
 import {buildFile as _buildFile, getInputsFromOutput} from '../build/build-pipeline';
 import {getUrlForFile} from '../build/file-urls';
 import {createImportResolver} from '../build/import-resolver';
-import {EsmHmrEngine} from '../hmr-server-engine';
+import {EsmHmrEngine, NoopHmrEngine} from '../hmr-server-engine';
 import {logger} from '../logger';
 import {
   scanCodeImportsExports,
@@ -1165,29 +1165,63 @@ export async function startServer(commandOptions: CommandOptions): Promise<Snowp
     return http.createServer(responseHandler as http.RequestListener);
   };
 
-  const server = createServer(async (req, res) => {
-    // Attach a request logger.
-    res.on('finish', () => {
-      const {method, url} = req;
-      const {statusCode} = res;
-      logger.debug(`[${statusCode}] ${method} ${url}`);
-    });
-    // Otherwise, pass requests directly to Snowpack's request handler.
-    handleRequest(req, res);
-  })
-    .on('error', (err: Error) => {
-      logger.error(colors.red(`  ✘ Failed to start server at port ${colors.bold(port)}.`), err);
-      server.close();
-      process.exit(1);
+  function createServers() {
+    let webServer: http.Server | http2.Http2SecureServer | undefined;
+    if (config.devOptions.server !== false) {
+      webServer = createServer(async (req, res) => {
+        // Attach a request logger.
+        res.on('finish', () => {
+          const {method, url} = req;
+          const {statusCode} = res;
+          logger.debug(`[${statusCode}] ${method} ${url}`);
+        });
+        // Otherwise, pass requests directly to Snowpack's request handler.
+        handleRequest(req, res);
+      })
+      .on('error', (err: Error) => {
+        logger.error(colors.red(`  ✘ Failed to start server at port ${colors.bold(port)}.`), err);
+        webServer!.close();
+        process.exit(1);
+      }).listen(config.devOptions.port);
+    }
+
+    return {
+      server: webServer,
+      hmrEngine: createHmrEngine(webServer)
+    }
+  }
+
+  function createHmrEngine(webServer: http.Server | http2.Http2SecureServer | undefined) {
+    if (config.devOptions.hmr === false) {
+      return new NoopHmrEngine();
+    }
+
+    const hmrPort = config.devOptions.hmrPort ?? config.devOptions.port;
+    if (webServer && hmrPort === config.devOptions.port) {
+      return new EsmHmrEngine({
+        delay: config.devOptions.hmrDelay ?? 0,
+        server: webServer,
+        port: hmrPort
+      })
+    }
+
+    return new EsmHmrEngine({
+      delay: config.devOptions.hmrDelay ?? 0,
+      server: createServer((_, res) => {
+        res.writeHead(426);
+        res.end('Upgrade Required');
+      }),
+      port: hmrPort
     })
-    .listen(port);
+  }
+
+  const {server, hmrEngine} = createServers();
+
+  hmrEngine.listen()
+    .catch(ex => {
+      logger.error(colors.red(`  ✘ Failed to start hmr server on port ${colors.bold(port)}.`), ex);
+    });
 
-  const {hmrDelay} = config.devOptions;
-  const hmrEngineOptions = Object.assign(
-    {delay: hmrDelay},
-    config.devOptions.hmrPort ? {port: config.devOptions.hmrPort} : {server, port},
-  );
-  const hmrEngine = new EsmHmrEngine(hmrEngineOptions);
   onProcessExit(() => {
     hmrEngine.disconnectAllClients();
   });
@@ -1370,7 +1404,7 @@ export async function startServer(commandOptions: CommandOptions): Promise<Snowp
     getServerRuntime: (options) => getServerRuntime(sp, options),
     async shutdown() {
       await watcher.close();
-      server.close();
+      server?.close();
     },
   } as SnowpackDevServer;
   return sp;

snowpack/src/hmr-server-engine.ts

@@ -1,6 +1,6 @@
 import WebSocket from 'ws';
 import stripAnsi from 'strip-ansi';
-import type http from 'http';
+import http from 'http';
 import type http2 from 'http2';
 
 interface Dependency {
@@ -26,23 +26,39 @@ type HMRMessage =
 const DEFAULT_CONNECT_DELAY = 2000;
 const DEFAULT_PORT = 12321;
 
-interface EsmHmrEngineOptionsCommon {
-  delay?: number;
+type EsmHmrEngineOptions = {
+  delay?: number
+  server?: http.Server | http2.Http2SecureServer
+  port?: number
+};
+
+export interface IEsmHmrEngine {
+  readonly port: number;
+  readonly enabled: boolean;
+  listen(): Promise<number>;
+  disconnectAllClients(): void;
+
+  setEntry(sourceUrl: string, imports: string[], isHmrEnabled?: boolean): void;
+  getEntry(sourceUrl: string, createIfNotFound?: boolean): Dependency | null;
+
+  broadcastMessage(data: HMRMessage): void;
+  markEntryForReplacement(entry: Dependency, state: boolean): void;
 }
 
-type EsmHmrEngineOptions = (
-  | {
-      server: http.Server | http2.Http2Server;
-      port: number;
-    }
-  | {
-      port?: number;
-      server?: undefined;
-    }
-) &
-  EsmHmrEngineOptionsCommon;
+export class NoopHmrEngine implements IEsmHmrEngine {
+  port = DEFAULT_PORT;
+  enabled = false;
+  listen() {return Promise.resolve(DEFAULT_PORT)}
+  disconnectAllClients() {}
+  getEntry(): Dependency | null {
+    return null;
+  }
+  setEntry() {}
+  broadcastMessage(): void {}
+  markEntryForReplacement(): void {}
+}
 
-export class EsmHmrEngine {
+export class EsmHmrEngine implements IEsmHmrEngine {
   clients: Set<WebSocket> = new Set();
   dependencyTree = new Map<string, Dependency>();
 
@@ -51,27 +67,31 @@ export class EsmHmrEngine {
   private currentBatchTimeout: NodeJS.Timer | null = null;
   private cachedConnectErrors: Set<HMRMessage> = new Set();
   readonly port: number = 0;
+  readonly enabled = true;
+  readonly server?: http.Server | http2.Http2SecureServer;
 
   constructor(options: EsmHmrEngineOptions) {
-    this.port = options.port || DEFAULT_PORT;
+    this.delay = options.delay ?? 0;
+    this.server = options.server;
     const wss = options.server
       ? new WebSocket.Server({noServer: true})
-      : new WebSocket.Server({port: this.port});
-    if (options.delay) {
-      this.delay = options.delay;
-    }
+      : new WebSocket.Server({port: options.port ?? DEFAULT_PORT });
 
-    if (options.server) {
-      options.server.on('upgrade', (req, socket, head) => {
-        // Only handle upgrades to ESM-HMR requests, ignore others.
-        if (req.headers['sec-websocket-protocol'] !== 'esm-hmr') {
-          return;
-        }
-        wss.handleUpgrade(req, socket, head, (client) => {
-          wss.emit('connection', client, req);
-        });
+    this.port = portOf(wss)
+      ?? portOf(options.server)
+      ?? options.port
+      ?? DEFAULT_PORT;
+
+    options.server?.on('upgrade', (req, socket, head) => {
+      // Only handle upgrades to ESM-HMR requests, ignore others.
+      if (req.headers['sec-websocket-protocol'] !== 'esm-hmr') {
+        return;
+      }
+      wss.handleUpgrade(req, socket, head, (client) => {
+        wss.emit('connection', client, req);
       });
-    }
+    });
+
     wss.on('connection', (client) => {
       this.connectClient(client);
       this.registerListener(client);
@@ -84,6 +104,27 @@ export class EsmHmrEngine {
     });
   }
 
+  listen(): Promise<number> {
+    const server = this.server;
+    if (!server) {
+      return Promise.resolve(this.port);
+    }
+
+    if (server.listening) {
+      return Promise.resolve(this.port);
+    }
+
+    return new Promise((resolve, reject) => {
+      const errorHandler = (e: Error) => reject(e);
+      server
+        .addListener('error', errorHandler)
+        .listen(this.port, () => {
+          server.removeListener('error', errorHandler);
+          resolve(this.port);
+        });
+    });
+  }
+
   registerListener(client: WebSocket) {
     client.on('message', (data) => {
       const message = JSON.parse(data.toString());
@@ -240,3 +281,12 @@ export class EsmHmrEngine {
     }
   }
 }
+
+function portOf(server: WebSocket.Server | http.Server | http2.Http2SecureServer | undefined): number | null {
+  if (!server) { return null; }
+  if (server instanceof WebSocket.Server) {
+    return server.options.noServer ? null : portOf(server.options.server) ?? server.options.port ?? null
+  }
+  // @ts-ignore - fallback handles case where address is a string
+  return server.listening ? server.address()?.port ?? null : null;
+}

snowpack/src/types.ts

@@ -250,6 +250,7 @@ export interface SnowpackConfig {
     secure: boolean;
     hostname: string;
     port: number;
+    server?: boolean;
     open: string;
     output: 'stream' | 'dashboard';
     hmr?: boolean;