refactor(cli): Use chokidar for watching

Caveat: could not get this to work with a debounce.
Fixes: recursive file watching on Linux (and thus Docker).

Author: Melvyn Sopacua

cli/index.ts

@@ -6,14 +6,15 @@ import { ServerStyleSheet } from 'styled-components';
 
 import { compile } from 'handlebars';
 import { createServer, IncomingMessage, ServerResponse } from 'http';
-import { dirname, join } from 'path';
+import { dirname, join, resolve } from 'path';
 
 import * as zlib from 'zlib';
 
 // @ts-ignore
 import { createStore, loadAndBundleSpec, Redoc } from 'redoc';
 
-import { createReadStream, existsSync, readFileSync, ReadStream, watch, writeFileSync } from 'fs';
+import {watch} from 'chokidar';
+import { createReadStream, existsSync, readFileSync, ReadStream, writeFileSync } from 'fs';
 import * as mkdirp from 'mkdirp';
 
 import * as YargsParser from 'yargs';
@@ -167,28 +168,25 @@ async function serve(port: number, pathToSpec: string, options: Options = {}) {
   server.listen(port, () => console.log(`Server started: http://127.0.0.1:${port}`));
 
   if (options.watch && existsSync(pathToSpec)) {
-    const pathToSpecDirectory = dirname(pathToSpec);
+    const pathToSpecDirectory = resolve(dirname(pathToSpec));
     const watchOptions = {
-      recursive: true,
+      ignored: /(^|[\/\\])\../,
     };
 
-    watch(
-      pathToSpecDirectory,
-      watchOptions,
-      debounce(async (event, filename) => {
-        if (event === 'change' || event === 'rename') {
-          console.log(`${join(pathToSpecDirectory, filename)} changed, updating docs`);
-          try {
-            spec = await loadAndBundleSpec(pathToSpec);
-            pageHTML = await getPageHTML(spec, pathToSpec, options);
-            console.log('Updated successfully');
-          } catch (e) {
-            console.error('Error while updating: ', e.message);
-          }
-        }
-      }, 2200),
-    );
-    console.log(`👀  Watching ${pathToSpecDirectory} for changes...`);
+    const watcher = watch(pathToSpecDirectory, watchOptions);
+    const log = console.log.bind(console);
+    watcher
+      .on('change', async path => {
+        log(`${path} changed, updating docs`);
+        try {
+          spec = await loadAndBundleSpec(pathToSpec);
+          pageHTML = await getPageHTML(spec, pathToSpec, options);
+          log('Updated successfully');
+        } catch (e) {
+          console.error('Error while updating: ', e.message);
+        }})
+      .on('error', error => console.error(`Watcher error: ${error}`))
+      .on('ready', () => log(`👀  Watching ${pathToSpecDirectory} for changes...`));
   }
 }
 
@@ -291,17 +289,6 @@ function respondWithGzip(
   }
 }
 
-function debounce(callback: (...args) => void, time: number) {
-  let interval;
-  return (...args) => {
-    clearTimeout(interval);
-    interval = setTimeout(() => {
-      interval = null;
-      callback(...args);
-    }, time);
-  };
-}
-
 function isURL(str: string): boolean {
   return /^(https?:)\/\//m.test(str);
 }

cli/package.json

@@ -1,13 +1,14 @@
 {
   "name": "redoc-cli",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "ReDoc's Command Line Interface",
   "main": "index.js",
   "bin": "index.js",
   "repository": "https://github.com/Rebilly/ReDoc",
   "author": "Roman Hotsiy <gotsijroman@gmail.com>",
   "license": "MIT",
   "dependencies": {
+    "chokidar": "^2.0.4",
     "handlebars": "^4.0.11",
     "isarray": "^2.0.4",
     "mkdirp": "^0.5.1",
@@ -26,6 +27,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "@types/chokidar": "^1.7.5",
     "@types/handlebars": "^4.0.39",
     "@types/mkdirp": "^0.5.2",
     "ci-publish": "^1.3.1"