refactor(dev): rename scheme, host, port options

`httpScheme`/`--http-scheme` -> `scheme`/`--scheme`
`httpHost`/`--http-host` -> `host`/`--host`
`httpPort`/`--http-port` -> `port`/`--port`

Author: pcattori

integration/hmr-log-test.ts

@@ -9,15 +9,15 @@ import { createFixtureProject, css, js, json } from "./helpers/create-fixture";
 
 test.setTimeout(120_000);
 
-let fixture = (options: { appServerPort: number; httpPort: number }) => ({
+let fixture = (options: { appPort: number; devPort: number }) => ({
   files: {
     "remix.config.js": js`
       module.exports = {
         serverModuleFormat: "cjs",
         tailwind: true,
         future: {
           unstable_dev: {
-            httpPort: ${options.httpPort},
+            port: ${options.devPort},
           },
           v2_routeConvention: true,
           v2_errorBoundary: true,
@@ -75,7 +75,7 @@ let fixture = (options: { appServerPort: number; httpPort: number }) => ({
         })
       );
 
-      let port = ${options.appServerPort};
+      let port = ${options.appPort};
       app.listen(port, () => {
         let build = require(BUILD_DIR);
         console.log('✅ app ready: http://localhost:' + port);
@@ -245,11 +245,9 @@ test("HMR", async ({ page }) => {
   });
 
   let portRange = makeRange(4080, 4099);
-  let appServerPort = await getPort({ port: portRange });
-  let httpPort = await getPort({ port: portRange });
-  let projectDir = await createFixtureProject(
-    fixture({ appServerPort, httpPort })
-  );
+  let appPort = await getPort({ port: portRange });
+  let devPort = await getPort({ port: portRange });
+  let projectDir = await createFixtureProject(fixture({ appPort, devPort }));
 
   // spin up dev server
   let dev = execa("npm", ["run", "dev"], { cwd: projectDir });
@@ -264,7 +262,7 @@ test("HMR", async ({ page }) => {
       { timeoutMs: 10_000 }
     );
 
-    await page.goto(`http://localhost:${appServerPort}`, {
+    await page.goto(`http://localhost:${appPort}`, {
       waitUntil: "networkidle",
     });
 

integration/hmr-test.ts

@@ -9,15 +9,15 @@ import { createFixtureProject, css, js, json } from "./helpers/create-fixture";
 
 test.setTimeout(120_000);
 
-let fixture = (options: { appServerPort: number; httpPort: number }) => ({
+let fixture = (options: { appPort: number; devPort: number }) => ({
   files: {
     "remix.config.js": js`
       module.exports = {
         serverModuleFormat: "cjs",
         tailwind: true,
         future: {
           unstable_dev: {
-            httpPort: ${options.httpPort},
+            port: ${options.devPort},
           },
           v2_routeConvention: true,
           v2_errorBoundary: true,
@@ -74,7 +74,7 @@ let fixture = (options: { appServerPort: number; httpPort: number }) => ({
         })
       );
 
-      let port = ${options.appServerPort};
+      let port = ${options.appPort};
       app.listen(port, () => {
         let build = require(BUILD_DIR);
         console.log('✅ app ready: http://localhost:' + port);
@@ -243,11 +243,9 @@ test("HMR", async ({ page }) => {
   });
 
   let portRange = makeRange(3080, 3099);
-  let appServerPort = await getPort({ port: portRange });
-  let httpPort = await getPort({ port: portRange });
-  let projectDir = await createFixtureProject(
-    fixture({ appServerPort, httpPort })
-  );
+  let appPort = await getPort({ port: portRange });
+  let devPort = await getPort({ port: portRange });
+  let projectDir = await createFixtureProject(fixture({ appPort, devPort }));
 
   // spin up dev server
   let dev = execa("npm", ["run", "dev"], { cwd: projectDir });
@@ -262,7 +260,7 @@ test("HMR", async ({ page }) => {
       { timeoutMs: 10_000 }
     );
 
-    await page.goto(`http://localhost:${appServerPort}`, {
+    await page.goto(`http://localhost:${appPort}`, {
       waitUntil: "networkidle",
     });
 

packages/remix-dev/__tests__/cli-test.ts

@@ -118,9 +118,9 @@ describe("remix CLI", () => {
 
             [unstable_dev]
             --command, -c       Command used to run your app server
-            --http-scheme       HTTP(S) scheme for the dev server. Default: http
-            --http-host         HTTP(S) host for the dev server. Default: localhost
-            --http-port         HTTP(S) port for the dev server. Default: any open port
+            --scheme            Scheme for the dev server. Default: http
+            --host              Host for the dev server. Default: localhost
+            --port              Port for the dev server. Default: any open port
             --no-restart        Do not restart the app server when rebuilds occur.
           \`init\` Options:
             --no-delete         Skip deleting the \`remix.init\` script

packages/remix-dev/cli/commands.ts

@@ -177,13 +177,9 @@ export async function build(
     onWarning: warnOnce,
   };
   if (mode === "development" && config.future.unstable_dev) {
-    let dev = await resolveDevBuild(config);
-    options.devHttpOrigin = {
-      scheme: dev.httpScheme,
-      host: dev.httpHost,
-      port: dev.httpPort,
-    };
-    options.devWebSocketPort = dev.httpPort;
+    let origin = await resolveDevOrigin(config);
+    options.devHttpOrigin = origin;
+    options.devWebSocketPort = origin.port; // TODO: ?
   }
 
   fse.emptyDirSync(config.assetsBuildDirectory);
@@ -216,13 +212,12 @@ export async function dev(
   remixRoot: string,
   flags: {
     debug?: boolean;
-    port?: number; // TODO: remove for v2
 
     // unstable_dev
     command?: string;
-    httpScheme?: string;
-    httpHost?: string;
-    httpPort?: number;
+    scheme?: string;
+    host?: string;
+    port?: number;
     restart?: boolean;
   } = {}
 ) {
@@ -472,42 +467,42 @@ let parseMode = (
 
 let findPort = async () => getPort({ port: makeRange(3001, 3100) });
 
-type DevBuildFlags = {
-  httpScheme: string;
-  httpHost: string;
-  httpPort: number;
+type DevOrigin = {
+  scheme: string;
+  host: string;
+  port: number;
 };
-let resolveDevBuild = async (
+let resolveDevOrigin = async (
   config: RemixConfig,
-  flags: Partial<DevBuildFlags> = {}
-): Promise<DevBuildFlags> => {
+  flags: Partial<DevOrigin> = {}
+): Promise<DevOrigin> => {
   let dev = config.future.unstable_dev;
   if (dev === false) throw Error("This should never happen");
 
   // prettier-ignore
-  let httpScheme =
-    flags.httpScheme ??
-    (dev === true ? undefined : dev.httpScheme) ??
+  let scheme =
+    flags.scheme ??
+    (dev === true ? undefined : dev.scheme) ??
     "http";
   // prettier-ignore
-  let httpHost =
-    flags.httpHost ??
-    (dev === true ? undefined : dev.httpHost) ??
+  let host =
+    flags.host ??
+    (dev === true ? undefined : dev.host) ??
     "localhost";
   // prettier-ignore
-  let httpPort =
-    flags.httpPort ??
-    (dev === true ? undefined : dev.httpPort) ??
+  let port =
+    flags.port ??
+    (dev === true ? undefined : dev.port) ??
     (await findPort());
 
   return {
-    httpScheme,
-    httpHost,
-    httpPort,
+    scheme,
+    host,
+    port,
   };
 };
 
-type DevServeFlags = DevBuildFlags & {
+type DevServeFlags = DevOrigin & {
   command: string;
   restart: boolean;
 };
@@ -518,7 +513,7 @@ let resolveDevServe = async (
   let dev = config.future.unstable_dev;
   if (dev === false) throw Error("Cannot resolve dev options");
 
-  let { httpScheme, httpHost, httpPort } = await resolveDevBuild(config, flags);
+  let origin = await resolveDevOrigin(config, flags);
 
   // prettier-ignore
   let command =
@@ -549,9 +544,7 @@ let resolveDevServe = async (
 
   return {
     command,
-    httpScheme,
-    httpHost,
-    httpPort,
+    ...origin,
     restart,
   };
 };

packages/remix-dev/cli/run.ts

@@ -44,9 +44,9 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
 
     [unstable_dev]
     --command, -c       Command used to run your app server
-    --http-scheme       HTTP(S) scheme for the dev server. Default: http
-    --http-host         HTTP(S) host for the dev server. Default: localhost
-    --http-port         HTTP(S) port for the dev server. Default: any open port
+    --scheme            Scheme for the dev server. Default: http
+    --host              Host for the dev server. Default: localhost
+    --port              Port for the dev server. Default: any open port
     --no-restart        Do not restart the app server when rebuilds occur.
   \`init\` Options:
     --no-delete         Skip deleting the \`remix.init\` script
@@ -169,8 +169,6 @@ export async function run(argv: string[] = process.argv.slice(2)) {
       "--interactive": Boolean,
       "--no-interactive": Boolean,
       "--json": Boolean,
-      "--port": Number,
-      "-p": "--port",
       "--remix-version": String,
       "--sourcemap": Boolean,
       "--template": String,
@@ -183,9 +181,10 @@ export async function run(argv: string[] = process.argv.slice(2)) {
       // dev server
       "--command": String,
       "-c": "--command",
-      "--http-scheme": String,
-      "--http-host": String,
-      "--http-port": Number,
+      "--scheme": String,
+      "--host": String,
+      "--port": Number,
+      "-p": "--port",
       "--no-restart": Boolean,
     },
     {
@@ -211,19 +210,6 @@ export async function run(argv: string[] = process.argv.slice(2)) {
     return;
   }
 
-  if (flags["http-scheme"]) {
-    flags.httpScheme = flags["http-scheme"];
-    delete flags["http-scheme"];
-  }
-  if (flags["http-host"]) {
-    flags.httpHost = flags["http-host"];
-    delete flags["http-host"];
-  }
-  if (flags["http-port"]) {
-    flags.httpPort = flags["http-port"];
-    delete flags["http-port"];
-  }
-
   if (args["--no-delete"]) {
     flags.delete = false;
   }

packages/remix-dev/config.ts

@@ -37,12 +37,10 @@ export type ServerModuleFormat = "esm" | "cjs";
 export type ServerPlatform = "node" | "neutral";
 
 type Dev = {
-  port?: number; // TODO: remove in v2
-
   command?: string;
-  httpScheme?: string;
-  httpHost?: string;
-  httpPort?: number;
+  scheme?: string;
+  host?: string;
+  port?: number;
   restart?: boolean;
 };
 

packages/remix-dev/devServer_unstable/index.ts

@@ -42,9 +42,9 @@ export let serve = async (
   initialConfig: RemixConfig,
   options: {
     command: string;
-    httpScheme: string;
-    httpHost: string;
-    httpPort: number;
+    scheme: string;
+    host: string;
+    port: number;
     restart: boolean;
   }
 ) => {
@@ -76,10 +76,13 @@ export let serve = async (
   let server = http.createServer(app);
   let websocket = Socket.serve(server);
 
-  let httpOrigin: Origin = {
-    scheme: options.httpScheme,
-    host: options.httpHost,
-    port: options.httpPort,
+  // TODO: would like to replace origin with port, but what about remix-serve? built-in calls to devReady?
+  // scheme could be replaced with cert stuff? yes!
+  // specify host and port if needed
+  let origin: Origin = {
+    scheme: options.scheme,
+    host: options.host,
+    port: options.port,
   };
 
   let bin = await detectBin();
@@ -91,7 +94,7 @@ export let serve = async (
         NODE_ENV: "development",
         PATH:
           bin + (process.platform === "win32" ? ";" : ":") + process.env.PATH,
-        REMIX_DEV_HTTP_ORIGIN: stringifyOrigin(httpOrigin),
+        REMIX_DEV_HTTP_ORIGIN: stringifyOrigin(origin),
       },
       // https://github.com/sindresorhus/execa/issues/433
       windowsHide: false,
@@ -135,8 +138,8 @@ export let serve = async (
         mode: "development",
         sourcemap: true,
         onWarning: warnOnce,
-        devHttpOrigin: httpOrigin,
-        devWebSocketPort: options.httpPort,
+        devHttpOrigin: origin,
+        devWebSocketPort: origin.port,
       },
     },
     {
@@ -215,7 +218,7 @@ export let serve = async (
     }
   );
 
-  server.listen(httpOrigin.port, () => {
+  server.listen(origin.port, () => {
     console.log("Remix dev server ready");
   });