julian
bc54f1e811
- pnpm add maplibre-google-maps (runtime; lazy-imported on Google use). - src/map/core/styles.ts: BasemapDescriptor model with four entries (Esri Satellite / OpenTopoMap / OSM / Google Satellite). Google entry gated on cfg.googleMapsKey via available(cfg). styleCustom() builds a single-raster-source MapLibre style with a glyphs URL for future label rendering. ensureGoogleProtocol() lazy-loads maplibre-google-maps + addProtocol on first use; _googleRegistered guards re-registration. - src/map/core/map-pref-store.ts: Zustand + persist middleware (key: trm-map-prefs, version: 1). Holds basemapId + setBasemap. - src/map/core/basemap-switcher.tsx: floating control top-right of <MapView>. Filters by available(cfg), highlights active, applies via getMap().setStyle(). Mount-time bootstrap (no UI state) + user-driven onClick (with switching state) split to satisfy React 19's react-hooks/set-state-in-effect rule. - src/routes/_authed/monitor.tsx: renders <BasemapSwitcher /> as a child of <MapView>. - src/vite-env.d.ts: ambient module declaration for maplibre-google-maps (no .d.ts ships in the package). Deviations: - BasemapDescriptor.style is buildStyle(cfg): StyleSpecification, not the spec's StyleSpecification|string union. Google needs the cfg key at build time; uniform function shape across all entries is cleaner. - Bootstrap apply path doesn't use the switching UI state (no visual feedback needed during the silent first-paint flip from OSM to user preference). User-click path keeps setSwitching for the in-flight indicator. Bundle: MapLibre is now its own chunk (1MB / 273KB gz), shared across maplibre consumers. Main bundle 371KB / 114KB gz.
trm/spa
End-user single-page app for the TRM platform: race directors, marshals, timekeepers, and (post-Phase 4 of trm/directus) public-facing participants. Talks to trm/directus for REST/GraphQL + business-plane WebSocket and to trm/processor for the live-position WebSocket firehose.
Architectural anchors live in trm/docs/wiki/:
wiki/entities/react-spa.md— this service.wiki/concepts/maps-architecture.md— map subsystem (Phase 2).wiki/synthesis/processor-ws-contract.md— live-position wire spec (Phase 2).wiki/synthesis/directus-schema-draft.md— schema this consumes.
Implementation planning lives in .planning/ — see .planning/ROADMAP.md.
Stack
- Vite 8 + React 19 + TypeScript 6 — SPA build, no SSR.
- Tailwind CSS 4 via
@tailwindcss/vite. - shadcn/ui primitives (slate base, new-york style) — copy-in components owned by us, in
src/ui/primitives/. - TanStack Router + Query — file-based routes, server-state cache.
- Zustand — high-frequency client state (auth, live positions in Phase 2).
@directus/sdk— typed Directus client (REST + WS).zod— runtime validation (config, forms, WS protocol).react-hook-form+@hookform/resolvers— forms.
Common scripts
| Command | Purpose |
|---|---|
pnpm dev |
Start the Vite dev server on :5173. |
pnpm build |
Type-check + production build into dist/. |
pnpm preview |
Serve the built dist/ for smoke testing. |
pnpm typecheck |
Type-check only (no build). |
pnpm lint |
ESLint over the repo. |
pnpm format |
Prettier auto-format. |
pnpm format:check |
Prettier check only (CI gate). |
pnpm test |
Test runner (Phase 3 wires Vitest). |
Adding a shadcn primitive
pnpm dlx shadcn@latest add <component>
Components land in src/ui/primitives/ per components.json's alias config. Edit them freely — they're our code from the moment they land.
Local dev
The Vite dev server (pnpm dev on :5173) proxies three path namespaces to local services so everything runs same-origin — the same topology stage/prod gets via Traefik, no CORS workarounds needed.
| Path | Forwards to | Notes |
|---|---|---|
/api/* |
${VITE_DEV_DIRECTUS_URL}/* |
Directus REST + GraphQL. Default http://localhost:8055. |
/ws-business |
${VITE_DEV_DIRECTUS_URL}/websocket |
Directus business-plane WebSocket (auto-derived ws:// scheme). |
/ws-live |
${VITE_DEV_PROCESSOR_WS_URL}/ |
Processor live-position WebSocket. Default ws://localhost:8081 (Phase 1.5). |
Override per-developer by copying .env.example to .env.local and editing — Vite auto-loads .env.local in any mode and the values flow into vite.config.ts via loadEnv.
If the dev port 5173 collides with another Vite app, run with VITE_PORT=5174 pnpm dev (or pin a different port in vite.config.ts).
Runtime config
/config.json is fetched at app boot, validated with zod, and held in a React context (useRuntimeConfig() hook). One image, multiple environments — the deploy stack overrides the file via a Docker volume mount; the SPA never rebuilds for an env-only change.
| Field | Type | Notes |
|---|---|---|
directusUrl |
URL/path | Directus REST + GraphQL base. Same-origin path or absolute URL. |
liveWsUrl |
URL/path | Processor live-position WebSocket URL. |
businessWsUrl |
URL/path | Directus business-plane WebSocket URL. |
googleMapsKey |
string? | Optional. If absent, Google tile sources are hidden in the UI. |
env |
enum | dev / stage / prod — used in log labels and feature-flag conditionals. |
URLs may be absolute (http(s)://, ws(s)://) or absolute paths starting with /. Relative paths work because the SPA is always same-origin to its backends. The committed public/config.json uses path-only defaults that match the dev proxy.
In stage/prod the deploy stack mounts an override file at /usr/share/nginx/html/config.json; see trm/deploy/README.md (lands in Phase 1.10).
CI
.gitea/workflows/build.yml (lands in Phase 1.9) runs the four gates — typecheck, lint, format:check, build — and publishes a Docker image on push to main.