Add a logging mechanism that can be dissabled in production (#103)

* chore: Add 'preprocess' in gulp

It allows to change JS/HTML/... files depending on environment
variables. It is similar to macros in C where you can inject code if
some environment variables are set. Docs: https://www.npmjs.com/package/gulp-preprocess

The preprocess will be used to enabled/disable a the logger according to
the development and production modes. See #102

* feat(logger): Add a toggling logger mechanism for dev/prod environments

gulpfile.js

@@ -6,6 +6,7 @@ const {
     watch,
     dest
 } = require('gulp');
+const preprocess = require("gulp-preprocess");
 const $ = require('gulp-load-plugins')()
 
 
@@ -118,7 +119,9 @@ function moveIcons() {
 
 /** Task: Copy javascript folder from `src/` to `build/` */
 function moveJs() {
-    return pipe('./src/js/**/*', `./build/${target}/js`);
+    return src('./src/js/**/*')
+        .pipe(preprocess({ context: { DEBUG: environment === 'development' }}))
+        .pipe(gulp.dest(`./build/${target}/js`));
 }
 
 /** Task: Copy html files from `src/` to `build/` */

manifest.json

@@ -20,7 +20,7 @@
     "content_scripts": [{
         "matches": ["https://*.up.pt/*"],
         "css": ["css/content_style.css"],
-        "js": ["js/lib/jquery-3.4.1.js", "js/lib/datatables.min.js", "js/lib/ics.deps.min.js", "js/lib/ics.js", "js/lib/sweetalert.min.js", "js/lib/luxon.min.js", "js/utils/calendar.js", "js/utils/global.js", "js/utils/dropdown.js", "js/utils/modal.js", "js/utils/time.js", "js/extractors/extractor.js"],
+        "js": ["js/lib/jquery-3.4.1.js", "js/lib/datatables.min.js", "js/lib/ics.deps.min.js", "js/lib/ics.js", "js/lib/sweetalert.min.js", "js/lib/luxon.min.js", "js/utils/calendar.js", "js/utils/global.js", "js/utils/dropdown.js", "js/utils/modal.js", "js/utils/time.js", "js/utils/logger.js", "js/extractors/extractor.js"],
         "run_at": "document_end"
     }, {
         "matches": ["https://sigarra.up.pt/*"],

package.json

@@ -42,6 +42,7 @@
     "gulp-livereload": "^4.0.2",
     "gulp-load-plugins": "^2.0.4",
     "gulp-merge-json": "^2.1.1",
+    "gulp-preprocess": "^4.0.2",
     "gulp-zip": "^5.0.2",
     "http-server": "^14.0.0"
   }

src/js/utils/logger.js

@@ -0,0 +1,53 @@
+"use strict";
+
+class Logger {
+    static isEnabled = false;
+
+    /**
+     * Generic function that calls one of the 'console' functions (e.g. 'debug')
+     * if the `isEnabled` attribute is set. Moreover, it adds a styled prefix
+     * to the message saying "SigTools" :)
+     * 
+     * @param {Function} fn A console function reference, e.g.
+     * `console.debug`
+     * @param {any[]} args The arguments list to be passed to the console
+     * function
+     */
+    static _caller(fn, args) {
+        Logger.isEnabled && fn(
+            "%cSigTools",
+            "font-weight: bold; background-color: #e74c3c; color: white; padding: 0.5em 0.25em",
+            ...args
+        );
+    }
+
+    // A list of functions available in 'console' and supported in our logger
+    // This is just a declaration because of the IDEs. The definition is below
+    // See: https://developer.mozilla.org/en-US/docs/Web/API/console
+    static debug() { }
+    static error() { }
+    static info() { }
+    static log() { }
+    static warn() { }
+}
+
+// dynamically define the interfaces in our logger to existing functions in
+// 'console'
+if (console) {
+
+    // get the static methods added above, e.g. 'debug', 'error', etc
+    const allFn = Object.getOwnPropertyNames(Logger).filter(
+        prop => typeof Logger[prop] === "function" && prop !== '_caller'
+    );
+
+    for (const fnName of allFn) {
+        Logger[fnName] = function () {
+            Logger._caller(console[fnName], arguments);
+        }
+    }
+}
+
+// @if DEBUG=true
+// logger is only enabled when 'gulp' env is set to development mode
+Logger.isEnabled = true;
+// @endif