Switch from react-scripts (Create React App) to Vite (#2462)

.env

@@ -1,5 +1,3 @@
-SASS_PATH=node_modules:src
-
 # Version Info
 REACT_APP_VERSION_SEMVER=$npm_package_version
 
@@ -9,9 +7,6 @@ REACT_APP_URL='http://127.0.0.1:3000'
 REACT_APP_TITLE='MapRoulette'
 
 # Features flags. Set each to 'enabled' or 'disabled'.
-REACT_APP_FEATURE_SOCIAL_SHARING='enabled'
-REACT_APP_FEATURE_LEADERBOARD='enabled'
-REACT_APP_FEATURE_CHALLENGE_ANALYSIS_TABLE='disabled'
 REACT_APP_FEATURE_MOBILE_DEVICES='disabled'
 REACT_APP_FEATURE_EDITOR_IMAGERY='disabled' # Send active imagery layer to editors
 REACT_APP_FEATURE_META_QC='disabled'
@@ -113,7 +108,7 @@ REACT_APP_MAPILLARY_CLIENT_TOKEN=''
 
 # The number of minutes to offset the attic query date to allow for the delay in
 # Overpass receiving the data.
-REACT_APP_ATTIC_QUERY_OFFSET_MINUTES = 10
+REACT_APP_ATTIC_QUERY_OFFSET_MINUTES=10
 
 # Matomo/PIWIK analytics configuration
 # > Note that you'll need to override your Matomo/PIWIK url and site id in your

.env.test

@@ -0,0 +1,3 @@
+REACT_APP_CHANGESET_URL='enabled'
+REACT_APP_SHORT_URL='https://mpr.lt'
+REACT_APP_SHORT_PATH='enabled'

.gitignore

@@ -3,9 +3,6 @@
 # dependencies
 /node_modules
 
-# Built by tailwind
-src/index.css
-
 # Imagery
 src/imagery.json
 src/defaultLayers.json
@@ -17,17 +14,13 @@ chimp.js
 
 # production
 /build
+/dist
 /MR3React.tgz
 
 # misc
 .DS_Store
 .env.local
-.env.development
-.env.development.local
-.env.test
-.env.test.local
-.env.production
-.env.production.local
+.env.*.local
 
 npm-debug.log*
 yarn-debug.log*

DEVELOPMENT.md

@@ -1,6 +1,11 @@
 # MapRoulette Development
 
-This is the repository that holds the front-end code. The back-end and API are developed in parallel in a separate repo: [maproulette-backend](https://github.com/maproulette/maproulette-backend). Both need to be deployed together for a working setup. We advise you use Docker for production deployments. [This repo](https://github.com/maproulette/maproulette2-docker) will help you set that up easily.
+This is the repository that holds the front-end code. The back-end and API
+are developed in parallel in a separate repo: [maproulette-backend](https://
+github.com/maproulette/maproulette-backend). Both need to be deployed together
+for a working setup. We advise you use Docker for production deployments. [This
+repo](https://github.com/maproulette/maproulette2-docker) will help you set that
+up easily.
 
 ### Basic Dependencies:
 
@@ -19,8 +24,10 @@ This is the repository that holds the front-end code. The back-end and API are d
 
 3. `yarn run start` to fire up the front-end development server
 
-A back-end server from the [maproulette-backend](https://github.com/maproulette/maproulette-backend) project is also required. You can either install and configure it locally or, if you have access to a pre-existing server, connect directly to it by using your API key for that
-server.
+A back-end server from the [maproulette-backend](https://github.com/maproulette/
+maproulette-backend) project is also required. You can either install and
+configure it locally or, if you have access to a pre-existing server, connect
+directly to it by using your API key for that server.
 
 #### Run the UI from Docker
 
@@ -32,12 +39,10 @@ Note that this will create the development build and not the 'production' build.
    ```
    REACT_APP_URL='http://127.0.0.1:3000'
    REACT_APP_SERVER_OAUTH_URL='http://127.0.0.1:9000/auth/authenticate?redirect=http://127.0.0.1:3000'
-   REACT_APP_FEATURE_CHALLENGE_ANALYSIS_TABLE='enabled'
-   REACT_APP_FEATURE_MOBILE_DEVICES='enabled'
    ```
 
-1. Build the image using `docker build --pull -t maproulette-ui .`
-1. Start a container from the image using `docker run -itd -p 127.0.0.1:3000:3000 --name maproulette-ui maproulette-ui`
+2. Build the image using `docker build --pull -t maproulette-ui .`
+3. Start a container from the image using `docker run -itd -p 127.0.0.1:3000:3000 --name maproulette-ui maproulette-ui`
 
 #### Developing with a local back-end server
 

eslint.config.js

@@ -1,12 +1,12 @@
-const eslint = require('@eslint/js');
-const globals = require('globals');
+import eslint from '@eslint/js';
+import globals from 'globals';
 
-const react = require('eslint-plugin-react');
-const reactHooks = require('eslint-plugin-react-hooks')
-const jest = require('eslint-plugin-jest')
-const unusedImports = require('eslint-plugin-unused-imports')
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import jest from 'eslint-plugin-jest';
+import unusedImports from 'eslint-plugin-unused-imports';
 
-module.exports = [
+export default [
   // eslint.configs.recommended,
   {
     files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],

public/index.html → index.html

@@ -14,13 +14,13 @@
       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="manifest" href="/manifest.json">
 
     <!-- App Icons -->
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/assets/images/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/assets/images/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/assets/images/favicons/favicon-16x16.png">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicons/favicon-16x16.png">
+    <link rel="shortcut icon" href="/favicon.ico">
 
     <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|Roboto:300,400,500,700&display=swap" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
@@ -32,16 +32,7 @@
       rel="stylesheet"
     />
 
-    <!--
-      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.
-
-      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>%REACT_APP_TITLE%</title>
+    <title>MapRoulette</title>
   </head>
   <body>
     <noscript>
@@ -50,15 +41,7 @@
     <div id="root"></div>
     <div id="external-root"></div>
     <div id="dropdown"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
 
-      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.jsx"></script>
   </body>
 </html>

package.json

@@ -1,6 +1,7 @@
 {
   "name": "maproulette3",
   "version": "3.15.11",
+  "type": "module",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.5.4",
@@ -43,6 +44,7 @@
     "leaflet-lasso": "^2.2.13",
     "leaflet-vectoricon": "https://github.com/CollinBeczak/Leaflet.VectorIcon",
     "leaflet.markercluster": "^1.5.3",
+    "lodash": "4.17.21",
     "mapillary-js": "^4.1.0",
     "normalize.css": "^7.0.0",
     "normalizr": "^3.6.0",
@@ -74,7 +76,6 @@
     "react-responsive": "^9.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^5.0.1",
     "react-share": "^4.2.0",
     "react-syntax-highlighter": "^15.4.3",
     "react-table-6": "^6.11.0",
@@ -95,14 +96,13 @@
     "xmltojson": "^1.3.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/eslint-parser": "^7.23.3",
-    "@babel/helper-get-function-arity": "^7.16.7",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@eslint/js": "^9.9.0",
     "@openstreetmap/id-tagging-schema": "^3.0.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^12.1.2",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "@vitest/coverage-v8": "^2.1.2",
+    "dotenv": "^16.4.5",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
     "eslint": "^8.54.0",
@@ -112,6 +112,7 @@
     "eslint-plugin-unused-imports": "^4.1.3",
     "extract-react-intl-messages": "^4.1.1",
     "globals": "^15.9.0",
+    "jsdom": "^25.0.1",
     "npm-run-all": "^4.1.1",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
@@ -121,29 +122,29 @@
     "react-test-renderer": "^16.2.0",
     "redux-mock-store": "^1.4.0",
     "shelljs": "^0.8.5",
+    "source-map-explorer": "^2.5.3",
     "tailwindcss": "^3.4.1",
     "tailwindcss-gradients": "^2.3.0",
     "tailwindcss-grid": "^1.2.0",
     "tailwindcss-owl": "^2.0.0",
     "tailwindcss-transforms": "^2.2.0",
     "tailwindcss-transition": "^1.0.5",
-    "tailwindcss-visuallyhidden": "^1.0.2"
+    "tailwindcss-visuallyhidden": "^1.0.2",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.2"
   },
   "scripts": {
-    "build-postcss": "postcss src/styles/index.css -o src/index.css",
-    "watch-postcss": "postcss src/styles/index.css -o src/index.css -w",
-    "build-intl": "NODE_ENV=production yarn run extract-messages -l=en-US -o src/lang/ -d en-US --flat -f json 'src/**/!(*.test).js'",
+    "build-intl": "NODE_ENV=production extract-messages -l=en-US -o src/lang/ -d en-US --flat -f json 'src/**/!(*.test).js'",
     "update-layers": "node scripts/update_layers.js",
     "update-layers-prod": "NODE_ENV=production node scripts/update_layers.js",
-    "update-presets": "node scripts/update_presets.js",
-    "start-js": "react-scripts --max_old_space_size=4096 start",
-    "start": "npm-run-all -p update-layers watch-postcss start-js",
-    "build": "yarn run build-intl && yarn run update-layers-prod && yarn run build-postcss && react-scripts --max_old_space_size=4096 build",
-    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!react-leaflet)/\" --resetMocks=false --detectOpenHandles",
-    "test:cov": "react-scripts test --transformIgnorePatterns \"node_modules/(?!react-leaflet)/\" --coverage --resetMocks=false",
-    "test:cov-full": "react-scripts test --transformIgnorePatterns \"node_modules/(?!react-leaflet)/\" --coverage --watchAll --resetMocks=false",
+    "start-js": "vite",
+    "start": "npm-run-all -p update-layers start-js",
+    "build-js": "vite build",
+    "build": "yarn run build-intl && yarn run update-layers-prod && yarn run build-js",
+    "test": "vitest",
+    "test:cov": "vitest run --coverage",
     "lint": "eslint src/",
-    "eject": "react-scripts eject"
+    "explore": "source-map-explorer --only-mapped --no-border-checks 'dist/**/*.js'"
   },
   "browserslist": [
     ">0.2%",

postcss.config.js

@@ -1,7 +1,12 @@
-module.exports = {
+export default {
   plugins: {
     'postcss-import': {},
-    'postcss-simple-vars': {},
+    'postcss-simple-vars': {
+      // leave references to undefined variables like $foo untransformed,
+      // instead of erroring. needed because Vite transforms url() paths
+      // into a base64-encoding that may contain '$' characters.
+      silent: true
+    },
     'tailwindcss/nesting': {},
     'tailwindcss': { config: './src/tailwind.config.js'},
     'autoprefixer': {},

scripts/update_layers.js

@@ -8,9 +8,9 @@
  *
  * Requires curl and jq to both be installed.
  */
-const dotenv = require('dotenv')
-const _get = require('lodash/get')
-const shell = require('shelljs')
+import dotenv from 'dotenv';
+import _get from 'lodash/get.js';
+import shell from 'shelljs';
 shell.config.silent = true
 
 // Ensure curl and jq are both installed

src/App.js → src/App.jsx

@@ -4,7 +4,7 @@ import { withRouter } from 'react-router'
 import Home from './pages/Home/Home'
 import Profile from './pages/Profile/Profile'
 import Metrics from './pages/Metrics/Metrics'
-import Dashboard from './pages/Dashboard/Dashboard.js'
+import Dashboard from './pages/Dashboard/Dashboard.jsx'
 import Leaderboard from './pages/Leaderboard/Leaderboard'
 import ChallengeLeaderboard from './pages/Leaderboard/ChallengeLeaderboard'
 import ProjectLeaderboard from './pages/Leaderboard/ProjectLeaderboard'
@@ -92,7 +92,7 @@ export class App extends Component {
   render() {
     // We don't currently support mobile devices. Unless the mobile feature
     // is explicitly enabled, inform user that mobile is not supported.
-    if (process.env.REACT_APP_FEATURE_MOBILE_DEVICES !== 'enabled') {
+    if (import.meta.env.REACT_APP_FEATURE_MOBILE_DEVICES !== 'enabled') {
       // This is a pretty simplistic check, but it should catch most cases.
       if (/iPhone|iPad|iPod|BlackBerry|IEMobile|Fennec|Android|Mobile|Tablet/i.test(navigator.userAgent)) {
         return <MobileNotSupported />

src/App.test.js → src/App.test.jsx

@@ -1,3 +1,4 @@
+import { describe, it, expect } from "vitest";
 import "@testing-library/jest-dom";
 import { App } from "./App";
 

src/components/ActivityTimeline/ChallengeActivityTimeline/ChallengeActivityTimeline.test.js → src/components/ActivityTimeline/ChallengeActivityTimeline/ChallengeActivityTimeline.test.jsx

@@ -1,3 +1,4 @@
+import { describe, it, expect } from "vitest";
 import "@testing-library/jest-dom";
 import { ChallengeActivityTimeline } from "./ChallengeActivityTimeline";
 

src/components/AdminPane/AdminPane.test.js → src/components/AdminPane/AdminPane.test.jsx

@@ -1,3 +1,4 @@
+import { describe, it, expect } from "vitest";
 import "@testing-library/jest-dom";
 import { AdminPane } from "./AdminPane";
 
@@ -18,4 +19,4 @@ describe("AdminPane", () => {
     expect(container.firstChild.classList["0"]).toBe("admin");
     expect(container.firstChild.firstChild.classList["0"]).toBe("busy-spinner");
   });
-});
+});

src/components/AdminPane/HOCs/WithCurrentProject/WithCurrentProject.test.js → src/components/AdminPane/HOCs/WithCurrentProject/WithCurrentProject.test.jsx

@@ -1,3 +1,4 @@
+import { describe, it, expect, vi } from "vitest";
 import "@testing-library/jest-dom";
 import { waitFor } from "@testing-library/react";
 import { WithCurrentProject } from "./WithCurrentProject";
@@ -20,7 +21,7 @@ describe("WithCurrentProject", () => {
   });
 
   it("calls redirectUser if user is not a project manager", async () => {
-    const redirectUser = jest.fn()
+    const redirectUser = vi.fn()
     const TestComponent = (props) => {
       return <div>projectId: {props.routedProjectId}</div>
     }
@@ -36,7 +37,7 @@ describe("WithCurrentProject", () => {
   });
 
   it("does not redirect user if allowNonManagers is true", async () => {
-    const redirectUser = jest.fn()
+    const redirectUser = vi.fn()
     const TestComponent = (props) => {
       return <div>projectId: {props.routedProjectId}</div>
     }