webui: clean-up cfd6e36dbe

update to terser v5
replace gulp-remove-code with a rough equivalent in the gulpscript itself
replace gulp-inline with gulp-inline-source-html
remove base64 modules as redundant when running inline-source (does both)
remove crass as redundant when running inline-source (uses csso)
fixup jquery source map comment (but still keep the actual file)

at least now this seems stable enough to start more of the ui tweaking

code/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+    "env": {
+        "commonjs": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 12
+    },
+    "rules": {
+    }
+};

code/gulpfile.js

@@ -26,31 +26,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // Dependencies
 // -----------------------------------------------------------------------------
 
+const path = require('path');
+
 const gulp = require('gulp');
 const through = require('through2');
 
-const htmlmin = require('gulp-htmlmin');
-const inline = require('gulp-inline');
-const inlineImages = require('gulp-css-base64');
-const favicon = require('gulp-base64-favicon');
-const crass = require('gulp-crass');
-
 const htmllint = require('gulp-htmllint');
 const csslint = require('gulp-csslint');
 
+const htmlmin = require('html-minifier');
+
+const gzip = require('gulp-gzip');
+const inline = require('gulp-inline-source-html');
 const rename = require('gulp-rename');
 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
 // -----------------------------------------------------------------------------
 
 const htmlFolder = 'html/';
-const configFolder = 'espurna/config/';
 const dataFolder = 'espurna/data/';
 const staticFolder = 'espurna/static/';
 
@@ -58,6 +53,19 @@ const staticFolder = 'espurna/static/';
 // Methods
 // -----------------------------------------------------------------------------
 
