dashboard: switch to vite

wormhole-foundation · May 9, 2024 · 0397388 · 0397388
1 parent db4efc0
commit 0397388
Show file tree

Hide file tree

Showing 9 changed files with 23,456 additions and 41,181 deletions.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -17,10 +17,9 @@ jobs:
         run: |
           npm ci
           npm run build
-          IFS='/' read -a strarr <<< $GITHUB_REPOSITORY && sed -i "`wc -l < dashboard/package.json`i\,\"homepage\":\"https://${strarr[0]}.github.io/${strarr[1]}\"" dashboard/package.json
-          NODE_OPTIONS=--max-old-space-size=4096 npm run build -w dashboard
+          npm run build -w dashboard
       - name: Deploy 🚀
         uses: JamesIves/[email protected]
         with:
           branch: gh-pages # The branch the action should deploy to.
-          folder: dashboard/build # The folder the action should deploy.
+          folder: dashboard/dist # The folder the action should deploy.
diff --git a/dashboard/index.html b/dashboard/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="A dashboard for monitoring Wormhole" />
+    <meta name="theme-color" content="#ffffff" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="msapplication-config" content="/browserconfig.xml" />
+    <title>Wormhole Dashboard</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/dashboard/package.json b/dashboard/package.json
@@ -23,17 +23,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.3.4",
-    "react-scripts": "5.0.1",
     "react-timeago": "^7.1.0",
-    "typescript": "^4.7.4",
-    "use-debounce": "^10.0.0",
-    "webpack-bundle-analyzer": "^4.10.1"
+    "use-debounce": "^10.0.0"
   },
   "scripts": {
-    "start": "GENERATE_SOURCEMAP=false react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build",
-    "eject": "react-scripts eject",
-    "analyze": "npm run build -- --stats && npx webpack-bundle-analyzer ./build/bundle-stats.json"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "analyze": "vite-bundle-visualizer"
   },
   "eslintConfig": {
     "extends": [
@@ -59,6 +55,12 @@
     "@types/numeral": "^2.0.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-timeago": "^4.1.3",
-    "prettier": "^2.3.2"
+    "@vitejs/plugin-react": "^4.2.1",
+    "prettier": "^2.3.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-bundle-visualizer": "^1.1.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }
diff --git a/dashboard/public/index.html b/dashboard/public/index.html
diff --git a/dashboard/src/react-app-env.d.ts b/dashboard/src/react-app-env.d.ts
diff --git a/dashboard/src/vite-env.d.ts b/dashboard/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/dashboard/tsconfig.json b/dashboard/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["vite/client", "vite-plugin-svgr/client"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,

diff --git a/dashboard/vite.config.ts b/dashboard/vite.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+import svgr from 'vite-plugin-svgr';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/wormhole-dashboard/',
+  plugins: [
+    react(),
+    viteTsconfigPaths(),
+    svgr({
+      include: '**/*.svg?react',
+    }),
+  ],
+  // https://vitejs.dev/guide/dep-pre-bundling#monorepos-and-linked-dependencies
+  optimizeDeps: {
+    include: ['@wormhole-foundation/wormhole-monitor-common'],
+  },
+  build: {
+    commonjsOptions: {
+      include: [/common/, /node_modules/],
+    },
+  },
+});