Strict TS for demo

maplibre · Jan 11, 2024 · 402c63d · 402c63d
1 parent 0badb57
commit 402c63d
Show file tree

Hide file tree

Showing 19 changed files with 75 additions and 74 deletions.
diff --git a/demo/src/components/AppSidebar.svelte b/demo/src/components/AppSidebar.svelte
@@ -4,7 +4,7 @@
 
   export let noHeader = false;
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 </script>
 
 <aside class="basis-full lg:basis-1/3 overflow-hidden shadow-xl">

diff --git a/demo/src/examples/1 User Interaction.svelte b/demo/src/examples/1 User Interaction.svelte
@@ -8,11 +8,11 @@
   import style from "../assets/map/style/style.json?url";
   import MapLibreGlDirections from "@maplibre/maplibre-gl-directions";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let map: maplibregl.Map | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let map: maplibregl.Map;
+  let directions: MapLibreGlDirections;
   let interactive = true;
   let hoverable = false;
   let routeSwitch = false;
@@ -47,7 +47,7 @@
     });
   });
 
-  let message;
+  let message: string;
 
   $: if (directions) {
     if (directions.hoverable !== hoverable) {
@@ -61,7 +61,7 @@
     }
 
     directions.on("fetchroutesend", (event) => {
-      if (event.data.code !== "Ok") {
+      if (event.data && event.data.code !== "Ok") {
         message = `${event.data.code}: ${event.data.message ?? "no details available."}`;
       } else {
         message = "";

diff --git a/demo/src/examples/10 Bearings Support and Control.svelte b/demo/src/examples/10 Bearings Support and Control.svelte
@@ -11,11 +11,11 @@
     type BearingsControlConfiguration,
   } from "@maplibre/maplibre-gl-directions";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let map: Map | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let map: Map;
+  let directions: MapLibreGlDirections;
 
   onMount(() => {
     map = new maplibregl.Map({

diff --git a/demo/src/examples/11 Restyling.svelte b/demo/src/examples/11 Restyling.svelte
@@ -13,10 +13,10 @@
   import balloonHoverpointImgUrl from "../assets/map/images/balloon-hoverpoint.png?url";
   import routelineImgUrl from "../assets/map/images/routeline.png?url";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let directions: MapLibreGlDirections;
 
   onMount(() => {
     const map = new maplibregl.Map({
@@ -33,22 +33,22 @@
       // make sure to load and add the images used by the custom directions' styles first:
       // a balloon for thw waypoints,
       map.loadImage(balloonWaypointImgUrl, (error, image) => {
-        if (!error) map.addImage("balloon-waypoint", image);
+        if (!error && image) map.addImage("balloon-waypoint", image);
       });
 
       // a balloon for the snappoints,
       map.loadImage(balloonSnappointImgUrl, (error, image) => {
-        if (!error) map.addImage("balloon-snappoint", image);
+        if (!error && image) map.addImage("balloon-snappoint", image);
       });
 
       // a balloon for the hoverpoints
       map.loadImage(balloonHoverpointImgUrl, (error, image) => {
-        if (!error) map.addImage("balloon-hoverpoint", image);
+        if (!error && image) map.addImage("balloon-hoverpoint", image);
       });
 
       // and a pattern-image for the routelines.
       map.loadImage(routelineImgUrl, (error, image) => {
-        if (!error) map.addImage("routeline", image);
+        if (!error && image) map.addImage("routeline", image);
       });
 
       directions = new MapLibreGlDirections(map, {

diff --git a/demo/src/examples/12 Distance Measurement.svelte b/demo/src/examples/12 Distance Measurement.svelte
@@ -7,10 +7,10 @@
   import "maplibre-gl/dist/maplibre-gl.css";
   import style from "../assets/map/style/style.json?url";
   import DistanceMeasurementMapLibreGlDirections, { config } from "../assets/map/distance-measurement-directions";
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let directions: DistanceMeasurementMapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let directions: DistanceMeasurementMapLibreGlDirections;
 
   let totalDistance = 0;
 

diff --git a/demo/src/examples/13 Load and Save.svelte b/demo/src/examples/13 Load and Save.svelte
@@ -8,10 +8,10 @@
   import style from "../assets/map/style/style.json?url";
   import CustomMapLibreGlDirections from "../assets/map/custom-directions";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let directions: CustomMapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let directions: CustomMapLibreGlDirections;
 
   onMount(() => {
     const map = new maplibregl.Map({
@@ -39,9 +39,9 @@
   let noDataToLoad = !checkDataToLoad();
 
   function loadRoute() {
-    directions.setWaypointsFeatures(JSON.parse(localStorage.getItem("saved-waypoints-features")));
-    directions.setSnappointsFeatures(JSON.parse(localStorage.getItem("saved-snappoints-features")));
-    directions.setRoutelinesFeatures(JSON.parse(localStorage.getItem("saved-routelines-features")));
+    directions.setWaypointsFeatures(JSON.parse(localStorage.getItem("saved-waypoints-features") || ""));
+    directions.setSnappointsFeatures(JSON.parse(localStorage.getItem("saved-snappoints-features") || ""));
+    directions.setRoutelinesFeatures(JSON.parse(localStorage.getItem("saved-routelines-features") || ""));
   }
 
   function saveRoute() {

diff --git a/demo/src/examples/14 Multiple profiles.svelte b/demo/src/examples/14 Multiple profiles.svelte
@@ -10,11 +10,11 @@
   import { shuffle } from "lodash";
   import { colors } from "src/directions/layers";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let map: Map | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let map: Map;
+  let directions: MapLibreGlDirections;
 
   onMount(() => {
     const _map = new maplibregl.Map({
@@ -53,11 +53,11 @@
     foot: colors.routelineFoot,
   };
 
-  const initialProfiles = ["car", "bike", "car", "car", "foot"];
+  const initialProfiles: (keyof typeof profileColors)[] = ["car", "bike", "car", "car", "foot"];
 
   let profiles = initialProfiles;
 
-  $: displayedProfiles = profiles.reduce((res, profile) => {
+  $: displayedProfiles = profiles.reduce<typeof profiles>((res, profile) => {
     if (res[res.length - 1] !== profile) {
       res.push(profile);
     }

diff --git a/demo/src/examples/2 Programmatical Control.svelte b/demo/src/examples/2 Programmatical Control.svelte
@@ -8,11 +8,11 @@
   import style from "../assets/map/style/style.json?url";
   import MapLibreGlDirections from "@maplibre/maplibre-gl-directions";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let map: Map | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let map: Map;
+  let directions: MapLibreGlDirections;
 
   onMount(() => {
     const _map = new maplibregl.Map({

diff --git a/demo/src/examples/3 Mapbox Directions API and Congestions.svelte b/demo/src/examples/3 Mapbox Directions API and Congestions.svelte
@@ -8,11 +8,11 @@
   import style from "../assets/map/style/style.json?url";
   import MapLibreGlDirections from "@maplibre/maplibre-gl-directions";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let map: maplibregl.Map | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let map: maplibregl.Map;
+  let directions: MapLibreGlDirections;
   let annotations = "congestion";
 
   onMount(() => {

diff --git a/demo/src/examples/4 Origin and Destination.svelte b/demo/src/examples/4 Origin and Destination.svelte
@@ -8,10 +8,10 @@
   import style from "../assets/map/style/style.json?url";
   import MapLibreGlDirections, { layersFactory } from "@maplibre/maplibre-gl-directions";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let directions: MapLibreGlDirections;
 
   onMount(() => {
     const map = new maplibregl.Map({

diff --git a/demo/src/examples/5 Show Routes' Directions.svelte b/demo/src/examples/5 Show Routes' Directions.svelte
@@ -9,10 +9,10 @@
   import MapLibreGlDirections, { layersFactory } from "@maplibre/maplibre-gl-directions";
   import DirectionArrowImageUrl from "../assets/map/images/direction-arrow.png?url";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let directions: MapLibreGlDirections;
 
   onMount(() => {
     const map = new maplibregl.Map({

diff --git a/demo/src/examples/6 Touch-Friendly Features.svelte b/demo/src/examples/6 Touch-Friendly Features.svelte
@@ -8,11 +8,11 @@
   import style from "../assets/map/style/style.json?url";
   import MapLibreGlDirections, { layersFactory } from "@maplibre/maplibre-gl-directions";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let map: Map | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let map: Map;
+  let directions: MapLibreGlDirections;
   // `maxTouchPoints` isn't recognized by TS. Safe to ignore.
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore

diff --git a/demo/src/examples/7 Events.svelte b/demo/src/examples/7 Events.svelte
@@ -8,10 +8,10 @@
   import style from "../assets/map/style/style.json?url";
   import MapLibreGlDirections from "@maplibre/maplibre-gl-directions";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let directions: MapLibreGlDirections;
   let messages: string[] = [];
 
   onMount(() => {

diff --git a/demo/src/examples/8 Aborting Requests.svelte b/demo/src/examples/8 Aborting Requests.svelte
@@ -8,11 +8,11 @@
   import style from "../assets/map/style/style.json?url";
   import MapLibreGlDirections from "@maplibre/maplibre-gl-directions";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let map: Map | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let map: Map;
+  let directions: MapLibreGlDirections;
   let requestTimeout = 1000;
 
   onMount(() => {

diff --git a/demo/src/examples/9 Loading Indicator Control.svelte b/demo/src/examples/9 Loading Indicator Control.svelte
@@ -8,11 +8,11 @@
   import style from "../assets/map/style/style.json?url";
   import MapLibreGlDirections, { LoadingIndicatorControl } from "@maplibre/maplibre-gl-directions";
 
-  const meta = examples.find((example) => example.path === $location);
+  const meta = examples.find((example) => example.path === $location)!;
 
-  let mapRef: HTMLElement | undefined = undefined;
-  let map: Map | undefined = undefined;
-  let directions: MapLibreGlDirections | undefined = undefined;
+  let mapRef: HTMLElement;
+  let map: Map;
+  let directions: MapLibreGlDirections;
 
   onMount(() => {
     map = new maplibregl.Map({

diff --git a/demo/src/main.ts b/demo/src/main.ts
@@ -2,5 +2,5 @@ import App from "./App.svelte";
 import "./assets/styles/index.css";
 
 export default new App({
-  target: document.getElementById("app"),
+  target: document.getElementById("app")!,
 });
diff --git a/demo/src/router.ts b/demo/src/router.ts
@@ -1,8 +1,9 @@
 import Menu from "./Menu.svelte";
+import type { ComponentType } from "svelte";
 
 export const examples = Object.entries(import.meta.glob("./examples/**.svelte", { eager: true })).map(
   ([path, component]) => {
-    const parsedFileName = path.match(/\/(\d+)\s([^/]+)\./);
+    const parsedFileName = path.match(/\/(\d+)\s([^/]+)\./)!;
     const index = parseInt(parsedFileName[1]);
     const name = parsedFileName[2];
 
@@ -16,7 +17,7 @@ export const examples = Object.entries(import.meta.glob("./examples/**.svelte",
   },
 );
 
-const routes = {};
+const routes: Record<string, ComponentType> = {};
 
 examples.forEach((example) => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment

diff --git a/tsconfig.json b/tsconfig.json
@@ -2,20 +2,19 @@
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
     "noEmit": true,
-    "strict": false,
+    "strict": true,
     "target": "esnext",
     "useDefineForClassFields": true,
     "module": "esnext",
     "resolveJsonModule": true,
     "baseUrl": ".",
     "allowJs": true,
     "checkJs": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "paths": {
+      "@placemarkio/polyline": ["node_modules/@placemarkio/polyline/dist/index.d.ts"]
+    },
+    "types": []
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte", "demo/**/*.d.ts", "demo/**/*.ts", "demo/**/*.svelte"],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte", "demo/**/*.d.ts", "demo/**/*.ts", "demo/**/*.svelte"]
 }
diff --git a/tsconfig.lib.json b/tsconfig.lib.json
@@ -16,7 +16,8 @@
     "isolatedModules": true,
     "paths": {
       "@placemarkio/polyline": ["node_modules/@placemarkio/polyline/dist/index.d.ts"]
-    }
+    },
+    "types": []
   },
   "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte"],
   "references": [