ui: update deps, fix husky script (#2726)

- Upgraded all dependencies
- Removed beta TS 5.0 as it conflicted with some packages
- Added types for `Array.prototype.findLast` and
`Array.prototype.findLastIndex` (these definitions are provided in TS
5.0
- Fixed fixed type import syntax in a few components
- Re-patched `redux-deep-persist` and tested to ensure the patch still
works

The husky pre-commit command was `npx run lint`, but it should run
`lint-staged`. Also, `npx` wasn't working for me. Changed the command to
`npm run lint-staged` and it all works. Extended the `lint-staged`
triggers to hit `json`, `scss` and `html`.

invokeai/frontend/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-cd invokeai/frontend/ && npx run lint
+cd invokeai/frontend/ && npm run lint-staged

invokeai/frontend/dist/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>InvokeAI - A Stable Diffusion Toolkit</title>
     <link rel="shortcut icon" type="icon" href="./assets/favicon-0d253ced.ico" />
-    <script type="module" crossorigin src="./assets/index-fff3415a.js"></script>
+    <script type="module" crossorigin src="./assets/index-8c49ac18.js"></script>
     <link rel="stylesheet" href="./assets/index-14cb2922.css">
   </head>
 

invokeai/frontend/index.d.ts

@@ -1 +1,41 @@
+export {};
+
 declare module 'redux-socket.io-middleware';
+
+declare global {
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  interface Array<T> {
+    /**
+     * Returns the value of the last element in the array where predicate is true, and undefined
+     * otherwise.
+     * @param predicate findLast calls predicate once for each element of the array, in descending
+     * order, until it finds one where predicate returns true. If such an element is found, findLast
+     * immediately returns that element value. Otherwise, findLast returns undefined.
+     * @param thisArg If provided, it will be used as the this value for each invocation of
+     * predicate. If it is not provided, undefined is used instead.
+     */
+    findLast<S extends T>(
+      predicate: (value: T, index: number, array: T[]) => value is S,
+      thisArg?: any
+    ): S | undefined;
+    findLast(
+      predicate: (value: T, index: number, array: T[]) => unknown,
+      thisArg?: any
+    ): T | undefined;
+
+    /**
+     * Returns the index of the last element in the array where predicate is true, and -1
+     * otherwise.
+     * @param predicate findLastIndex calls predicate once for each element of the array, in descending
+     * order, until it finds one where predicate returns true. If such an element is found,
+     * findLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1.
+     * @param thisArg If provided, it will be used as the this value for each invocation of
+     * predicate. If it is not provided, undefined is used instead.
+     */
+    findLastIndex(
+      predicate: (value: T, index: number, array: T[]) => unknown,
+      thisArg?: any
+    ): number;
+  }
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+}

invokeai/frontend/package.json

@@ -15,72 +15,70 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.10",
+    "@chakra-ui/icons": "^2.0.17",
-    "@chakra-ui/react": "^2.3.1",
+    "@chakra-ui/react": "^2.5.1",
     "@emotion/cache": "^11.10.5",
-    "@emotion/react": "^11.10.4",
+    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.4",
+    "@emotion/styled": "^11.10.6",
-    "@radix-ui/react-context-menu": "^2.0.1",
+    "@radix-ui/react-context-menu": "^2.1.1",
     "@radix-ui/react-slider": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.3",
-    "@reduxjs/toolkit": "^1.8.5",
+    "@reduxjs/toolkit": "^1.9.2",
-    "@types/uuid": "^8.3.4",
+    "@types/uuid": "^9.0.0",
-    "@vitejs/plugin-react-swc": "^3.1.0",
+    "@vitejs/plugin-react-swc": "^3.2.0",
     "add": "^2.0.6",
     "dateformat": "^5.0.3",
     "formik": "^2.2.9",
-    "framer-motion": "^7.2.1",
+    "framer-motion": "^9.0.4",
-    "i18next": "^22.4.5",
+    "i18next": "^22.4.10",
     "i18next-browser-languagedetector": "^7.0.1",
-    "i18next-http-backend": "^2.1.0",
+    "i18next-http-backend": "^2.1.1",
-    "konva": "^8.3.13",
+    "konva": "^8.4.2",
     "lodash": "^4.17.21",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.2",
+    "react-dropzone": "^14.2.3",
-    "react-hotkeys-hook": "4.0.2",
+    "react-hotkeys-hook": "4.3.5",
-    "react-i18next": "^12.1.1",
+    "react-i18next": "^12.1.5",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.7.1",
-    "react-konva": "^18.2.3",
+    "react-konva": "^18.2.4",
-    "react-konva-utils": "^0.3.0",
+    "react-konva-utils": "^0.3.2",
-    "react-redux": "^8.0.2",
+    "react-redux": "^8.0.5",
     "react-transition-group": "^4.4.5",
-    "react-zoom-pan-pinch": "^2.1.3",
+    "react-zoom-pan-pinch": "^2.6.1",
-    "redux-deep-persist": "^1.0.6",
+    "redux-deep-persist": "^1.0.7",
     "redux-persist": "^6.0.0",
-    "socket.io": "^4.5.2",
+    "socket.io": "^4.6.0",
-    "socket.io-client": "^4.5.2",
+    "socket.io-client": "^4.6.0",
     "use-image": "^1.1.0",
     "uuid": "^9.0.0",
     "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@types/dateformat": "^5.0.0",
-    "@types/react": "^18.0.17",
+    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.6",
+    "@types/react-dom": "^18.0.11",
     "@types/react-transition-group": "^4.4.5",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.36.2",
+    "@typescript-eslint/parser": "^5.52.0",
     "babel-plugin-transform-imports": "^2.0.0",
-    "eslint": "^8.23.0",
+    "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^13.1.2",
-    "madge": "^5.0.1",
+    "madge": "^6.0.0",
-    "patch-package": "^6.5.0",
+    "patch-package": "^6.5.1",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
     "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.55.0",
+    "sass": "^1.58.3",
-    "terser": "^5.16.1",
+    "terser": "^5.16.4",
-    "tsc-watch": "^5.0.3",
+    "vite": "^4.1.2",
-    "typescript": "^5.0.0-beta",
-    "vite": "^4.1.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^4.0.5"
   },
@@ -95,9 +93,9 @@
     }
   },
   "lint-staged": {
-    "**/*.{js,jsx,ts,tsx,cjs}": [
+    "**/*.{js,jsx,ts,tsx,cjs,json,html,scss}": [
-      "npx prettier --write",
+      "npm run prettier",
-      "npx eslint --fix"
+      "npm run lint"
     ]
   }
 }

