chore: Bump dependencies

.npmrc

@@ -0,0 +1,2 @@
+# Currently (2022-05-22) we need to ignore peer dependencies as those break the frontend when using react v18
+legacy-peer-deps=true

backend/lib/webserver/ValetudoRouter.js

@@ -21,7 +21,7 @@ class ValetudoRouter {
         this.robot = options.robot;
         this.validator = options.validator;
 
-        this.limiter = new RateLimit({
+        this.limiter = RateLimit.rateLimit({
             windowMs: 30*1000,
             max: 30
         });

backend/lib/webserver/middlewares/ExternalAccessCheckMiddleware.js

@@ -1,9 +1,9 @@
+const hashlru = require("hashlru");
 const isInSubnet = require("is-in-subnet");
 const Logger = require("../../Logger");
-const QuickLRU = require("quick-lru");
 const Tools = require("../../utils/Tools");
 
-const IPAccessLRU = new QuickLRU({ maxSize: 15 });
+const IPAccessLRU = hashlru(15);
 
 /**
  *

backend/package.json

@@ -5,7 +5,7 @@
   "bin": "index.js",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=15"
+    "node": ">=16"
   },
   "pkg": {
     "assets": [
@@ -26,51 +26,51 @@
     "test": "mocha \"test/**/*_spec.js\"",
     "prepare_commit": "npm run lint_fix && npm run ts-check && npm run test",
     "build": "npm run build_armv7 && npm run build_aarch64 && npm run build_armv7_lowmem",
-    "build_armv7": "cross-env PKG_CACHE_PATH=../build_dependencies/pkg pkg --targets node16-linuxstatic-armv7 --compress Brotli --no-bytecode --public-packages \"*\" --options \"expose-gc,max-heap-size=38\" . --output ../build/armv7/valetudo",
-    "build_aarch64": "cross-env PKG_CACHE_PATH=../build_dependencies/pkg pkg --targets node16-linuxstatic-arm64 --compress Brotli --no-bytecode --public-packages \"*\" --options \"expose-gc,max-heap-size=64\" . --output ../build/aarch64/valetudo",
-    "build_armv7_lowmem": "cross-env PKG_CACHE_PATH=../build_dependencies/pkg pkg --targets node16-linuxstatic-armv7 --compress Brotli --no-bytecode --public-packages \"*\" --options \"expose-gc,max-heap-size=34,optimize-for-size,lite-mode,no-regexp-tier-up,no-expose-wasm\" . --output ../build/armv7/valetudo-lowmem"
+    "build_armv7": "cross-env PKG_CACHE_PATH=../build_dependencies/pkg pkg --targets node18-linuxstatic-armv7 --compress Brotli --no-bytecode --public-packages \"*\" --options \"expose-gc,max-heap-size=38\" . --output ../build/armv7/valetudo",
+    "build_aarch64": "cross-env PKG_CACHE_PATH=../build_dependencies/pkg pkg --targets node18-linuxstatic-arm64 --compress Brotli --no-bytecode --public-packages \"*\" --options \"expose-gc,max-heap-size=64\" . --output ../build/aarch64/valetudo",
+    "build_armv7_lowmem": "cross-env PKG_CACHE_PATH=../build_dependencies/pkg pkg --targets node18-linuxstatic-armv7 --compress Brotli --no-bytecode --public-packages \"*\" --options \"expose-gc,max-heap-size=34,optimize-for-size,lite-mode,no-regexp-tier-up,no-expose-wasm\" . --output ../build/armv7/valetudo-lowmem"
   },
   "author": "",
   "dependencies": {
     "@destinationstransfers/ntp": "2.0.0",
-    "ajv": "8.8.2",
-    "async-mqtt": "2.6.1",
-    "axios": "0.24.0",
-    "body-parser": "1.19.0",
+    "ajv": "8.11.0",
+    "async-mqtt": "2.6.2",
+    "axios": "0.27.2",
+    "body-parser": "1.20.0",
     "bonjour-service": "1.0.12",
     "compression": "1.7.4",
-    "crc": "3.8.0",
+    "crc": "4.1.1",
     "escape-html": "1.0.3",
-    "express": "4.17.2",
+    "express": "4.18.1",
     "express-basic-auth": "1.2.1",
     "express-dynamic-middleware": "1.0.0",
     "express-list-endpoints": "6.0.0",
-    "express-rate-limit": "5.5.1",
+    "express-rate-limit": "6.4.0",
+    "hashlru": "git+https://[email protected]/Hypfer/hashlru#3.0.0",
     "is-in-subnet": "4.0.1",
-    "jstoxml": "2.2.7",
-    "mqtt": "4.2.8",
+    "jstoxml": "3.2.3",
+    "mqtt": "4.3.7",
     "nested-object-assign": "1.0.4",
     "nested-property": "4.0.0",
-    "openapi-validator-middleware": "3.2.4",
-    "quick-lru": "5.1.1",
+    "openapi-validator-middleware": "3.2.6",
     "semaphore": "1.1.0",
-    "swagger-ui-express": "4.3.0",
+    "swagger-ui-express": "4.4.0",
     "uuid": "8.3.2",
     "zoo-ids": "2.0.7"
   },
   "devDependencies": {
     "@types/compression": "1.7.2",
     "@types/express": "4.17.13",
     "@types/express-list-endpoints": "6.0.0",
-    "@types/jstoxml": "2.0.1",
-    "@types/mocha": "7.0.2",
-    "@types/node": "16.11.1",
+    "@types/jstoxml": "2.0.2",
+    "@types/mocha": "9.1.1",
+    "@types/node": "17.0.35",
     "@types/node-ssdp": "4.0.1",
     "@types/semaphore": "1.1.1",
-    "@types/uuid": "8.3.3",
+    "@types/uuid": "8.3.4",
     "cross-env": "7.0.3",
-    "mocha": "7.1.1",
-    "pkg": "5.6.0",
+    "mocha": "10.0.0",
+    "pkg": "5.7.0",
     "should": "13.2.3"
   }
 }

frontend/package.json

@@ -30,37 +30,36 @@
     ]
   },
   "dependencies": {
-    "@emotion/react": "11.6.0",
-    "@emotion/styled": "11.6.0",
-    "@fontsource/jetbrains-mono": "4.5.3",
-    "@fontsource/roboto": "4.5.3",
-    "@mui/material": "5.2.0",
-    "@mui/icons-material": "5.2.0",
-    "@mui/lab": "5.0.0-alpha.48",
-    "axios": "0.24.0",
-    "color": "4.0.1",
-    "date-fns": "2.26.0",
-    "notistack": "2.0.3",
-    "react": "17.0.2",
+    "@fontsource/jetbrains-mono": "4.5.8",
+    "@fontsource/roboto": "4.5.7",
+    "@mui/material": "5.8.0",
+    "@mui/base": "5.0.0-alpha.81",
+    "@mui/icons-material": "5.8.0",
+    "@mui/lab": "5.0.0-alpha.82",
+    "@emotion/styled": "11.8.1",
+    "@emotion/react": "11.9.0",
+    "axios": "0.27.2",
+    "date-fns": "2.28.0",
+    "notistack": "2.0.5",
+    "react": "18.1.0",
     "react-div-100vh": "0.7.0",
-    "react-dom": "17.0.2",
-    "rehype-raw": "6.1.0",
-    "react-markdown": "7.1.0",
+    "react-dom": "18.1.0",
+    "rehype-raw": "6.1.1",
+    "react-markdown": "8.0.3",
     "remark-gfm": "3.0.1",
-    "react-query": "3.33.5",
-    "react-router-dom": "5.3.0",
-    "react-scripts": "4.0.3",
-    "semaphore": "^1.1.0",
-    "use-long-press": "2.0.0",
+    "react-query": "3.39.0",
+    "react-router-dom": "5.3.3",
+    "react-scripts": "5.0.1",
+    "semaphore": "1.1.0",
+    "use-long-press": "2.0.2",
     "uuid": "8.3.2"
   },
   "devDependencies": {
-    "@types/color": "3.0.2",
-    "@types/react": "17.0.37",
-    "@types/react-dom": "17.0.11",
-    "@types/react-router-dom": "5.1.8",
-    "@types/uuid": "8.3.3",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
+    "@types/react-router-dom": "5.3.3",
+    "@types/uuid": "8.3.4",
     "tsutils": "3.21.0",
-    "cra-build-watch": "3.4.0"
+    "cra-build-watch": "git+https://[email protected]/Hypfer/cra-build-watch.git#5.0.0"
   }
 }

