Migrated from CRA to vite and updated typescript to latest (#2268)

* Partially migrated to vite * Fixed vite cache errors * Fixed test after migration * Fixed process.env * Fixed failing tests due to babel * updated package.json * Fixed all errors * Updated typescript to latest * Moved config files
PalisadoesFoundation · Sep 17, 2024 · 01ef5c6 · 01ef5c6
1 parent e143243
commit 01ef5c6
Show file tree

Hide file tree

Showing 13 changed files with 7,834 additions and 20,455 deletions.
diff --git a/config/babel.config.cjs b/config/babel.config.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env', // Transforms modern JavaScript
+    '@babel/preset-typescript', // Transforms TypeScript
+    '@babel/preset-react', // Transforms JSX
+  ],
+  plugins: ['babel-plugin-transform-import-meta'],
+};
diff --git a/config/vite.config.ts b/config/vite.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+import svgrPlugin from 'vite-plugin-svgr';
+import EnvironmentPlugin from 'vite-plugin-environment';
+
+export default defineConfig({
+  // depending on your application, base can also be "/"
+  build: {
+    outDir: 'build',
+  },
+  base: '',
+  plugins: [
+    react(),
+    viteTsconfigPaths(),
+    EnvironmentPlugin('all'),
+    svgrPlugin({
+      svgrOptions: {
+        icon: true,
+        // ...svgr options (https://react-svgr.com/docs/options/)
+      },
+    }),
+  ],
+  server: {
+    // this ensures that the browser opens upon server start
+    open: true,
+    // this sets a default port to 3000
+    port: 4321,
+  },
+});
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon_palisadoes.ico" />
+    <link rel="icon" href="/favicon_palisadoes.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -18,10 +18,15 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
       referrerpolicy="no-referrer"
     />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+      referrerpolicy="no-referrer"
+    />
     <title>Talawa Admin</title>
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/jest.config.js b/jest.config.js
@@ -1,19 +1,18 @@
 export default {
   roots: ['<rootDir>/src'],
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/index.tsx'],
-  setupFiles: ['react-app-polyfill/jsdom'],
+  // setupFiles: ['react-app-polyfill/jsdom'],
+  setupFiles: ['whatwg-fetch'],
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testMatch: [
     '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
     '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
   ],
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$':
-      'react-scripts/config/jest/babelTransform.js',
-    '^.+\\.(css|scss|sass|less)$': 'jest-preview/transforms/css',
-    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)':
-      'jest-preview/transforms/file',
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { configFile: "./config/babel.config.cjs" }], // Use babel-jest for JavaScript and TypeScript files
+    '^.+\\.(css|scss|sass|less)$': 'jest-preview/transforms/css', // CSS transformations
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': 'jest-preview/transforms/file', // File transformations
   },
   transformIgnorePatterns: [
     '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
@@ -41,10 +40,10 @@ export default {
     'jsx',
     'node',
   ],
-  watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname',
-  ],
+  // watchPlugins: [
+  //   'jest-watch-typeahead/filename',
+  //   'jest-watch-typeahead/testname',
+  // ],
   resetMocks: false,
   coveragePathIgnorePatterns: [
     'src/state/index.ts',