Put filewatcher in a worker, for better stability and performance (#1368)

Author: Jasper De Moor

package.json

@@ -23,14 +23,14 @@
     "babylon-walk": "^1.0.2",
     "browserslist": "^3.2.6",
     "chalk": "^2.1.0",
-    "chokidar": "^2.0.3",
     "command-exists": "^1.2.6",
     "commander": "^2.11.0",
     "cross-spawn": "^6.0.4",
     "cssnano": "^3.10.0",
     "deasync": "^0.1.13",
     "dotenv": "^5.0.0",
     "filesize": "^3.6.0",
+    "fswatcher-child": "^1.0.3",
     "get-port": "^3.2.0",
     "glob": "^7.1.2",
     "grapheme-breaker": "^0.3.2",

src/Bundler.js

@@ -324,6 +324,10 @@ class Bundler extends EventEmitter {
 
     if (this.options.watch) {
       this.watcher = new Watcher();
+      // Wait for ready event for reliable testing on watcher
+      if (process.env.NODE_ENV === 'test' && !this.watcher.ready) {
+        await new Promise(resolve => this.watcher.once('ready', resolve));
+      }
       this.watcher.on('change', this.onChange.bind(this));
     }
 

src/Watcher.js

@@ -1,4 +1,4 @@
-const {FSWatcher} = require('chokidar');
+const FSWatcher = require('fswatcher-child');
 const Path = require('path');
 
 /**
@@ -13,20 +13,12 @@ class Watcher {
     this.watcher = new FSWatcher({
       useFsEvents: this.shouldWatchDirs,
       ignoreInitial: true,
+      ignorePermissionErrors: true,
       ignored: /\.cache|\.git/
     });
 
     this.watchedDirectories = new Map();
-
-    // Only close the watcher after the ready event is emitted
-    this.ready = false;
     this.stopped = false;
-    this.watcher.once('ready', () => {
-      this.ready = true;
-      if (this.stopped) {
-        this.watcher.close();
-      }
-    });
   }
 
   /**
@@ -124,14 +116,19 @@ class Watcher {
     this.watcher.on(event, callback);
   }
 
+  /**
+   * Add an event handler
+   */
+  once(event, callback) {
+    this.watcher.once(event, callback);
+  }
+
   /**
    * Stop watching all paths
    */
   stop() {
     this.stopped = true;
-    if (this.ready) {
-      this.watcher.close();
-    }
+    this.watcher.close();
   }
 }
 

test/hmr.js

@@ -54,6 +54,10 @@ describe('hmr', function() {
 
     const buildEnd = nextEvent(b, 'buildEnd');
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'exports.a = 5;\nexports.b = 5;'
@@ -99,6 +103,10 @@ describe('hmr', function() {
 
     const buildEnd = nextEvent(b, 'buildEnd');
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'exports.a = 5; exports.b = 5;'
@@ -123,6 +131,10 @@ describe('hmr', function() {
 
     const buildEnd = nextEvent(b, 'buildEnd');
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'require("fs"); exports.a = 5; exports.b = 5;'
@@ -145,6 +157,10 @@ describe('hmr', function() {
 
     const buildEnd = nextEvent(b, 'buildEnd');
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'require("fs"; exports.a = 5; exports.b = 5;'
@@ -173,6 +189,10 @@ describe('hmr', function() {
     b = bundler(__dirname + '/input/index.js', {watch: true, hmr: true});
     await b.bundle();
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'require("fs"; exports.a = 5; exports.b = 5;'
@@ -195,6 +215,10 @@ describe('hmr', function() {
 
     const firstBuildEnd = nextEvent(b, 'buildEnd');
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'require("fs"; exports.a = 5; exports.b = 5;'
@@ -233,6 +257,10 @@ describe('hmr', function() {
 
     assert.deepEqual(outputs, [3]);
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'exports.a = 5; exports.b = 5;'
@@ -261,6 +289,10 @@ describe('hmr', function() {
 
     assert.deepEqual(outputs, [3]);
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'exports.a = 5; exports.b = 5;'
@@ -292,6 +324,10 @@ describe('hmr', function() {
     await sleep(50);
     assert.deepEqual(outputs, [3]);
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'exports.a = 5; exports.b = 5;'
@@ -324,6 +360,10 @@ describe('hmr', function() {
 
     let spy = sinon.spy(ctx.document.body, 'appendChild');
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'require("fs"; exports.a = 5; exports.b = 5;'
@@ -362,6 +402,10 @@ describe('hmr', function() {
     let appendSpy = sinon.spy(ctx.document.body, 'appendChild');
     let removeSpy = sinon.spy(ctx.document.getElementById('tmp'), 'remove');
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'require("fs"; exports.a = 5; exports.b = 5;'
@@ -401,6 +445,10 @@ describe('hmr', function() {
 
     const buildEnd = nextEvent(b, 'buildEnd');
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'exports.a = 5;\nexports.b = 5;'
@@ -434,6 +482,10 @@ describe('hmr', function() {
 
     const buildEnd = nextEvent(b, 'buildEnd');
 
+    if (process.platform === 'win32') {
+      await sleep(100);
+    }
+
     fs.writeFileSync(
       __dirname + '/input/local.js',
       'exports.a = 5;\nexports.b = 5;'

test/watcher.js

@@ -239,6 +239,9 @@ describe('watcher', function() {
       fs.readFileSync(__dirname + '/input/.babelrc', 'utf8')
     );
     babelrc.presets[0][1].targets.browsers.push('IE >= 11');
+
+    await sleep(100);
+
     fs.writeFileSync(__dirname + '/input/.babelrc', JSON.stringify(babelrc));
 
     await nextBundle(b);