feat: added the watchFiles option (#3136)

Author: anshumanv

.gitignore

@@ -13,6 +13,7 @@ yarn.lock
 
 .eslintcache
 
+test/fixtures/contentbase-config/public/assets/non-exist.txt
 test/fixtures/reload-config/main.css
 test/fixtures/reload-config-2/main.css
 !/test/fixtures/contentbase-config/public/node_modules

bin/cli-flags.js

@@ -228,5 +228,16 @@ module.exports = {
       multiple: true,
       negative: true,
     },
+    {
+      name: 'watch-files',
+      type: String,
+      configs: [
+        {
+          type: 'string',
+        },
+      ],
+      description: 'Watch static files for file changes',
+      multiple: true,
+    },
   ],
 };

lib/Server.js

@@ -71,6 +71,7 @@ class Server {
     // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
     routes(this);
 
+    this.setupWatchFiles();
     this.setupFeatures();
     this.setupHttps();
     this.createServer();
@@ -349,6 +350,27 @@ class Server {
     this.options.onBeforeSetupMiddleware(this);
   }
 
+  setupWatchFiles() {
+    if (this.options.watchFiles) {
+      const { watchFiles } = this.options;
+
+      if (typeof watchFiles === 'string') {
+        this.watchFiles(watchFiles, {});
+      } else if (Array.isArray(watchFiles)) {
+        watchFiles.forEach((file) => {
+          if (typeof file === 'string') {
+            this.watchFiles(file, {});
+          } else {
+            this.watchFiles(file.paths, file.options || {});
+          }
+        });
+      } else {
+        // { paths: [...], options: {} }
+        this.watchFiles(watchFiles.paths, watchFiles.options || {});
+      }
+    }
+  }
+
   setupMiddleware() {
     this.app.use(this.middleware);
   }

lib/options.json

@@ -103,6 +103,35 @@
           ]
         }
       }
+    },
+    "WatchFilesString": {
+      "type": "string",
+      "minLength": 1
+    },
+    "WatchFilesObject": {
+      "type": "object",
+      "properties": {
+        "paths": {
+          "anyOf": [
+            {
+              "type": "string",
+              "minLength": 1
+            },
+            {
+              "type": "array",
+              "items": {
+                "type": "string",
+                "minLength": 1
+              }
+            }
+          ]
+        },
+        "options": {
+          "type": "object",
+          "additionalProperties": true
+        }
+      },
+      "additionalProperties": false
     }
   },
   "properties": {
@@ -424,6 +453,29 @@
           "enum": ["sockjs", "ws"]
         }
       ]
+    },
+    "watchFiles": {
+      "anyOf": [
+        {
+          "$ref": "#/definitions/WatchFilesString"
+        },
+        {
+          "$ref": "#/definitions/WatchFilesObject"
+        },
+        {
+          "type": "array",
+          "items": {
+            "anyOf": [
+              {
+                "$ref": "#/definitions/WatchFilesString"
+              },
+              {
+                "$ref": "#/definitions/WatchFilesObject"
+              }
+            ]
+          }
+        }
+      ]
     }
   },
   "errorMessage": {
@@ -443,13 +495,14 @@
       "onAfterSetupMiddleware": "should be {Function} (https://webpack.js.org/configuration/dev-server/#devserverafter)",
       "onBeforeSetupMiddleware": "should be {Function} (https://webpack.js.org/configuration/dev-server/#devserverbefore)",
       "onListening": "should be {Function} (https://webpack.js.org/configuration/dev-server/#onlistening)",
-      "open": "should be {Boolean|String|(STRING | Object)[]} (https://webpack.js.org/configuration/dev-server/#devserveropen)",
+      "open": "should be {Boolean|String|(String | Object)[]} (https://webpack.js.org/configuration/dev-server/#devserveropen)",
       "port": "should be {Number|String|Null} (https://webpack.js.org/configuration/dev-server/#devserverport)",
       "proxy": "should be {Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverproxy)",
       "public": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpublic)",
       "setupExitSignals": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserversetupexitsignals)",
       "static": "should be {Boolean|String|Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverstatic)",
-      "transportMode": "should be {String|Object} (https://webpack.js.org/configuration/dev-server/#devservertransportmode)"
+      "transportMode": "should be {String|Object} (https://webpack.js.org/configuration/dev-server/#devservertransportmode)",
+      "watchFiles": "should be {String|Array|Object} (https://webpack.js.org/configuration/dev-server/#devserverwatchfiles)"
     }
   },
   "additionalProperties": false

test/__snapshots__/Validation.test.js.snap

@@ -43,5 +43,5 @@ exports[`Validation validation should fail validation for invalid \`static\` con
 exports[`Validation validation should fail validation for no additional properties 1`] = `
 "Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
  - configuration has an unknown property 'additional'. These properties are valid:
-   object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, public?, setupExitSignals?, static?, transportMode? }"
+   object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, public?, setupExitSignals?, static?, transportMode?, watchFiles? }"
 `;

test/fixtures/contentbase-config/public/assets/other.txt

@@ -401,6 +401,16 @@ describe('options', () => {
           },
         ],
       },
+      watchFiles: {
+        success: [
+          'dir',
+          ['one-dir', 'two-dir'],
+          { paths: ['dir'] },
+          { paths: ['dir'], options: { usePolling: true } },
+          [{ paths: ['one-dir'] }, 'two-dir'],
+        ],
+        failure: [false, 123],
+      },
     };
 
     Object.keys(cases).forEach((key) => {

test/options.test.js

@@ -44,6 +44,7 @@ const portsList = {
   bundle: 1,
   ModuleFederation: 1,
   'setupExitSignals-option': 1,
+  'watchFiles-option': 1,
 };
 
 let startPort = 8089;