+var toMinifiedHtml = function(options) {
+    return through.obj(function (source, encoding, callback) {
+        if (source.isNull()) {
+            callback(null, source);
+            return;
+        }
+
+        var contents = source.contents.toString();
+        source.contents = Buffer.from(htmlmin.minify(contents, options));
+        callback(null, source);
+    });
+}
+
 var toHeader = function(name, debug) {
 
     return through.obj(function (source, encoding, callback) {
@@ -108,32 +116,92 @@ var htmllintReporter = function(filepath, issues) {
     }
 };
 
-var compressJs = function() {
-    return through.obj(function (source, encoding, callback) {
+// TODO: this is a roughly equivalent port of the gulp-remove-code,
+// which also uses regexp rules to filter in-between specially-formatted comment blocks
+
+var jsRegexp = function(module) {
+    return '//\\s*removeIf\\(!' + module + '\\)'
+            + '\\s*(\n|\r|.)*?'
+            + '//\\s*endRemoveIf\\(!' + module + '\\)';
+}
+
+var cssRegexp = function(module) {
+    return '/\\*\\s*removeIf\\(!' + module + '\\)\\s*\\*/'
+            + '\\s*(\n|\r|.)*?'
+            + '/\\*\\s*endRemoveIf\\(!' + module + '\\)\\s*\\*/';
+}
+
+var htmlRegexp = function(module) {
+    return '<!--\\s*removeIf\\(!' + module + '\\)\\s*-->'
+            + '\\s*(\n|\r|.)*?'
+            + '<!--\\s*endRemoveIf\\(!' + module + '\\)\\s*-->';
+}
+
+var generateRegexps = function(modules, func) {
+    var regexps = new Set();
+    for (const [module, enabled] of Object.entries(modules)) {
+        if (enabled) {
+            continue;
+        }
+
+        const expression = func(module);
+        const re = new RegExp(expression, 'gm');
+
+        regexps.add(re);
+    }
+
+    return regexps;
+}
+
+// TODO: use html parser here?
+// TODO: separate js files to include js, html & css and avoid 2 step regexp?
+
+var htmlRemover = function(modules) {
+    const regexps = generateRegexps(modules, htmlRegexp);
+
+    return through.obj(function (source, _, callback) {
         if (source.isNull()) {
             callback(null, source);
             return;
         }
 
-        if (source.path.endsWith("custom.js")) {
-            var contents = source.contents.toString();
-            var result = terser.minify(contents);
-            if (result.error) {
-                var { message, filename, line, col, pos } = result.error;
-                throw new Error("terser error `" + message + "` in file " + filename + ", at line " + line);
+        var contents = source.contents.toString();
+        for (var regexp of regexps) {
+            contents = contents.replace(regexp, '');
+        }
+        source.contents = Buffer.from(contents);
+        callback(null, source);
+    });
+}
+
+var inlineHandler = function(modules) {
+    return function(source) {
+        if (((source.sourcepath === 'custom.css') || (source.sourcepath === 'custom.js'))) {
+            const filter = (source.type === 'css') ? cssRegexp : jsRegexp;
+            const regexps = generateRegexps(modules, filter);
+
+            var content = source.fileContent;
+            for (var regexp of regexps) {
+                content = content.replace(regexp, '');
             }
-            source.contents = Buffer.from(result.code);
 
-            this.push(source);
-            callback();
+            source.fileContent = content;
+            return;
+        }
 
+        if (source.content) {
             return;
         }
 
-        callback(null, source);
-        return;
-    });
-};
+        // Just ignore the vendored libs, repackaging makes things worse for the size
+        const path = source.sourcepath;
+        if (path.endsWith('.min.js')) {
+            source.compress = false;
+        } else if (path.endsWith('.min.css')) {
+            source.compress = false;
+        }
+    };
+}
 
 var buildWebUI = function(module) {
 
@@ -178,22 +246,16 @@ var buildWebUI = function(module) {
             'rules': {
                 'id-class-style': false,
                 'label-req-for': false,
-                'line-end-style': false
+                'line-end-style': false,
+                'attr-req-value': false
             }
         }, htmllintReporter)).
-        pipe(remover(modules)).
-        pipe(favicon()).
-        pipe(inline({
-            base: htmlFolder,
-            js: [function() { return remover(modules); }, compressJs],
-            css: [crass, inlineImages],
-            disabledTypes: ['svg', 'img']
-        })).
-        pipe(remover(modules)).
-        pipe(htmlmin({
+        pipe(htmlRemover(modules)).
+        pipe(inline({handlers: [inlineHandler(modules)]})).
+        pipe(toMinifiedHtml({
             collapseWhitespace: true,
             removeComments: true,
-            minifyCSS: true,
+            minifyCSS: false,
             minifyJS: false
         })).
         pipe(replace('pure-', 'p-')).
@@ -211,7 +273,7 @@ var buildWebUI = function(module) {
 
 gulp.task('certs', function() {
     gulp.src(dataFolder + 'server.*').
-        pipe(toHeader(debug=false)).
+        pipe(toHeader('', false)).
         pipe(gulp.dest(staticFolder));
 });
 

code/html/custom.css

@@ -226,9 +226,9 @@ div.state {
     display: none;
 }
 
+#button-wifi-scan,
 .button-more-network,
 .button-more-schedule,
-.button-wifi-scan,
 .button-rfb-send {
     background: rgb(255, 128, 0); /* orange */
 }
@@ -382,7 +382,6 @@ input[disabled] + .toggle .toggle__handler {
    -------------------------------------------------------------------------- */
 
 .loading {
-    background-image: url('images/loading.gif');
     display: none;
     height: 20px;
     margin: 8px 0 0 10px;

code/html/custom.js

@@ -782,6 +782,7 @@ function doToggle(id, value) {
 function doScan() {
     $("#scanResult").html("");
     $("div.scan.loading").show();
+    $("#button-wifi-scan").attr("disabled", true);
     sendAction("scan", {});
     return false;
 }
@@ -1938,6 +1939,7 @@ function processData(data) {
 
         if ("scanResult" === key) {
             $("div.scan.loading").hide();
+            $("#button-wifi-scan").attr("disabled", false);
             $("#scanResult").show();
         }
 
@@ -2331,12 +2333,13 @@ $(function() {
     $(".pure-menu-link").on("click", showPanel);
     $("progress").attr({ value: 0, max: 100 });
 
+    $("#button-wifi-scan").on("click", doScan);
+
     $(".button-update").on("click", doUpdate);
     $(".button-update-password").on("click", doUpdatePassword);
     $(".button-generate-password").on("click", doGeneratePassword);
     $(".button-reboot").on("click", doReboot);
     $(".button-reconnect").on("click", doReconnect);
-    $(".button-wifi-scan").on("click", doScan);
     $(".button-ha-config").on("click", doHAConfig);
     $(".button-dbgcmd").on("click", doDebugCommand);
     $("input[name='dbgcmd']").enterKey(doDebugCommand);

code/html/index.html

@@ -4,18 +4,19 @@
 
         <title>ESPurna 0.0.0</title>
         <meta charset="utf-8" />
-        <!-- shortcut::html/favicon.ico -->
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-        <!-- build:css style.css -->
-        <link rel="stylesheet" href="vendor/pure-2.0.3.min.css" />
-        <link rel="stylesheet" href="vendor/pure-grids-responsive-2.0.3.min.css" />
-        <link rel="stylesheet" href="vendor/side-menu.css" />
+        <link type="image" rel="icon" href="favicon.ico" inline />
+
+        <link rel="stylesheet" href="vendor/pure-2.0.3.min.css" inline />
+        <link rel="stylesheet" href="vendor/pure-grids-responsive-2.0.3.min.css" inline />
+        <link rel="stylesheet" href="vendor/side-menu.css" inline />
+
         <!-- removeIf(!rfm69) -->
-        <link rel="stylesheet" href="vendor/jquery.dataTables-v1.10.23.min.css" />
+        <link rel="stylesheet" href="vendor/jquery.dataTables-v1.10.23.min.css" inline />
         <!-- endRemoveIf(!rfm69) -->
-        <link rel="stylesheet" href="custom.css" />
-        <!-- endbuild -->
+
+        <link rel="stylesheet" href="custom.css" inline />
 
     </head>
 
@@ -852,8 +853,10 @@
                                         Disable this option if you are <strong>connecting to a single access point</strong> (or router) or to a <strong>hidden SSID</strong>.
                                     </div>
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
-                                    <button class="pure-button button-wifi-scan" type="button">Scan now</button>
-                                    <div class="pure-u-0 pure-u-lg-1-4 scan loading"></div>
+                                    <button id="button-wifi-scan" class="pure-button" type="button">Scan now</button>
+                                    <div class="pure-u-0 pure-u-lg-1-4 scan loading">
+                                        <img src="images/loading.gif" alt="Scanning" inline></img>
+                                    </div>
                                 </div>
 
                                 <div class="pure-g">
@@ -2269,15 +2272,15 @@
 
     </body>
 
-    <!-- build:js script.js -->
-    <script src="vendor/jquery-4.0.0-pre.slim-no-sizzle.min.js"></script>
-    <script src="custom.js"></script>
+    <script src="vendor/jquery-4.0.0-pre.slim.min.js" inline></script>
+    <script src="custom.js" inline></script>
+
     <!-- removeIf(!light) -->
-    <script src="vendor/iro-5.3.1.min.js"></script>
+    <script src="vendor/iro-5.3.1.min.js" inline></script>
     <!-- endRemoveIf(!light) -->
+
     <!-- removeIf(!rfm69) -->
-    <script src="vendor/jquery.dataTables-v1.10.23.min.js"></script>
+    <script src="vendor/jquery.dataTables-v1.10.23.min.js" inline></script>
     <!-- endRemoveIf(!rfm69) -->
-    <!-- endbuild -->
 
 </html>

code/package.json

@@ -6,17 +6,13 @@
   "license": "GPL-3.0",
   "devDependencies": {
     "gulp": "^4.0.2",
-    "gulp-crass": "^0.2.2",
-    "gulp-base64-favicon": "^1.0.3",
-    "gulp-css-base64": "^2.0.0",
     "gulp-csslint": "^1.0.0",
     "gulp-gzip": "^1.4.0",
     "gulp-htmllint": "0.0.19",
     "gulp-htmlmin": "^5.0.1",
-    "gulp-inline": "^0.1.1",
-    "gulp-remove-code": "^3.0.4",
+    "gulp-inline-source-html": "^1.0.3",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.0.0",
-    "terser": "^4.8.0"
+    "html-minifier": "^4.0.0"
   }
 }