feat(remix-dev): add watchPaths config option (#3188)

Co-authored-by: Christopher Trudel <[email protected]>
Co-authored-by: Jacob Ebey <[email protected]>

contributors.yml

@@ -62,6 +62,7 @@
 - chenxsan
 - chiangs
 - christianhg
+- christophertrudel
 - christophgockel
 - clarkmitchell
 - cliffordfajardo

docs/api/conventions.md

@@ -158,6 +158,18 @@ module.exports = {
 };
 ```
 
+### watchPaths
+
+A function for defining custom directories to watch while running [remix dev](https://remix.run/docs/en/v1/other-api/dev#remix-dev), in addition to [`appDirectory`](#appDirectory).
+
+```tsx
+exports.watchPaths = async () => {
+  return [
+      "/some/path/*"
+  ];
+};
+```
+
 ## File Name Conventions
 
 There are a few conventions that Remix uses you should be aware of.

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

@@ -48,6 +48,7 @@ describe("readConfig", () => {
         "serverMode": "production",
         "serverModuleFormat": "cjs",
         "serverPlatform": "node",
+        "watchPaths": Array [],
       }
     `
     );

packages/remix-dev/compiler.ts

@@ -221,6 +221,10 @@ export async function watch(
   if (config.serverEntryPoint) {
     toWatch.push(config.serverEntryPoint);
   }
+
+  config.watchPaths?.forEach((watchPath) => {
+    toWatch.push(watchPath);
+  });
 
   let watcher = chokidar
     .watch(toWatch, {

packages/remix-dev/config.ts

@@ -147,6 +147,14 @@ export interface AppConfig {
    * in a CJS build.
    */
   serverDependenciesToBundle?: Array<string | RegExp>;
+
+  /**
+   * A function for defining custom directories to watch while running `remix dev`, in addition to `appDirectory`.
+   */
+  watchPaths?:
+    | string
+    | string[]
+    | (() => Promise<string | string[]> | string | string[]);
 }
 
 /**
@@ -250,6 +258,11 @@ export interface RemixConfig {
    * in a CJS build.
    */
   serverDependenciesToBundle: Array<string | RegExp>;
+
+  /**
+   * A list of directories to watch.
+   */
+  watchPaths: string[];
 }
 
 /**
@@ -395,6 +408,20 @@ export async function readConfig(
     }
   }
 
+  let watchPaths: string[] = [];
+  if (typeof appConfig.watchPaths === "function") {
+    let directories = await appConfig.watchPaths();
+    watchPaths = watchPaths.concat(
+      Array.isArray(directories) ? directories : [directories]
+    );
+  } else if (appConfig.watchPaths) {
+    watchPaths = watchPaths.concat(
+      Array.isArray(appConfig.watchPaths)
+        ? appConfig.watchPaths
+        : [appConfig.watchPaths]
+    );
+  }
+
   let serverBuildTargetEntryModule = `export * from ${JSON.stringify(
     serverBuildVirtualModule.id
   )};`;
@@ -421,6 +448,7 @@ export async function readConfig(
     serverEntryPoint: customServerEntryPoint,
     serverDependenciesToBundle,
     mdx,
+    watchPaths,
   };
 }