Many many many changes to update the UI. It hurts...

components/wifi-manager/webapp/dist/js/index.0ff7b6.bundle.js.LICENSE.txt

@@ -1,50 +0,0 @@
-/*!
-  * Bootstrap v5.1.3 (https://getbootstrap.com/)
-  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
-  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
-  */
-
-/*!
- * @overview es6-promise - a tiny implementation of Promises/A+.
- * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
- * @license   Licensed under MIT license
- *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
- * @version   v4.2.8+1e68dce6
- */
-
-/*!
- * Sizzle CSS Selector Engine v2.3.6
- * https://sizzlejs.com/
- *
- * Copyright JS Foundation and other contributors
- * Released under the MIT license
- * https://js.foundation/
- *
- * Date: 2021-02-16
- */
-
-/*!
- * jQuery JavaScript Library v3.6.0
- * https://jquery.com/
- *
- * Includes Sizzle.js
- * https://sizzlejs.com/
- *
- * Copyright OpenJS Foundation and other contributors
- * Released under the MIT license
- * https://jquery.org/license
- *
- * Date: 2021-03-02T17:08Z
- */
-
-/*! < A task is querying the state of itself, so must be running. */
-
-/*! < The task being queried is in a read or pending ready list. */
-
-/*! < The task being queried is in the Blocked state. */
-
-/*! < The task being queried is in the Suspended state, or is in the Blocked state with an infinite time out. */
-
-/*! https://mths.be/he v1.2.0 by @mathias | MIT license */
-
-/*! js-cookie v3.0.1 | MIT */

components/wifi-manager/webapp/package.json

@@ -3,7 +3,7 @@
   "version": "0.5.0",
   "main": "src/index.html",
   "repository": "git@github.com:sle118/squeezelite-esp32.git",
-  "author": "Andy K., Sebastien",
+  "author": "Sebastien L",
   "license": "MIT",
   "scripts": {
     "prod": "webpack serve --open  --mode=production",
@@ -11,13 +11,6 @@
     "watch": "webpack --progress --watch  --mode=development ",
     "dev": "webpack serve --open  --mode=development"
   },
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss",
-    "**/index.ejs",
-    "**/index.js",
-    "**/*.js"
-  ],
   "devDependencies": {
     "@babel/core": "^7.16.12",
     "@babel/plugin-transform-runtime": "^7.16.10",
@@ -59,6 +52,7 @@
     "postcss": "^8.4.5",
     "postcss-loader": "^6.2.1",
     "purgecss-webpack-plugin": "^4.1.3",
+    "purgecss-whitelister": "^2.4.0",
     "purify-css": "^1.2.5",
     "purifycss-webpack": "^0.7.0",
     "remixicon": "^2.5.0",

components/wifi-manager/webapp/src/sass/main.scss

@@ -1,42 +1,42 @@
 
 @import "~bootswatch/dist/darkly/variables";
 @import "utils/variables";
-// @import "~bootstrap/scss/bootstrap";
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/bootstrap";
+// @import "~bootstrap/scss/functions";
+// @import "~bootstrap/scss/variables";
+// @import "~bootstrap/scss/mixins";
+// @import "~bootstrap/scss/utilities";
 
-// Layout & components
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/containers";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/progress";
-//@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/placeholders";
+// // Layout & components
+// @import "~bootstrap/scss/root";
+// @import "~bootstrap/scss/reboot";
+// @import "~bootstrap/scss/type";
+// @import "~bootstrap/scss/images";
+// @import "~bootstrap/scss/containers";
+// @import "~bootstrap/scss/grid";
+// @import "~bootstrap/scss/tables";
+// @import "~bootstrap/scss/forms";
+// @import "~bootstrap/scss/buttons";
+// @import "~bootstrap/scss/transitions";
+// @import "~bootstrap/scss/dropdown";
+// @import "~bootstrap/scss/button-group";
+// @import "~bootstrap/scss/nav";
+// @import "~bootstrap/scss/navbar";
+// @import "~bootstrap/scss/card";
+// @import "~bootstrap/scss/badge";
+// @import "~bootstrap/scss/alert";
+// @import "~bootstrap/scss/progress";
+// //@import "~bootstrap/scss/list-group";
+// @import "~bootstrap/scss/close";
+// @import "~bootstrap/scss/toasts";
+// @import "~bootstrap/scss/modal";
+// @import "~bootstrap/scss/tooltip";
+// @import "~bootstrap/scss/placeholders";
 
-// Helpers
-@import "~bootstrap/scss/helpers";
+// // Helpers
+// @import "~bootstrap/scss/helpers";
 
-// Utilities
-@import "~bootstrap/scss/utilities/api";
+// // Utilities
+// @import "~bootstrap/scss/utilities/api";
 @import "~bootswatch/dist/darkly/bootswatch";
 @import "utils/style";     

components/wifi-manager/webapp/webapp.cmake

@@ -1,4 +1,5 @@
-target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.eb4a1bb223a59c656f2c.css.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.f2de74635f23b31fbdce.css.gz BINARY)
 target_add_binary_data( __idf_wifi-manager webapp/dist/favicon-32x32.png BINARY)
 target_add_binary_data( __idf_wifi-manager webapp/dist/index.html.gz BINARY)
