stadiamaps · ianthetechie · Oct 22, 2024 · Oct 21, 2024 · Oct 21, 2024 · Oct 22, 2024
diff --git a/.github/workflows/wasm-js.yml b/.github/workflows/wasm-js.yml
@@ -28,6 +28,9 @@ jobs:
 
       - run: npm ci
         working-directory: web
+
+      - run: npm run format:check
+        working-directory: web
 
       - run: npm run build
         working-directory: web

diff --git a/guide/src/dev-env-setup.md b/guide/src/dev-env-setup.md
@@ -60,6 +60,11 @@ npm run dev
 npm run build
 ```
 
+#### PR checklist
+
+Run `npm run format:fix` from the `web` directory before committing
+to ensure consistent formatting.
+
 ### iOS
 
 1. Install the latest version of Xcode.

diff --git a/web/.prettierignore b/web/.prettierignore
@@ -0,0 +1 @@
+dist
diff --git a/web/.prettierrc b/web/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "quoteProps": "consistent",
+  "trailingComma": "all"
+}
diff --git a/web/index.html b/web/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -12,7 +12,7 @@
       <button id="simulate">Simulate Navigation</button>
     </p>
 
-    <p style="margin-top: 0;">
+    <p style="margin-top: 0">
       <input type="checkbox" id="voiceGuidance" />
       <label for="voiceGuidance">Enable voice guidance (sound on)</label>
     </p>
@@ -30,8 +30,12 @@
     ></ferrostar-map>
 
     <script type="module">
-      import { FerrostarMap, SimulatedLocationProvider, BrowserLocationProvider } from "@stadiamaps/ferrostar-webcomponents";
-      import {MapLibreSearchControl} from "@stadiamaps/maplibre-search-box";
+      import {
+        FerrostarMap,
+        SimulatedLocationProvider,
+        BrowserLocationProvider,
+      } from "@stadiamaps/ferrostar-webcomponents";
+      import { MapLibreSearchControl } from "@stadiamaps/maplibre-search-box";
       import searchBoxStyle from "@stadiamaps/maplibre-search-box/dist/style.css?inline";
 
       // TODO: type + use TypeScript enum
@@ -48,7 +52,7 @@
             maxAcceptableDeviation: 10.0,
           },
         },
-        snappedLocationCourseFiltering: "Raw"
+        snappedLocationCourseFiltering: "Raw",
       };
 
       async function onload() {
@@ -59,17 +63,26 @@
         const searchBox = new MapLibreSearchControl({
           onResultSelected: async (feature) => {
             const coordinates = feature.geometry.coordinates;
-            const waypoints = [{ coordinate: { lat: coordinates[1], lng: coordinates[0] }, kind: "Break" }];
+            const waypoints = [
+              {
+                coordinate: { lat: coordinates[1], lng: coordinates[0] },
+                kind: "Break",
+              },
+            ];
 
             // FIXME: This is a hack basically to support the demo page that should go away.
-            if (!ferrostar.locationProvider || ferrostar.locationProvider instanceof SimulatedLocationProvider) {
+            if (
+              !ferrostar.locationProvider ||
+              ferrostar.locationProvider instanceof SimulatedLocationProvider
+            ) {
               ferrostar.locationProvider = new BrowserLocationProvider();
             }
 
             // Fetch the user's current location.
             // If we have a cached one that's no older than 30 seconds,
             // skip waiting for an update and use the slightly stale location.
-            const location = await ferrostar.locationProvider.getCurrentLocation(30_000);
+            const location =
+              await ferrostar.locationProvider.getCurrentLocation(30_000);
 
             // Use the acquired user location to request the route
             const routes = await ferrostar.getRoutes(location, waypoints);
@@ -94,9 +107,11 @@
           },
         });
 
-        ferrostar.center = {lng: -122.42, lat: 37.81};
+        ferrostar.center = { lng: -122.42, lat: 37.81 };
         ferrostar.zoom = 18;
-        ferrostar.options = {costing_options: { bicycle: { use_roads: 0.2 } } };
+        ferrostar.options = {
+          costing_options: { bicycle: { use_roads: 0.2 } },
+        };
         ferrostar.customStyles = searchBoxStyle;
         ferrostar.geolocateOnLoad = false;
 
@@ -123,10 +138,15 @@
             speed: null,
           };
 
-          const simulatedWaypoints = [{ coordinate: { lat: 37.807587, lng: -122.428411 }, kind: "Break" }];
+          const simulatedWaypoints = [
+            { coordinate: { lat: 37.807587, lng: -122.428411 }, kind: "Break" },
+          ];
 
           // Request the route
-          const routes = await ferrostar.getRoutes(initialSimulatedLocation, simulatedWaypoints);
+          const routes = await ferrostar.getRoutes(
+            initialSimulatedLocation,
+            simulatedWaypoints,
+          );
           const route = routes[0];
 
           // Set the simulated location provider
@@ -147,7 +167,7 @@
       }
 
       // Initialize Ferrostar and the control buttons
-      if ( document.readyState === "loading" ) {
+      if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", onload);
       } else {
         onload();

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -21,6 +21,8 @@
   "scripts": {
     "dev": "npm run build:site && vite --config vite.config.site.ts",
     "preview": "vite preview",
+    "format:check": "prettier . --check",
+    "format:fix": "prettier . --write",
     "test": "vitest",
     "prepare:core": "cd ../common && wasm-pack build --scope stadiamaps ferrostar --no-default-features --features wasm_js",
     "build": "npm run prepare:core && tsc && vite build",
@@ -37,11 +39,12 @@
   },
   "devDependencies": {
     "@stadiamaps/maplibre-search-box": "^1.1.0",
+    "prettier": "^3.3.3",
     "typescript": "^5.2.2",
     "vite": "^5.4.1",
-    "vitest": "^2.0.5",
+    "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.3.0",
-    "vite-plugin-top-level-await": "^1.4.4"
+    "vitest": "^2.0.5"
   },
   "keywords": [
     "navigation",

diff --git a/web/src/arrival-view.ts b/web/src/arrival-view.ts
@@ -2,7 +2,7 @@ import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 function roundToNearest(value: number, unit: number): number {
-  return Math.round(value / unit) * unit
+  return Math.round(value / unit) * unit;
 }
 
 @customElement("arrival-view")
@@ -50,7 +50,7 @@ export class ArrivalView extends LitElement {
         value = roundToNearest(value, 0.1);
       }
 
-      return `${value.toLocaleString()}km`
+      return `${value.toLocaleString()}km`;
     } else {
       let value;
       if (meters > 100) {
@@ -61,7 +61,7 @@ export class ArrivalView extends LitElement {
         value = roundToNearest(meters, 5);
       }
 
-      return `${value.toLocaleString()}m`
+      return `${value.toLocaleString()}m`;
     }
   }
 
@@ -74,9 +74,21 @@ export class ArrivalView extends LitElement {
     if (this.tripState?.Navigating) {
       return html`
         <div class="arrival-view-card">
-          <p class="arrival-text">${this.getArrivalTime(this.tripState.Navigating.progress.durationRemaining)}</p>
-          <p class="arrival-text">${this.getDurationRemaining(this.tripState.Navigating.progress.durationRemaining)}</p>
-          <p class="arrival-text">${this.getDistanceRemaining(this.tripState.Navigating.progress.distanceRemaining)}</p>
+          <p class="arrival-text">
+            ${this.getArrivalTime(
+              this.tripState.Navigating.progress.durationRemaining,
+            )}
+          </p>
+          <p class="arrival-text">
+            ${this.getDurationRemaining(
+              this.tripState.Navigating.progress.durationRemaining,
+            )}
+          </p>
+          <p class="arrival-text">
+            ${this.getDistanceRemaining(
+              this.tripState.Navigating.progress.distanceRemaining,
+            )}
+          </p>
         </div>
       `;
     }