Build with Vite

.babelrc

@@ -10,9 +10,6 @@
     "@babel/preset-react"
   ],
   "env": {
-    "development": {
-      "plugins": ["react-refresh/babel"]
-    },
     "test": {
       "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
     }

.github/workflows/node-ci.yml

@@ -15,10 +15,10 @@ jobs:
         with:
           # This allows us to work with the repository during the lint step
           fetch-depth: 2
-      - name: Use Node.js 21.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v1
         with:
-          node-version: 21.x
+          node-version: 22.x
       - name: Install npm packages using cache
         uses: bahmutov/npm-install@v1
       - name: Lint code

.github/workflows/percy.yml

@@ -15,17 +15,17 @@ jobs:
         with:
           # This allows us to work with the repository during the lint step
           fetch-depth: 2
-      - name: Use Node.js 21.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v1
         with:
-          node-version: 21.x
+          node-version: 22.x
       - name: Install npm packages using cache
         uses: bahmutov/npm-install@v1
       - name: Build OTP-RR
         # Artifacts are shared between desktop and mobile tests (but not call-taker).
         run: yarn build
         env:
-          YAML_CONFIG: ../percy/har-mock-config.yml
+          YAML_CONFIG: ./percy/har-mock-config.yml
           JS_CONFIG: ./percy/har-mock-config.js
       - name: Take Percy Snapshots (Desktop + Mobile)
         run: npx percy exec -- npx jest percy/percy.test.js --force-exit
@@ -39,21 +39,22 @@ jobs:
         with:
           # This allows us to work with the repository during the lint step
           fetch-depth: 2
-      - name: Use Node.js 21.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v1
         with:
-          node-version: 21.x
+          node-version: 22.x
       - name: Install npm packages using cache
         uses: bahmutov/npm-install@v1
       - name: Download OTP2 config file
-        run: curl $PERCY_OTP2_CONFIG_URL --output /tmp/otp2config.yml
+        # Download into repo root, not /tmp (/tmp gets wiped at the beginning of the build process)
+        run: curl $PERCY_OTP2_CONFIG_URL --output ./otp2config.yml
         env:
           PERCY_OTP2_CONFIG_URL: ${{ secrets.PERCY_MOCK_OTP2_GEOCODER_CALLTAKER_CONFIG }}
       - name: Build OTP-RR Calltaker
         # Calltaker has a separate config file, so another build should be produced.
         run: yarn build
         env:
-          YAML_CONFIG: /tmp/otp2config.yml
+          YAML_CONFIG: ./otp2config.yml
           JS_CONFIG: ./percy/har-mock-config-call-taker.js
       - name: Take Percy Snapshots (Calltaker)
         run: npx percy exec -- npx jest percy/percy.test.js --force-exit

.gitignore

@@ -21,5 +21,8 @@ dist
 !test-config.yml
 !har-mock-config.yml
 
+# Ignore index.html at the root (it gets copied over during build)
+index.html
+
 # vscode extensions
 .vscode

.nvmrc

@@ -1 +1 @@
-21
+22

__tests__/test-utils/mock-data/i18n-loader.js

@@ -0,0 +1,3 @@
+export async function loadLocaleData(matchedLocale, customMessages) {
+  return {}
+}

a11y/a11y.test.js

@@ -10,7 +10,8 @@ import routes from '../lib/util/webapp-routes'
 
 import { mockServer } from './mock-server'
 
-const OTP_RR_TEST_CONFIG_PATH = '../a11y/test-config.yml'
+// Path relative to OTP-RR repo root.
+const OTP_RR_TEST_CONFIG_PATH = './a11y/test-config.yml'
 
 const MOCK_SERVER_PORT = 9999
 

lib/config.js → example/config.js

@@ -15,7 +15,7 @@ import {
   BatchRoutingPanel,
   BatchSearchScreen,
   MetroItinerary
-} from './index'
+} from '../lib/index'
 
 const ItineraryBody = MetroItinerary
 const LegIcon = ClassicLegIcon

index.css

@@ -12,7 +12,7 @@
 @import url(lib/components/user/nav-login-button.css);
 @import url(lib/components/viewers/viewers.css);
 
-
+@import url(tmp/custom-styles.css);
 
 /* Hide IE/Edge clear button in text input fields. */
 input[type="text"]::-ms-clear {

lib/actions/api.js

@@ -1,4 +1,3 @@
-/* globals fetch */
 import { push, replace } from 'connected-react-router'
 import hash from 'object-hash'
 import haversine from 'haversine'
@@ -15,8 +14,6 @@ import { MainPanelContent } from './ui-constants'
 import v1Actions from './apiV1'
 import v2Actions from './apiV2'
 
-if (typeof fetch === 'undefined') require('isomorphic-fetch')
-
 const { getRoutingParams, getUrlParams } = coreUtils.query
 
 // Generic API actions

lib/actions/apiV1.js

@@ -1,4 +1,5 @@
 import qs from 'qs'
+import maplibre from 'maplibre-gl'
 
 import {
   createQueryAction,
@@ -22,7 +23,7 @@ import { setViewedStop } from './ui'
 
 // Import must be done like this as maplibregl is incompatible with jest
 let maplibregl = null
-if (typeof jest === 'undefined') maplibregl = require('maplibre-gl')
+if (typeof jest === 'undefined') maplibregl = maplibre
 
 const findTrip = (params) =>
   createQueryAction(

lib/actions/ui.js

@@ -6,8 +6,7 @@ import coreUtils from '@opentripplanner/core-utils'
 import {
   getConfigLocales,
   getDefaultLocale,
-  getMatchingLocaleString,
-  loadLocaleData
+  getMatchingLocaleString
 } from '../util/i18n'
 import {
   getItineraryView,
@@ -18,6 +17,7 @@ import {
   ItineraryView
 } from '../util/ui'
 import { getModesForActiveAgencyFilter, getUiUrlParams } from '../util/state'
+import { loadLocaleData } from '../util/i18n-loader'
 
 import {
   clearActiveSearch,