webui: use terser as js minifier

support es6 syntax
use js comment style in custom.js
only minify the custom.js

using 4.x branch, since 5.x wants async / await and more changes to the gulp script

CONTRIBUTING.md

@@ -7,7 +7,7 @@ Second. Let's try to keep it homogeneous and readable. I have my coding style. I
 ## Pull request ##
 * Do the pull request against the **`dev` branch**
 * **Only touch relevant files** (beware if your editor has auto-formatting feature enabled)
-* If you are adding a new functionality (new hardware, new library support) not related to an existing component move it to it's **own modules** (.ino file)
+* If you are adding a new functionality (new hardware, new library support) not related to an existing component move it to it's **own modules** (.cpp or .h file)
 * If you are adding new library, include it in one of the [**sample test/build/*.h profiles**](https://github.com/xoseperez/espurna/tree/dev/code/test/build), so our integrated CI will try to compile it.
 * Make sure you check [Coding Style](https://github.com/xoseperez/espurna/wiki/CodingStyle)
 * PRs that don't compile or cause more coding errors will not be merged. Please fix the issue. Same goes for PRs that are raised against older commit in dev - you might need to rebase and resolve conflicts.

code/gulpfile.js

@@ -43,6 +43,7 @@ const replace = require('gulp-replace');
 const remover = require('gulp-remove-code');
 const gzip = require('gulp-gzip');
 const path = require('path');
+const terser = require('terser')
 
 // -----------------------------------------------------------------------------
 // Configuration
@@ -107,6 +108,28 @@ var htmllintReporter = function(filepath, issues) {
     }
 };
 
+var compressJs = function() {
+    return through.obj(function (source, encoding, callback) {
+        if (source.isNull()) {
+            callback(null, source);
+            return;
+        }
+
+        if (source.path.endsWith("custom.js")) {
+            var result = terser.minify(source.contents.toString());
+            source.contents = Buffer.from(result.code);
+
+            this.push(source);
+            callback();
+
+            return;
+        }
+
+        callback(null, source);
+        return;
+    });
+};
+
 var buildWebUI = function(module) {
 
     // Declare some modules as optional to remove with
@@ -145,6 +168,7 @@ var buildWebUI = function(module) {
     }
 
     return gulp.src(htmlFolder + '*.html').
+        pipe(remover(modules)).
         pipe(htmllint({
             'failOnError': true,
             'rules': {
@@ -156,7 +180,7 @@ var buildWebUI = function(module) {
         pipe(favicon()).
         pipe(inline({
             base: htmlFolder,
-            js: [],
+            js: [function() { return remover(modules); }, compressJs],
             css: [crass, inlineImages],
             disabledTypes: ['svg', 'img']
         })).
@@ -165,7 +189,7 @@ var buildWebUI = function(module) {
             collapseWhitespace: true,
             removeComments: true,
             minifyCSS: true,
-            minifyJS: true
+            minifyJS: false
         })).
         pipe(replace('pure-', 'p-')).
         pipe(gzip({ gzipOptions: { level: 9 } })).

code/html/custom.js

@@ -20,18 +20,18 @@ var useCCT = false;
 var now = 0;
 var ago = 0;
 
-<!-- removeIf(!rfm69)-->
+//removeIf(!rfm69)
 var packets;
 var filters = [];
-<!-- endRemoveIf(!rfm69)-->
+//endRemoveIf(!rfm69)
 
-<!-- removeIf(!sensor)-->
+//removeIf(!sensor)
 var Magnitudes = [];
 var MagnitudeErrors = {};
 var MagnitudeNames = {};
 var MagnitudeTypePrefixes = {};
 var MagnitudePrefixTypes = {};
-<!-- endRemoveIf(!sensor)-->
+//endRemoveIf(!sensor)
 
 // -----------------------------------------------------------------------------
 // Messages
@@ -417,7 +417,7 @@ function moduleVisible(module) {
     $(".module-" + module).css("display", "inherit");
 }
 
-<!-- removeIf(!thermostat)-->
+//removeIf(!thermostat)
 function checkTempRangeMin() {
     var min = parseInt($("#tempRangeMinInput").val(), 10);
     var max = parseInt($("#tempRangeMaxInput").val(), 10);
@@ -440,7 +440,7 @@ function doResetThermostatCounters(ask) {
         "Are you sure you want to reset burning counters?";
     return doAction(question, "thermostat_reset_counters");
 }
-<!-- endRemoveIf(!thermostat)-->
+//endRemoveIf(!thermostat)
 
 function initSelectGPIO(select) {
     // TODO: properly lock used GPIOs via locking and apply the mask here
@@ -806,7 +806,7 @@ function doDebugClear() {
     return false;
 }
 
-<!-- removeIf(!rfm69)-->
+//removeIf(!rfm69)
 
 function doClearCounts() {
     sendAction("clear-counts", {});
@@ -854,7 +854,7 @@ function doClearFilters() {
     return false;
 }
 
-<!-- endRemoveIf(!rfm69)-->
+//endRemoveIf(!rfm69)
 
 function delParent() {
     var parent = $(this).parent().parent();
@@ -897,7 +897,7 @@ function createRelayList(data, container, template_name) {
 
 }
 
-<!-- removeIf(!sensor)-->
+//removeIf(!sensor)
 function createMagnitudeList(data, container, template_name) {
 
     var current = $("#" + container + " > div").length;
@@ -916,7 +916,7 @@ function createMagnitudeList(data, container, template_name) {
     }
 
 }
-<!-- endRemoveIf(!sensor)-->
+//endRemoveIf(!sensor)
 
 // -----------------------------------------------------------------------------
 // RPN Rules
@@ -950,7 +950,7 @@ function addRPNTopic() {
 // RFM69
 // -----------------------------------------------------------------------------
 
-<!-- removeIf(!rfm69)-->
+//removeIf(!rfm69)
 
 function addMapping() {
     var template = $("#nodeTemplate .pure-g")[0];
@@ -964,7 +964,7 @@ function addMapping() {
     line.appendTo("#mapping");
 }
 
-<!-- endRemoveIf(!rfm69)-->
+//endRemoveIf(!rfm69)
 
 // -----------------------------------------------------------------------------
 // Wifi
@@ -1238,7 +1238,7 @@ function initRelayConfig(data) {
 // Sensors & Magnitudes
 // -----------------------------------------------------------------------------
 
-<!-- removeIf(!sensor)-->
+//removeIf(!sensor)
 function initMagnitudes(data) {
 
     // check if already initialized (each magnitude is inside div.pure-g)
@@ -1267,13 +1267,13 @@ function initMagnitudes(data) {
     }
 
 }
-<!-- endRemoveIf(!sensor)-->
+//endRemoveIf(!sensor)
 
 // -----------------------------------------------------------------------------
 // Curtains
 // -----------------------------------------------------------------------------
 
-<!-- removeIf(!curtain)-->
+//removeIf(!curtain)
 
 //Create the controls for one curtain. It is called when curtain is updated (so created the first time)
 //Let this there as we plan to have more than one curtain per switch
@@ -1323,13 +1323,13 @@ function initCurtainConfig(data) {
     );
 }
 
-<!-- endRemoveIf(!curtain)-->
+//endRemoveIf(!curtain)
 
 // -----------------------------------------------------------------------------
 // Lights
 // -----------------------------------------------------------------------------
 
-<!-- removeIf(!light)-->
+//removeIf(!light)
 
 // wheelColorPicker accepts:
 //   hsv(0...360,0...1,0...1)
@@ -1476,13 +1476,13 @@ function initChannels(num) {
     });
 
 }
-<!-- endRemoveIf(!light)-->
+//endRemoveIf(!light)
 
 // -----------------------------------------------------------------------------
 // RFBridge
 // -----------------------------------------------------------------------------
 
-<!-- removeIf(!rfbridge)-->
+//removeIf(!rfbridge)
 
 function rfbLearn() {
     var parent = $(this).parents(".pure-g");
@@ -1519,13 +1519,13 @@ function addRfbNode() {
 
     return line;
 }
-<!-- endRemoveIf(!rfbridge)-->
+//endRemoveIf(!rfbridge)
 
 // -----------------------------------------------------------------------------
 // LightFox
 // -----------------------------------------------------------------------------
 
-<!-- removeIf(!lightfox)-->
+//removeIf(!lightfox)
 
 function lightfoxLearn() {
     sendAction("lightfoxLearn", {});
@@ -1562,7 +1562,7 @@ function initLightfox(data, relayCount) {
     $(".button-lightfox-clear").off("click").click(lightfoxClear);
 
 }
-<!-- endRemoveIf(!lightfox)-->
+//endRemoveIf(!lightfox)
 
 // -----------------------------------------------------------------------------
 // Processing
@@ -1613,7 +1613,7 @@ function processData(data) {
         // RFBridge
         // ---------------------------------------------------------------------
 
-        <!-- removeIf(!rfbridge)-->
+        //removeIf(!rfbridge)
 
         if ("rfbCount" === key) {
             for (i=0; i<data.rfbCount; i++) { addRfbNode(); }
@@ -1637,26 +1637,26 @@ function processData(data) {
             return;
         }
 
-        <!-- endRemoveIf(!rfbridge)-->
+        //endRemoveIf(!rfbridge)
 
         // ---------------------------------------------------------------------
         // LightFox
         // ---------------------------------------------------------------------
 
-        <!-- removeIf(!lightfox)-->
+        //removeIf(!lightfox)
 
         if ("lightfoxButtons" === key) {
             initLightfox(data["lightfoxButtons"], data["lightfoxRelayCount"]);
             return;
         }
 
-        <!-- endRemoveIf(!lightfox)-->
+        //endRemoveIf(!lightfox)
 
         // ---------------------------------------------------------------------
         // RFM69
         // ---------------------------------------------------------------------
 
-        <!-- removeIf(!rfm69)-->
+        //removeIf(!rfm69)
 
         if (key == "packet") {
             var packet = data.packet;
@@ -1696,7 +1696,7 @@ function processData(data) {
             return;
         }
 
-        <!-- endRemoveIf(!rfm69)-->
+        //endRemoveIf(!rfm69)
 
         // ---------------------------------------------------------------------
         // RPN Rules
@@ -1748,7 +1748,7 @@ function processData(data) {
         // Curtains
         // ---------------------------------------------------------------------
 
-        <!-- removeIf(!curtain)-->
+        //removeIf(!curtain)
 
         function applyCurtain(a, b) {
             $("#curtainGetPicture").css('background', 'linear-gradient(' + a + ', black ' + b + '%, #a0d6ff ' + b + '%)');
@@ -1790,13 +1790,13 @@ function processData(data) {
             }
             return;
         }
-        <!-- endRemoveIf(!curtain)-->
+        //endRemoveIf(!curtain)
 
         // ---------------------------------------------------------------------
         // Lights
         // ---------------------------------------------------------------------
 
-        <!-- removeIf(!light)-->
+        //removeIf(!light)
 
         if ("rgb" === key) {
             initColor({rgb: true});
@@ -1844,13 +1844,13 @@ function processData(data) {
             useCCT = value;
         }
 
-        <!-- endRemoveIf(!light)-->
+        //endRemoveIf(!light)
 
         // ---------------------------------------------------------------------
         // Sensors & Magnitudes
         // ---------------------------------------------------------------------
 
-        <!-- removeIf(!sensor)-->
+        //removeIf(!sensor)
 
         {
             var position = key.indexOf("Correction");
@@ -1924,7 +1924,7 @@ function processData(data) {
             return;
         }
 
-        <!-- endRemoveIf(!sensor)-->
+        //endRemoveIf(!sensor)
 
         // ---------------------------------------------------------------------
         // WiFi
@@ -1993,7 +1993,7 @@ function processData(data) {
         // Curtain(s)
         // ---------------------------------------------------------------------
 
-        <!-- removeIf(!curtain)-->
+        //removeIf(!curtain)
 
         // Relay configuration
         if ("curtainConfig" === key) {
@@ -2001,7 +2001,7 @@ function processData(data) {
             return;
         }
 
-        <!-- endRemoveIf(!curtain)-->
+        //endRemoveIf(!curtain)
 
 
 
@@ -2047,12 +2047,12 @@ function processData(data) {
         }
 
         // Domoticz - Magnitudes
-        <!-- removeIf(!sensor)-->
+        //removeIf(!sensor)
         if ("dczMagnitudes" === key) {
             createMagnitudeList(value, "dczMagnitudes", "dczMagnitudeTemplate");
             return;
         }
-        <!-- endRemoveIf(!sensor)-->
+        //endRemoveIf(!sensor)
 
         // ---------------------------------------------------------------------
         // Thingspeak
@@ -2065,12 +2065,12 @@ function processData(data) {
         }
 
         // Thingspeak - Magnitudes
-        <!-- removeIf(!sensor)-->
+        //removeIf(!sensor)
         if ("tspkMagnitudes" === key) {
             createMagnitudeList(value, "tspkMagnitudes", "tspkMagnitudeTemplate");
             return;
         }
-        <!-- endRemoveIf(!sensor)-->
+        //endRemoveIf(!sensor)
 
         // ---------------------------------------------------------------------
         // HTTP API
@@ -2153,11 +2153,11 @@ function processData(data) {
             var days    = uptime;
             value = days + "d " + zeroPad(hours, 2) + "h " + zeroPad(minutes, 2) + "m " + zeroPad(seconds, 2) + "s";
         }
-        <!-- removeIf(!thermostat)-->
+        //removeIf(!thermostat)
         if ("tmpUnits" == key) {
             $("span.tmpUnit").html(data[key] == 3 ? "ºF" : "ºC");
         }
-        <!-- endRemoveIf(!thermostat)-->
+        //endRemoveIf(!thermostat)
 
         // ---------------------------------------------------------------------
         // Matching
@@ -2349,7 +2349,7 @@ $(function() {
     $("#uploader").on("change", onFileUpload);
     $(".button-upgrade").on("click", doUpgrade);
 
-    <!-- removeIf(!garland)-->
+    //removeIf(!garland)
     $(".checkbox-garland-enable").on("change", function() {
         sendAction("garland_switch", {status: $(this).prop("checked") ? 1 : 0});
     });
@@ -2365,11 +2365,11 @@ $(function() {
     $(".button-garland-set-default").on("click", function() {
         sendAction("garland_set_default", {});
     });
-    <!-- endRemoveIf(!garland)-->
+    //endRemoveIf(!garland)
 
-    <!-- removeIf(!thermostat)-->
+    //removeIf(!thermostat)
     $(".button-thermostat-reset-counters").on('click', doResetThermostatCounters);
-    <!-- endRemoveIf(!thermostat)-->
+    //endRemoveIf(!thermostat)
 
     $(".button-apikey").on("click", generateAPIKey);
     $(".button-upgrade-browse").on("click", function() {
@@ -2387,24 +2387,24 @@ $(function() {
     $(".button-add-switch-schedule").on("click", function() {
         addSchedule({schType: 1, schSwitch: -1});
     });
-    <!-- removeIf(!light)-->
+    //removeIf(!light)
     $(".button-add-light-schedule").on("click", function() {
         addSchedule({schType: 2, schSwitch: -1});
     });
-    <!-- endRemoveIf(!light)-->
+    //endRemoveIf(!light)
 
-    <!-- removeIf(!curtain)-->
+    //removeIf(!curtain)
     $(".button-add-curtain-schedule").on("click", function() {
         addSchedule({schType: 3, schSwitch: -1});
     });
-    <!-- endRemoveIf(!curtain)-->
+    //endRemoveIf(!curtain)
 
     $(".button-add-rpnrule").on('click', addRPNRule);
     $(".button-add-rpntopic").on('click', addRPNTopic);
 
     $(".button-del-parent").on('click', delParent);
 
-    <!-- removeIf(!rfm69)-->
+    //removeIf(!rfm69)
     $(".button-add-mapping").on('click', addMapping);
     $(".button-clear-counts").on('click', doClearCounts);
     $(".button-clear-messages").on('click', doClearMessages);
@@ -2416,7 +2416,7 @@ $(function() {
     for (var i = 0; i < packets.columns()[0].length; i++) {
         filters[i] = false;
     }
-    <!-- endRemoveIf(!rfm69)-->
+    //endRemoveIf(!rfm69)
 
     $(".gpio-select").each(function(_, elem) {
         initSelectGPIO(elem)

code/package.json

@@ -16,6 +16,7 @@
     "gulp-inline": "^0.1.1",
     "gulp-remove-code": "^3.0.4",
     "gulp-rename": "^1.4.0",
-    "gulp-replace": "^1.0.0"
+    "gulp-replace": "^1.0.0",
+    "terser": "^4.8.0"
   }
 }