Update eslint to current build structure for new vite projects

Move from .cjs to .js file for eslint
Allow slightly longer lines
Don't force blank lines between import groups (but allow them)
Added lint:only and lint:fixonly when no localization needs compiling
Eliminated  unused lodash.throttle package.
Moved the eslint-import-resolver-alias to the devDependences
Add missing typescript-eslint to devDependencies
Model the split tsconfig*.json for modern vite projects.
Upgraded packages.

ui/.prettierrc

@@ -7,6 +7,7 @@
   "singleQuote": false,
   "plugins": ["prettier-plugin-tailwindcss"],
   "tailwindFunctions": ["clsx", "cx"],
-  "printWidth": 90,
+  "printWidth": 100,
+  "max_line_length": 100,
   "tailwindStylesheet": "./src/index.css"
 }

ui/eslint.config.js

@@ -1,19 +1,17 @@
-const {
+import globals from "globals";
-    defineConfig,
+import { defineConfig, globalIgnores } from "eslint/config";
-    globalIgnores,
+import { fixupConfigRules } from "@eslint/compat";
-} = require("eslint/config");
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+import path from "path";
+import { fileURLToPath } from "url";
 
-const globals = require("globals");
+import tsParser from "@typescript-eslint/parser";
+import reactRefresh from "eslint-plugin-react-refresh";
 
