#502 web-perfomance load time

JacquelineTuyisenge · JacquelineTuyisenge · commit a32c782c3ee3 · 2024-09-25T11:19:02.000+02:00
diff --git a/.eslintrc b/.eslintrc
@@ -19,7 +19,7 @@
     "sourceType": "module"
   },
   "plugins": ["react", "@typescript-eslint"],
-  "ignorePatterns": ["/root/webpack.config.js"],
+  "ignorePatterns": ["/root/vite.config.ts"],
   "rules": {
     "no-console": ["error"],
     "import/extensions": "off",
diff --git a/index.html b/index.html
@@ -41,11 +41,14 @@
       rel="stylesheet"
     /> -->
 
-    <link href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap" rel="stylesheet">
-
+    <link
+      href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body class="dark:bg-dark-frame-bg">
     <div id="tree"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
 <!DOCTYPE html>
@@ -90,8 +93,10 @@
       href="https://fonts.googleapis.com/css2?family=Inria+Serif:ital@1&family=Lexend+Deca:wght@600&family=Open+Sans:wght@300;400;600;700;800&display=swap"
       rel="stylesheet"
     /> -->
-    <link href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap" rel="stylesheet">
-
+    <link
+      href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="tree"></div>
diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-dupe-keys */
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
-module.exports = {
+export default {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   verbose: true,
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,10 +2,11 @@
   "name": "atlp-pulse-fn",
   "version": "2.0.0",
   "description": "Dev pulse app",
+  "type": "module",
   "main": "src/index.tsx",
   "scripts": {
-    "dev": "webpack server",
-    "build": "webpack",
+    "dev": "vite",
+    "build": "vite build",
     "test": "npm run update-snapshots && npx jest --runInBand",
     "update-snapshots": "jest --updateSnapshot",
     "coverage": "jest --collect-coverage --silent -u",
@@ -50,6 +51,7 @@
     "@testing-library/dom": "^8.20.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/node": "^20.4.2",
+    "@vitejs/plugin-react": "^4.3.1",
     "ajv": "^8.12.0",
     "apollo-upload-client": "^17.0.0",
     "autoprefixer": "^10.4.14",
@@ -58,7 +60,6 @@
     "cleave.js": "^1.6.0",
     "cloudinary": "^1.39.0",
     "cloudinary-react": "^1.8.1",
-    "copy-webpack-plugin": "^11.0.0",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^2.30.0",
     "dotenv": "^16.3.1",
@@ -108,6 +109,8 @@
     "subscriptions-transport-ws": "^0.11.0",
     "tailwindcss": "^3.3.3",
     "url-polyfill": "^1.1.12",
+    "vite": "^5.4.7",
+    "vite-tsconfig-paths": "^5.0.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -149,7 +152,6 @@
     "faker": "5.5.3",
     "file-loader": "^6.2.0",
     "graphql": "^16.7.1",
-    "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "install": "^0.13.0",
     "jest": "^28.1.3",
@@ -170,10 +172,7 @@
     "tailwindcss": "^3.1.4",
     "ts-jest": "^28.0.8",
     "ts-loader": "^9.4.4",
-    "typescript": "^4.9.5",
-    "webpack": "^5.88.1",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.15.1"
+    "typescript": "^4.9.5"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix",
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,6 @@
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
-
-module.exports = {
-  plugins: [tailwindcss('./tailwind.config.js'), autoprefixer],
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
diff --git a/src/components/InvitationTable.tsx b/src/components/InvitationTable.tsx
@@ -62,11 +62,8 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
   };
 
   return (
-    <div
-      className={``}
-    >
-      <div className="flex items-center justify-between pb-6 ">
-      </div>
+    <div className="">
+      <div className="flex items-center justify-between pb-6 " />
       <div style={{ overflowX: 'auto' }}>
         <table className="min-w-full leading-normal" {...getTableProps()}>
           <thead>
@@ -178,5 +175,4 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
   );
 }
 
-
-export default DataTableStats;
+export default DataTableStats;
diff --git a/target/npmlist.json b/target/npmlist.json
@@ -27,7 +27,6 @@
     "chart.js": { "version": "4.3.0" },
     "cleave.js": { "version": "1.6.0" },
     "cloudinary-react": { "version": "1.8.1" },
-    "copy-webpack-plugin": { "version": "11.0.0" },
     "crypto-browserify": { "version": "3.12.0" },
     "date-fns": { "version": "2.30.0" },
     "dotenv": { "version": "16.3.1" },
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dotenv from 'dotenv';
+import path from 'path';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+
+dotenv.config();
+
+export default defineConfig({
+  plugins: [react(), viteTsconfigPaths()],
+  resolve: {
+    alias: {
+      'chart.js': 'chart.js/auto',
+      crypto: 'crypto-browserify',
+    },
+  },
+  server: {
+    port: 3001,
+    open: true,
+    strictPort: true,
+  },
+  build: {
+    outDir: 'build',
+    sourcemap: true,
+  },
+  define: {
+    'process.env': JSON.stringify(process.env),
+  },
+});
diff --git a/webpack.config.js b/webpack.config.js