invokeai/frontend/src/common/components/IAISimpleMenu.tsx

@@ -3,10 +3,10 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
-  type MenuProps,
+  MenuProps,
-  type MenuButtonProps,
+  MenuButtonProps,
-  type MenuListProps,
+  MenuListProps,
-  type MenuItemProps,
+  MenuItemProps,
 } from '@chakra-ui/react';
 import { MouseEventHandler, ReactNode } from 'react';
 import { MdArrowDropDown, MdArrowDropUp } from 'react-icons/md';

invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreType.tsx

@@ -1,12 +1,12 @@
 import { FACETOOL_TYPES } from 'app/constants';
-import { type RootState } from 'app/store';
+import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISelect from 'common/components/IAISelect';
 import {
-  type FacetoolType,
+  FacetoolType,
   setFacetoolType,
 } from 'features/parameters/store/postprocessingSlice';
-import { type ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export default function FaceRestoreType() {

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleScale.tsx

@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISelect from 'common/components/IAISelect';
 import {
   setUpscalingLevel,
-  type UpscalingLevel,
+  UpscalingLevel,
 } from 'features/parameters/store/postprocessingSlice';
 import type { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/src/features/parameters/components/MainParameters/MainParameters.tsx

@@ -1,5 +1,5 @@
 import { Flex } from '@chakra-ui/react';
-import { type RootState } from 'app/store';
+import { RootState } from 'app/store';
 import { useAppSelector } from 'app/storeHooks';
 import { useTranslation } from 'react-i18next';
 import ParametersAccordion from '../ParametersAccordion';

invokeai/frontend/src/features/system/components/ModelManager/MergeModels.tsx

@@ -12,7 +12,7 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { mergeDiffusersModels } from 'app/socketio/actions';
-import { type RootState } from 'app/store';
+import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIInput from 'common/components/IAIInput';

invokeai/frontend/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -14,7 +14,7 @@ import {
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { IN_PROGRESS_IMAGE_TYPES } from 'app/constants';
-import { type RootState } from 'app/store';
+import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISelect from 'common/components/IAISelect';
@@ -27,14 +27,14 @@ import {
   setShouldConfirmOnDelete,
   setShouldDisplayGuides,
   setShouldDisplayInProgressType,
-  type SystemState,
+  SystemState,
 } from 'features/system/store/systemSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import {
   setShouldUseCanvasBetaLayout,
   setShouldUseSliders,
 } from 'features/ui/store/uiSlice';
-import { type UIState } from 'features/ui/store/uiTypes';
+import { UIState } from 'features/ui/store/uiTypes';
 import { isEqual, map } from 'lodash';
 import { persistor } from 'persistor';
 import { ChangeEvent, cloneElement, ReactElement } from 'react';