Merge pull request #55 from kleros/chore/migrate-to-vite

tractorss · web-flow · commit d8f9d6083b88 · 2024-09-09T11:54:47.000+05:30
chore(web): migrate-to-vite
diff --git a/.gitignore b/.gitignore
@@ -83,10 +83,6 @@ web_modules/
 .env.test
 .env.production
 
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
 # Next.js build output
 .next
 out
diff --git a/contracts/.gitignore b/contracts/.gitignore
@@ -98,9 +98,6 @@ typings/
 .env
 .env.test
 
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
 # Next.js build output
 .next
 
diff --git a/web/.gitignore b/web/.gitignore
@@ -6,12 +6,10 @@
 /.pnp.*
 node_modules
 
-# Parcel
-.parcel-cache
+# vite
 development
 build
 dist
-parcel-bundle-reports
 
 # misc
 .eslintcache
diff --git a/web/.parcelrc b/web/.parcelrc
diff --git a/web/netlify.toml b/web/netlify.toml
@@ -9,6 +9,3 @@ YARN_ENABLE_GLOBAL_CACHE = "true"
 
 [functions]
 directory = "web/netlify/functions/"
-
-[dev]
-framework = "parcel"
diff --git a/web/package.json b/web/package.json
@@ -6,6 +6,7 @@
   "repository": "",
   "author": "",
   "license": "MIT",