-const {
+// mimic CommonJS variables
-    fixupConfigRules,
+const __filename = fileURLToPath(import.meta.url);
-} = require("@eslint/compat");
+const __dirname = path.dirname(__filename);
-
-const js = require("@eslint/js");
-
-const {
-    FlatCompat,
-} = require("@eslint/eslintrc");
 
 const compat = new FlatCompat({
     baseDirectory: __dirname,
@@ -21,43 +19,35 @@ const compat = new FlatCompat({
     allConfig: js.configs.all
 });
 
-const tsParser = require("@typescript-eslint/parser");
+export default defineConfig([
-const reactRefresh = require("eslint-plugin-react-refresh");
+  {
-
-module.exports = defineConfig([{
     languageOptions: {
-        globals: {
+        globals: globals.browser,
-            ...globals.browser,
-        },
-
         parser: tsParser,
         ecmaVersion: "latest",
         sourceType: "module",
-
         parserOptions: {
-            project: ["./tsconfig.json", "./tsconfig.node.json"],
+            project: ["./tsconfig.app.json", "./tsconfig.node.json"],
             tsconfigRootDir: __dirname,
             ecmaFeatures: {
                 jsx: true
             }
         },
     },
-
     extends: fixupConfigRules(compat.extends(
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/stylistic",
-        "plugin:react-hooks/recommended",
         "plugin:react/recommended",
+        "plugin:react-hooks/recommended",
         "plugin:react/jsx-runtime",
         "plugin:import/recommended",
+        "plugin:prettier/recommended",
         "prettier",
     )),
-
     plugins: {
         "react-refresh": reactRefresh,
     },
-
     rules: {
         "react-refresh/only-export-components": ["warn", {
             allowConstantExport: true,
@@ -65,14 +55,13 @@ module.exports = defineConfig([{
 
         "import/order": ["error", {
             groups: ["builtin", "external", "internal", "parent", "sibling"],
-            "newlines-between": "always",
+            "newlines-between": "ignore",
         }],
 
         "@typescript-eslint/no-unused-vars": ["warn", {
             "argsIgnorePattern": "^_", "varsIgnorePattern": "^_"
         }],
     },
-
     settings: {
         "react": {
             "version": "detect"
@@ -93,9 +82,9 @@ module.exports = defineConfig([{
             },
         },
     },
-}, globalIgnores([
+},
+globalIgnores([
     "**/dist",
-    "**/.eslintrc.cjs",
     "**/tailwind.config.js",
     "**/postcss.config.js",
 ])]);

ui/package.json

@@ -1,10 +1,10 @@
 {
   "name": "kvm-ui",
   "private": true,
-  "version": "2025.11.07.2130",
+  "version": "2025.11.11.1900",
   "type": "module",
   "engines": {
-    "node": "^22.20.0"
+    "node": "^22.21.1"
   },
   "scripts": {
     "dev": "./dev_device.sh",
@@ -14,8 +14,10 @@
     "build:device": "npm run i18n:compile && tsc && vite build --mode=device --emptyOutDir",
     "build:staging": "npm run i18n:compile && tsc && vite build --mode=cloud-staging",
     "build:prod": "npm run i18n:compile && tsc && vite build --mode=cloud-production",
-    "lint": "npm run i18n:compile && eslint './src/**/*.{ts,tsx}'",
+    "lint": "npm run i18n:compile && npm run lint:only",
-    "lint:fix": "npm run i18n:compile && eslint './src/**/*.{ts,tsx}' --fix",
+    "lint:only": "eslint './src/**/*.{ts,tsx}'",
+    "lint:fix": "npm run i18n:compile && npm run lint:fixonly",
+    "lint:fixonly": "eslint './src/**/*.{ts,tsx}' --fix",
     "i18n": "npm run i18n:resort && npm run i18n:validate && npm run i18n:compile",
     "i18n:resort": "python3 tools/resort_messages.py",
     "i18n:validate": "inlang validate --project ./localization/jetKVM.UI.inlang",
@@ -39,10 +41,8 @@
     "@xterm/xterm": "^5.5.0",
     "cva": "^1.0.0-beta.4",
     "dayjs": "^1.11.19",
-    "eslint-import-resolver-alias": "^1.1.2",
     "focus-trap-react": "^11.0.4",
     "framer-motion": "^12.23.24",
-    "lodash.throttle": "^4.1.1",
     "mini-svg-data-uri": "^1.4.4",
     "react": "^19.2.0",
     "react-animate-height": "^3.2.3",
@@ -51,13 +51,13 @@
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
     "react-router": "^7.9.5",
-    "react-simple-keyboard": "^3.8.132",
+    "react-simple-keyboard": "^3.8.133",
     "react-use-websocket": "^4.13.0",
     "react-xtermjs": "^1.0.10",
-    "recharts": "^3.3.0",
+    "recharts": "^3.4.1",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "usehooks-ts": "^3.1.1",
-    "validator": "^13.15.20",
+    "validator": "^13.15.23",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
@@ -73,16 +73,17 @@
     "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.17",
-    "@types/react": "^19.2.2",
+    "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.2",
     "@types/semver": "^7.7.1",
-    "@types/validator": "^13.15.4",
+    "@types/validator": "^13.15.5",
-    "@typescript-eslint/eslint-plugin": "^8.46.3",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
-    "@typescript-eslint/parser": "^8.46.3",
+    "@typescript-eslint/parser": "^8.46.4",
     "@vitejs/plugin-react-swc": "^4.2.1",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.4.22",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
@@ -94,7 +95,8 @@
     "prettier-plugin-tailwindcss": "^0.7.1",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "vite": "^7.1.12",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.2",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

ui/postcss.config.js

@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    autoprefixer: {},
-  },
-}

ui/tsconfig.app.json

@@ -0,0 +1,57 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": [ "ES2022", "DOM", "DOM.Iterable" ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "allowJs": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "types": [
+      "vite/client"
+    ],
+    /* Import Aliases */
+    "paths": {
+      "@components/*": [
+        "./src/components/*"
+      ],
+      "@routes/*": [
+        "./src/routes/*"
+      ],
+      "@hooks/*": [
+        "./src/hooks/*"
+      ],
+      "@providers/*": [
+        "./src/providers/*"
+      ],
+      "@assets/*": [
+        "./src/assets/*"
+      ],
+      "@localizations/*": [
+        "./localization/paraglide/*"
+      ],
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "src"
+  ]
+}

ui/tsconfig.json

@@ -1,64 +1,7 @@
 {
-  "compilerOptions": {
+  "files": [],
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "forceConsistentCasingInFileNames": true,
-    "lib": [
-      "ES2021",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "allowJs": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": false,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "erasableSyntaxOnly": true,
-    "noUncheckedSideEffectImports": true,
-    "types": [
-      "vite/client"
-    ],
-    /* Import Aliases */
-    "paths": {
-      "@components/*": [
-        "./src/components/*"
-      ],
-      "@routes/*": [
-        "./src/routes/*"
-      ],
-      "@hooks/*": [
-        "./src/hooks/*"
-      ],
-      "@providers/*": [
-        "./src/providers/*"
-      ],
-      "@assets/*": [
-        "./src/assets/*"
-      ],
-      "@localizations/*": [
-        "./localization/paraglide/*"
-      ],
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "src"
-  ],
   "references": [
-    {
+    { "path": "./tsconfig.app.json" },
-      "path": "./tsconfig.node.json"
+    { "path": "./tsconfig.node.json" }
-    }
   ]
-}
+}

ui/tsconfig.node.json

@@ -1,11 +1,27 @@
 {
   "compilerOptions": {
-    "composite": true,
+    "target": "ES2022",
-    "skipLibCheck": true,
+    "lib": ["ES2022"],
     "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
     "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true
+    "composite": true,
   },
   "include": [
     "vite.config.ts"