chore(deps): update npm dependencies (#4939)

* chore(deps): update npm dependencies

* Refactor components to use function syntax instead of forwardRef for better type handling and clarity. Updated imports and adjusted prop types accordingly across multiple viewer components including TrafficGraph, ProfileViewer, BackupViewer, ClashCoreViewer, ControllerViewer, DnsViewer, LiteModeViewer, NetworkInterfaceViewer, ThemeViewer, TunViewer, UpdateViewer, and WebUIViewer.

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Tunglies <77394545+Tunglies@users.noreply.github.com>

package.json

@@ -36,10 +36,10 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@juggle/resize-observer": "^3.4.0",
-    "@mui/icons-material": "^7.3.2",
+    "@mui/icons-material": "^7.3.4",
     "@mui/lab": "7.0.0-beta.17",
-    "@mui/material": "^7.3.2",
+    "@mui/material": "^7.3.4",
-    "@mui/x-data-grid": "^8.12.1",
+    "@mui/x-data-grid": "^8.13.1",
     "@tauri-apps/api": "2.8.0",
     "@tauri-apps/plugin-clipboard-manager": "^2.3.0",
     "@tauri-apps/plugin-dialog": "^2.4.0",
@@ -53,17 +53,17 @@
     "axios": "^1.12.2",
     "dayjs": "1.11.18",
     "foxact": "^0.2.49",
-    "i18next": "^25.5.2",
+    "i18next": "^25.5.3",
     "js-yaml": "^4.1.0",
     "json-schema": "^0.4.0",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.53.0",
     "monaco-yaml": "^5.4.0",
     "nanoid": "^5.1.6",
-    "react": "19.1.1",
+    "react": "19.2.0",
-    "react-dom": "19.1.1",
+    "react-dom": "19.2.0",
     "react-error-boundary": "6.0.0",
-    "react-hook-form": "^7.63.0",
+    "react-hook-form": "^7.64.0",
     "react-i18next": "16.0.0",
     "react-markdown": "10.1.0",
     "react-monaco-editor": "0.59.0",
@@ -75,40 +75,40 @@
   },
   "devDependencies": {
     "@actions/github": "^6.0.1",
-    "@eslint-react/eslint-plugin": "^2.0.1",
+    "@eslint-react/eslint-plugin": "^2.0.6",
-    "@eslint/js": "^9.36.0",
+    "@eslint/js": "^9.37.0",
     "@tauri-apps/cli": "2.8.4",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "19.1.15",
+    "@types/react": "19.2.0",
-    "@types/react-dom": "19.1.9",
+    "@types/react-dom": "19.2.0",
     "@vitejs/plugin-legacy": "^7.2.1",
     "@vitejs/plugin-react": "5.0.4",
     "adm-zip": "^0.5.16",
     "cli-color": "^2.0.4",
     "commander": "^14.0.1",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import-x": "^4.16.1",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react-hooks": "^6.1.1",
-    "eslint-plugin-react-refresh": "^0.4.22",
+    "eslint-plugin-react-refresh": "^0.4.23",
     "eslint-plugin-unused-imports": "^4.2.0",
     "glob": "^11.0.3",
     "globals": "^16.4.0",
     "https-proxy-agent": "^7.0.6",
-    "jiti": "^2.6.0",
+    "jiti": "^2.6.1",
-    "meta-json-schema": "^1.19.13",
+    "meta-json-schema": "^1.19.14",
     "node-fetch": "^3.3.2",
     "prettier": "^3.6.2",
     "sass": "^1.93.2",
     "tar": "^7.5.1",
     "terser": "^5.44.0",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.44.1",
+    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7",
+    "vite": "^7.1.9",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-svgr": "^4.5.0"
   },

src/components/connection/connection-detail.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Snackbar, useTheme } from "@mui/material";
 import { useLockFn } from "ahooks";
 import dayjs from "dayjs";
 import { t } from "i18next";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState, type Ref } from "react";
 
 import { deleteConnection } from "@/services/cmds";
 import parseTraffic from "@/utils/parse-traffic";
@@ -11,8 +11,7 @@ export interface ConnectionDetailRef {
   open: (detail: IConnectionsItem) => void;
 }
 
-export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
+export function ConnectionDetail({ ref }: { ref?: Ref<ConnectionDetailRef> }) {
-  (props, ref) => {
   const [open, setOpen] = useState(false);
   const [detail, setDetail] = useState<IConnectionsItem>(null!);
   const theme = useTheme();
@@ -48,8 +47,7 @@ export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
       }
     />
   );
