chore: build ui with vite

cryptodev-2s · cryptodev-2s · commit edbfa01ed5c0 · 2025-02-25T20:31:07.000-05:00
diff --git a/package.json b/package.json
@@ -14,16 +14,16 @@
     "dist/"
   ],
   "scripts": {
-    "build": "tsc --project tsconfig.build.json && npm run build:ui-static",
+    "build": "tsc --project tsconfig.build.json && yarn build:ui",
+    "build:ui": "vite build",
     "build:clean": "rimraf dist && yarn build",
     "lint": "yarn lint:eslint && yarn lint:misc --check",
     "lint:eslint": "eslint . --cache --ext js,ts",
     "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
     "lint:misc": "prettier '**/*.json' '**/*.md' '!CHANGELOG.md' '**/*.yml' '!.yarnrc.yml' --ignore-path .gitignore --no-error-on-unmatched-pattern",
     "prepack": "./scripts/prepack.sh",
     "test": "jest && jest-it-up --config jest.config.cjs",
-    "test:watch": "jest --watch",
-    "build:ui-static": "cp src/ui/index.html dist/ui"
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "@metamask/action-utils": "^1.0.0",
@@ -53,6 +53,7 @@
     "@metamask/eslint-config-jest": "^10.0.0",
     "@metamask/eslint-config-nodejs": "^10.0.0",
     "@metamask/eslint-config-typescript": "^10.0.0",
+    "@tailwindcss/vite": "^4.0.9",
     "@types/debug": "^4.1.7",
     "@types/express": "^5.0.0",
     "@types/jest": "^29.5.10",
@@ -67,6 +68,7 @@
     "@types/yargs": "^17.0.10",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "babel-jest": "^29.7.0",
     "deepmerge": "^4.2.2",
     "eslint": "^8.27.0",
@@ -84,8 +86,10 @@
     "prettier-plugin-packagejson": "^2.5.2",
     "rimraf": "^4.0.5",
     "stdio-mock": "^1.2.0",
+    "tailwindcss": "^4.0.9",
     "tsx": "^4.6.1",
-    "typescript": "~5.1.6"
+    "typescript": "~5.1.6",
+    "vite": "^6.2.0"
   },
   "peerDependencies": {
     "prettier": ">=3.0.0"
@@ -101,7 +105,8 @@
   "lavamoat": {
     "allowScripts": {
       "@lavamoat/preinstall-always-fail": false,
-      "tsx>esbuild": false
+      "tsx>esbuild": false,
+      "vite>esbuild": false
     }
   }
 }
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
@@ -1,3 +1,4 @@
+import './style.css';
 import React, { useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { SemVer } from 'semver';
diff --git a/src/ui/index.html b/src/ui/index.html
@@ -8,19 +8,6 @@
       rel="icon"
       href="https://metamask.github.io/test-dapp/metamask-fox.svg"
     />
-    <script type="importmap">
-      {
-        "imports": {
-          "react": "https://esm.sh/react@19",
-          "react-dom": "https://esm.sh/react-dom@19",
-          "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime",
-          "react-dom/client": "https://esm.sh/react-dom@19/client",
-          "react-markdown": "https://esm.sh/react-markdown@9.0.3",
-          "semver": "https://esm.sh/semver@7.5.4"
-        }
-      }
-    </script>
-    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/ui/style.css b/src/ui/style.css
@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/vite.config.mjs b/vite.config.mjs
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  root: 'src/ui',
+  build: {
+    outDir: '../../dist/ui',
+    emptyOutDir: true,
+  },
+});
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import './style.css';`
`1`	`2`	`import React, { useState, useEffect } from 'react';`
`2`	`3`	`import { createRoot } from 'react-dom/client';`
`3`	`4`	`import { SemVer } from 'semver';`