chore(kleros-app): migrate-to-vite

Author: tractorss

.gitignore

@@ -202,6 +202,3 @@ subgraph/*/contracts/*
 
 # Local Netlify folder
 .netlify
-
-#.parcel
-.parcel-cache

kleros-app/package.json

@@ -2,16 +2,22 @@
   "name": "@kleros/kleros-app",
   "version": "1.0.0",
   "source": "src/lib/index.ts",
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/kleros-app.umd.cjs",
+  "module": "./dist/kleros-app.js",
+  "types": "./dist/kleros-app.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/kleros-app.js",
+      "require": "./dist/kleros-app.umd.cjs"
+    }
+  },
   "scripts": {
-    "clear": "rm -r ../.parcel-cache",
     "clean": "rm -rf dist",
-    "start": "parcel src/index.html",
-    "build": "yarn clear & yarn clean & yarn parcel build",
     "check-style": "eslint 'src/**/*.{ts,tsx}'",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "start": "vite dev src/",
+    "build": "yarn clean & vite build"
   },
   "repository": {
     "type": "git",
@@ -47,11 +53,11 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "globals": "^15.12.0",
-    "parcel": "^2.12.0",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.3.0"
   },
   "dependencies": {
-    "@kleros/ui-components-library": "^2.15.0",
     "jose": "^5.9.6",
     "wagmi": "^2.13.0"
   },

kleros-app/src/lib/atlas/providers/AtlasProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, createContext, useContext, useState, useCallback, useEffect } from "react";
-import { useQuery, useQueryClient, type QueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { GraphQLClient } from "graphql-request";
 import { decodeJwt } from "jose";
 import { useAccount, useChainId, useSignMessage } from "wagmi";
@@ -51,13 +51,12 @@ const Context = createContext<IAtlasProvider | undefined>(undefined);
 interface AtlasConfig {
   uri: string;
   product: Products;
-  queryClient: QueryClient;
 }
 
 export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.ReactNode }> = ({ children, config }) => {
   const { address } = useAccount();
   const chainId = useChainId();
-  const queryClient = useQueryClient(config.queryClient);
+  const queryClient = useQueryClient();
 
   const [authToken, setAuthToken] = useSessionStorage<string | undefined>("authToken", undefined);
   const [isSigningIn, setIsSigningIn] = useState(false);

kleros-app/vite.config.js

@@ -0,0 +1,31 @@
+// vite.config.js
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [dts({ insertTypesEntry: true })],
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__dirname, "src/lib/index.ts"),
+      name: "kleros-app",
+      fileName: "kleros-app",
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ["react", "react-dom", "viem", "wagmi", "@tanstack/react-query", "graphql", "graphql-request"],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          "@tanstack/react-query": "@tanstack/react-query",
+          "graphql-request": "graphql-request",
+        },
+      },
+    },
+  },
+});

package.json

@@ -36,8 +36,6 @@
   "devDependencies": {
     "@commitlint/cli": "^17.8.1",
     "@commitlint/config-conventional": "^17.8.1",
-    "@parcel/packager-ts": "2.13.0",
-    "@parcel/transformer-typescript-types": "2.13.0",
     "assert": "^2.0.0",
     "buffer": "^5.7.1",
     "conventional-changelog-cli": "^2.2.2",
@@ -47,8 +45,7 @@
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.0",
     "process": "^0.11.10",
-    "string_decoder": "^1.3.0",
-    "typescript": ">=3.0.0"
+    "string_decoder": "^1.3.0"
   },
   "resolutions": {
     "async@npm^2.4.0": "^2.6.4",

web/src/context/AtlasProvider.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 import { AtlasProvider as _AtlasProvider, Products } from "@kleros/kleros-app";
-import { useQueryClient } from "@tanstack/react-query";
 
 const AtlasProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const queryClient = useQueryClient();
   return (
-    <_AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2, queryClient }}>
+    <_AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2 }}>
       {children}
     </_AtlasProvider>
   );