feat: react support

0xIntuition · Sep 18, 2024 · e87da96 · e87da96
1 parent 3e4353b
commit e87da96
Show file tree

Hide file tree

Showing 7 changed files with 356 additions and 193 deletions.
diff --git a/build.js b/build.js
@@ -1,11 +1,12 @@
 const esbuild = require('esbuild');
 
 esbuild.build({
-  entryPoints: ['src/popup.ts', 'src/content.ts', 'src/background.ts', 'src/injectScript.ts'],
+  entryPoints: ['src/popup.tsx', 'src/content.ts', 'src/background.ts', 'src/injectScript.ts'],
   bundle: true,
   minify: true,
   sourcemap: true,
   outdir: 'dist',
   target: ['es2020'],
   format: 'iife',
+  loader: { '.tsx': 'tsx' },
 }).catch(() => process.exit(1));
diff --git a/package.json b/package.json
@@ -12,9 +12,13 @@
   "packageManager": "pnpm@9.1.3+sha256.7f63001edc077f1cff96cacba901f350796287a2800dfa83fe898f94183e4f5f",
   "devDependencies": {
     "@types/chrome": "^0.0.271",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
     "esbuild": "^0.23.1"
   },
   "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "viem": "^2.21.8"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/popup.html b/popup.html
@@ -4,11 +4,11 @@
   <title>i7n</title>
 <link href="style.css" rel="stylesheet">
   <style>
-    body { width: 350px; padding: 10px;  }
+    body { width: 350px;   }
   </style>
 </head>
 <body class="bg-slate-950">
-  <div id="result"></div>
+  <div id="root"></div>
   <script src="dist/popup.js"></script>
 </body>
 </html>
diff --git a/src/popup.ts b/src/popup.ts