-  },
+}
-);
 
 interface InnerProps {
   data: IConnectionsItem;

src/components/home/enhanced-canvas-traffic-graph.tsx

@@ -1,13 +1,13 @@
 import { Box, useTheme } from "@mui/material";
+import type { Ref } from "react";
 import {
-  forwardRef,
+  memo,
-  useImperativeHandle,
-  useState,
-  useEffect,
   useCallback,
+  useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
-  memo,
+  useState,
 } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -44,7 +44,6 @@ interface TooltipData {
   highlightY: number; // 高亮Y轴位置
 }
 
-// Canvas图表配置
 const MAX_POINTS = 300;
 const TARGET_FPS = 15; // 降低帧率减少闪烁
 const LINE_WIDTH_UP = 2.5;
@@ -77,12 +76,18 @@ const GRAPH_CONFIG = {
   },
 };
 
+interface EnhancedCanvasTrafficGraphProps {
+  ref?: Ref<EnhancedCanvasTrafficGraphRef>;
+}
+
 /**
  * 稳定版Canvas流量图表组件
  * 修复闪烁问题，添加时间轴显示
  */
 export const EnhancedCanvasTrafficGraph = memo(
-  forwardRef<EnhancedCanvasTrafficGraphRef>((props, ref) => {
+  function EnhancedCanvasTrafficGraph({
+    ref,
+  }: EnhancedCanvasTrafficGraphProps) {
     const theme = useTheme();
     const { t } = useTranslation();
 
@@ -999,7 +1004,7 @@ export const EnhancedCanvasTrafficGraph = memo(
         </Box>
       </Box>
     );
-  }),
+  },
 );
 
 EnhancedCanvasTrafficGraph.displayName = "EnhancedCanvasTrafficGraph";

src/components/layout/traffic-graph.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from "@mui/material";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useEffect, useImperativeHandle, useRef, type Ref } from "react";
 
 const maxPoint = 30;
 