frontend/src/controls/PresetSelection.tsx

@@ -3,13 +3,13 @@ import {
     CircularProgress,
     Grid,
     Icon,
-    Mark,
     Paper,
     Slider,
     sliderClasses,
     styled,
     Typography,
 } from "@mui/material";
+import {Mark} from "@mui/base";
 import React from "react";
 import {
     Capability,

frontend/src/index.tsx

@@ -1,6 +1,9 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
-ReactDOM.render(<App/>, document.getElementById("root"));
+// @ts-ignore
+const root = createRoot(document.getElementById("root"));
+
+root.render(<App/>);
 
 

frontend/src/map/structures/client_structures/NoGoAreaClientStructure.ts

@@ -3,18 +3,12 @@ import RestrictedZoneClientStructure from "./RestrictedZoneClientStructure";
 class NoGoAreaClientStructure extends RestrictedZoneClientStructure {
     public static TYPE = "NoGoAreaClientStructure";
 
-    protected activeStyle : {
-        stroke: string,
-        fill: string,
-    } = {
+    protected activeStyle : { stroke: string, fill: string } = {
         stroke: "rgb(255, 0, 0)",
         fill: "rgba(255, 0, 0, 0)"
     };
 
-    protected style : {
-        stroke: string,
-        fill: string,
-    } = {
+    protected style : { stroke: string, fill: string } = {
         stroke: "rgb(255, 0, 0)",
         fill: "rgba(255, 0, 0, 0.4)"
     };

frontend/src/map/structures/client_structures/NoMopAreaClientStructure.ts

@@ -3,18 +3,12 @@ import RestrictedZoneClientStructure from "./RestrictedZoneClientStructure";
 class NoMopAreaClientStructure extends RestrictedZoneClientStructure {
     public static TYPE = "NoMopAreaClientStructure";
 
-    protected activeStyle : {
-        stroke: string,
-        fill: string,
-    } = {
+    protected activeStyle : { stroke: string, fill: string } = {
         stroke: "rgb(200, 0, 255)",
         fill: "rgba(255, 0, 255, 0)"
     };
 
-    protected style : {
-        stroke: string,
-        fill: string,
-    } = {
+    protected style : { stroke: string, fill: string } = {
         stroke: "rgb(200, 0, 255)",
         fill: "rgba(200, 0, 255, 0.4)"
     };

frontend/src/map/structures/client_structures/RestrictedZoneClientStructure.ts

@@ -14,18 +14,12 @@ const buttonSize = 30;
 abstract class RestrictedZoneClientStructure extends ClientStructure {
     public static TYPE = "RestrictedZoneClientStructure";
 
-    protected activeStyle : {
-        stroke: string,
-        fill: string,
-    } = {
+    protected activeStyle : { stroke: string, fill: string } = {
         stroke: "rgb(0, 255, 0)",
         fill: "rgba(0, 255, 0, 0)"
     };
 
-    protected style : {
-        stroke: string,
-        fill: string,
-    } = {
+    protected style : { stroke: string, fill: string } = {
         stroke: "rgb(0, 255, 0)",
         fill: "rgba(0, 255, 0, 0.4)"
     };

frontend/src/robot/capabilities/CapabilityLayout.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import {Grid, useMediaQuery, useTheme} from "@mui/material";
-import MasonryItem from "@mui/lab/MasonryItem";
 import Masonry from "@mui/lab/Masonry";
 import ReloadableCard from "../../components/ReloadableCard";
 
@@ -12,8 +11,9 @@ const useWideLayout = (): boolean => {
 export const CapabilityContainer: React.FunctionComponent<{ children: React.ReactNode }> = ({children}): JSX.Element => {
     const wideLayout = useWideLayout();
     if (wideLayout && children) {
+        //As of "@mui/lab": "5.0.0-alpha.82", for some reason, in our setup we need to override flex-flow or else the items will be in a single column
         return (
-            <Masonry columns={3} spacing={2} style={{padding: "0.2rem"}}>
+            <Masonry columns={3} spacing={2} style={{flexFlow: "row wrap"}}>
                 {children}
             </Masonry>
         );
@@ -54,11 +54,7 @@ export const CapabilityItem: React.FunctionComponent<
     );
 
     if (wideLayout) {
-        return (
-            <MasonryItem>
-                {content}
-            </MasonryItem>
-        );
+        return content;
     } else {
         return (
             <Grid item xs={12} sm={6} md={4}>

frontend/src/valetudo/Log.tsx

@@ -146,7 +146,7 @@ const Log = (): JSX.Element => {
                                 inputProps={{
                                     "aria-label": "filter",
                                     value: filter,
-                                    onChange: (e) => {
+                                    onChange: (e: any) => {
                                         setFilter((e.target as HTMLInputElement).value);
                                     }
                                 }}

frontend/src/valetudo/timers/TimerEditDialog.tsx

@@ -75,7 +75,7 @@ const TimerEditDialog: FunctionComponent<TimerDialogProps> = ({
     }, [editTimer, open]);
 
     const setActionParams = React.useCallback(
-        (newParams) => {
+        (newParams: any) => {
             if (validateParams[editTimer.action.type] !== undefined) {
                 setValidAction(validateParams[editTimer.action.type](newParams));
             } else {