update and migrate to vite

ourea-as · Oct 28, 2023 · 9e56a59 · 9e56a59
1 parent 9eddd91
commit 9e56a59
Show file tree

Hide file tree

Showing 13 changed files with 3,119 additions and 10,563 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -4,4 +4,4 @@ module.exports =  {
   singleQuote:  true,
   printWidth:  120,
   tabWidth:  2,
-};
+};
diff --git a/commitlint.config.js b/commitlint.config.js
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://untappd.akamaized.net" />
     <link rel="preconnect" href="https://api.meadstats.com" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -11,11 +11,11 @@
       name="Description"
       content="Discover deeper insights about your beer tasting habits using maps and graphs to detect patterns."
     />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Meadstats</title>
   </head>
   <body>
-    <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -14,75 +14,66 @@
   "author": "Fredrik Bore <fredrik@bore.ai> (https://www.bore.ai)",
   "private": true,
   "dependencies": {
-    "@commitlint/cli": "9.1.2",
-    "@commitlint/config-conventional": "9.1.2",
-    "@fortawesome/fontawesome-svg-core": "1.2.30",
-    "@fortawesome/free-regular-svg-icons": "5.14.0",
-    "@fortawesome/free-solid-svg-icons": "5.14.0",
-    "@fortawesome/react-fontawesome": "0.1.11",
-    "@types/chart.js": "^2.9.24",
-    "@types/jest": "26.0.13",
-    "@types/node": "16.7.1",
-    "@types/react": "16.9.49",
-    "@types/react-dom": "16.9.8",
-    "@types/react-router-dom": "5.1.5",
+    "@commitlint/cli": "18.2.0",
+    "@commitlint/config-conventional": "18.1.0",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-regular-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
+    "@types/chart.js": "^2.9.39",
+    "@types/jest": "29.5.6",
+    "@types/node": "20.8.9",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
+    "@types/react-router-dom": "5.3.3",
     "@types/react-simple-maps": "0.12.2",
-    "@types/reactstrap": "8.5.1",
-    "@types/topojson-specification": "1.0.1",
-    "@typescript-eslint/eslint-plugin": "4.0.1",
-    "@typescript-eslint/parser": "4.0.1",
-    "axios": "0.20.0",
-    "bootstrap": "4.5.2",
+    "@types/reactstrap": "8.7.2",
+    "@types/topojson-specification": "1.0.4",
+    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/parser": "6.9.0",
+    "@vitejs/plugin-react": "^4.1.0",
+    "@vitejs/plugin-react-swc": "^3.4.0",
+    "axios": "1.6.0",
+    "bootstrap": "5.3.2",
     "chart.js": "2.9.3",
     "chartjs-chart-box-and-violin-plot": "2.3.0",
     "chartjs-chart-matrix": "^0.1.3",
-    "d3-scale": "3.2.2",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-jsx-a11y": "6.3.1",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.20.6",
-    "history": "5.0.0",
-    "husky": "4.3.0",
-    "jwt-decode": "2.2.0",
-    "moment": "2.28.0",
+    "d3-scale": "4.0.2",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-prettier": "5.0.1",
+    "eslint-plugin-react": "7.33.2",
+    "history": "5.3.0",
+    "husky": "8.0.3",
+    "jwt-decode": "4.0.0",
+    "moment": "2.29.4",
     "popper.js": "1.16.1",
-    "prettier": "2.1.1",
-    "react": "16.13.1",
+    "prettier": "3.0.3",
+    "react": "18.2.0",
     "react-bootstrap-table-next": "4.0.3",
-    "react-cookie": "4.0.3",
-    "react-dom": "16.13.1",
+    "react-cookie": "6.1.1",
+    "react-dom": "18.2.0",
     "react-flag-icon-css": "1.0.25",
-    "react-router-bootstrap": "0.25.0",
-    "react-router-dom": "^6.0.0-beta.0",
-    "react-scripts": "3.4.3",
+    "react-router-bootstrap": "0.26.2",
+    "react-router-dom": "^6.17.0",
     "react-simple-maps": "0.12.1",
     "react-spring": "8.0.27",
-    "react-tooltip": "4.2.9",
-    "react-use": "15.3.4",
+    "react-tooltip": "5.21.6",
+    "react-use": "17.4.0",
     "reactstrap": "8.6.0",
-    "socket.io-client": "4.7.0",
-    "source-map-explorer": "2.5.0",
-    "typescript": "3.9.7",
-    "use-interval": "1.3.0"
+    "socket.io-client": "4.7.2",
+    "source-map-explorer": "2.5.3",
+    "typescript": "5.2.2",
+    "use-interval": "1.4.0",
+    "vite": "^4.5.0",
+    "vite-plugin-svgr": "^4.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "analyze": "source-map-explorer build/static/js/*",
-    "lint": "eslint --ext js,ts,tsx src"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "bundlewatch": {
-    "files": [
-      {
-        "path": "build/static/js/*"
-      }
-    ]
-  },
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+},
   "browserslist": {
     "production": [
       ">0.2%",
@@ -94,10 +85,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
   }
 }
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useCookies } from 'react-cookie';
 
-import jwtDecode from 'jwt-decode';
+import { JwtPayload, jwtDecode } from 'jwt-decode';
 
 import 'bootstrap/dist/css/bootstrap.css';
 import './assets/favicon.ico';
@@ -35,10 +35,11 @@ const App: React.FC = () => {
     }
 
     // Login user if token is stored
-    if (window.localStorage.getItem('authToken')) {
-      const decoded = jwtDecode(window.localStorage.getItem('authToken'));
+    const authToken = window.localStorage.getItem('authToken');
+    if (authToken) {
+      const decoded = jwtDecode<JwtPayload>(authToken);
       setIsAuthenticated(true);
-      setUsername(decoded.identity);
+      setUsername(decoded.sub!);
     } else {
       setIsAuthenticated(false);
     }

diff --git a/src/components/maps/countryhovermap.tsx b/src/components/maps/countryhovermap.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback, ReactElement } from 'react';
 
 import axios from 'axios';
 import { ComposableMap, Geographies, Geography, Markers, Marker, ZoomableGroup, Point } from 'react-simple-maps';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactTooltip } from 'react-tooltip'
 import * as TopoJSON from 'topojson-specification';
 import { Spring, config } from 'react-spring/renderprops';
 

diff --git a/src/components/maps/hovermap.tsx b/src/components/maps/hovermap.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { scaleLinear } from 'd3-scale';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactTooltip } from 'react-tooltip'
 import { renderToString } from 'react-dom/server';
 
 import Flagicon from '../flagicon';

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,17 +1,19 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
 import { CookiesProvider } from 'react-cookie';
 
 import './index.css';
 import App from './app';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+root.render(
   <CookiesProvider>
     <BrowserRouter>
       <App />
     </BrowserRouter>
   </CookiesProvider>,
-  document.getElementById('root'),
 );
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -25,25 +25,14 @@ export const AppRoutes: React.FC<RoutesProps> = (props) => {
 
   return (
     <Routes>
-      <Route path="/tasting">
-        <Tasting />
-      </Route>
-      <Route path="/signout">
-        <Logout logoutUser={logoutUser} />
-      </Route>
-
-      {isAuthenticated ? null : (
-        <Route path="/">
-          <Landing />
-        </Route>
-      )}
-
-      <Route path="/">
-        <Navigate to={`/user/${username}`} />
-      </Route>
+      <Route path="/tasting" element={<Tasting />} />
+      <Route path="/signout" element={<Logout logoutUser={logoutUser} />} />
+
+      {isAuthenticated ? null : <Route path="/" element={<Landing />} />}
+
+      <Route path="/" element={<Navigate to={`/user/${username}`} />} />
 
       <Route path="/user/:username/*" element={<User isAuthenticated={isAuthenticated} />} />
-      <Navigate to="/" />
     </Routes>
   );
 };
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+    "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -11,10 +11,11 @@
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "isolatedModules": true,
     "noEmit": true,
-    "noImplicitAny": false,
-    "jsx": "preserve",
-    "isolatedModules": true
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vite-plugin-svgr/client"]
   },
   "include": ["src"]
 }
diff --git a/vite-env.d.ts b/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/',
+  plugins: [react()]
+})