@@ -24,7 +24,7 @@ export interface TrafficRef {
 /**
  * draw the traffic graph
  */
-export const TrafficGraph = forwardRef<TrafficRef>((props, ref) => {
+export function TrafficGraph({ ref }: { ref?: Ref<TrafficRef> }) {
   const countRef = useRef(0);
   const styleRef = useRef(true);
   const listRef = useRef<TrafficData[]>(defaultList);
@@ -196,4 +196,4 @@ export const TrafficGraph = forwardRef<TrafficRef>((props, ref) => {
   }, [palette]);
 
   return <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />;
-});
+}

src/components/profile/profile-viewer.tsx

@@ -9,14 +9,9 @@ import {
   TextField,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import {
+import type { Ref } from "react";
-  forwardRef,
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
-  useEffect,
+import { Controller, useForm } from "react-hook-form";
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import { BaseDialog, Switch } from "@/components/base";
@@ -38,8 +33,9 @@ export interface ProfileViewerRef {
 
 // create or edit the profile
 // remote / local
-export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
+type ProfileViewerProps = Props & { ref?: Ref<ProfileViewerRef> };
-  (props, ref) => {
+
+export function ProfileViewer({ onChange, ref }: ProfileViewerProps) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [openType, setOpenType] = useState<"new" | "edit">("new");
@@ -72,7 +68,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
       setOpenType("new");
       setOpen(true);
     },
-      edit: (item) => {
+    edit: (item: IProfileItem) => {
       if (item) {
         Object.entries(item).forEach(([key, value]) => {
           formIns.setValue(key as any, value);
@@ -124,8 +120,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
         const isUpdate = openType === "edit";
 
         // 判断是否是当前激活的配置
-          const isActivating =
+        const isActivating = isUpdate && form.uid === (profiles?.current ?? "");
-            isUpdate && form.uid === (profiles?.current ?? "");
 
         // 保存原始代理设置以便回退成功后恢复
         const originalOptions = {
@@ -193,7 +188,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
 
         // 优化：UI先关闭，异步通知父组件
         setTimeout(() => {
-            props.onChange(isActivating);
+          onChange(isActivating);
         }, 0);
       } catch (err: any) {
         showNotice("error", err.message || err.toString());
@@ -334,9 +329,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
               slotProps={{
                 input: {
                   endAdornment: (
-                      <InputAdornment position="end">
+                    <InputAdornment position="end">{t("mins")}</InputAdornment>
-                        {t("mins")}
-                      </InputAdornment>
                   ),
                 },
               }}
@@ -392,8 +385,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
       )}
     </BaseDialog>
   );
-  },
+}
-);
 
 const StyledBox = styled(Box)(() => ({
   margin: "8px 0 8px 8px",

src/components/setting/mods/backup-viewer.tsx

@@ -1,23 +1,17 @@
-import { Box, Paper, Divider } from "@mui/material";
+import { Box, Divider, Paper } from "@mui/material";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
-import {
+import type { Ref } from "react";
-  forwardRef,
+import { useCallback, useImperativeHandle, useMemo, useState } from "react";
-  useImperativeHandle,
-  useState,
-  useCallback,
-  useMemo,
-} from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseDialog, BaseLoadingOverlay, DialogRef } from "@/components/base";
-import { BaseLoadingOverlay } from "@/components/base";
 import { listWebDavBackup } from "@/services/cmds";
 
 import { BackupConfigViewer } from "./backup-config-viewer";
 import {
-  BackupTableViewer,
   BackupFile,
+  BackupTableViewer,
   DEFAULT_ROWS_PER_PAGE,
 } from "./backup-table-viewer";
 dayjs.extend(customParseFormat);
@@ -25,7 +19,7 @@ dayjs.extend(customParseFormat);
 const DATE_FORMAT = "YYYY-MM-DD_HH-mm-ss";
 const FILENAME_PATTERN = /\d{4}-\d{2}-\d{2}_\d{2}-\d{2}-\d{2}/;
 
-export const BackupViewer = forwardRef<DialogRef>((props, ref) => {
+export function BackupViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
@@ -131,4 +125,4 @@ export const BackupViewer = forwardRef<DialogRef>((props, ref) => {
       </Box>
     </BaseDialog>
   );
-});
+}

src/components/setting/mods/clash-core-viewer.tsx

@@ -1,6 +1,6 @@
 import {
-  SwitchAccessShortcutRounded,
   RestartAltRounded,
+  SwitchAccessShortcutRounded,
 } from "@mui/icons-material";
 import { LoadingButton } from "@mui/lab";
 import {
@@ -12,17 +12,19 @@ import {
   ListItemText,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import type { Ref } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { mutate } from "swr";
 
 import { BaseDialog, DialogRef } from "@/components/base";
 import { useVerge } from "@/hooks/use-verge";
-import { changeClashCore, restartCore } from "@/services/cmds";
 import {
+  changeClashCore,
   closeAllConnections,
-  upgradeCore,
   forceRefreshClashConfig,
+  restartCore,
+  upgradeCore,
 } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 
@@ -31,7 +33,7 @@ const VALID_CORE = [
   { name: "Mihomo Alpha", core: "verge-mihomo-alpha", chip: "Alpha Version" },
 ];
 
-export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
+export function ClashCoreViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation();
 
   const { verge, mutateVerge } = useVerge();
@@ -169,4 +171,4 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
       </List>
     </BaseDialog>
   );
-});
+}

src/components/setting/mods/controller-viewer.tsx

@@ -12,7 +12,7 @@ import {
   Tooltip,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState, type Ref } from "react";
 import { useTranslation } from "react-i18next";
 
 import { BaseDialog, DialogRef, Switch } from "@/components/base";
@@ -20,7 +20,7 @@ import { useClashInfo } from "@/hooks/use-clash";
 import { useVerge } from "@/hooks/use-verge";
 import { showNotice } from "@/services/noticeService";
 
-export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
+export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [copySuccess, setCopySuccess] = useState<null | string>(null);
@@ -217,4 +217,4 @@ export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
       </Snackbar>
     </BaseDialog>
   );
-});
+}

src/components/setting/mods/dns-viewer.tsx

@@ -15,7 +15,8 @@ import {
 import { invoke } from "@tauri-apps/api/core";
 import { useLockFn } from "ahooks";
 import yaml from "js-yaml";
-import { forwardRef, useImperativeHandle, useState, useEffect } from "react";
+import type { Ref } from "react";
+import { useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import MonacoEditor from "react-monaco-editor";
 
@@ -87,7 +88,7 @@ const DEFAULT_DNS_CONFIG = {
   },
 };
 
-export const DnsViewer = forwardRef<DialogRef>((props, ref) => {
+export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation();
   const { clash, mutateClash } = useClash();
   const themeMode = useThemeMode();
@@ -1034,4 +1035,4 @@ export const DnsViewer = forwardRef<DialogRef>((props, ref) => {
       )}
     </BaseDialog>
   );
-});
+}

src/components/setting/mods/lite-mode-viewer.tsx

