Setup vite for wccd

Concordium · Oct 18, 2023 · b8a45ff · b8a45ff
1 parent 73b797a
commit b8a45ff
Show file tree

Hide file tree

Showing 13 changed files with 1,075 additions and 110 deletions.
diff --git a/examples/wCCD/Dockerfile b/examples/wCCD/Dockerfile
@@ -5,8 +5,8 @@ FROM ${base_image} AS build
 WORKDIR /app
 COPY ./package.json ./package.json
 COPY ./tsconfig.json ./tsconfig.json
-COPY ./esbuild.config.ts ./
-COPY ./types ./types
+COPY ./index.html ./
+COPY ./vite.config.ts ./
 COPY ./src ./src
 
 RUN yarn && yarn cache clean

diff --git a/examples/wCCD/esbuild.config.ts b/examples/wCCD/esbuild.config.ts
diff --git a/examples/wCCD/index.html b/examples/wCCD/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <style>
+        body {
+            background-color: #1e1e1e;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+            background-size: cover;
+        }
+    </style>
+
+    <link rel="icon" type="image/x-icon" href="/concordium_favicon.svg" />
+    <meta charset="utf-8" />
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="/src/index.tsx" type="module"></script>
+</body>
+
+</html>
diff --git a/examples/wCCD/package.json b/examples/wCCD/package.json
@@ -13,23 +13,20 @@
         "react-dom": "^18.1.0"
     },
     "devDependencies": {
-        "@craftamap/esbuild-plugin-html": "^0.4.0",
         "@types/node": "^18.7.23",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.5",
-        "cross-env": "^7.0.3",
-        "esbuild": "^0.19.5",
-        "esbuild-plugin-svgr": "^1.0.1",
-        "fs": "^0.0.1-security",
-        "live-server": "^1.2.2",
+        "@vitejs/plugin-react-swc": "^3.4.0",
         "process": "^0.11.10",
-        "ts-node": "^10.8.0",
-        "typescript": "^5.2.2"
+        "typescript": "^5.2.2",
+        "vite": "^4.5.0",
+        "vite-plugin-svgr": "^4.1.0",
+        "vite-plugin-top-level-await": "^1.3.1",
+        "vite-plugin-wasm": "^3.2.2"
     },
     "scripts": {
-        "build": "NETWORK='testnet' node --loader ts-node/esm ./esbuild.config.ts; cp ./src/assets/* ./dist",
-        "build:prod": "NETWORK='mainnet' node --loader ts-node/esm ./esbuild.config.ts; cp ./src/assets/* ./dist",
-        "watch": "cross-env WATCH=1 yarn build",
-        "start": "live-server ./dist"
+        "build": "tsc && vite build",
+        "build:prod": "NETWORK='mainnet' vite build",
+        "start": "vite preview"
     }
 }
diff --git a/...wCCD/src/assets/Concordium_background.svg → ...les/wCCD/public/Concordium_background.svg b/...wCCD/src/assets/Concordium_background.svg → ...les/wCCD/public/Concordium_background.svg
diff --git a/...es/wCCD/src/assets/concordium_favicon.svg → examples/wCCD/public/concordium_favicon.svg b/...es/wCCD/src/assets/concordium_favicon.svg → examples/wCCD/public/concordium_favicon.svg
diff --git a/examples/wCCD/src/index.css b/examples/wCCD/src/index.css
@@ -7,6 +7,7 @@ body {
     line-height: 20px;
     letter-spacing: 0;
     text-align: left;
+    margin: 0;
 }
 
 .wccd {

diff --git a/examples/wCCD/src/index.html b/examples/wCCD/src/index.html
diff --git a/examples/wCCD/src/wCCD.tsx b/examples/wCCD/src/wCCD.tsx
@@ -30,8 +30,8 @@ import {
     WALLET_CONNECT,
 } from './constants';
 
-import ArrowIcon from './assets/Arrow.svg';
-import RefreshIcon from './assets/Refresh.svg';
+import ArrowIcon from './assets/Arrow.svg?react';
+import RefreshIcon from './assets/Refresh.svg?react';
 import { WalletConnectionTypeButton } from './WalletConnectorTypeButton';
 
 const blackCardStyle = {

diff --git a/examples/wCCD/tsconfig.json b/examples/wCCD/tsconfig.json
@@ -1,26 +1,35 @@
 {
     "compilerOptions": {
         "target": "ES2020",
-        "lib": ["dom", "dom.iterable", "esnext"],
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ],
         "allowJs": true,
         "skipLibCheck": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
         "strict": true,
         "noFallthroughCasesInSwitch": true,
         "module": "esnext",
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "resolveJsonModule": true,
         "isolatedModules": true,
         "downlevelIteration": true,
         "baseUrl": ".",
         "noEmit": true,
-        "jsx": "react"
+        "jsx": "react",
+        "types": [
+            "vite-plugin-svgr/client"
+        ]
     },
     "ts-node": {
         "compilerOptions": {
             "module": "CommonJS"
         }
     },
-    "include": ["./**/*"]
+    "include": [
+        "./**/*"
+    ]
 }
diff --git a/examples/wCCD/types/svg.d.ts b/examples/wCCD/types/svg.d.ts
diff --git a/examples/wCCD/vite.config.ts b/examples/wCCD/vite.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import svgr from 'vite-plugin-svgr';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import wasm from 'vite-plugin-wasm';
+import topLevelAwait from 'vite-plugin-top-level-await';
+
+export default defineConfig({
+    plugins: [
+        react(),
+        svgr(),
+        wasm(),
+        topLevelAwait(), // For legacy browser compatibility
+    ],
+    define: {
+        'process.env.NETWORK': process.env.NETWORK ?? 'testnet',
+    },
+    resolve: {
+        alias: {
+            '@concordium/rust-bindings': '@concordium/rust-bindings/bundler', // Resolve bundler-specific wasm entrypoints.
+        },
+    },
+});