Migrate to Vite (pronounced VEET), refactoring and improved accessibility

CodeDead · CodeDead · commit 64d7493ec9ac · 2023-03-03T19:01:13.000+01:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,8 +1,9 @@
-src/reportWebVitals.js
 src/setupTests.js
 src-tauri/
 src-tauri/*
 .github/*
 .yarn/*
 node_modules/*
 build/*
+dist/*
+vite.config.js
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
diff --git a/README.md b/README.md
@@ -18,13 +18,13 @@ Advanced PassGen uses tauri to build the desktop application. You can find more
 
 ### Web
 
-You can build a web version of Advanced PassGen by running the following command:
+You can build a web version of Advanced PassGen using `Vite` by running the following command:
 
 ```shell
 yarn build
 ```
 
-For more information about building the web version, please read the `creact-react-app` documentation [here](https://create-react-app.dev/docs/production-build).
+For more information about building the web version, please read the `Vite` documentation [here](https://vitejs.dev/guide/build.html).
 
 ### Windows
 
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <link rel="icon" href="/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="theme-color" content="#000000"/>
+    <meta
+            name="description"
+            content="Advanced PassGen is a password generator can be used to quickly generate thousands of passwords"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png"/>
+    <link rel="manifest" href="/manifest.json"/>
+    <title>Advanced PassGen</title>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<script type="module" src="/src/index.jsx"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.11",
-    "@mui/x-data-grid": "^5.17.25",
+    "@mui/x-data-grid": "^5.17.26",
     "@shopify/react-web-worker": "^5.0.8",
     "@tauri-apps/api": "^1.2.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -18,15 +18,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.2",
-    "react-scripts": "^5.0.1",
     "web-vitals": "^3.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite build && vite preview",
     "dev": "tauri dev",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx"
   },
   "eslintConfig": {
     "extends": [
@@ -49,12 +48,16 @@
   "packageManager": "yarn@3.4.1",
   "devDependencies": {
     "@tauri-apps/cli": "^1.2.3",
+    "@vitejs/plugin-react": "^3.1.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.35.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "vite": "^4.1.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-svgr": "^2.4.0"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -3,8 +3,8 @@
   "build": {
     "beforeBuildCommand": "yarn build",
     "beforeDevCommand": "yarn cross-env BROWSER=none yarn start",
-    "devPath": "http://localhost:3000",
-    "distDir": "../build"
+    "devPath": "http://localhost:5173",
+    "distDir": "../dist"
   },
   "package": {
     "productName": "advanced-passgen",
diff --git a/src/components/TopBar/index.jsx b/src/components/TopBar/index.jsx
@@ -175,7 +175,11 @@ const TopBar = ({ onOpenDrawer, onTitleClick }) => {
             </Menu>
           </div>
         ) : null}
-        <IconButton color="inherit" onClick={changeThemeStyle}>
+        <IconButton
+          aria-label={language.theme}
+          color="inherit"
+          onClick={changeThemeStyle}
+        >
           {themeType === 'dark' ? <Brightness5Icon /> : <Brightness7Icon />}
         </IconButton>
       </Toolbar>
diff --git a/src/index.jsx b/src/index.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './components/App';
-import reportWebVitals from './reportWebVitals';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
@@ -23,8 +22,3 @@ root.render(
     </MainContextProvider>
   </React.StrictMode>,
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgrPlugin from 'vite-plugin-svgr';
+import eslint from 'vite-plugin-eslint'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), svgrPlugin(), eslint()],
+});
diff --git a/yarn.lock b/yarn.lock
