From 4e053444fe2f0f6db1a48734b78d2d5f39cef535 Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Thu, 29 Aug 2024 20:58:18 -0500 Subject: [PATCH] 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 | 10 +- .eslintrc.json | 3 + .github/workflows/ci.yml | 11 +- .github/workflows/run-release.yml | 14 +- .gitignore | 1 + README.md | 6 +- public/index.html => index.html | 23 +- manifest.js | 34 + package-lock.json | 62777 ++++++++-------- package.json | 74 +- public/manifest.json | 31 - src/common/services/randomNumber.js | 6 +- src/common/services/randomNumber.test.js | 2 +- src/common/utils.test.js | 10 +- .../AccountingView/AccountingView.test.js | 4 +- .../AnimatedNumber/AnimatedNumber.js | 2 - .../AnimatedNumber/AnimatedNumber.sass | 1 - src/components/ContextPane/ContextPane.sass | 2 + .../CowCard/Subheader/Subheader.test.js | 2 +- src/components/CowPen/CowPen.sass | 2 +- src/components/CowPen/CowPen.test.js | 17 +- .../CowPenContextMenu.test.js | 4 +- src/components/Farmhand/Farmhand.js | 24 +- src/components/Farmhand/Farmhand.sass | 17 +- src/components/Farmhand/Farmhand.test.js | 4 +- src/components/Farmhand/FarmhandReducers.js | 2 +- .../helpers/getInventoryQuantities.test.js | 2 +- .../FermentationRecipeList.test.js | 2 +- src/components/Field/Field.js | 1 + src/components/Field/Field.sass | 2 +- src/components/Field/Field.test.js | 65 +- src/components/Home/Home.js | 8 +- src/components/Home/Home.test.js | 2 +- src/components/Inventory/Inventory.js | 2 - src/components/Inventory/Inventory.sass | 1 - src/components/Inventory/Inventory.test.js | 33 +- src/components/Item/Item.test.js | 2 +- .../KeybindingsView/KeybindingsView.js | 2 - .../KeybindingsView/KeybindingsView.sass | 1 - src/components/Navigation/Navigation.js | 4 +- .../OnlinePeersView/OnlinePeer/OnlinePeer.js | 2 - .../OnlinePeer/OnlinePeer.sass | 2 - .../OnlinePeersView/OnlinePeersView.js | 2 - .../OnlinePeersView/OnlinePeersView.sass | 1 - src/components/Plot/Plot.rtl.test.js | 8 +- src/components/Plot/Plot.sass | 2 +- src/components/Plot/Plot.test.js | 12 +- .../PriceEventView/PriceEventView.js | 2 - .../PriceEventView/PriceEventView.sass | 1 - .../SettingsView/RandomSeedInput.js | 4 +- .../SettingsView/RandomSeedInput.test.js | 2 +- .../TierPurchase/TierPurchase.test.js | 2 +- src/components/Toolbelt/Toolbelt.test.js | 4 +- .../UpdateNotifier/UpdateNotifier.js | 32 + src/components/UpdateNotifier/index.js | 1 + .../UpgradePurchase/UpgradePurchase.test.js | 2 +- .../WineRecipeList/WineRecipe.test.js | 2 +- src/components/Workshop/Workshop.test.js | 18 +- src/config.js | 36 +- src/constants.js | 2 +- src/data/__mocks__/items.js | 3 +- src/data/__mocks__/maps.js | 12 +- src/data/__mocks__/recipes.js | 3 +- src/data/achievements.test.js | 10 +- src/factories/CoalFactory.test.js | 2 +- src/factories/OreFactory.test.js | 4 +- src/factories/ResourceFactory.test.js | 14 +- src/factories/StoneFactory.test.js | 2 +- src/game-logic/cows/cow-selection.test.js | 14 +- src/game-logic/reducers/applyCrows.test.js | 4 +- .../reducers/applyPrecipitation.test.js | 8 +- src/game-logic/reducers/clearPlot.test.js | 4 +- .../reducers/computeStateForNextDay.test.js | 6 +- .../reducers/createPriceEvent.test.js | 2 +- src/game-logic/reducers/fertilizePlot.test.js | 2 +- src/game-logic/reducers/forRange.test.js | 2 +- .../reducers/generatePriceEvents.test.js | 16 +- src/game-logic/reducers/harvestPlot.test.js | 2 +- .../reducers/incrementPlotContentAge.test.js | 4 +- src/game-logic/reducers/makeRecipe.test.js | 19 +- src/game-logic/reducers/makeWine.test.js | 2 +- src/game-logic/reducers/minePlot.test.js | 4 +- src/game-logic/reducers/plantInPlot.test.js | 4 +- .../reducers/processCellarSpoilage.test.js | 8 +- .../reducers/processLevelUp.test.js | 68 +- src/game-logic/reducers/processNerfs.test.js | 2 +- .../reducers/processSprinklers.test.js | 2 +- .../reducers/processWeather.test.js | 8 +- src/game-logic/reducers/purchaseForest.js | 2 +- src/game-logic/reducers/purchaseItem.test.js | 2 +- src/game-logic/reducers/sellItem.test.js | 94 +- src/game-logic/reducers/spawnWeeds.test.js | 2 +- src/game-logic/reducers/unlockTool.test.js | 2 +- .../reducers/updateAchievements.test.js | 30 +- .../reducers/updateLearnedRecipes.test.js | 8 +- src/game-logic/reducers/waterAllPlots.test.js | 4 +- src/game-logic/reducers/waterPlot.test.js | 2 +- src/handlers/ui-events.js | 16 +- src/handlers/ui-events.test.js | 67 +- src/img/index.js | 18 +- src/index.js | 3 - src/index.sass | 2 +- src/react-app-env.d.ts | 2 - src/service-worker.js | 73 - src/serviceWorkerRegistration.js | 143 - src/services/cellar.test.js | 2 +- src/setupTests.js | 6 +- src/shell/bootup.test.js | 10 +- src/shell/field.test.js | 81 + src/shell/pending-notifications.test.js | 4 +- src/test-utils/stubs/saveDataStubFactory.js | 3 + src/utils/__snapshots__/index.test.js.snap | 4 +- src/utils/index.js | 2 +- src/utils/index.test.js | 170 +- tsconfig.json | 8 +- vercel.json | 3 + vite.config.js | 96 + 117 files changed, 33425 insertions(+), 31012 deletions(-) rename public/index.html => index.html (82%) create mode 100644 manifest.js delete mode 100644 public/manifest.json delete mode 100644 src/components/AnimatedNumber/AnimatedNumber.sass delete mode 100644 src/components/Inventory/Inventory.sass delete mode 100644 src/components/KeybindingsView/KeybindingsView.sass delete mode 100644 src/components/OnlinePeersView/OnlinePeer/OnlinePeer.sass delete mode 100644 src/components/OnlinePeersView/OnlinePeersView.sass delete mode 100644 src/components/PriceEventView/PriceEventView.sass create mode 100644 src/components/UpdateNotifier/UpdateNotifier.js create mode 100644 src/components/UpdateNotifier/index.js delete mode 100644 src/service-worker.js delete mode 100644 src/serviceWorkerRegistration.js create mode 100644 src/shell/field.test.js create mode 100644 vite.config.js diff --git a/.env b/.env index aba3261ed..eaae24c66 100644 --- a/.env +++ b/.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= diff --git a/.eslintrc.json b/.eslintrc.json index 3e6205b80..da44f4061 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,4 +1,7 @@ { + "globals": { + "vitest": true + }, "extends": ["react-app"], "rules": { "import/order": [ diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7e0fadb6a..252a26ab6 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/.github/workflows/run-release.yml b/.github/workflows/run-release.yml index 943ad52ae..aaf9bebd1 100644 --- a/.github/workflows/run-release.yml +++ b/.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,7 +82,7 @@ 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: @@ -90,18 +90,18 @@ jobs: 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 diff --git a/.gitignore b/.gitignore index 8dca9e3b9..5a00c1ad1 100644 --- a/.gitignore +++ b/.gitignore @@ -4,5 +4,6 @@ build Session.vim .DS_Store .idea +coverage .vercel diff --git a/README.md b/README.md index 8a48b6e1f..2d579be36 100644 --- a/README.md +++ b/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. diff --git a/public/index.html b/index.html similarity index 82% rename from public/index.html rename to index.html index 87e8afb3e..83fedcd43 100644 --- a/public/index.html +++ b/index.html @@ -6,39 +6,31 @@ + - - - - + Farmhand