+  "type": "module",
   "alias": {
     "src": "./src",
     "utils": "./src/utils",
@@ -26,16 +27,15 @@
     "node": "20.11.0"
   },
   "scripts": {
-    "clear": "rm -fr ../.parcel-cache dist/bundle.js",
     "start": "yarn start-devnet",
-    "start-local": "scripts/runEnv.sh local 'yarn generate && parcel'",
-    "start-devnet": "scripts/runEnv.sh devnet 'yarn generate && parcel'",
-    "start-testnet": "scripts/runEnv.sh testnet 'yarn generate && parcel'",
+    "start-local": "scripts/runEnv.sh local 'yarn generate && vite'",
+    "start-devnet": "scripts/runEnv.sh devnet 'yarn generate && vite'",
+    "start-testnet": "scripts/runEnv.sh testnet 'yarn generate && vite'",
     "build": "yarn build-devnet",
-    "build-local": "scripts/runEnv.sh local 'yarn generate && parcel build'",
-    "build-devnet": "scripts/runEnv.sh devnet 'yarn generate && parcel build'",
-    "build-testnet": "scripts/runEnv.sh testnet 'yarn generate && parcel build'",
-    "build-netlify": "scripts/runEnv.sh devnet 'scripts/generateBuildInfo.sh && yarn generate && parcel build'",
+    "build-local": "scripts/runEnv.sh local 'yarn generate && vite build'",
+    "build-devnet": "scripts/runEnv.sh devnet 'yarn generate && vite build'",
+    "build-testnet": "scripts/runEnv.sh testnet 'yarn generate && vite build'",
+    "build-netlify": "scripts/runEnv.sh devnet 'scripts/generateBuildInfo.sh && yarn generate && vite build'",
     "check-style": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "check-types": "tsc --noEmit",
     "generate": "yarn generate:gql && yarn generate:hooks",
@@ -49,8 +49,6 @@
     "@graphql-codegen/client-preset": "^4.2.0",
     "@kleros/kleros-v2-contracts": "^0.3.2",
     "@netlify/functions": "^1.6.0",
-    "@parcel/transformer-svg-react": "2.11.0",
-    "@parcel/watcher": "~2.2.0",
     "@types/amqplib": "^0.10.4",
     "@types/busboy": "^1.5.3",
     "@types/react": "^18.2.59",
@@ -63,13 +61,15 @@
     "@wagmi/cli": "^1.5.2",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.10.0",
-    "eslint-import-resolver-parcel": "^1.10.6",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lru-cache": "^7.18.3",
-    "parcel": "2.11.0",
     "supabase": "^1.133.3",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vite": "^5.4.2",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "dependencies": {
     "@filebase/client": "^0.0.5",
diff --git a/web/scripts/gitInfo.js b/web/scripts/gitInfo.js
@@ -1,8 +1,9 @@
 /* eslint-disable max-len */
-const fs = require("fs");
-const path = require("path");
-const { execSync } = require("child_process");
-const packageJson = require("../package.json");
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+
+import packageJson from "../package.json" assert { type: "json" };
 
 const execSyncWrapper = (command) => {
   let stdout = null;
diff --git a/web/src/assets/svgs/icons/book.svg b/web/src/assets/svgs/icons/book.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.8378 11.25V0.75C14.8378 0.334375 14.5073 0 14.0965 0H3.96525C2.32819 0 1 1.34375 1 3V13C1 14.6562 2.32819 16 3.96525 16H14.0965C14.5073 16 14.8378 15.6656 14.8378 15.25V14.75C14.8378 14.5156 14.7297 14.3031 14.5629 14.1656C14.4332 13.6844 14.4332 12.3125 14.5629 11.8313C14.7297 11.6969 14.8378 11.4844 14.8378 11.25ZM4.95367 4.1875C4.95367 4.08437 5.03707 4 5.139 4H11.6873C11.7892 4 11.8726 4.08437 11.8726 4.1875V4.8125C11.8726 4.91563 11.7892 5 11.6873 5H5.139C5.03707 5 4.95367 4.91563 4.95367 4.8125V4.1875ZM4.95367 6.1875C4.95367 6.08437 5.03707 6 5.139 6H11.6873C11.7892 6 11.8726 6.08437 11.8726 6.1875V6.8125C11.8726 6.91563 11.7892 7 11.6873 7H5.139C5.03707 7 4.95367 6.91563 4.95367 6.8125V6.1875ZM12.7807 14H3.96525C3.41853 14 2.97683 13.5531 2.97683 13C2.97683 12.45 3.42162 12 3.96525 12H12.7807C12.722 12.5344 12.722 13.4656 12.7807 14Z" fill="none"/>
+<svg width="16" height="16" viewBox="0 0 16 16"  xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8378 11.25V0.75C14.8378 0.334375 14.5073 0 14.0965 0H3.96525C2.32819 0 1 1.34375 1 3V13C1 14.6562 2.32819 16 3.96525 16H14.0965C14.5073 16 14.8378 15.6656 14.8378 15.25V14.75C14.8378 14.5156 14.7297 14.3031 14.5629 14.1656C14.4332 13.6844 14.4332 12.3125 14.5629 11.8313C14.7297 11.6969 14.8378 11.4844 14.8378 11.25ZM4.95367 4.1875C4.95367 4.08437 5.03707 4 5.139 4H11.6873C11.7892 4 11.8726 4.08437 11.8726 4.1875V4.8125C11.8726 4.91563 11.7892 5 11.6873 5H5.139C5.03707 5 4.95367 4.91563 4.95367 4.8125V4.1875ZM4.95367 6.1875C4.95367 6.08437 5.03707 6 5.139 6H11.6873C11.7892 6 11.8726 6.08437 11.8726 6.1875V6.8125C11.8726 6.91563 11.7892 7 11.6873 7H5.139C5.03707 7 4.95367 6.91563 4.95367 6.8125V6.1875ZM12.7807 14H3.96525C3.41853 14 2.97683 13.5531 2.97683 13C2.97683 12.45 3.42162 12 3.96525 12H12.7807C12.722 12.5344 12.722 13.4656 12.7807 14Z"/>
 </svg>
diff --git a/web/src/assets/svgs/icons/pile-coins.svg b/web/src/assets/svgs/icons/pile-coins.svg
@@ -4,7 +4,7 @@
 </g>
 <defs>
 <clipPath id="clip0_11557_149813">
-<rect transform="translate(0 0.5)"/>
+<rect width="14" height="15"  transform="translate(0 0.5)"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/web/src/components/HeroImage.tsx b/web/src/components/HeroImage.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { useTheme } from "styled-components";
-import HeroLightMobile from "tsx:svgs/hero/hero-lightmode-mobile.svg";
-import HeroDarkMobile from "tsx:svgs/hero/hero-darkmode-mobile.svg";
-import HeroLightDesktop from "tsx:svgs/hero/hero-lightmode-desktop.svg";
-import HeroDarkDesktop from "tsx:svgs/hero/hero-darkmode-desktop.svg";
+import HeroLightMobile from "svgs/hero/hero-lightmode-mobile.svg";
+import HeroDarkMobile from "svgs/hero/hero-darkmode-mobile.svg";
+import HeroLightDesktop from "svgs/hero/hero-lightmode-desktop.svg";
+import HeroDarkDesktop from "svgs/hero/hero-darkmode-desktop.svg";
 import useIsDesktop from "hooks/useIsDesktop";
 
 const HeroImage = () => {
diff --git a/web/src/components/InfoCard.tsx b/web/src/components/InfoCard.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
-import InfoCircle from "tsx:svgs/icons/info-circle.svg";
+import InfoCircle from "svgs/icons/info-circle.svg";
 
 const InfoContainer = styled.div`
   display: grid;
diff --git a/web/src/consts/index.ts b/web/src/consts/index.ts
@@ -2,7 +2,7 @@ import { version, gitCommitHash, gitCommitShortHash, gitBranch, gitTags, clean }
 import GeneratedMainCurate from "../generatedMainCurateAddress.json";
 
 export const ONE_BASIS_POINT = 10000n;
-export const IPFS_GATEWAY = process.env.REACT_APP_IPFS_GATEWAY || "https://cdn.kleros.link";
+export const IPFS_GATEWAY = import.meta.env.REACT_APP_IPFS_GATEWAY || "https://cdn.kleros.link";
 
 export const GIT_BRANCH = gitBranch;
 export const GIT_TAGS = gitTags;
@@ -20,7 +20,7 @@ export const ETH_SIGNATURE_REGEX = /^0x[a-fA-F0-9]{130}$/;
 
 export const DEFAULT_LIST_LOGO = "ipfs://QmWfxEmfEWwM6LDgER2Qp2XZpK1MbDtNp7uGqCS4UPNtgJ/symbol-CURATE.png";
 
-export const COURT_SITE = process.env.COURT_SITE ?? "https://v2.kleros.builders/#";
+export const COURT_SITE = import.meta.env.COURT_SITE ?? "https://v2.kleros.builders/#";
 
 export const SUPPORTED_FILE_TYPES = ["application/pdf", "text/rtf", "text/markdown", "text/plain"];
 
diff --git a/web/src/context/Web3Provider.tsx b/web/src/context/Web3Provider.tsx
@@ -9,10 +9,10 @@ import { useToggleTheme } from "hooks/useToggleThemeContext";
 import { useTheme } from "styled-components";
 
 const chains = [arbitrumSepolia, mainnet, gnosisChiado];
-const projectId = process.env.WALLETCONNECT_PROJECT_ID ?? "";
+const projectId = import.meta.env.WALLETCONNECT_PROJECT_ID ?? "";
 
 const { publicClient, webSocketPublicClient } = configureChains(chains, [
-  alchemyProvider({ apiKey: process.env.ALCHEMY_API_KEY ?? "" }),
+  alchemyProvider({ apiKey: import.meta.env.ALCHEMY_API_KEY ?? "" }),
   jsonRpcProvider({
     rpc: () => ({
       http: `https://rpc.chiadochain.net`,
diff --git a/web/src/pages/SubmitItem/Policy/index.tsx b/web/src/pages/SubmitItem/Policy/index.tsx
@@ -21,7 +21,10 @@ const Policy: React.FC = () => {
       <ReadPolicy />
       <Info />
       <ConfirmationBox />
-      <NavigationButtons prevRoute={`../item-field/${fieldProps?.length - 1 ?? 0}`} nextRoute="../preview" />
+      <NavigationButtons
+        prevRoute={`../item-field/${fieldProps?.length ? fieldProps.length - 1 : 0}`}
+        nextRoute="../preview"
+      />
     </Container>
   );
 };
diff --git a/web/src/utils/getGraphqlUrl.ts b/web/src/utils/getGraphqlUrl.ts
@@ -2,6 +2,6 @@ import { arbitrumSepolia } from "wagmi/chains";
 
 export const getGraphqlUrl = (isCore: boolean = false, chainId: number = arbitrumSepolia.id) => {
   if (isCore)
-    return process.env.REACT_APP_CORE_SUBGRAPH ?? "Wrong Subgraph URL. Please check the environment variables.";
-  return process.env.REACT_APP_ARBSEPOLIA_SUBGRAPH ?? "Wrong Subgraph URL. Please check the environment variables.";
+    return import.meta.env.REACT_APP_CORE_SUBGRAPH ?? "Wrong Subgraph URL. Please check the environment variables.";
+  return import.meta.env.REACT_APP_ARBSEPOLIA_SUBGRAPH ?? "Wrong Subgraph URL. Please check the environment variables.";
 };
diff --git a/web/src/utils/sentry.ts b/web/src/utils/sentry.ts
@@ -4,8 +4,8 @@ import { Routes, createRoutesFromChildren, matchRoutes, useLocation, useNavigati
 import { GIT_DIRTY, GIT_HASH, RELEASE_VERSION } from "../consts";
 
 Sentry.init({
-  dsn: process.env.REACT_APP_SENTRY_ENDPOINT,
-  environment: process.env.REACT_APP_CONTEXT,
+  dsn: import.meta.env.REACT_APP_SENTRY_ENDPOINT,
+  environment: import.meta.env.REACT_APP_CONTEXT,
   release: `court-v2@${RELEASE_VERSION}-${GIT_HASH}${GIT_DIRTY}`,
   integrations: [
     new Sentry.BrowserProfilingIntegration(),
diff --git a/web/vite.config.js b/web/vite.config.js
@@ -0,0 +1,32 @@
+import { defineConfig } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import svgr from "vite-plugin-svgr";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  root: "src",
+  build: {
+    outDir: "../dist",
+    rollupOptions: {
+      onwarn: (warning, warn) => {
+        if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
+          return;
+        }
+        warn(warning);
+      },
+    },
+  },
+  envPrefix: ["REACT_APP", "ALCHEMY", "WALLETCONNECT_PROJECT_ID"],
+  plugins: [
+    svgr({
+      include: ["**/*.svg", "tsx:**/*.svg"],
+      exclude: ["../node_modules/**/*"],
+    }),
+    tsconfigPaths({
+      ignoreConfigErrors: true,
+    }),
+    nodePolyfills({
+      include: ["fs", "stream"],
+    }),
+  ],
+});
diff --git a/yarn.lock b/yarn.lock
