feat(ts): better dependency injection

- [x] Ref - https://logaretm.com/blog/type-safe-provide-inject/
geoql · Nov 16, 2021 · 20f94a7 · 20f94a7
1 parent 1e4b04b
commit 20f94a7
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 34 deletions.
diff --git a/components/map/CommonMap.vue b/components/map/CommonMap.vue
@@ -281,8 +281,8 @@
 
 <script lang="ts">
   import { useNuxtApp } from '#app';
-  import { defineComponent, readonly, computed } from 'vue';
-  import type { SetupContext } from 'vue';
+  import { defineComponent, readonly, computed, ref } from 'vue';
+  import type { Ref, SetupContext } from 'vue';
   import type { EventData, LngLatLike, Map } from 'mapbox-gl';
   import { useMap } from '@/stores/useMap';
   import VMap from '@/lib/v-mapbox';
@@ -299,7 +299,7 @@
     setup(_, { emit }: SetupContext) {
       const { $config } = useNuxtApp();
       const store = useMap();
-      let map = readonly({} as Map);
+      let map = readonly(ref({} as Map));
       let markers = {
         data: [
           {
@@ -324,7 +324,7 @@
        * @param {Map} e - Mapbox GL Map object
        * @returns {void}
        */
-      function onMapLoaded(e: Map): void {
+      function onMapLoaded(e: Ref<Map>): void {
         map = e;
         const events: string[] = [
           'idle',
@@ -335,10 +335,10 @@
           'sourcedataloading',
         ];
         events.forEach((event) => {
-          map.on(event, () => {
+          map.value.on(event, () => {
             if (event === 'sourcedata' || event === 'sourcedataloading') {
               const waiting = () => {
-                if (!map.areTilesLoaded()) {
+                if (!map.value.areTilesLoaded()) {
                   store.setTilesLoaded(false);
                   setTimeout(waiting, 200);
                 } else {
@@ -349,7 +349,7 @@
             }
             if (event === 'style.load') {
               const waiting = () => {
-                if (!map.isStyleLoaded()) {
+                if (!map.value.isStyleLoaded()) {
                   store.setStyleChanged(false);
                   setTimeout(waiting, 200);
                 } else {
@@ -400,7 +400,7 @@
        * @returns {void} void
        */
       function onMapPitchEnd(): void {
-        const bearing = parseInt(map.getBearing().toFixed(), 10);
+        const bearing = parseInt(map.value.getBearing().toFixed(), 10);
         store.setBearing(bearing);
       }
       /**
@@ -410,7 +410,7 @@
        * @returns {void} void
        */
       function onMapZoomEnd(): void {
-        store.setZoom(map.getZoom());
+        store.setZoom(map.value.getZoom());
       }
       /**
        * Zooms the map in by currentZoom + 1
@@ -419,8 +419,8 @@
        */
       function mapZoomIn(): void {
         if (map !== null) {
-          const currentZoom = map.getZoom();
-          map.zoomTo(currentZoom + 1);
+          const currentZoom = map.value.getZoom();
+          map.value.zoomTo(currentZoom + 1);
           setMapState();
         }
       }
@@ -431,8 +431,8 @@
        */
       function mapZoomOut(): void {
         if (map !== null) {
-          const currentZoom = map.getZoom();
-          map.zoomTo(currentZoom - 1);
+          const currentZoom = map.value.getZoom();
+          map.value.zoomTo(currentZoom - 1);
           setMapState();
         }
       }
@@ -452,7 +452,7 @@
         pitch: number;
         bearing: number;
       }): void {
-        map.easeTo({
+        map.value.easeTo({
           pitch,
           bearing,
         });
@@ -475,7 +475,7 @@
         lat: number;
         zoom: number;
       }): void {
-        map.flyTo({
+        map.value.flyTo({
           center: [lng, lat],
           zoom,
           speed: 3,
@@ -498,7 +498,7 @@
             }
           });
         });
-        map.setStyle(e);
+        map.value.setStyle(e);
       }
       /**
        * Toggles the tool enabled on the map
@@ -537,10 +537,10 @@
        * @returns {void} void
        */
       function setMapState(): void {
-        const { lng, lat } = map.getCenter();
+        const { lng, lat } = map.value.getCenter();
         store.setCenter([lng, lat]);
-        store.setZoom(map.getZoom());
-        store.setBounds(map.getBounds().toArray());
+        store.setZoom(map.value.getZoom());
+        store.setBounds(map.value.getBounds().toArray());
         store.setCoordinates({ lat, lng });
       }
       return {

diff --git a/lib/v-mapbox/map/VMap.vue b/lib/v-mapbox/map/VMap.vue
@@ -1,8 +1,14 @@
 <script lang="ts">
   import { Map, MapboxOptions, MapEventType } from 'mapbox-gl';
-  import { ref, reactive, onMounted, provide, defineComponent, h } from 'vue';
+  import { ref, onMounted, provide, defineComponent, h } from 'vue';
   import type { PropType, SetupContext, Ref } from 'vue';
   import { mapEvents } from '../constants/events';
+  import {
+    MapKey,
+    MapLoadedKey,
+    MapStylesLoadedKey,
+    MapTilesLoadedKey,
+  } from '../types/symbols';
 
   export default defineComponent({
     name: 'VMap',
@@ -14,36 +20,36 @@
       },
     },
     setup(props, { emit, slots }: SetupContext) {
-      let map: Map = reactive({}) as Map;
+      let map: Ref<Map> = ref({} as Map);
       let events: Ref<Array<keyof MapEventType>> = ref(mapEvents);
       let loaded: Ref<boolean> = ref(false);
       let styleChanged: Ref<boolean> = ref(false);
       let tilesLoaded: Ref<boolean> = ref(false);
 
       onMounted(() => {
-        map = new Map({
+        map.value = new Map({
           ...props.options,
           container: 'map',
         });
         loaded.value = true;
-        provide('map.ui.loaded', loaded);
-        provide('map.ui.style-loaded', styleChanged);
-        provide('map.ui.tiles-loaded', tilesLoaded);
-        provide('map.initialized.state', map);
+        provide(MapLoadedKey, loaded);
+        provide(MapKey, map);
+        provide(MapStylesLoadedKey, styleChanged);
+        provide(MapTilesLoadedKey, tilesLoaded);
         listenMapEvents();
       });
 
       function listenMapEvents(): void {
         // Listen for events
         events.value.forEach((e) => {
-          map.on(e, (evt) => {
+          map.value.on(e, (evt) => {
             switch (e) {
               case 'load':
                 emit('load', map);
                 break;
               case 'sourcedata' || 'sourcedataloading':
                 const sourceTimeout = () => {
-                  if (!map.areTilesLoaded()) {
+                  if (!map.value.areTilesLoaded()) {
                     tilesLoaded.value = false;
                     setTimeout(sourceTimeout, 200);
                   } else {
@@ -56,7 +62,7 @@
               // @ts-ignore
               case 'style.load':
                 const styleTimeout = () => {
-                  if (!map.isStyleLoaded()) {
+                  if (!map.value.isStyleLoaded()) {
                     styleChanged.value = false;
                     setTimeout(styleTimeout, 200);
                   } else {

diff --git a/lib/v-mapbox/markers/VMarker.vue b/lib/v-mapbox/markers/VMarker.vue
@@ -4,10 +4,12 @@
   </section>
 </template>
 <script lang="ts">
-  import { defineComponent, inject, onMounted, ref } from 'vue';
+  import { defineComponent, onMounted } from 'vue';
   import type { PropType, Ref, SetupContext } from 'vue';
   import { EventData, Marker } from 'mapbox-gl';
-  import type { Map, MarkerOptions, LngLatLike } from 'mapbox-gl';
+  import type { MarkerOptions, LngLatLike } from 'mapbox-gl';
+  import { MapKey, MapLoadedKey } from '../types/symbols';
+  import { injectStrict } from '../utils';
 
   export default defineComponent({
     name: 'VMarker',
@@ -29,8 +31,8 @@
       },
     },
     setup(props, { emit }: SetupContext) {
-      let map = inject('map.initialized.state') as Map;
-      let loaded = inject('map.ui.loaded') as Ref<boolean>;
+      let map = injectStrict(MapKey);
+      let loaded = injectStrict(MapLoadedKey);
       let marker: Marker = new Marker(props.options);
 
       onMounted(() => {
@@ -64,7 +66,7 @@
        * @returns {void}
        */
       function addToMap(): void {
-        marker.addTo(map);
+        marker.addTo(map.value);
         emit('added', { marker });
       }
       /**

diff --git a/lib/v-mapbox/types/symbols.ts b/lib/v-mapbox/types/symbols.ts
@@ -0,0 +1,9 @@
+import type { Map } from 'mapbox-gl';
+import type { InjectionKey, Ref } from 'vue';
+
+const MapKey: InjectionKey<Ref<Map>> = Symbol('Map');
+const MapLoadedKey: InjectionKey<Ref<boolean>> = Symbol('MapLoaded');
+const MapStylesLoadedKey: InjectionKey<Ref<boolean>> = Symbol('MapStyleLoaded');
+const MapTilesLoadedKey: InjectionKey<Ref<boolean>> = Symbol('MapTilesLoaded');
+
+export { MapKey, MapLoadedKey, MapStylesLoadedKey, MapTilesLoadedKey };
diff --git a/lib/v-mapbox/utils/index.ts b/lib/v-mapbox/utils/index.ts
@@ -0,0 +1,10 @@
+import type { InjectionKey } from 'vue';
+import { inject } from 'vue';
+
+export function injectStrict<T>(key: InjectionKey<T>, fallback?: T) {
+  const resolved = inject(key, fallback);
+  if (!resolved) {
+    throw new Error(`Could not resolve ${key.description}`);
+  }
+  return resolved;
+}