-target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.0ff7b6.bundle.js.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.7581c6.bundle.js.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/js/node_vendors.7581c6.bundle.js.gz BINARY)

components/wifi-manager/webapp/webpack.c

@@ -1,29 +1,34 @@
 // Automatically generated. Do not edit manually!.
 #include <inttypes.h>
-extern const uint8_t _index_eb4a1bb223a59c656f2c_css_gz_start[] asm("_binary_index_eb4a1bb223a59c656f2c_css_gz_start");
-extern const uint8_t _index_eb4a1bb223a59c656f2c_css_gz_end[] asm("_binary_index_eb4a1bb223a59c656f2c_css_gz_end");
+extern const uint8_t _index_f2de74635f23b31fbdce_css_gz_start[] asm("_binary_index_f2de74635f23b31fbdce_css_gz_start");
+extern const uint8_t _index_f2de74635f23b31fbdce_css_gz_end[] asm("_binary_index_f2de74635f23b31fbdce_css_gz_end");
 extern const uint8_t _favicon_32x32_png_start[] asm("_binary_favicon_32x32_png_start");
 extern const uint8_t _favicon_32x32_png_end[] asm("_binary_favicon_32x32_png_end");
 extern const uint8_t _index_html_gz_start[] asm("_binary_index_html_gz_start");
 extern const uint8_t _index_html_gz_end[] asm("_binary_index_html_gz_end");
-extern const uint8_t _index_0ff7b6_bundle_js_gz_start[] asm("_binary_index_0ff7b6_bundle_js_gz_start");
-extern const uint8_t _index_0ff7b6_bundle_js_gz_end[] asm("_binary_index_0ff7b6_bundle_js_gz_end");
+extern const uint8_t _index_7581c6_bundle_js_gz_start[] asm("_binary_index_7581c6_bundle_js_gz_start");
+extern const uint8_t _index_7581c6_bundle_js_gz_end[] asm("_binary_index_7581c6_bundle_js_gz_end");
+extern const uint8_t _node_vendors_7581c6_bundle_js_gz_start[] asm("_binary_node_vendors_7581c6_bundle_js_gz_start");
+extern const uint8_t _node_vendors_7581c6_bundle_js_gz_end[] asm("_binary_node_vendors_7581c6_bundle_js_gz_end");
 const char * resource_lookups[] = {
-	"/css/index.eb4a1bb223a59c656f2c.css.gz",
+	"/css/index.f2de74635f23b31fbdce.css.gz",
 	"/favicon-32x32.png",
 	"/index.html.gz",
-	"/js/index.0ff7b6.bundle.js.gz",
+	"/js/index.7581c6.bundle.js.gz",
+	"/js/node_vendors.7581c6.bundle.js.gz",
 ""
 };
 const uint8_t * resource_map_start[] = {
-	_index_eb4a1bb223a59c656f2c_css_gz_start,
+	_index_f2de74635f23b31fbdce_css_gz_start,
 	_favicon_32x32_png_start,
 	_index_html_gz_start,
-	_index_0ff7b6_bundle_js_gz_start
+	_index_7581c6_bundle_js_gz_start,
+	_node_vendors_7581c6_bundle_js_gz_start
 };
 const uint8_t * resource_map_end[] = {
-	_index_eb4a1bb223a59c656f2c_css_gz_end,
+	_index_f2de74635f23b31fbdce_css_gz_end,
 	_favicon_32x32_png_end,
 	_index_html_gz_end,
-	_index_0ff7b6_bundle_js_gz_end
+	_index_7581c6_bundle_js_gz_end,
+	_node_vendors_7581c6_bundle_js_gz_end
 };

components/wifi-manager/webapp/webpack.config.js

