Browse Source

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
mcspr-patch-1
Maxim Prokhorov 3 years ago
parent
commit
8df23392a9
28 changed files with 26105 additions and 26459 deletions
  1. +13
    -0
      code/.eslintrc.js
  2. BIN
      code/espurna/data/index.all.html.gz
  3. BIN
      code/espurna/data/index.curtain.html.gz
  4. BIN
      code/espurna/data/index.garland.html.gz
  5. BIN
      code/espurna/data/index.light.html.gz
  6. BIN
      code/espurna/data/index.lightfox.html.gz
  7. BIN
      code/espurna/data/index.rfbridge.html.gz
  8. BIN
      code/espurna/data/index.rfm69.html.gz
  9. BIN
      code/espurna/data/index.sensor.html.gz
  10. BIN
      code/espurna/data/index.small.html.gz
  11. BIN
      code/espurna/data/index.thermostat.html.gz
  12. +3058
    -3043
      code/espurna/static/index.all.html.gz.h
  13. +2273
    -2257
      code/espurna/static/index.curtain.html.gz.h
  14. +2234
    -2221
      code/espurna/static/index.garland.html.gz.h
  15. +2808
    -2795
      code/espurna/static/index.light.html.gz.h
  16. +2248
    -2236
      code/espurna/static/index.lightfox.html.gz.h
  17. +2272
    -2260
      code/espurna/static/index.rfbridge.html.gz.h
  18. +3837
    -3812
      code/espurna/static/index.rfm69.html.gz.h
  19. +2317
    -2304
      code/espurna/static/index.sensor.html.gz.h
  20. +2220
    -2208
      code/espurna/static/index.small.html.gz.h
  21. +2257
    -2244
      code/espurna/static/index.thermostat.html.gz.h
  22. +101
    -39
      code/gulpfile.js
  23. +1
    -2
      code/html/custom.css
  24. +4
    -1
      code/html/custom.js
  25. +19
    -16
      code/html/index.html
  26. +0
    -1
      code/html/vendor/jquery-4.0.0-pre.slim.min.js
  27. +441
    -1014
      code/package-lock.json
  28. +2
    -6
      code/package.json

+ 13
- 0
code/.eslintrc.js View File

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

BIN
code/espurna/data/index.all.html.gz View File


BIN
code/espurna/data/index.curtain.html.gz View File


BIN
code/espurna/data/index.garland.html.gz View File


BIN
code/espurna/data/index.light.html.gz View File


BIN
code/espurna/data/index.lightfox.html.gz View File


BIN
code/espurna/data/index.rfbridge.html.gz View File


BIN
code/espurna/data/index.rfm69.html.gz View File


BIN
code/espurna/data/index.sensor.html.gz View File


BIN
code/espurna/data/index.small.html.gz View File


BIN
code/espurna/data/index.thermostat.html.gz View File


+ 3058
- 3043
code/espurna/static/index.all.html.gz.h
File diff suppressed because it is too large
View File


+ 2273
- 2257
code/espurna/static/index.curtain.html.gz.h
File diff suppressed because it is too large
View File


+ 2234
- 2221
code/espurna/static/index.garland.html.gz.h
File diff suppressed because it is too large
View File


+ 2808
- 2795
code/espurna/static/index.light.html.gz.h
File diff suppressed because it is too large
View File


+ 2248
- 2236
code/espurna/static/index.lightfox.html.gz.h
File diff suppressed because it is too large
View File


+ 2272
- 2260
code/espurna/static/index.rfbridge.html.gz.h
File diff suppressed because it is too large
View File


+ 3837
- 3812
code/espurna/static/index.rfm69.html.gz.h
File diff suppressed because it is too large
View File


+ 2317
- 2304
code/espurna/static/index.sensor.html.gz.h
File diff suppressed because it is too large
View File


+ 2220
- 2208
code/espurna/static/index.small.html.gz.h
File diff suppressed because it is too large
View File


+ 2257
- 2244
code/espurna/static/index.thermostat.html.gz.h
File diff suppressed because it is too large
View File


