upgrade to latest vite (#320)

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/package.json

@@ -27,8 +27,8 @@
     "react-router-dom": "^6.14.2",
     "react-syntax-highlighter": "^15.5.0",
     "socket.io-client": "^4.7.1",
-    "vite": "4.4.11",
-    "vite-plugin-svgr": "^0.3.0",
+    "vite": "5.0.2",
+    "vite-plugin-svgr": "4.2.0",
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {

client/src/components/icons/Icons.tsx

@@ -29,20 +29,20 @@ import GetAppIcon from '@material-ui/icons/GetApp';
 // import PersonOutlineIcon from '@material-ui/icons/PersonOutline';
 import PersonOutlineIcon from '@material-ui/icons/Person';
 import { SvgIcon } from '@material-ui/core';
-import { ReactComponent as ZillizIcon } from '../../assets/icons/attu.svg';
-import { ReactComponent as OverviewIcon } from '../../assets/icons/overview.svg';
-import { ReactComponent as CollectionIcon } from '../../assets/icons/collecion.svg';
-import { ReactComponent as ConsoleIcon } from '../../assets/icons/console.svg';
-import { ReactComponent as InfoIcon } from '../../assets/icons/info.svg';
-import { ReactComponent as ReleaseIcon } from '../../assets/icons/release.svg';
-import { ReactComponent as LoadIcon } from '../../assets/icons/load.svg';
-import { ReactComponent as KeyIcon } from '../../assets/icons/key.svg';
-import { ReactComponent as UploadIcon } from '../../assets/icons/upload.svg';
-import { ReactComponent as VectorSearchIcon } from '../../assets/icons/nav-search.svg';
-import { ReactComponent as SearchEmptyIcon } from '../../assets/icons/search.svg';
-import { ReactComponent as CopyIcon } from '../../assets/icons/copy.svg';
-import { ReactComponent as SystemIcon } from '../../assets/icons/system.svg';
-import { ReactComponent as Compact } from '../../assets/icons/compact.svg';
+import ZillizIcon from '@/assets/icons/attu.svg?react';
+import OverviewIcon from '@/assets/icons/overview.svg?react';
+import CollectionIcon from '@/assets/icons/collecion.svg?react';
+import ConsoleIcon from '@/assets/icons/console.svg?react';
+import InfoIcon from '@/assets/icons/info.svg?react';
+import ReleaseIcon from '@/assets/icons/release.svg?react';
+import LoadIcon from '@/assets/icons/load.svg?react';
+import KeyIcon from '@/assets/icons/key.svg?react';
+import UploadIcon from '@/assets/icons/upload.svg?react';
+import VectorSearchIcon from '@/assets/icons/nav-search.svg?react';
+import SearchEmptyIcon from '@/assets/icons/search.svg?react';
+import CopyIcon from '@/assets/icons/copy.svg?react';
+import SystemIcon from '@/assets/icons/system.svg?react';
+import Compact from '@/assets/icons/compact.svg?react';
 
 const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   search: (props = {}) => <SearchIcon {...props} />,

client/src/components/menu/CommunityBtn.tsx

@@ -5,8 +5,8 @@ import SvgIcon from '@material-ui/core/SvgIcon';
 import { makeStyles, Theme, Link } from '@material-ui/core';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import GitHubIcon from '@material-ui/icons/GitHub';
-import { ReactComponent as peopleIcon } from '../../assets/icons/people.svg';
-import { ReactComponent as slackIcon } from '../../assets/icons/slack.svg';
+import peopleIcon from '@/assets/icons/people.svg?react';
+import slackIcon from '@/assets/icons/slack.svg?react';
 import qrcodePath from '../../assets/imgs/wechat_qrcode.png';
 
 const SLACK_LINK = 'https://slack.milvus.io';
@@ -78,14 +78,12 @@ const getStyles = makeStyles((theme: Theme) => ({
     fontWeight: 500,
     fontSize: theme.spacing(1.75),
     lineHeight: theme.spacing(2.5),
-
   },
   contentDesc: {
     fontSize: theme.spacing(1.5),
     lineHeight: theme.spacing(2.5),
     color: theme.palette.attuGrey.dark,
     marginBottom: theme.spacing(1),
-
   },
   contentLink: {
     display: 'block',
@@ -106,7 +104,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     marginTop: theme.spacing(2),
     width: theme.spacing(2.5),
     height: theme.spacing(2.5),
-  }
+  },
 }));
 
 const CommunityBtn = (props: any) => {
@@ -120,12 +118,8 @@ const CommunityBtn = (props: any) => {
       {open && (
         <div className={classes.container}>
           <div className={classes.head}>
-            <div className={classes.title}>
-              {communityTrans.hi}
-            </div>
-            <div className={classes.titleDesc}>
-              {communityTrans.growing}
-            </div>
+            <div className={classes.title}>{communityTrans.hi}</div>
+            <div className={classes.titleDesc}>{communityTrans.growing}</div>
           </div>
           <div className={classes.body}>
             <div className={classes.block}>
@@ -142,28 +136,32 @@ const CommunityBtn = (props: any) => {
                 {communityTrans.more}
               </div>
 
-              <SvgIcon viewBox="0 0 24 24" component={slackIcon} className={classes.icon} />
-              <div className={classes.contentDesc}>
-                {communityTrans.join}
-              </div>
+              <SvgIcon
+                viewBox="0 0 24 24"
+                component={slackIcon}
+                className={classes.icon}
+              />
+              <div className={classes.contentDesc}>{communityTrans.join}</div>
               <Link
                 classes={{ root: classes.contentLink }}
                 href={SLACK_LINK}
-                underline='always'
+                underline="always"
                 target="_blank"
                 rel="noopener"
               >
                 {SLACK_LINK}
               </Link>
 
-              <SvgIcon viewBox="0 0 24 24" component={GitHubIcon} className={classes.icon} />
-              <div className={classes.contentDesc}>
-                {communityTrans.get}
-              </div>
+              <SvgIcon
+                viewBox="0 0 24 24"
+                component={GitHubIcon}
+                className={classes.icon}
+              />
+              <div className={classes.contentDesc}>{communityTrans.get}</div>
               <Link
                 classes={{ root: classes.contentLink }}
                 href={GITHUB_LINK}
-                underline='always'
+                underline="always"
                 target="_blank"
                 rel="noopener"
               >
@@ -176,13 +174,15 @@ const CommunityBtn = (props: any) => {
       <Button
         className={classes.menuBtn}
         aria-haspopup="true"
-        onClick={() => { setOpen(!open) }}
+        onClick={() => {
+          setOpen(!open);
+        }}
       >
-        {open ?
+        {open ? (
           <ChevronRightIcon className={classes.chevronIcon} />
-          :
+        ) : (
           <SvgIcon viewBox="0 0 24 24" component={peopleIcon} />
-        }
+        )}
       </Button>
     </div>
   );

client/vite.config.ts → client/vite.config.mts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
 import * as path from 'path';
 import reactRefresh from '@vitejs/plugin-react';
-const svgrPlugin = require('vite-plugin-svgr');
+import svgr from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -16,11 +16,12 @@ export default defineConfig({
   },
   plugins: [
     reactRefresh(),
-    svgrPlugin({
-      svgrOptions: {
-        icon: true,
-        // ...svgr options (https://react-svgr.com/docs/options/)
-      },
+    svgr({
+      // A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include.
+      include: '**/*.svg?react',
+
+      //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
+      exclude: '',
     }),
   ],
   resolve: {