@@ -17,6 +17,8 @@ const devserver = require('./webpack/webpack.dev.js');
 const fs = require('fs');
 const zlib = require("zlib");
 const PurgeCSSPlugin = require('purgecss-webpack-plugin')
+const whitelister = require('purgecss-whitelister');
+
 
 const PATHS = {
   src: path.join(__dirname, 'src')
@@ -129,11 +131,13 @@ module.exports = (env, options) => (
           },          
           {
             test: /\.js$/,
-            exclude: /(node_modules|bower_components)/,
+            //exclude: /(node_modules|bower_components)/,
             use: {
               loader: "babel-loader",
               options: {
                 presets: ["@babel/preset-env"],
+                plugins: ['@babel/plugin-transform-runtime']
+
               },
             },
           },
@@ -199,7 +203,11 @@ module.exports = (env, options) => (
           filename: "css/[name].[contenthash].css",
         }),
         new PurgeCSSPlugin({
-          paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
+          keyframes: false,
+          paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, {
+            nodir: true
+          }),
+          whitelist: whitelister('bootstrap/dist/css/bootstrap.css')
         }),
         new webpack.ProvidePlugin({
           $: "jquery",
@@ -224,10 +232,9 @@ module.exports = (env, options) => (
           function (stats, arguments) {
 
             if (options.mode !== "production") return;
-            let wifiManagerPath=path.posix.resolve(process.cwd(),'..','..');
-            let buildCRootPath=path.posix.resolve(process.cwd(),'..','..','..','..');
-            let distPath = path.posix.resolve('dist');
-            let posixWebAppPath=path.posix.resolve(process.cwd(),'..');
+            let buildRootPath = path.join(process.cwd(),'..','..','..');
+            let wifiManagerPath=glob.sync(path.join(buildRootPath,'components/**/wifi-manager*'))[0];
+            let buildCRootPath=glob.sync(buildRootPath)[0];
             fs.appendFileSync('./dist/index.html.gz', 
               zlib.gzipSync(fs.readFileSync('./dist/index.html'), 
               {
@@ -285,7 +292,8 @@ extern const uint8_t * resource_map_end[];`;
                 
                 list.forEach(foundFile => {
                   let exportName = path.basename(foundFile).replace(/[\. \-]/gm, '_');
-                  let cmakeFileName = path.posix.relative(wifiManagerPath,foundFile);
+                  //take the full path of the file and make it relative to the build directory
+                  let cmakeFileName = path.posix.relative(wifiManagerPath,glob.sync(path.resolve(foundFile))[0]);
                   let httpRelativePath=path.posix.join('/',path.posix.relative('dist',foundFile));
                   exportDef += `extern const uint8_t _${exportName}_start[] asm("_binary_${exportName}_start");\nextern const uint8_t _${exportName}_end[] asm("_binary_${exportName}_end");\n`;
                   lookupDef += `\t"${httpRelativePath}",\n`;
@@ -314,9 +322,19 @@ extern const uint8_t * resource_map_end[];`;
       ],
       optimization: {
         minimize: true,
+        providedExports: true,
         minimizer: [
          
-          new TerserPlugin(),
+          new TerserPlugin({
+            terserOptions: {
+              format: {
+                  comments: false,
+              },
+            },
+            extractComments: false,
+          // enable parallel running
+            parallel: true,
+          }),
           new HtmlMinimizerPlugin(),
           new CssMinimizerPlugin(),
           new ImageMinimizerPlugin({
@@ -358,16 +376,16 @@ extern const uint8_t * resource_map_end[];`;
           //new BundleAnalyzerPlugin()
 
         ],
-        // splitChunks: {
-        //   cacheGroups: {
-        //     styles: {
-        //       name: 'styles',
-        //       test: /\.css$/,
-        //       chunks: 'all',
-        //       enforce: true
-        //     }
-        //   }
-        // }
+        splitChunks: {
+          cacheGroups: {
+              vendor: {
+                  name: "node_vendors",
+                  test: /[\\/]node_modules[\\/]/,
+                  chunks: "all",
+              }
+          }
+      }
+      
       },
       //   output: {
       //     filename: "[name].js",

components/wifi-manager/webapp/webpack.h

@@ -1,6 +1,6 @@
 /***********************************
 webpack_headers
-dist/css/index.eb4a1bb223a59c656f2c.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.0ff7b6.bundle.js.gz
+dist/css/index.f2de74635f23b31fbdce.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.7581c6.bundle.js.gz,dist/js/node_vendors.7581c6.bundle.js.gz
 ***********************************/
 #pragma once
 #include <inttypes.h>