fix(dev): handle new routes gracefully (#6165)

Author: pcattori

packages/remix-dev/cli/commands.ts

@@ -187,7 +187,7 @@ export async function build(
     process.exit(1);
   });
 
-  console.log(`built in ${prettyMs(Date.now() - start)}`);
+  console.log(`Built in ${prettyMs(Date.now() - start)}`);
 }
 
 // TODO: replace watch in v2
@@ -203,10 +203,7 @@ export async function watch(
       ? remixRootOrConfig
       : await readConfig(remixRootOrConfig);
 
-  devServer.liveReload(config, {
-    onInitialBuild: (durationMs) =>
-      console.log(`💿 Built in ${prettyMs(durationMs)}`),
-  });
+  devServer.liveReload(config);
   return await new Promise(() => {});
 }
 

packages/remix-dev/compiler/watch.ts

@@ -21,68 +21,67 @@ function isEntryPoint(config: RemixConfig, file: string): boolean {
 
 export type WatchOptions = {
   reloadConfig?(root: string): Promise<RemixConfig>;
-  onRebuildStart?(): void;
-  onRebuildFinish?(durationMs: number, manifest?: Manifest): void;
+  onBuildStart?(ctx: Context): void;
+  onBuildFinish?(ctx: Context, durationMs: number, manifest?: Manifest): void;
   onFileCreated?(file: string): void;
   onFileChanged?(file: string): void;
   onFileDeleted?(file: string): void;
-  onInitialBuild?(durationMs: number, manifest?: Manifest): void;
 };
 
 export async function watch(
-  { config, options }: Context,
+  ctx: Context,
   {
     reloadConfig = readConfig,
-    onRebuildStart,
-    onRebuildFinish,
+    onBuildStart,
+    onBuildFinish,
     onFileCreated,
     onFileChanged,
     onFileDeleted,
-    onInitialBuild,
   }: WatchOptions = {}
 ): Promise<() => Promise<void>> {
   let start = Date.now();
-  let compiler = await Compiler.create({ config, options });
+  let compiler = await Compiler.create(ctx);
   let compile = () =>
     compiler.compile().catch((thrown) => {
       logThrown(thrown);
       return undefined;
     });
 
   // initial build
+  onBuildStart?.(ctx);
   let manifest = await compile();
-  onInitialBuild?.(Date.now() - start, manifest);
+  onBuildFinish?.(ctx, Date.now() - start, manifest);
 
   let restart = debounce(async () => {
-    onRebuildStart?.();
+    onBuildStart?.(ctx);
     let start = Date.now();
     compiler.dispose();
 
     try {
-      config = await reloadConfig(config.rootDirectory);
+      ctx.config = await reloadConfig(ctx.config.rootDirectory);
     } catch (thrown: unknown) {
       logThrown(thrown);
       return;
     }
 
-    compiler = await Compiler.create({ config, options });
+    compiler = await Compiler.create(ctx);
     let manifest = await compile();
-    onRebuildFinish?.(Date.now() - start, manifest);
+    onBuildFinish?.(ctx, Date.now() - start, manifest);
   }, 500);
 
   let rebuild = debounce(async () => {
-    onRebuildStart?.();
+    onBuildStart?.(ctx);
     let start = Date.now();
     let manifest = await compile();
-    onRebuildFinish?.(Date.now() - start, manifest);
+    onBuildFinish?.(ctx, Date.now() - start, manifest);
   }, 100);
 
-  let toWatch = [config.appDirectory];
-  if (config.serverEntryPoint) {
-    toWatch.push(config.serverEntryPoint);
+  let toWatch = [ctx.config.appDirectory];
+  if (ctx.config.serverEntryPoint) {
+    toWatch.push(ctx.config.serverEntryPoint);
   }
 
-  config.watchPaths?.forEach((watchPath) => {
+  ctx.config.watchPaths?.forEach((watchPath) => {
     toWatch.push(watchPath);
   });
 
@@ -104,17 +103,17 @@ export async function watch(
       onFileCreated?.(file);
 
       try {
-        config = await reloadConfig(config.rootDirectory);
+        ctx.config = await reloadConfig(ctx.config.rootDirectory);
       } catch (thrown: unknown) {
         logThrown(thrown);
         return;
       }
 
-      await (isEntryPoint(config, file) ? restart : rebuild)();
+      await (isEntryPoint(ctx.config, file) ? restart : rebuild)();
     })
     .on("unlink", async (file) => {
       onFileDeleted?.(file);
-      await (isEntryPoint(config, file) ? restart : rebuild)();
+      await (isEntryPoint(ctx.config, file) ? restart : rebuild)();
     });
 
   return async () => {

packages/remix-dev/devServer/liveReload.ts

@@ -4,7 +4,6 @@ import path from "path";
 import prettyMs from "pretty-ms";
 import WebSocket from "ws";
 
-import type { WatchOptions } from "../compiler";
 import { watch } from "../compiler";
 import type { RemixConfig } from "../config";
 import { warnOnce } from "../warnOnce";
@@ -19,10 +18,7 @@ let clean = (config: RemixConfig) => {
   }
 };
 
-export async function liveReload(
-  config: RemixConfig,
-  { onInitialBuild }: WatchOptions = {}
-) {
+export async function liveReload(config: RemixConfig) {
   clean(config);
   let wss = new WebSocket.Server({ port: config.devServerPort });
   function broadcast(event: { type: string } & Record<string, unknown>) {
@@ -41,6 +37,7 @@ export async function liveReload(
     broadcast({ type: "LOG", message: _message });
   }
 
+  let hasBuilt = false;
   let dispose = await watch(
     {
       config,
@@ -51,13 +48,14 @@ export async function liveReload(
       },
     },
     {
-      onInitialBuild,
-      onRebuildStart() {
+      onBuildStart() {
         clean(config);
-        log("Rebuilding...");
+        log((hasBuilt ? "Rebuilding" : "Building") + "...");
       },
-      onRebuildFinish(durationMs: number) {
-        log(`Rebuilt in ${prettyMs(durationMs)}`);
+      onBuildFinish(_, durationMs: number, manifest) {
+        if (manifest === undefined) return;
+        hasBuilt = true;
+        log((hasBuilt ? "Rebuilt" : "Built") + ` in ${prettyMs(durationMs)}`);
         broadcast({ type: "RELOAD" });
       },
       onFileCreated(file) {

packages/remix-dev/devServer_unstable/index.ts

@@ -15,15 +15,15 @@ import { warnOnce } from "../warnOnce";
 import { detectPackageManager } from "../cli/detectPackageManager";
 
 export let serve = async (
-  config: RemixConfig,
+  initialConfig: RemixConfig,
   options: {
     command?: string;
     httpPort: number;
     websocketPort: number;
     restart: boolean;
   }
 ) => {
-  await loadEnv(config.rootDirectory);
+  await loadEnv(initialConfig.rootDirectory);
   let websocket = Socket.serve({ port: options.websocketPort });
 
   let state: {
@@ -36,6 +36,7 @@ export let serve = async (
   let pkgManager = detectPackageManager() ?? "npm";
   let bin = (await execa(pkgManager, ["bin"])).stdout.trim();
   let startAppServer = (command: string) => {
+    console.log(`> ${command}`);
     return execa.command(command, {
       stdio: "inherit",
       env: {
@@ -48,7 +49,7 @@ export let serve = async (
 
   let dispose = await Compiler.watch(
     {
-      config,
+      config: initialConfig,
       options: {
         mode: "development",
         sourcemap: true,
@@ -58,45 +59,44 @@ export let serve = async (
       },
     },
     {
-      onInitialBuild: (durationMs, manifest) => {
-        console.info(`💿 Built in ${prettyMs(durationMs)}`);
-        state.prevManifest = manifest;
-        if (options.command && manifest) {
-          console.log(`starting: ${options.command}`);
-          state.appServer = startAppServer(options.command);
-        }
-      },
-      onRebuildStart: () => {
+      onBuildStart: (ctx) => {
         state.buildHashChannel?.err();
-        clean(config);
-        websocket.log("Rebuilding...");
+        clean(ctx.config);
+        websocket.log(state.prevManifest ? "Rebuilding..." : "Building...");
       },
-      onRebuildFinish: async (durationMs, manifest) => {
+      onBuildFinish: async (ctx, durationMs, manifest) => {
         if (!manifest) return;
-        websocket.log(`Rebuilt in ${prettyMs(durationMs)}`);
 
-        // TODO: should we restart the app server when build failed?
+        websocket.log(
+          (state.prevManifest ? "Rebuilt" : "Built") +
+            ` in ${prettyMs(durationMs)}`
+        );
         state.latestBuildHash = manifest.version;
         state.buildHashChannel = Channel.create();
-        console.log(`Waiting (${state.latestBuildHash})`);
-        if (state.appServer === undefined || options.restart) {
-          console.log(`restarting: ${options.command}`);
+
+        let start = Date.now();
+        console.log(`Waiting for app server (${state.latestBuildHash})`);
+        if (
+          options.command &&
+          (state.appServer === undefined || options.restart)
+        ) {
           await kill(state.appServer);
-          if (options.command) {
-            state.appServer = startAppServer(options.command);
-          }
+          state.appServer = startAppServer(options.command);
         }
         let { ok } = await state.buildHashChannel.result;
         // result not ok -> new build started before this one finished. do not process outdated manifest
         if (!ok) return;
+        console.log(`App server took ${prettyMs(Date.now() - start)}`);
 
         if (manifest.hmr && state.prevManifest) {
-          let updates = HMR.updates(config, manifest, state.prevManifest);
+          let updates = HMR.updates(ctx.config, manifest, state.prevManifest);
           websocket.hmr(manifest, updates);
-          console.log("> HMR");
-        } else {
+
+          let hdr = updates.some((u) => u.revalidate);
+          console.log("> HMR" + (hdr ? " + HDR" : ""));
+        } else if (state.prevManifest !== undefined) {
           websocket.reload();
-          console.log("> Reload");
+          console.log("> Live reload");
         }
         state.prevManifest = manifest;
       },