feat(deps)!: update chokidar to v5 (#150)

Author: chenjiahan

docs/migrate-v1-to-v2.md

@@ -77,6 +77,48 @@ export default {
 };
 ```
 
+### Updated `chokidar` to v5
+
+`@rspack/dev-server` v2 upgrades the underlying file watcher `chokidar` from v3 to v5.
+
+One important breaking change in `chokidar` v4+ is that [glob patterns are no longer supported](https://github.com/paulmillr/chokidar#upgrading).
+
+If you previously passed glob patterns such as `**/*.js` or `./directory/**/*` to `devServer.watchFiles`, you can watch a directory and filter with `ignored`:
+
+```js
+// Before
+export default {
+  devServer: {
+    watchFiles: '**/*.js',
+  },
+};
+
+// After
+export default {
+  devServer: {
+    watchFiles: {
+      paths: '.',
+      options: {
+        ignored: (path, stats) =>
+          stats?.isFile() && !path.endsWith('.js'),
+      },
+    },
+  },
+};
+```
+
+Or use `node:fs/promises` to expand the glob first:
+
+```js
+import { glob } from 'node:fs/promises';
+
+export default async () => ({
+  devServer: {
+    watchFiles: await Array.fromAsync(glob('**/*.js')),
+  },
+});
+```
+
 ### Removed `spdy` support
 
 - `server.type: "spdy"` is no longer supported.
@@ -108,6 +150,8 @@ export default {
 };
 ```
 
+> `Array.fromAsync()` requires Node.js 22+.
+
 ### Optional `selfsigned` peer dependency
 
 `selfsigned` is no longer bundled as a direct dependency of `@rspack/dev-server`.

package.json

@@ -49,7 +49,7 @@
     "@types/serve-index": "^1.9.4",
     "@types/serve-static": "^2.2.0",
     "@types/ws": "^8.18.1",
-    "chokidar": "^3.6.0",
+    "chokidar": "^5.0.0",
     "connect-history-api-fallback": "^2.0.0",
     "connect-next": "^4.0.0",
     "http-proxy-middleware": "^3.0.5",

pnpm-lock.yaml

@@ -15,7 +15,6 @@ export default defineConfig({
           'serve-static': 'commonjs serve-static',
           'serve-index': 'commonjs serve-index',
           selfsigned: 'commonjs selfsigned',
-          chokidar: 'commonjs chokidar',
         },
       },
     },

rslib.config.ts

@@ -148,6 +148,7 @@ const getConnect = async () => {
   const { connect } = await import('connect-next');
   return connect;
 };
+const getChokidar = memoize(() => import('chokidar'));
 const getServeStatic = memoize(() => require('serve-static'));
 
 const encodeOverlaySettings = (
@@ -602,11 +603,7 @@ class Server<
     const compilerOptions = this.#getCompilerOptions();
     const compilerWatchOptions = compilerOptions.watchOptions;
     const getWatchOptions = (
-      watchOptions: WatchOptions & {
-        aggregateTimeout?: number;
-        ignored?: WatchOptions['ignored'];
-        poll?: number | boolean;
-      } = {},
+      watchOptions: WatchFiles['options'] = {},
     ): WatchOptions => {
       const getPolling = () => {
         if (typeof watchOptions.usePolling !== 'undefined') {
@@ -623,6 +620,7 @@ class Server<
 
         return false;
       };
+
       const getInterval = () => {
         if (typeof watchOptions.interval !== 'undefined') {
           return watchOptions.interval;
@@ -639,8 +637,7 @@ class Server<
 
       const usePolling = getPolling();
       const interval = getInterval();
-      const { poll, ...rest } = watchOptions;
-
+      const { poll: _poll, ...rest } = watchOptions;
       return {
         ignoreInitial: true,
         persistent: true,
@@ -650,9 +647,7 @@ class Server<
         ignorePermissionErrors: true,
         // Respect options from compiler watchOptions
         usePolling,
-        interval,
-        ignored: watchOptions.ignored,
-        // TODO: we respect these options for all watch options and allow developers to pass them to chokidar, but chokidar doesn't have these options maybe we need revisit that in future
+        ...(interval !== undefined ? { interval } : {}),
         ...rest,
       };
     };
@@ -1463,8 +1458,8 @@ class Server<
       }
     }
 
-    this.#setupWatchFiles();
-    this.#setupWatchStaticFiles();
+    await this.#setupWatchFiles();
+    await this.#setupWatchStaticFiles();
     await this.#setupMiddlewares();
 
     if (this.options.setupExitSignals) {
@@ -1563,24 +1558,24 @@ class Server<
     );
   }
 
-  #setupWatchStaticFiles(): void {
+  async #setupWatchStaticFiles(): Promise<void> {
     const watchFiles = this.options.static as NormalizedStatic[];
 
     if (watchFiles.length > 0) {
       for (const item of watchFiles) {
         if (item.watch) {
-          this.watchFiles(item.directory, item.watch as WatchOptions);
+          await this.watchFiles(item.directory, item.watch as WatchOptions);
         }
       }
     }
   }
 
-  #setupWatchFiles(): void {
+  async #setupWatchFiles(): Promise<void> {
     const watchFiles = this.options.watchFiles as WatchFiles[];
 
     if (watchFiles.length > 0) {
       for (const item of watchFiles) {
-        this.watchFiles(item.paths, item.options);
+        await this.watchFiles(item.paths, item.options);
       }
     }
   }
@@ -2577,10 +2572,12 @@ class Server<
     }
   }
 
-  watchFiles(watchPath: string | string[], watchOptions?: WatchOptions) {
-    const chokidar = require('chokidar');
-
-    const watcher = chokidar.watch(watchPath, watchOptions);
+  async watchFiles(
+    watchPath: string | string[],
+    watchOptions?: WatchOptions,
+  ): Promise<void> {
+    const { watch } = await getChokidar();
+    const watcher = watch(watchPath, watchOptions);
 
     // disabling refreshing on changing the content
     if (this.options.liveReload) {

src/server.ts

@@ -4,7 +4,7 @@ import type {
   ServerResponse,
 } from 'node:http';
 import type { ServerOptions } from 'node:https';
-import type { FSWatcher, WatchOptions } from 'chokidar';
+import type { FSWatcher, ChokidarOptions as WatchOptions } from 'chokidar';
 import type { Options as ConnectHistoryApiFallbackOptions } from 'connect-history-api-fallback';
 import type {
   Server as ConnectApplication,
@@ -97,7 +97,6 @@ export interface WatchFiles {
   paths: string | string[];
   options?: WatchOptions & {
     aggregateTimeout?: number;
-    ignored?: WatchOptions['ignored'];
     poll?: number | boolean;
   };
 }