From 402c63d952b48ab4f6685fbcbbf466e72ad3257a Mon Sep 17 00:00:00 2001
From: Alexandra Petrova <bumblebee1906@gmail.com>
Date: Thu, 11 Jan 2024 03:20:57 +0400
Subject: [PATCH] Strict TS for demo

---
 demo/src/components/AppSidebar.svelte             |  2 +-
 demo/src/examples/1 User Interaction.svelte       | 12 ++++++------
 .../10 Bearings Support and Control.svelte        |  8 ++++----
 demo/src/examples/11 Restyling.svelte             | 14 +++++++-------
 demo/src/examples/12 Distance Measurement.svelte  |  6 +++---
 demo/src/examples/13 Load and Save.svelte         | 12 ++++++------
 demo/src/examples/14 Multiple profiles.svelte     | 12 ++++++------
 demo/src/examples/2 Programmatical Control.svelte |  8 ++++----
 ...3 Mapbox Directions API and Congestions.svelte |  8 ++++----
 demo/src/examples/4 Origin and Destination.svelte |  6 +++---
 .../src/examples/5 Show Routes' Directions.svelte |  6 +++---
 .../src/examples/6 Touch-Friendly Features.svelte |  8 ++++----
 demo/src/examples/7 Events.svelte                 |  6 +++---
 demo/src/examples/8 Aborting Requests.svelte      |  8 ++++----
 .../examples/9 Loading Indicator Control.svelte   |  8 ++++----
 demo/src/main.ts                                  |  2 +-
 demo/src/router.ts                                |  5 +++--
 tsconfig.json                                     | 15 +++++++--------
 tsconfig.lib.json                                 |  3 ++-
 19 files changed, 75 insertions(+), 74 deletions(-)

diff --git a/demo/src/components/AppSidebar.svelte b/demo/src/components/AppSidebar.svelte
index 02f61917..05b2b479 100644
--- 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
index bbf25087..d9f799e3 100644
--- 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
index 3e8f3106..e2f114e5 100644
--- 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
index 7b6226be..ce405f7c 100644
--- 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
index 0bc71f11..8e935eab 100644
--- 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
index e4301a30..5da85ac7 100644
--- 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
index 6a66b38f..3542548e 100644
--- 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
index 5d99a778..313754b7 100644
--- 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
index 19d27d26..25dd5728 100644
--- 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
index 10ed75ae..57ff721d 100644
--- 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
index f003d6d2..961d7f14 100644
--- 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
index 41c641ea..591eee1e 100644
--- 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
index fcb25218..c8db68fd 100644
--- 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
index b5a9922f..76f85583 100644
--- 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
index 835c9e84..7e2448fe 100644
--- 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
index 39c1fe3e..80f748ac 100644
--- 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
index 40a6f6c3..d6a72570 100644
--- 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
index 48cce98e..f34b3341 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
     "noEmit": true,
-    "strict": false,
+    "strict": true,
     "target": "esnext",
     "useDefineForClassFields": true,
     "module": "esnext",
@@ -10,12 +10,11 @@
     "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
index 2ca78b24..3e8d077e 100644
--- 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": [