feat(project): Replace Create React App with Vite (#506)

* chore(deps): [wip] use vite for dev server

chore(config): treat .js files as .jsx

chore(project): rename .jsx files to .js

* fix(ui): eliminate some visual regressions

* fix(project): eliminate Sass warnings

* chore(project): [wip] switch from jest to vitest

* chore(project): [wip] fix some tests

chore(project): [wip] await importActual

* chore(project): [wip] remove top-level importActual

* chore(project): [wip] fix some broken tests

chore(project): [wip] fix broken test

chore(project): [wip] fix broken test

chore(project): [wip] fix broken test

chore(project): [wip] fix broken test

chore(project): [wip] fix broken test

chore(project): [wip] fix broken test

* chore(project): replace failing Enzyme tests with RTL tests

* chore(project): [wip] fix broken utils tests

* fix(project): define vitest global

* chore(ci): report test coverage

* fix(project): load cow template assets as dataUris

* fix(vercel): update ignoreCommand

* fix(vercel): update framework and outputDirectory

* feat(project): use VITE_* environment variables

* fix(ui): patch vertical hr style

* chore(pwa): use vite-plugin-pwa

* fix(ui): remove bad line-height setting

* fix(workflows): use dist directory

* fix(tsconfig): update exclude list

* chore(deps): remove unused jest packages

* chore(scripts): update test:debug and pre-commit hook

* chore(deps): remove react-scripts

* fix(scripts): update build:native configuration

* chore(build): generate source maps

* fix(scripts): make print:crops work again

* fix(config): use --base where PUBLIC_URL was used previously

* fix(project): use import.meta.env.MODE instead of import.meta.env.NODE_ENV

* chore(package): treat package as a module

* refactor: cleanup

.env

@@ -1,6 +1,6 @@
 BROWSER=none
-REACT_APP_API_ROOT=https://farmhand.vercel.app/
-REACT_APP_NAME=$npm_package_name
-REACT_APP_VERSION=$npm_package_version
-REACT_APP_TURN_USERNAME=
-REACT_APP_TURN_CREDENTIAL=
+VITE_API_ROOT=https://farmhand.vercel.app/
+VITE_NAME=$npm_package_name
+VITE_FARMHAND_PACKAGE_VERSION=$npm_package_version
+VITE_TURN_USERNAME=
+VITE_TURN_CREDENTIAL=

.eslintrc.json

@@ -1,4 +1,7 @@
 {
+  "globals": {
+    "vitest": true
+  },
   "extends": ["react-app"],
   "rules": {
     "import/order": [

.github/workflows/ci.yml

@@ -24,14 +24,7 @@ jobs:
         run: npm ci
 
       - name: 'Run tests'
-        run: npm test -- --reporters=default --reporters=jest-junit
-
-      - name: Test Report
-        uses: dorny/test-reporter@v1
-        with:
-          name: Jest Tests # Name of the check run which will be created
-          path: reports/jest-*.xml # Path to test results
-          reporter: jest-junit # Format of test results
+        run: npm test -- --coverage --run
 
       - name: 'Check types'
         # TODO: Change this to check:types when all type errors are fixed
@@ -44,4 +37,4 @@ jobs:
       - uses: actions/upload-artifact@v3
         with:
           name: build-output
-          path: build
+          path: dist

.github/workflows/run-release.yml

@@ -61,13 +61,13 @@ jobs:
           tags: true
           branch: main
 
-      - run: PUBLIC_URL='./' npm run build
+      - run: npm run build -- --base="./"
       - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Prepare Web Artifacts
-        run: zip farmhand-web-${{ env.PACKAGE_VERSION }}.zip -r build/*
+        run: zip farmhand-web-${{ env.PACKAGE_VERSION }}.zip -r dist/*
 
       - name: Create Release
         id: create_release
@@ -82,26 +82,26 @@ jobs:
           files: |
             ./farmhand-web-${{ env.PACKAGE_VERSION }}.zip
 
-      - run: node -e "console.log(require('./package.json').version)" > build/version.txt
+      - run: node -e "console.log(require('./package.json').version)" > dist/version.txt
       - name: Publish itch.io build
         uses: josephbmanley/butler-publish-itchio-action@master
         env:
           BUTLER_CREDENTIALS: ${{ secrets.ITCH_TOKEN }}
           CHANNEL: html5
           ITCH_GAME: Farmhand
           ITCH_USER: jeremyckahn
-          PACKAGE: build
-          VERSION_FILE: build/version.txt
+          PACKAGE: dist
+          VERSION_FILE: dist/version.txt
 
       - run: |
-          PUBLIC_URL='/farmhand' npm run build
+          npm run build -- --base='/farmhand'
 
       # https://github.com/marketplace/actions/deploy-to-github-pages
       - name: Deploy to jeremyckahn.github.io/farmhand
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           branch: gh-pages
-          folder: build
+          folder: dist
           clean: true
           single-commit: true
 

.gitignore

@@ -4,5 +4,6 @@ build
 Session.vim
 .DS_Store
 .idea
+coverage
 
 .vercel

README.md

@@ -56,7 +56,7 @@ Farmhand uses a [SemVer](https://semver.org/)-like versioning system. It differs
 
 ## Project overview
 
-- This project is built with [Create React App](https://create-react-app.dev/), so please refer to the documentation of that project to learn about the development toolchain.
+- This project uses [Vite](https://vitejs.dev/), so please refer to the documentation of that project to learn about the development toolchain.
 - Farmhand uses [Piskel](https://www.piskelapp.com/) for the art assets.
 
 ## Running locally
@@ -138,13 +138,13 @@ The process will take several minutes to complete and it will notify the Discord
 Farmhand supports feature flags for code that should only be enabled in specific environments. To create a feature flag, add a line that looks like this in the relevant `.env` file:
 
 ```
-REACT_APP_ENABLE_[FEATURE_NAME]=true
+VITE_ENABLE_[FEATURE_NAME]=true
 ```
 
 Where `[FEATURE_NAME]` is replaced with the name of your feature. So, adding this to `.env.development.local`:
 
 ```
-REACT_APP_ENABLE_MINING=true
+VITE_ENABLE_MINING=true
 ```
 
 Would enable the `MINING` feature only for the local development environment. You can access the enabled feature flags at runtime by `import`ing the `features` Object from [`config.js`](https://github.com/jeremyckahn/farmhand/blob/develop/src/config.js). See [Adding Custom Environment Variables](https://create-react-app.dev/docs/adding-custom-environment-variables/) for more information on how to use environment variables.

public/index.html → index.html

@@ -6,39 +6,31 @@
     <meta name="theme-color" content="#ffe3a1" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <link rel="shortcut icon" href="/favicon.ico" />
     <!--
-      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.
+      Notice the use of  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.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/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`.
     -->
-    <link
-      rel="apple-touch-icon"
-      href="%PUBLIC_URL%/app-icons/ios-appicon-76-76.png"
-    />
+    <link rel="apple-touch-icon" href="/app-icons/ios-appicon-76-76.png" />
     <link
       rel="apple-touch-icon"
       sizes="120x120"
-      href="%PUBLIC_URL%/app-icons/ios-appicon-120-120.png"
+      href="/app-icons/ios-appicon-120-120.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="152x152"
-      href="%PUBLIC_URL%/app-icons/ios-appicon-152-152.png"
+      href="/app-icons/ios-appicon-152-152.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="%PUBLIC_URL%/app-icons/ios-appicon-180-180.png"
+      href="/app-icons/ios-appicon-180-180.png"
     />
     <title>Farmhand</title>
     <style>
@@ -99,5 +91,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.js"></script>
   </body>
 </html>

manifest.js

@@ -0,0 +1,34 @@
+/**
+ * @type {Partial<import('vite-plugin-pwa').ManifestOptions>}
+ */
+export const manifest = {
+  short_name: 'Farmhand',
+  name: 'Farmhand',
+  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: 'logoMaskable.png',
+      type: 'image/png',
+      purpose: 'maskable',
+      sizes: '731x731',
+    },
+  ],
+  start_url: './index.html',
+  display: 'standalone',
+  theme_color: '#ffe3a1',
+  background_color: '#ffffff',
+}