Reapply "Vite Migration (#204)"

README.md

@@ -22,7 +22,7 @@ yarn && yarn start
 ```
 
 Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
 
 The page will reload if you make edits.<br>
 You will also see any lint errors in the console.
@@ -35,12 +35,12 @@ yarn test
 ```
 
 Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+See the section about [running tests](https://vitest.dev/guide/workspace.html#running-tests) for more information.
 
 ## Integration tests
 
 ```sh
-yarn run cypress
+yarn cypress run
 ```
 
 Launches the integration test runner.<br>
@@ -78,7 +78,7 @@ You might also want access to some of the SaaS services that we've used to build
 
 ## Learn More
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+You can learn more in the [Vite documentation](https://vitejs.dev/guide/).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
 

app.json

@@ -11,10 +11,5 @@
   },
   "addons": [
 
-  ],
-  "buildpacks": [
-    {
-      "url": "https://github.com/mars/create-react-app-buildpack"
-    }
   ]
 }

cypress.config.ts

@@ -1,15 +1,14 @@
 import { defineConfig } from 'cypress'
+import plugin from './cypress/plugins/index.js'
 
 export default defineConfig({
   blockHosts: 'www.google-analytics.com',
   projectId: 'zxca1q',
   e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config)
+      return plugin(on, config)
     },
-    baseUrl: 'http://localhost:3000',
+    baseUrl: 'http://localhost:5173',
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
   },
-})
+})

cypress/plugins/index.js

@@ -11,7 +11,7 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-module.exports = (on, config) => {
+export default (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 }

public/index.html → index.html

@@ -9,17 +9,9 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    <link rel="manifest" href="/manifest.json">
+    <link rel="shortcut icon" href="/favicon.ico">
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Muncoordinated</title>
     <meta property="og:title" content="Muncoordinated">
     <meta name="twitter:title" content="Muncoordinated">
@@ -57,5 +49,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

package.json

@@ -2,19 +2,20 @@
   "name": "muncoordinated",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@artsy/fresnel": "^7.1.4",
     "@sentry/react": "^8.8.0",
     "@sentry/tracing": "^7.114.0",
     "@types/file-saver": "^2.0.7",
-    "@types/jest": "29.5.12",
     "@types/lodash": "^4.17.5",
     "@types/node": "20.14.2",
     "@types/react": "^18.3.3",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "file-saver": "^2.0.5",
     "firebase": "^10.12.2",
     "lodash": "^4.17.11",
@@ -23,25 +24,31 @@
     "react-dom": "18.3.1",
     "react-firebase-hooks": "^5.1.1",
     "react-ga": "^3.3.1",
-    "react-router-dom": "^5.3.4",
     "react-helmet": "^6.1.0",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^5.3.4",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.5",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vite": "^5.4.2",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "devDependencies": {
+    "@vitest/coverage-v8": "^2.0.5",
     "cypress": "13.11.0",
-    "cypress-real-events": "^1.12.0"
+    "cypress-real-events": "^1.12.0",
+    "jsdom": "^25.0.0",
+    "vitest": "^2.0.5"
   },
   "resolutions": {
     "@types/react": "18.3.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage --watch=false"
   },
   "eslintConfig": {
     "extends": "react-app"

src/App.test.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import App from './App';
+import { it } from 'vitest';
+import { createRoot } from 'react-dom/client';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const container = document.createElement('div');
+  const root = createRoot(container!);
+  root.unmount();
 });

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "allowJs": true,
+    "target": "ESNext",
+    "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -13,11 +13,14 @@
     "isolatedModules": true,
     "sourceMap": true,
     "noEmit": true,
-    "jsx": "preserve",
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
     "lib": [
-      "es2016", // you need this so things like "Set" work
+      "esnext", 
+      "dom.iterable",
       "dom" // you need this so things like "currentTarget" work
     ],
+    "types": ["vite/client", "vite-plugin-svgr/client"],
   },
   "include": [
     "src"

vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  plugins: [react()],
+  build: {
+    outDir: 'build',
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    css: true,
+    reporters: ['verbose'],
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*'],
+      exclude: [],
+    }
+  },
+})