fix(dev): dev server port priority

1. <LiveReload port /> prop
2. `unstable_dev` `--port` flag
3. `unstable_dev.port` config option
4. REMIX_DEV_SERVER_WS_PORT env var (TODO: remove in v2)
5. default: 8002 (TODO: remove in v2)

Author: pcattori

packages/remix-dev/cli/commands.ts

@@ -179,7 +179,6 @@ export async function build(
   if (mode === "development" && config.future.unstable_dev) {
     let origin = await resolveDevOrigin(config);
     options.devHttpOrigin = origin;
-    options.devWebSocketPort = origin.port; // TODO: ?
   }
 
   fse.emptyDirSync(config.assetsBuildDirectory);

packages/remix-dev/compiler/options.ts

@@ -11,5 +11,4 @@ export type Options = {
     host: string;
     port: number;
   };
-  devWebSocketPort?: number;
 };

packages/remix-dev/compiler/server/plugins/entry.ts

@@ -51,9 +51,9 @@ ${Object.keys(config.routes)
   export const publicPath = ${JSON.stringify(config.publicPath)};
   export const entry = { module: entryServer };
   ${
-    options.devWebSocketPort
+    options.devHttpOrigin
       ? `export const dev = ${JSON.stringify({
-          websocketPort: options.devWebSocketPort,
+          port: options.devHttpOrigin.port,
         })}`
       : ""
   }

packages/remix-dev/devServer_unstable/index.ts

@@ -139,7 +139,6 @@ export let serve = async (
         sourcemap: true,
         onWarning: warnOnce,
         devHttpOrigin: origin,
-        devWebSocketPort: origin.port,
       },
     },
     {

packages/remix-react/__tests__/components-test.tsx

@@ -47,22 +47,22 @@ describe("<LiveReload />", () => {
       LiveReload = require("../components").LiveReload;
       let { container } = render(<LiveReload />);
       expect(container.querySelector("script")).toHaveTextContent(
-        "let port = (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.websocketPort) || 8002;"
+        "let port = undefined || (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.port) || 8002;"
       );
     });
 
     it("can set the port explicitly", () => {
       let { container } = render(<LiveReload port={4321} />);
       expect(container.querySelector("script")).toHaveTextContent(
-        "let port = (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.websocketPort) || 4321;"
+        "let port = 4321 || (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.port) || 8002;"
       );
     });
 
     it("determines the right port based on REMIX_DEV_SERVER_WS_PORT env variable", () => {
       process.env.REMIX_DEV_SERVER_WS_PORT = "1234";
       let { container } = render(<LiveReload />);
       expect(container.querySelector("script")).toHaveTextContent(
-        "let port = (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.websocketPort) || 1234;"
+        "let port = undefined || (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.port) || 1234;"
       );
     });
 

packages/remix-react/browser.tsx

@@ -24,7 +24,7 @@ declare global {
     // The number of active deferred keys rendered on the server
     a?: number;
     dev?: {
-      websocketPort?: number;
+      port?: number;
       hmrRuntime?: string;
     };
   };

packages/remix-react/components.tsx

@@ -1714,7 +1714,7 @@ export const LiveReload =
     ? () => null
     : function LiveReload({
         // TODO: remove REMIX_DEV_SERVER_WS_PORT in v2
-        port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002),
+        port,
         timeoutMs = 1000,
         nonce = undefined,
       }: {
@@ -1732,9 +1732,9 @@ export const LiveReload =
                 function remixLiveReloadConnect(config) {
                   let protocol = location.protocol === "https:" ? "wss:" : "ws:";
                   let host = location.hostname;
-                  let port = (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.websocketPort) || ${String(
-                    port
-                  )};
+                  let port = ${port} || (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.port) || ${Number(
+                process.env.REMIX_DEV_SERVER_WS_PORT || 8002
+              )};
                   let socketPath = protocol + "//" + host + ":" + port + "/socket";
                   let ws = new WebSocket(socketPath);
                   ws.onmessage = async (message) => {

packages/remix-react/entry.ts

@@ -10,7 +10,7 @@ export interface RemixContextObject {
   serverHandoffString?: string;
   future: FutureConfig;
   abortDelay?: number;
-  dev?: { websocketPort: number };
+  dev?: { port: number };
 }
 
 // Additional React-Router information needed at runtime, but not hydrated

packages/remix-server-runtime/build.ts

@@ -15,7 +15,7 @@ export interface ServerBuild {
   publicPath: string;
   assetsBuildDirectory: string;
   future: FutureConfig;
-  dev?: { websocketPort: number };
+  dev?: { port: number };
 }
 
 export interface HandleDocumentRequestFunction {

packages/remix-server-runtime/serverHandoff.ts

@@ -20,7 +20,7 @@ export function createServerHandoffString<T>(serverHandoff: {
   // we'd end up including duplicate info
   state: ValidateShape<T, HydrationState>;
   future: FutureConfig;
-  dev?: { websocketPort: number };
+  dev?: { port: number };
 }): string {
   // Uses faster alternative of jsesc to escape data returned from the loaders.
   // This string is inserted directly into the HTML in the `<Scripts>` element.