+ 101
- 39
code/gulpfile.js View File

@ -26,31 +26,26 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
// Dependencies // Dependencies
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
const path = require('path');
const gulp = require('gulp'); const gulp = require('gulp');
const through = require('through2'); 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 htmllint = require('gulp-htmllint');
const csslint = require('gulp-csslint'); 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 rename = require('gulp-rename');
const replace = require('gulp-replace'); 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 // Configuration
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
const htmlFolder = 'html/'; const htmlFolder = 'html/';
const configFolder = 'espurna/config/';
const dataFolder = 'espurna/data/'; const dataFolder = 'espurna/data/';
const staticFolder = 'espurna/static/'; const staticFolder = 'espurna/static/';
@ -58,6 +53,19 @@ const staticFolder = 'espurna/static/';
// Methods // 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) { var toHeader = function(name, debug) {
return through.obj(function (source, encoding, callback) { 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()) { if (source.isNull()) {
callback(null, source); callback(null, source);
return; 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; 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) { var buildWebUI = function(module) {
@ -178,22 +246,16 @@ var buildWebUI = function(module) {
'rules': { 'rules': {
'id-class-style': false, 'id-class-style': false,
'label-req-for': false, 'label-req-for': false,
'line-end-style': false
'line-end-style': false,
'attr-req-value': false
} }
}, htmllintReporter)). }, 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, collapseWhitespace: true,
removeComments: true, removeComments: true,
minifyCSS: true,
minifyCSS: false,
minifyJS: false minifyJS: false
})). })).
pipe(replace('pure-', 'p-')). pipe(replace('pure-', 'p-')).
@ -211,7 +273,7 @@ var buildWebUI = function(module) {
gulp.task('certs', function() { gulp.task('certs', function() {
gulp.src(dataFolder + 'server.*'). gulp.src(dataFolder + 'server.*').
pipe(toHeader(debug=false)).
pipe(toHeader('', false)).
pipe(gulp.dest(staticFolder)); pipe(gulp.dest(staticFolder));
}); });


+ 1
- 2
code/html/custom.css View File

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


+ 4
- 1
code/html/custom.js View File

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


+ 19
- 16
code/html/index.html View File

@ -4,18 +4,19 @@
<title>ESPurna 0.0.0</title> <title>ESPurna 0.0.0</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<!-- shortcut::html/favicon.ico -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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) --> <!-- 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) --> <!-- endRemoveIf(!rfm69) -->
<link rel="stylesheet" href="custom.css" />
<!-- endbuild -->
<link rel="stylesheet" href="custom.css" inline />
</head> </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>. 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>
<div class="pure-u-0 pure-u-lg-1-4"></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>
<div class="pure-g"> <div class="pure-g">
@ -2269,15 +2272,15 @@
</body> </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) --> <!-- 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) --> <!-- endRemoveIf(!light) -->
<!-- removeIf(!rfm69) --> <!-- 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) --> <!-- endRemoveIf(!rfm69) -->
<!-- endbuild -->
</html> </html>

code/html/vendor/jquery-4.0.0-pre.slim.min.js
File diff suppressed because it is too large
View File


+ 441
- 1014
code/package-lock.json
File diff suppressed because it is too large
View File


+ 2
- 6
code/package.json View File

@ -6,17 +6,13 @@
"license": "GPL-3.0", "license": "GPL-3.0",
"devDependencies": { "devDependencies": {
"gulp": "^4.0.2", "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-csslint": "^1.0.0",
"gulp-gzip": "^1.4.0", "gulp-gzip": "^1.4.0",
"gulp-htmllint": "0.0.19", "gulp-htmllint": "0.0.19",
"gulp-htmlmin": "^5.0.1", "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-rename": "^2.0.0",
"gulp-replace": "^1.0.0", "gulp-replace": "^1.0.0",
"terser": "^4.8.0"
"html-minifier": "^4.0.0"
} }
} }

Loading…
Cancel
Save