refactor!: replace config.future.v2_dev with config.dev (#7002)

.changeset/rotten-penguins-eat.md

@@ -0,0 +1,9 @@
+---
+"@remix-run/dev": major
+"@remix-run/react": major
+"@remix-run/serve": major
+"@remix-run/server-runtime": major
+"@remix-run/testing": major
+---
+
+promote config.future.v2_dev to config.dev

integration/hmr-log-test.ts

@@ -13,10 +13,10 @@ test.setTimeout(120_000);
 let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
   config: {
     serverModuleFormat: "cjs",
+    dev: {
+      port: options.devPort,
+    },
     future: {
-      v2_dev: {
-        port: options.devPort,
-      },
       v2_meta: true,
     },
   },

integration/hmr-test.ts

@@ -13,10 +13,10 @@ test.setTimeout(150_000);
 let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
   config: {
     serverModuleFormat: "cjs",
+    dev: {
+      port: options.devPort,
+    },
     future: {
-      v2_dev: {
-        port: options.devPort,
-      },
       v2_meta: true,
     },
   },

integration/shared-route-imports-test.ts

@@ -97,11 +97,6 @@ export function UseParentContext() {
 test.describe("v2 compiler", () => {
   test.beforeAll(async () => {
     fixture = await createFixture({
-      config: {
-        future: {
-          v2_dev: true,
-        },
-      },
       files: {
         "app/routes/parent.jsx": js`
           import { createContext, useContext } from "react";

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

@@ -96,10 +96,6 @@ describe("remix CLI", () => {
           \`build\` Options:
             --sourcemap         Generate source maps for production
           \`dev\` Options:
-            --debug             Attach Node.js inspector
-            --port, -p          Choose the port from which to run your app
-
-            [v2_dev]
             --command, -c       Command used to run your app server
             --manual            Enable manual mode
             --port              Port for the dev server. Default: any open port
@@ -132,8 +128,7 @@ describe("remix CLI", () => {
           Run your project locally in development:
 
             $ remix dev
-            $ remix dev my-app
-            $ remix dev --debug
+            $ remix dev -c \\"node ./server.js\\"
 
           Start your server separately and watch for changes:
 

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

@@ -33,14 +33,14 @@ describe("readConfig", () => {
         "appDirectory": Any<String>,
         "assetsBuildDirectory": Any<String>,
         "cacheDirectory": Any<String>,
+        "dev": Object {},
         "devServerBroadcastDelay": 0,
         "devServerPort": Any<Number>,
         "entryClientFile": "entry.client.tsx",
         "entryClientFilePath": Any<String>,
         "entryServerFile": "entry.server.tsx",
         "entryServerFilePath": Any<String>,
         "future": Object {
-          "v2_dev": false,
           "v2_meta": Any<Boolean>,
         },
         "mdx": undefined,

packages/remix-dev/cli/commands.ts

@@ -1,6 +1,5 @@
 import * as path from "path";
 import { execSync } from "child_process";
-import inspector from "inspector";
 import * as fse from "fs-extra";
 import getPort, { makeRange } from "get-port";
 import prettyMs from "pretty-ms";
@@ -117,7 +116,7 @@ export async function build(
     mode,
     sourcemap,
   };
-  if (mode === "development" && config.future.v2_dev) {
+  if (mode === "development") {
     let resolved = await resolveDev(config);
     options.REMIX_DEV_ORIGIN = resolved.REMIX_DEV_ORIGIN;
   }
@@ -135,7 +134,6 @@ export async function build(
   logger.info("built" + pc.gray(` (${prettyMs(Date.now() - start)})`));
 }
 
-// TODO: replace watch in v2
 export async function watch(
   remixRootOrConfig: string | RemixConfig,
   modeArg?: string
@@ -155,9 +153,6 @@ export async function watch(
 export async function dev(
   remixRoot: string,
   flags: {
-    debug?: boolean;
-
-    // v2_dev
     command?: string;
     manual?: boolean;
     port?: number;
@@ -171,21 +166,9 @@ export async function dev(
     logger.warn(`overriding NODE_ENV=${process.env.NODE_ENV} to development`);
   }
   process.env.NODE_ENV = "development";
-  if (flags.debug) inspector.open();
 
   let config = await readConfig(remixRoot);
 
-  if (config.future.v2_dev === false) {
-    logger.warn("The `remix dev` changing in v2", {
-      details: [
-        "You can use the `v2_dev` future flag to opt-in early.",
-        "-> https://remix.run/docs/en/main/pages/v2#dev-server",
-      ],
-    });
-    await devServer.serve(config, flags.port);
-    return await new Promise(() => {});
-  }
-
   let resolved = await resolveDevServe(config, flags);
   await devServer_unstable.serve(config, resolved);
 }
@@ -389,18 +372,13 @@ let resolveDev = async (
     tlsCert?: string;
   } = {}
 ) => {
-  let dev = config.future.v2_dev;
-  if (dev === false) throw Error("This should never happen");
+  let { dev } = config;
 
-  // prettier-ignore
-  let port =
-    flags.port ??
-    (dev === true ? undefined : dev.port) ??
-    (await findPort());
+  let port = flags.port ?? dev.port ?? (await findPort());
 
-  let tlsKey = flags.tlsKey ?? (dev === true ? undefined : dev.tlsKey);
+  let tlsKey = flags.tlsKey ?? dev.tlsKey;
   if (tlsKey) tlsKey = path.resolve(tlsKey);
-  let tlsCert = flags.tlsCert ?? (dev === true ? undefined : dev.tlsCert);
+  let tlsCert = flags.tlsCert ?? dev.tlsCert;
   if (tlsCert) tlsCert = path.resolve(tlsCert);
   let isTLS = tlsKey && tlsCert;
 
@@ -428,21 +406,12 @@ let resolveDevServe = async (
     tlsCert?: string;
   } = {}
 ) => {
-  let dev = config.future.v2_dev;
-  if (dev === false) throw Error("Cannot resolve dev options");
+  let { dev } = config;
 
   let resolved = await resolveDev(config, flags);
 
-  // prettier-ignore
-  let command =
-    flags.command ??
-    (dev === true ? undefined : dev.command)
-
-  // prettier-ignore
-  let manual =
-    flags.manual ??
-    (dev === true ? undefined : dev.manual) ??
-    false;
+  let command = flags.command ?? dev.command;
+  let manual = flags.manual ?? dev.manual ?? false;
 
   return {
     ...resolved,

packages/remix-dev/cli/run.ts

@@ -23,10 +23,6 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
   \`build\` Options:
     --sourcemap         Generate source maps for production
   \`dev\` Options:
-    --debug             Attach Node.js inspector
-    --port, -p          Choose the port from which to run your app
-
-    [v2_dev]
     --command, -c       Command used to run your app server
     --manual            Enable manual mode
     --port              Port for the dev server. Default: any open port
@@ -59,8 +55,7 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
   ${colors.heading("Run your project locally in development")}:
 
     $ remix dev
-    $ remix dev my-app
-    $ remix dev --debug
+    $ remix dev -c "node ./server.js"
 
   ${colors.heading("Start your server separately and watch for changes")}:
 
@@ -99,7 +94,6 @@ export async function run(argv: string[] = process.argv.slice(2)) {
 
   let args = arg(
     {
-      "--debug": Boolean,
       "--no-delete": Boolean,
       "--dry": Boolean,
       "--force": Boolean,

packages/remix-dev/compiler/js/compiler.ts

@@ -68,10 +68,7 @@ const createEsbuildConfig = (
     entryPoints[id] += "?browser";
   }
 
-  if (
-    ctx.options.mode === "development" &&
-    ctx.config.future.v2_dev !== false
-  ) {
+  if (ctx.options.mode === "development") {
     let defaultsDirectory = path.resolve(
       __dirname,
       "..",
@@ -91,9 +88,7 @@ const createEsbuildConfig = (
     cssModulesPlugin(ctx, { outputCss: false }),
     vanillaExtractPlugin(ctx, { outputCss: false }),
     cssSideEffectImportsPlugin(ctx, {
-      hmr:
-        ctx.options.mode === "development" &&
-        ctx.config.future.v2_dev !== false,
+      hmr: ctx.options.mode === "development",
     }),
     cssFilePlugin(ctx),
     absoluteCssUrlsPlugin(),
@@ -107,7 +102,7 @@ const createEsbuildConfig = (
     externalPlugin(/^node:.*/, { sideEffects: false }),
   ];
 
-  if (ctx.options.mode === "development" && ctx.config.future.v2_dev) {
+  if (ctx.options.mode === "development") {
     plugins.push(hmrPlugin(ctx));
   }
 
@@ -167,7 +162,7 @@ export const create = async (
     writeMetafile(ctx, "metafile.js.json", metafile);
 
     let hmr: Manifest["hmr"] | undefined = undefined;
-    if (ctx.options.mode === "development" && ctx.config.future.v2_dev) {
+    if (ctx.options.mode === "development") {
       let hmrRuntimeOutput = Object.entries(metafile.outputs).find(
         ([_, output]) => output.inputs["hmr-runtime:remix:hmr"]
       )?.[0];

packages/remix-dev/config.ts

@@ -36,7 +36,6 @@ type Dev = {
 };
 
 interface FutureConfig {
-  v2_dev: boolean | Dev;
   v2_meta: boolean;
 }
 
@@ -83,11 +82,20 @@ export interface AppConfig {
   publicPath?: string;
 
   /**
+   * Options for `remix dev`. See https://remix.run/docs/en/main/other-api/dev-v2#options-1
+   */
+  dev?: Dev;
+
+  /**
+   * @deprecated
+   *
    * The port number to use for the dev server. Defaults to 8002.
    */
   devServerPort?: number;
 
   /**
+   * @deprecated
+   *
    * The delay, in milliseconds, before the dev server broadcasts a reload
    * event. There is no delay by default.
    */
@@ -246,6 +254,11 @@ export interface RemixConfig {
    */
   publicPath: string;
 
+  /**
+   * Options for `remix dev`. See https://remix.run/docs/en/main/other-api/dev-v2#options-1
+   */
+  dev: Dev;
+
   /**
    * The port number to use for the dev (asset) server.
    */
@@ -619,7 +632,6 @@ export async function readConfig(
   }
 
   let future: FutureConfig = {
-    v2_dev: appConfig.future?.v2_dev ?? false,
     v2_meta: appConfig.future?.v2_meta === true,
   };
 
@@ -630,6 +642,7 @@ export async function readConfig(
     entryClientFilePath,
     entryServerFile,
     entryServerFilePath,
+    dev: appConfig.dev ?? {},
     devServerPort,
     devServerBroadcastDelay,
     assetsBuildDirectory: absoluteAssetsBuildDirectory,

packages/remix-react/entry.ts

@@ -15,7 +15,6 @@ export interface RemixContextObject {
   serverHandoffString?: string;
   future: FutureConfig;
   abortDelay?: number;
-  dev?: { port: number };
   serializeError?(error: Error): SerializedError;
 }
 
@@ -25,15 +24,7 @@ export interface EntryContext extends RemixContextObject {
   staticHandlerContext: StaticHandlerContext;
 }
 
-type Dev = {
-  port?: number;
-  appServerPort?: number;
-  remixRequestHandlerPath?: string;
-  rebuildPollIntervalMs?: number;
-};
-
 export interface FutureConfig {
-  v2_dev: boolean | Dev;
   v2_meta: boolean;
 }
 

packages/remix-serve/cli.ts

@@ -33,10 +33,7 @@ let onListen = () => {
       `Remix App Server started at http://localhost:${port} (http://${address}:${port})`
     );
   }
-  if (
-    build.future?.v2_dev !== false &&
-    process.env.NODE_ENV === "development"
-  ) {
+  if (process.env.NODE_ENV === "development") {
     broadcastDevReady(build);
   }
 };

packages/remix-server-runtime/__tests__/utils.ts

@@ -83,9 +83,6 @@ export function mockServerBuild(
       },
       {}
     ),
-    future: {
-      v2_dev: {},
-    },
   };
 }
 

packages/remix-server-runtime/entry.ts

@@ -13,15 +13,7 @@ export interface EntryContext {
   serializeError(error: Error): SerializedError;
 }
 
-type Dev = {
-  port?: number;
-  appServerPort?: number;
-  remixRequestHandlerPath?: string;
-  rebuildPollIntervalMs?: number;
-};
-
 export interface FutureConfig {
-  v2_dev: boolean | Dev;
   v2_meta: boolean;
 }
 

packages/remix-testing/create-remix-stub.tsx

@@ -124,7 +124,6 @@ export function createRemixStub(
     if (remixContextRef.current == null) {
       remixContextRef.current = {
         future: {
-          v2_dev: false,
           v2_meta: false,
           ...remixConfigFuture,
         },