chore(web): migrate-to-vite

.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

contracts/.gitignore

@@ -98,9 +98,6 @@ typings/
 .env
 .env.test
 
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
 # Next.js build output
 .next
 

web/.gitignore

@@ -6,12 +6,10 @@
 /.pnp.*
 node_modules
 
-# Parcel
-.parcel-cache
+# vite
 development
 build
 dist
-parcel-bundle-reports
 
 # misc
 .eslintcache

web/netlify.toml

@@ -9,6 +9,3 @@ YARN_ENABLE_GLOBAL_CACHE = "true"
 
 [functions]
 directory = "web/netlify/functions/"
-
-[dev]
-framework = "parcel"

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",

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;

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 = () => {

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;

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"];
 

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`,

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>
   );
 };

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.";
 };

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(),

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"],
+    }),
+  ],
+});