web render update - #1116

.vscode/settings.json

@@ -3,9 +3,30 @@
     "**/.yarn": true,
     "**/.pnp.*": true
   },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+    // "source.organizeImports": true
+  },
   "eslint.nodePath": "interface/.yarn/sdks",
   "eslint.workingDirectories": ["interface"],
   "prettier.prettierPath": "interface/.yarn/sdks/prettier/index.js",
   "typescript.tsdk": "interface/.yarn/sdks/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "files.associations": {
+    "*.tsx": "typescriptreact",
+    "*.tcc": "cpp",
+    "optional": "cpp",
+    "istream": "cpp",
+    "ostream": "cpp",
+    "ratio": "cpp",
+    "system_error": "cpp",
+    "array": "cpp",
+    "functional": "cpp",
+    "regex": "cpp",
+    "tuple": "cpp",
+    "type_traits": "cpp",
+    "utility": "cpp",
+    "string": "cpp",
+    "string_view": "cpp"
+  }
 }

CHANGELOG.md

@@ -212,7 +212,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added pool data to telegrams 0x494 & 0x495 [#102](https://github.com/emsesp/EMS-ESP32/issues/102)
 - Add RC300 second summermode telegram [#108](https://github.com/emsesp/EMS-ESP32/issues/108)
 - Add support for the RC25 thermostat [#106](https://github.com/emsesp/EMS-ESP32/issues/106)
-- Add new command 'entities' for a device, e.g. http://ems-esp/api/boiler/entities to show the shortname, description and HA Entity name (if HA enabled) [#116](https://github.com/emsesp/EMS-ESP32/issues/116)
+- Add new command 'entities' for a device, e.g. <http://ems-esp/api/boiler/entities> to show the shortname, description and HA Entity name (if HA enabled) [#116](https://github.com/emsesp/EMS-ESP32/issues/116)
 - Support for Junkers program and remote (fb10/fb110) temperature
 - Home Assistant `state_class` attribute for Wh, kWh, W and KW [#129](https://github.com/emsesp/EMS-ESP32/issues/129)
 - Add current room influence for RC300 [#136](https://github.com/emsesp/EMS-ESP32/issues/136)
@@ -434,4 +434,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - some names of mqtt-tags like in v2.2.1
 - new ESP32 partition side to allow for smoother OTA and fallback
 - Network Gateway IP is optional (#682)emsesp/EMS-ESP
-- moved to a new GitHub repo https://github.com/emsesp/EMS-ESP32
+- moved to a new GitHub repo <https://github.com/emsesp/EMS-ESP32>

CHANGELOG_LATEST.md

@@ -4,6 +4,11 @@
 
 ## **IMPORTANT! BREAKING CHANGES**
 
+There are breaking changes in 3.6.0. Please read carefully before applying the update.
+
+- The sensors have been renamed. `dallassensor` is now `temperaturesensor` in MQTT and `ts` in the Customizations file. Also `analogs` is now `analogsensor` in MQTT and `as` in the Customizations file. If you have customizations, make backup first using the Download option and rename the JSON arrays to `as` and `ts` respectively. Also removed any MQTT topics that start with `dallassensor` using something like MQTTExplorer.
+- The format of the Custom Entities has changed, so you will need to manually re-create them.
+
 ## Added
 
 - Workaround for better Domoticz MQTT intergration? [#904](https://github.com/emsesp/EMS-ESP32/issues/904)
@@ -29,3 +34,5 @@
 - Improved HA Discovery so previous configs no longer need to be removed when starting [#1077](https://github.com/emsesp/EMS-ESP32/pull/1077) (thanks @pswid!)
 - Enlarge UART-Stack to 2,5k
 - Retry timeout for Mqtt-QOS1/2 10seconds
+- Optimize WebUI rendering when using Dialog Boxes [#1116](https://github.com/emsesp/EMS-ESP32/issues/1116)
+- Optimize Web libraries to reduce bundle size (3.6.x) [#1112](https://github.com/emsesp/EMS-ESP32/issues/1112)

interface/.eslintignore

@@ -1,9 +1,12 @@
 node_modules/
 build/
 dist/
+.yarn/
+
 .prettierrc
 .eslintrc*
-.yarn/
 env.d.ts
 progmem-generator.js
-vite.config.ts
+unpack.ts
+vite.config.ts
+package.json

interface/.eslintrc.json

@@ -24,7 +24,7 @@
     "tsconfigRootDir": ".",
     "project": ["tsconfig.json"]
   },
-  "plugins": ["react", "@typescript-eslint"],
+  "plugins": ["react", "@typescript-eslint", "autofix", "react-hooks"],
   "settings": {
     "import/resolver": {
       "typescript": {
@@ -36,7 +36,6 @@
     }
   },
   "rules": {
-    "react-hooks/exhaustive-deps": "off",
     "object-shorthand": "error",
     "no-console": "warn",
     "@typescript-eslint/consistent-type-definitions": ["off", "type"],
@@ -51,6 +50,44 @@
     "@typescript-eslint/restrict-plus-operands": "off",
     "@typescript-eslint/no-unused-expressions": "off",
     "@typescript-eslint/no-implied-eval": "off",
+    "@typescript-eslint/no-misused-promises": "off",
+    "arrow-body-style": ["error", "as-needed"],
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports"
+      }
+    ],
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", "parent", "sibling", "index", "object", "type"],
+        "pathGroups": [
+          {
+            "pattern": "@/**/**",
+            "group": "parent",
+            "position": "before"
+          }
+        ],
+        "alphabetize": { "order": "asc" }
+      }
+    ],
+    // "autofix/no-unused-vars": [
+    //   "error",
+    //   {
+    //     "argsIgnorePattern": "^_",
+    //     "ignoreRestSiblings": true,
+    //     "destructuredArrayIgnorePattern": "^_"
+    //   }
+    // ],
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
     "@typescript-eslint/ban-types": [
       "error",
       {

interface/package.json

@@ -16,63 +16,57 @@
     "standalone": "npm-run-all -p dev typesafe-i18n mock-api",
     "typesafe-i18n": "typesafe-i18n",
     "format": "prettier --write '**/*.{ts,tsx,js,css,json,md}'",
-    "lint": "eslint . --cache --max-warnings=0"
+    "lint": "eslint . --cache --fix"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@msgpack/msgpack": "^3.0.0-beta2",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.11.16",
-    "@remix-run/router": "^1.5.0",
-    "@table-library/react-table-library": "4.1.0",
+    "@mui/material": "^5.13.2",
+    "@table-library/react-table-library": "4.1.4",
     "@types/lodash-es": "^4.17.7",
-    "@types/node": "^18.15.11",
-    "@types/react": "^18.0.33",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^20.2.3",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
     "@types/react-router-dom": "^5.3.3",
-    "@yarnpkg/pnpify": "^4.0.0-rc.42",
     "async-validator": "^4.2.5",
-    "axios": "^1.3.5",
+    "axios": "^1.4.0",
     "history": "^5.3.0",
     "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "mime-types": "^2.1.35",
     "react": "latest",
     "react-dom": "latest",
     "react-dropzone": "^14.2.3",
     "react-icons": "^4.8.0",
-    "react-router-dom": "^6.10.0",
-    "react-toastify": "^9.1.2",
+    "react-router-dom": "^6.11.2",
+    "react-toastify": "^9.1.3",
     "sockette": "^2.0.6",
     "typesafe-i18n": "^5.24.3",
-    "typescript": "^5.0.3"
+    "typescript": "^5.0.4"
   },
   "devDependencies": {
-    "@types/mime-types": "^2",
-    "@types/styled-components": "^5",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-react-swc": "^3.2.0",
-    "eslint": "^8.37.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "@vitejs/plugin-react-swc": "^3.3.1",
+    "eslint": "^8.41.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-autofix": "^1.1.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "nodemon": "^2.0.22",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "rollup-plugin-visualizer": "^5.9.0",
-    "terser": "^5.16.8",
-    "vite": "^4.2.1",
-    "vite-plugin-minify": "^1.5.2",
-    "vite-plugin-svgr": "^2.4.0",
-    "vite-tsconfig-paths": "^4.0.8"
+    "terser": "^5.17.6",
+    "vite": "^4.3.8",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.0"
   },
   "packageManager": "[email protected]"
 }

interface/progmem-generator.js

@@ -1,5 +1,5 @@
-const { resolve, relative, sep } = require('path');
 const { readdirSync, existsSync, unlinkSync, readFileSync, createWriteStream } = require('fs');
+const { resolve, relative, sep } = require('path');
 var zlib = require('zlib');
 var mime = require('mime-types');
 
@@ -18,9 +18,9 @@ function getFilesSync(dir, files = []) {
   return files;
 }
 
-function coherseToBuffer(input) {
-  return Buffer.isBuffer(input) ? input : Buffer.from(input);
-}
+// function coherseToBuffer(input) {
+//   return Buffer.isBuffer(input) ? input : Buffer.from(input);
+// }
 
 function cleanAndOpen(path) {
   if (existsSync(path)) {
@@ -87,9 +87,8 @@ export default function ProgmemGenerator({ outputPath = './WWWData.h', bytesPerL
           // });
         };
 
-        const generateWWWClass = () => {
-          // eslint-disable-next-line max-len
-          return `typedef std::function<void(const String& uri, const String& contentType, const uint8_t * content, size_t len)> RouteRegistrationHandler;
+        const generateWWWClass = () =>
+          `typedef std::function<void(const String& uri, const String& contentType, const uint8_t * content, size_t len)> RouteRegistrationHandler;
 
 class WWWData {
 ${indent}public:
@@ -100,8 +99,6 @@ ${fileInfo
 ${indent.repeat(2)}}
 };
 `;
-        };
-
         const writeWWWClass = () => {
           writeStream.write(generateWWWClass());
         };

interface/public/css/roboto.css

@@ -1,15 +1,14 @@
-/* 
-* Just supporting latin due to size constrains on the esp chip 
-*
-* The framework only makes use of 400 (regular) weight fonts.
-*
-* If using medium (500), light or strong typography variants you will need to add additional fonts.
+/*
+* Uses font-size 400 (normal) only and Latin (plus extra unicode chars) to keep flash memory to a minimun
+* View fonts on https://fonts.google.com/
+* Download woff2 using e.g. https://fonts.googleapis.com/css2?family=Lato or https://fonts.googleapis.com/css2?family=Roboto
 */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/re.woff2) format('woff2');
+  /* src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); */
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/re.off2) format('woff2');
   unicode-range: U+0000-00FF, U+0104-0107, U+0118-0119, U+011E-011F, U+0130-0131, U+0141-0144, U+0152-0153, U+015A-015B,
     U+015E-015F, U+0179-017C, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
     U+2212, U+2215, U+FEFF, U+FFFD;

interface/src/App.tsx

@@ -1,12 +1,13 @@
-import { FC, useEffect, useState } from 'react';
-
+import { useEffect, useState } from 'react';
 import { ToastContainer, Slide } from 'react-toastify';
+
 import 'react-toastify/dist/ReactToastify.min.css';
 
-import CustomTheme from 'CustomTheme';
+import { localStorageDetector } from 'typesafe-i18n/detectors';
+import type { FC } from 'react';
 import AppRouting from 'AppRouting';
+import CustomTheme from 'CustomTheme';
 
-import { localStorageDetector } from 'typesafe-i18n/detectors';
 import TypesafeI18n from 'i18n/i18n-react';
 import { detectLocale } from 'i18n/i18n-util';
 import { loadLocaleAsync } from 'i18n/i18n-util.async';
@@ -17,7 +18,7 @@ const App: FC = () => {
   const [wasLoaded, setWasLoaded] = useState(false);
 
   useEffect(() => {
-    loadLocaleAsync(detectedLocale).then(() => setWasLoaded(true));
+    void loadLocaleAsync(detectedLocale).then(() => setWasLoaded(true));
   }, []);
 
   if (!wasLoaded) return null;

interface/src/AppRouting.tsx

@@ -1,16 +1,16 @@
-import { FC, useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 
 import { Route, Routes, Navigate, useLocation } from 'react-router-dom';
 
 import { toast } from 'react-toastify';
+import type { FC } from 'react';
 
-import { useI18nContext } from 'i18n/i18n-react';
-
-import { Authentication, AuthenticationContext } from 'contexts/authentication';
+import AuthenticatedRouting from 'AuthenticatedRouting';
+import SignIn from 'SignIn';
 import { RequireAuthenticated, RequireUnauthenticated } from 'components';
 
-import SignIn from 'SignIn';
-import AuthenticatedRouting from 'AuthenticatedRouting';
+import { Authentication, AuthenticationContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
 
 interface SecurityRedirectProps {
   message: string;

interface/src/AuthenticatedRouting.tsx

@@ -1,21 +1,21 @@
-import { FC, useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { Navigate, Routes, Route, useNavigate, useLocation } from 'react-router-dom';
-import { AxiosError } from 'axios';
+import Dashboard from './project/Dashboard';
+import Help from './project/Help';
+import Settings from './project/Settings';
+import type { AxiosError } from 'axios';
+import type { FC } from 'react';
 
 import * as AuthenticationApi from 'api/authentication';
 import { AXIOS } from 'api/endpoints';
 import { Layout, RequireAdmin } from 'components';
 
-import Dashboard from './project/Dashboard';
-import Settings from './project/Settings';
-import Help from './project/Help';
-
-import NetworkConnection from 'framework/network/NetworkConnection';
 import AccessPoint from 'framework/ap/AccessPoint';
-import NetworkTime from 'framework/ntp/NetworkTime';
 import Mqtt from 'framework/mqtt/Mqtt';
-import System from 'framework/system/System';
+import NetworkConnection from 'framework/network/NetworkConnection';
+import NetworkTime from 'framework/ntp/NetworkTime';
 import Security from 'framework/security/Security';
+import System from 'framework/system/System';
 
 const AuthenticatedRouting: FC = () => {
   const location = useLocation();

interface/src/CustomTheme.tsx

@@ -1,10 +1,9 @@
-import { FC } from 'react';
-
 import { CssBaseline } from '@mui/material';
-import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
 import { blueGrey, blue } from '@mui/material/colors';
+import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
+import type { FC } from 'react';
 
-import { RequiredChildrenProps } from 'utils';
+import type { RequiredChildrenProps } from 'utils';
 
 const theme = responsiveFontSizes(
   createTheme({