Migrate to Vite (#26)

- remove react-scripts deps in favor of vite - migrate from jest to vitest - pnpm instead of npm - upgraded netlify build envs to use latest node - added eslint - update nvmrc
djm158 · Jan 15, 2025 · b5e4425 · b5e4425
1 parent 7f2e911
commit b5e4425
Show file tree

Hide file tree

Showing 17 changed files with 4,821 additions and 30,225 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -20,11 +20,15 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "npm"
-      - run: npm install
-      - run: npm run build --if-present
-      - run: npm run test:ci
+          cache: "pnpm"
+      - run: pnpm install
+      - run: pnpm build
+      - run: pnpm test
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 node_modules/
-build/
+dist/
+# Local Netlify folder
+.netlify
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v17.4.0
+v20.11.1
diff --git a/README.md b/README.md
@@ -1,40 +1,39 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/6b0cc0c5-26fb-40e5-a4a9-3e1d893c429b/deploy-status)](https://app.netlify.com/sites/musing-wiles-f46ad5/deploys)
 
 # [runcalculator](https://runner-math.netlify.app/)
-calculator for determining time/pace/distance for running
 
-built in loving memory of coolrunning's pace calculator
+Calculator for determining time/pace/distance for running
 
-built with react + material ui + typescript
+Made in loving memory of coolrunning's pace calculator
+
+Built with React, Material UI, and TypeScript
 
 hosting + CI courtesy of Netlify
 
 ![Screenshot 2024-12-19 at 5 13 45 AM](https://github.com/user-attachments/assets/98d5b8fe-f0a1-44df-884a-75e819ade015)
 
-# get started
+# Get started
+
 ```sh
 $ git clone https://github.com/djm158/runcalculator
 $ cd runcalculator
-$ npm install
+$ pnpm install
 ```
 
-# build
-
+# Build
 
 ```sh
-$ npm build
+$ pnpm build
 ```
 
-# test
+# Test
 
 ```sh
-$ npm test
+$ pnpm test
 ```
 
-# develop
+# Develop
+
 ```sh
-$ npm start
+$ pnpm start
 ```
-
-# TODO
-* keyboard shortcut for clear (esc)
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Run calculator is the best tool to help you pace your next workout or race."
+    />
+    <meta
+      name="google-site-verification"
+      content="7_6UZDsQ5XyvqnTBO_nj7ZgV3RzUr5ugsrynoCBCo3I"
+    />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="shortcut icon" href="favicon.ico" />
+    <title>Running Calculator</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>