@@ -1,13 +1,14 @@
 import {
+  InputAdornment,
   List,
   ListItem,
   ListItemText,
   TextField,
   Typography,
-  InputAdornment,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import type { Ref } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { BaseDialog, DialogRef, Switch } from "@/components/base";
@@ -16,7 +17,7 @@ import { useVerge } from "@/hooks/use-verge";
 import { entry_lightweight_mode } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 
-export const LiteModeViewer = forwardRef<DialogRef>((props, ref) => {
+export function LiteModeViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation();
   const { verge, patchVerge } = useVerge();
 
@@ -143,4 +144,4 @@ export const LiteModeViewer = forwardRef<DialogRef>((props, ref) => {
       </List>
     </BaseDialog>
   );
-});
+}

src/components/setting/mods/network-interface-viewer.tsx

@@ -1,7 +1,8 @@
 import { ContentCopyRounded } from "@mui/icons-material";
 import { alpha, Box, Button, IconButton } from "@mui/material";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import type { Ref } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
@@ -9,7 +10,7 @@ import { BaseDialog, DialogRef } from "@/components/base";
 import { getNetworkInterfacesInfo } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 
-export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
+export function NetworkInterfaceViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [isV4, setIsV4] = useState(true);
@@ -99,7 +100,7 @@ export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
       ))}
     </BaseDialog>
   );
-});
+}
 
 const AddressDisplay = (props: { label: string; content: string }) => {
   const { t } = useTranslation();

src/components/setting/mods/theme-viewer.tsx

@@ -9,16 +9,17 @@ import {
   useTheme,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { BaseDialog, DialogRef } from "@/components/base";
 import { EditorViewer } from "@/components/profile/editor-viewer";
 import { useVerge } from "@/hooks/use-verge";
-import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
+import { defaultDarkTheme, defaultTheme } from "@/pages/_theme";
 import { showNotice } from "@/services/noticeService";
 
-export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
+export function ThemeViewer(props: { ref?: React.Ref<DialogRef> }) {
+  const { ref } = props;
   const { t } = useTranslation();
 
   const [open, setOpen] = useState(false);
@@ -144,7 +145,7 @@ export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
       </List>
     </BaseDialog>
   );
-});
+}
 
 const Item = styled(ListItem)(() => ({
   padding: "5px 2px",

src/components/setting/mods/tun-viewer.tsx

@@ -1,14 +1,15 @@
 import {
+  Box,
+  Button,
   List,
   ListItem,
   ListItemText,
-  Box,
-  Typography,
-  Button,
   TextField,
+  Typography,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import type { Ref } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { BaseDialog, DialogRef, Switch } from "@/components/base";
@@ -21,7 +22,7 @@ import { StackModeSwitch } from "./stack-mode-switch";
 
 const OS = getSystem();
 
-export const TunViewer = forwardRef<DialogRef>((props, ref) => {
+export function TunViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation();
 
   const { clash, mutateClash, patchClash } = useClash();
@@ -238,4 +239,4 @@ export const TunViewer = forwardRef<DialogRef>((props, ref) => {
       </List>
     </BaseDialog>
   );
-});
+}

src/components/setting/mods/update-viewer.tsx

@@ -1,16 +1,11 @@
-import { Box, LinearProgress, Button } from "@mui/material";
+import { Box, Button, LinearProgress } from "@mui/material";
 import { Event, UnlistenFn } from "@tauri-apps/api/event";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { open as openUrl } from "@tauri-apps/plugin-shell";
 import { check as checkUpdate } from "@tauri-apps/plugin-updater";
 import { useLockFn } from "ahooks";
-import {
+import type { Ref } from "react";
-  forwardRef,
+import { useEffect, useImperativeHandle, useMemo, useState } from "react";
-  useImperativeHandle,
-  useState,
-  useMemo,
-  useEffect,
-} from "react";
 import { useTranslation } from "react-i18next";
 import ReactMarkdown from "react-markdown";
 import useSWR from "swr";
@@ -19,9 +14,9 @@ import { BaseDialog, DialogRef } from "@/components/base";
 import { useListen } from "@/hooks/use-listen";
 import { portableFlag } from "@/pages/_layout";
 import { showNotice } from "@/services/noticeService";
-import { useUpdateState, useSetUpdateState } from "@/services/states";
+import { useSetUpdateState, useUpdateState } from "@/services/states";
 
-export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
+export function UpdateViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation();
 
   const [open, setOpen] = useState(false);
@@ -167,4 +162,4 @@ export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
       )}
     </BaseDialog>
   );
-});
+}

src/components/setting/mods/web-ui-viewer.tsx

@@ -1,6 +1,7 @@
-import { Button, Box, Typography } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import type { Ref } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { BaseDialog, BaseEmpty, DialogRef } from "@/components/base";
@@ -11,7 +12,7 @@ import { showNotice } from "@/services/noticeService";
 
 import { WebUIItem } from "./web-ui-item";
 
-export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
+export function WebUIViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation();
 
   const { clashInfo } = useClashInfo();
@@ -139,4 +140,4 @@ export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
       )}
     </BaseDialog>
   );
-});
+}