Additional steps to add polyfills and plugin checker for Vite (#153) (#…

…159) Co-authored-by: Blusk <[email protected]>
workbenchapp · Jul 6, 2022 · afa2e18 · afa2e18
1 parent 04e23e6
commit afa2e18
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -132,6 +132,7 @@
   ],
   "homepage": "https://github.com/workbenchapp/solana-workbench-releases",
   "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
     "@iconify-json/mdi": "^1.1.20",
     "@solana/wallet-adapter-wallets": "^0.15.5",
     "@solana/web3.js": "^1.41.3",
@@ -205,6 +206,7 @@
     "unplugin-icons": "^0.14.3",
     "url-loader": "^4.1.1",
     "vite": "^2.9.12",
+    "vite-plugin-checker": "^0.4.6",
     "vite-plugin-fonts": "^0.4.0",
     "vite-plugin-inline-css-modules": "^0.0.4",
     "vite-plugin-windicss": "^1.8.4",

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -18,7 +18,7 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 import { NavLink, Outlet, Route, Routes } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
-import { logger } from '@/common/globals';
+import { logger } from './common/globals';
 import 'react-toastify/dist/ReactToastify.css';
 import './App.scss';
 import { getElectronStorageWallet } from './data/accounts/account';

diff --git a/src/renderer/index.css b/src/renderer/index.css
@@ -34,10 +34,14 @@ code {
 }
 
 .btn {
-  @apply bg-primary-base p-1 text-contrast py-3 px-4 rounded-md cursor-pointer focus:outline outline-offset-2 outline-2 outline-primary-base;
+  @apply text-xs bg-primary-base p-1 text-contrast py-2 px-4 rounded-md cursor-pointer focus:outline outline-offset-2 outline-2 outline-primary-base;
 
   &.btn-sm {
-    @apply text-xs py-2 px-3;
+    @apply py-2 px-3;
+  }
+
+  &:disabled {
+    @apply opacity-50 bg-surface-100 cursor-auto;
   }
 }
 

diff --git a/src/renderer/vite.config.ts b/src/renderer/vite.config.ts
@@ -7,6 +7,8 @@ import { defineConfig } from 'vite';
 import ViteFonts from 'vite-plugin-fonts';
 import InlineCSSModules from 'vite-plugin-inline-css-modules';
 import WindiCSS from 'vite-plugin-windicss';
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+import checker from 'vite-plugin-checker';
 
 const PACKAGE_ROOT = __dirname;
 /**
@@ -21,6 +23,20 @@ export default defineConfig({
       '@/': `${join(PACKAGE_ROOT, './')}/`,
     },
   },
+  optimizeDeps: {
+    esbuildOptions: {
+      // Node.js global to browser globalThis
+      define: {
+        global: 'globalThis',
+      },
+      // Enable esbuild polyfill plugins
+      plugins: [
+        NodeGlobalsPolyfillPlugin({
+          buffer: true,
+        }),
+      ],
+    },
+  },
   plugins: [
     ViteFonts({
       google: {
@@ -48,6 +64,12 @@ export default defineConfig({
     }),
     react(),
     WindiCSS(),
+    checker({
+      typescript: {
+        root: PACKAGE_ROOT,
+        tsconfigPath: `./tsconfig.json`,
+      },
+    }),
   ],
   base: '',
   server: {