Partially restore watch

Update all dev dependencies

build.js

@@ -23,6 +23,7 @@ const init = require('./build/build-modules-js/init.es6.js');
 const compileCSS = require('./build/build-modules-js/compilecss.es6.js');
 const compileJS = require('./build/build-modules-js/compilejs.es6.js');
 const minifyVendor = require('./build/build-modules-js/javascript/minify-vendor.es6.js');
+const watch = require('./build/build-modules-js/watch.es6.js')
 
 // The settings
 const options = require('./package.json');
@@ -37,18 +38,17 @@ if ('settings' in settings) {
 Program
   .version(options.version)
   .option('--copy-assets', 'Moving files from node_modules to media folder')
+  .option('--build-pages', 'Creates the error pages for unsupported PHP version & incomplete environment')
   .option('--compile-js, --compile-js path', 'Handles ES6, ES5 and web component scripts')
   .option('--compile-css, --compile-css path', 'Compiles all the scss files to css')
-  .option('--build-pages', 'Creates the error pages for unsupported PHP version & incomplete environment')
+  .option('--watch, --watch path', 'Watch file changes and re-compile (Only works for the js in the media_source).')
   .on('--help', () => {
     // eslint-disable-next-line no-console
     console.log(`Version: ${options.version}`);
     process.exit(0);
   })
   .parse(process.argv);
 
-// @todo re implement the watch functionality...
-// .option('--watch, --watch path', 'Watch file changes and re-compile (Only work for compile-css and compile-js now).')
 
 // Show help by default
 if (!process.argv.slice(2).length) {
@@ -97,3 +97,8 @@ if (Program.compileCss) {
 if (Program.compileJs) {
   compileJS.compileJS(options, Program.args[0]);
 }
+
+// Compress/transpile the javascript files
+if (Program.watch) {
+  watch.run(options, Program.args[0]);
+}

build/build-modules-js/compilejs.es6.js

@@ -1,10 +1,6 @@
 const Fs = require('fs');
-const Path = require('path');
 const Recurs = require('recursive-readdir');
-const UglifyJS = require('uglify-es');
-const TranspileJs = require('./javascript/compile-es6.es6.js');
-const TranspileWc = require('./javascript/compile-w-c.es6.js');
-const MakeDir = require('./utils/make-dir.es6.js');
+const HandleFile = require('./javascript/handle-file.es6.js');
 const RootPath = require('./utils/rootpath.es6.js')._();
 
 /**
@@ -49,21 +45,7 @@ module.exports.compileJS = (options, path) => {
           (files) => {
             files.forEach(
               (file) => {
-                if (file.match(/\.js/) && file.match(/\.es6\.js/) && !file.match(/\.w-c\.es6\.js/)) {
-                  // ES6 file so we need to transpile it
-                  TranspileJs.compileFile(file);
-                } else if (file.match(/\.js/) && file.match(/\.es5\.js/)) {
-                  // ES5 file, we will copy the file and then minify it in place
-                  // Ensure that the directories exist or create them
-                  MakeDir.run(Path.dirname(file).replace('/build/media_source/', '/media/').replace('\\build\\media_source\\', '\\media\\'));
-                  Fs.copyFileSync(file, file.replace('/build/media_source/', '/media/').replace('\\build\\media_source\\', '\\media\\').replace('.es5.js', '.js'));
-                  Fs.writeFileSync(file.replace('/build/media_source/', '/media/').replace('\\build\\media_source\\', '\\media\\').replace('.es5.js', '.min.js'), UglifyJS.minify(Fs.readFileSync(file, 'utf8')).code, { encoding: 'utf8' });
-                  // eslint-disable-next-line no-console
-                  console.log(`Es5 file copied/minified: ${file}`);
-                } else if (file.match(/\.js/) && file.match(/\.w-c\.es6\.js/)) {
-                  // Web Component, so we need to transpile it
-                  TranspileWc.compile(file, options);
-                }
+                HandleFile.run(file);
               },
               (error) => {
                 // eslint-disable-next-line no-console

build/build-modules-js/javascript/handle-file.es6.js

@@ -0,0 +1,24 @@
+const Fs = require('fs');
+const Path = require('path');
+const UglifyJS = require('uglify-es');
+const TranspileJs = require('./compile-es6.es6.js');
+const TranspileWc = require('./compile-w-c.es6.js');
+const MakeDir = require('../utils/make-dir.es6.js');
+
+module.exports.run = (file) => {
+    if (file.match(/\.js/) && file.match(/\.es6\.js/) && !file.match(/\.w-c\.es6\.js/)) {
+        // ES6 file so we need to transpile it
+        TranspileJs.compileFile(file);
+    } else if (file.match(/\.js/) && file.match(/\.es5\.js/)) {
+        // ES5 file, we will copy the file and then minify it in place
+        // Ensure that the directories exist or create them
+        MakeDir.run(Path.dirname(file).replace('/build/media_source/', '/media/').replace('\\build\\media_source\\', '\\media\\'));
+        Fs.copyFileSync(file, file.replace('/build/media_source/', '/media/').replace('\\build\\media_source\\', '\\media\\').replace('.es5.js', '.js'));
+        Fs.writeFileSync(file.replace('/build/media_source/', '/media/').replace('\\build\\media_source\\', '\\media\\').replace('.es5.js', '.min.js'), UglifyJS.minify(Fs.readFileSync(file, 'utf8')).code, { encoding: 'utf8' });
+        // eslint-disable-next-line no-console
+        console.log(`Es5 file copied/minified: ${file}`);
+    } else if (file.match(/\.js/) && file.match(/\.w-c\.es6\.js/)) {
+        // Web Component, so we need to transpile it
+        TranspileWc.compile(file, options);
+    }
+};

build/build-modules-js/javascript/minify-vendor.es6.js

@@ -5,7 +5,7 @@ const UglifyJS = require('uglify-es');
 const WalkSync = require('../utils/walk-sync.es6.js');
 
 /**
- * Method that will minify a set of vendor javascript files
+ * Method that will minify a set of vendor javascript files 
  */
 module.exports.compile = () => {
   Promise.resolve()

build/build-modules-js/watch.es6.js

@@ -0,0 +1,38 @@
+const watch = require('watch');
+const HandleJsFile = require('./javascript/handle-file.es6.js');
+const Path = require('path');
+const RootPath = require('./utils/rootpath.es6.js')._();
+
+/**
+ * Debounce
+ * https://gist.github.com/nmsdvid/8807205
+ * 
+ * @param { function } callback  The callback function to be executed
+ * @param { integer }  time      The time to wait before firing the callback
+ * @param { integer }  interval  The interval
+ */
+const debounce = (callback, time = 250, interval) => (...args) => clearTimeout(interval, interval = setTimeout(callback, time, ...args));
+
+module.exports.run = (options, path) => {
+  let inputPath = Path.join(RootPath, 'build/media_source');
+  if (path) {
+      inputPath = path;
+  }
+  watch.createMonitor(inputPath, (monitor) => {
+    monitor.on("created", function (f, stat) {
+      if (file.match(/\.js/) && (file.match(/\.es5\.js/) || file.match(/\.es6\.js/) || file.match(/\.w-c\.es6\.js/))) {
+        debounce(HandleJsFile.run(file), 300)
+      }
+      // @todo css and scss
+    });
+    monitor.on("changed", function (file, curr, prev) {
+      if (file.match(/\.js/) && (file.match(/\.es5\.js/) || file.match(/\.es6\.js/) || file.match(/\.w-c\.es6\.js/))) {
+        debounce(HandleJsFile.run(file), 300)
+      }
+      // @todo css and scss
+    });
+    monitor.on("removed", function (f, stat) {
+      // Handle this case as well
+    })
+  });
+};