chore(deps): update chokidar to v4

In order to replace chokidars removed glob functionality, we have to use some trickery.

- `glob-parent` is used to get the common ancenstor dir that needs to be watched.
- `picomatch` is used as ignore-filter to make sure that only files/dirs are watched that match the given glob
- `is-glob` is used to only use glob logic when needed

In total this adds 4 direct or transitive dependencies. However, the update to chokidar v4 removes 12. So its a net positive

I also added a test to ensure that creation of nested directories is detected properly.

Author: Fuzzyma

.eslintignore

@@ -6,3 +6,4 @@ node_modules
 examples/**/main.js
 examples/client/trusted-types-overlay/app.js
 test/fixtures/reload-config/foo.js
+test/fixtures/worker-config-dev-server-false/public/worker-bundle.js

.gitignore

@@ -18,6 +18,7 @@ yarn-error.log
 
 test/fixtures/static-config/public/assets/non-exist.txt
 test/fixtures/watch-files-config/public/assets/non-exist.txt
+test/fixtures/watch-files-config/public/non-existant/non-exist.txt
 test/fixtures/reload-config/main.css
 test/fixtures/reload-config-2/main.css
 test/fixtures/worker-config-dev-server-false/public

lib/Server.js

@@ -18,7 +18,7 @@ const schema = require("./options.json");
 /** @typedef {import("webpack").Stats} Stats */
 /** @typedef {import("webpack").MultiStats} MultiStats */
 /** @typedef {import("os").NetworkInterfaceInfo} NetworkInterfaceInfo */
-/** @typedef {import("chokidar").WatchOptions} WatchOptions */
+/** @typedef {import("chokidar").ChokidarOptions} WatchOptions */
 /** @typedef {import("chokidar").FSWatcher} FSWatcher */
 /** @typedef {import("connect-history-api-fallback").Options} ConnectHistoryApiFallbackOptions */
 /** @typedef {import("bonjour-service").Bonjour} Bonjour */
@@ -3254,9 +3254,36 @@ class Server {
    * @param {string | string[]} watchPath
    * @param {WatchOptions} [watchOptions]
    */
-  watchFiles(watchPath, watchOptions) {
+  watchFiles(watchPath, watchOptions = {}) {
     const chokidar = require("chokidar");
-    const watcher = chokidar.watch(watchPath, watchOptions);
+    const isGlob = require("is-glob");
+
+    const watchPathArr = Array.isArray(watchPath) ? watchPath : [watchPath];
+    const watchPathGlobs = watchPathArr.filter((p) => isGlob(p));
+
+    // No need to do all this work when no globs are used
+    if (watchPathGlobs.length > 0) {
+      const globParent = require("glob-parent");
+      const picomatch = require("picomatch");
+
+      watchPathGlobs.forEach((p) => {
+        watchPathArr[watchPathArr.indexOf(p)] = globParent(p);
+      });
+
+      const matcher = picomatch(watchPathGlobs);
+      const ignoreFunc = (/** @type {string} */ p) =>
+        !watchPathArr.includes(p) && !matcher(p);
+
+      if (Array.isArray(watchOptions.ignored)) {
+        watchOptions.ignored.push(ignoreFunc);
+      } else {
+        watchOptions.ignored = watchOptions.ignored
+          ? [watchOptions.ignored, ignoreFunc]
+          : ignoreFunc;
+      }
+    }
+
+    const watcher = chokidar.watch(watchPathArr, watchOptions);
 
     // disabling refreshing on changing the content
     if (this.options.liveReload) {