deps: switch from CRA to vite

.github/workflows/main.yml

@@ -39,7 +39,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: build/
+          path: dist/
 
   # Deployment job
   deploy:

.gitignore

@@ -1,26 +1,27 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
 # Sentry Config File
 .sentryclirc

README.md

@@ -12,37 +12,33 @@ For general comments and discussions, you can use the [Discussions page](https:/
 
 ## Contributing
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+### React + TypeScript + Vite
 
-### Available Scripts
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-In the project directory, you can run:
+Currently, two official plugins are available:
 
-#### `yarn start`
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+#### Expanding the ESLint configuration
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 
-#### `yarn test`
+- Configure the top-level `parserOptions` property like this:
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
 
-#### `yarn build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

eslint.config.mjs

@@ -1,37 +1,58 @@
+import reactRefresh from 'eslint-plugin-react-refresh';
 import globals from 'globals';
-import pluginJs from '@eslint/js';
+import eslint from '@eslint/js';
 import tseslint from 'typescript-eslint';
-import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js';
-import pluginReactHooks from 'eslint-plugin-react-hooks';
+import reactHooks from 'eslint-plugin-react-hooks';
+import pluginPrettier from 'eslint-plugin-prettier';
+import configPrettier from 'eslint-config-prettier';
 
-export default [
+export default tseslint.config(
 	{
-		ignores: ['eslint.config.mjs'],
+		files: ['**/*.ts', '**/*.tsx'],
+		ignores: ['**/dist', 'eslint.config.mjs', 'vite.config.ts'],
+		languageOptions: {
+			parser: tseslint.parser,
+			parserOptions: {
+				project: ['./tsconfig.app.json'],
+			},
+			globals: {
+				...globals.browser,
+				...globals.es2024,
+			},
+		},
+		extends: tseslint.configs.recommendedTypeChecked,
 	},
+	eslint.configs.recommended,
 	{
-		files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+		plugins: { prettier: pluginPrettier },
+		.../** @type {import('typescript-eslint').ConfigWithExtends} */ (
+			configPrettier
+		),
 	},
-	{ languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
-	{ languageOptions: { globals: globals.browser } },
-	pluginJs.configs.recommended,
-	...tseslint.configs.recommended,
-	pluginReactConfig,
-	pluginReactHooks.configs.recommended,
 	{
-		languageOptions: {
-			parserOptions: {
-				project: 'tsconfig.json',
-			},
+		plugins: { 'react-hooks': reactHooks },
+		rules: {
+			'react-hooks/rules-of-hooks': 'error',
+			'react-hooks/exhaustive-deps': 'warn',
 		},
+	},
+	{
+		plugins: {
+			'react-refresh': reactRefresh,
+		},
+
 		rules: {
-			'@typescript-eslint/no-namespace': 'off',
-			'@typescript-eslint/no-confusing-void-expression': [
-				'error',
+			'react-refresh/only-export-components': [
+				'warn',
 				{
-					ignoreVoidOperator: true,
+					allowConstantExport: true,
 				},
 			],
-			'react/react-in-jsx-scope': 'off',
+		},
+	},
+	{
+		rules: {
+			'no-unused-vars': 'off',
 			'@typescript-eslint/no-unused-vars': [
 				'error',
 				{
@@ -43,4 +64,4 @@ export default [
 			],
 		},
 	},
-];
+);

index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+		<link rel="manifest" href="/manifest.json" />
+		<title>Pandemic Tracker</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

package.json

@@ -7,6 +7,14 @@
     "url": "https://github.com/oldstarchy/pandemic_tracker.git"
   },
   "homepage": "https://oldstarchy.github.io/pandemic_tracker/",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` tsc -b && vite build && yarn sentry:sourcemaps",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org nicholas-sorokin --project pandemic-tracker ./dist && sentry-cli sourcemaps upload --org nicholas-sorokin --project pandemic-tracker ./dist"
+  },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
@@ -15,57 +23,28 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@sentry/cli": "^2.32.1",
     "@sentry/react": "^8.15.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
     "fuzzy": "^0.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-scripts": "5.0.1",
-    "styled-components": "^6.1.11",
-    "typescript": "^5.4.5",
-    "web-vitals": "^2.1.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` react-scripts build && yarn sentry:sourcemaps",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org nicholas-sorokin --project pandemic-tracker ./build && sentry-cli sourcemaps upload --org nicholas-sorokin --project pandemic-tracker ./build"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "resolutions": {
-    "styled-components": "^5"
+    "styled-components": "^6.1.11"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@eslint/js": "^9.5.0",
-    "eslint": "^9.6.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-react": "^7.34.3",
+    "@babel/plugin-proposal-explicit-resource-management": "7.24.7",
+    "@eslint/js": "^9.7.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.7.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "globals": "^15.6.0",
-    "typescript-eslint": "^7.13.1"
+    "eslint-plugin-react-refresh": "^0.4.8",
+    "globals": "^15.8.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^7.16.1",
+    "vite": "^5.3.3"
   }
 }

public/manifest.json

@@ -3,19 +3,9 @@
 	"name": "Pandemic Tracker",
 	"_icons": [
 		{
-			"src": "favicon.ico",
-			"sizes": "64x64 32x32 24x24 16x16",
-			"type": "image/x-icon"
-		},
-		{
-			"src": "logo192.png",
-			"type": "image/png",
-			"sizes": "192x192"
-		},
-		{
-			"src": "logo512.png",
-			"type": "image/png",
-			"sizes": "512x512"
+			"src": "vite.svg",
+			"sizes": "any",
+			"type": "image/svg+xml"
 		}
 	],
 	"start_url": ".",