chore: minor housekeeping 🍿

Signed-off-by: Vinayak Kulkarni <[email protected]>

lib/v-mapbox/constants/events/layer.ts

@@ -1,4 +1,4 @@
-import { MapLayerEventType } from 'maplibre-gl';
+import type { MapLayerEventType } from 'maplibre-gl';
 
 export const mapLayerEvents: Array<keyof MapLayerEventType> = [
   'click',

lib/v-mapbox/constants/events/map.ts

@@ -1,4 +1,4 @@
-import { MapEventType } from 'maplibre-gl';
+import type { MapEventType } from 'maplibre-gl';
 
 export const mapEvents: Array<keyof MapEventType> = [
   'error',

lib/v-mapbox/constants/events/popup.ts

@@ -1 +1 @@
-export const popupEvents = ['open', 'close'];
+export const popupEvents = ['open', 'close'] as Array<'open' | 'close'>;

lib/v-mapbox/controls/attribution/VControlAttribution.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-  import type { AttributionOptions, ControlPosition } from './types';
   import { AttributionControl } from 'maplibre-gl';
   import { onMounted } from 'vue';
   import { MapKey, injectStrict } from '../../utils';
+  import type { AttributionControlOptions, ControlPosition } from './types';
 
-  const defaultOptions: AttributionOptions = {
+  const defaultOptions: AttributionControlOptions = {
     compact: false,
     customAttribution: undefined,
   };
 
   const props = withDefaults(
     defineProps<{
-      options?: AttributionOptions;
+      options?: AttributionControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -22,7 +22,7 @@
 
   const slots = useSlots();
 
-  let map = injectStrict(MapKey);
+  const map = injectStrict(MapKey);
 
   onMounted(() => {
     addControl();
@@ -36,7 +36,7 @@
       };
     }
     if (slots && slots.default?.()) {
-      options.customAttribution = slots.default()[0]
+      options.customAttribution = slots.default()[0]!
         .children as unknown as string;
     }
     const control = new AttributionControl(options);
@@ -45,5 +45,5 @@
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>

lib/v-mapbox/controls/attribution/types.ts

@@ -1 +1 @@
-export type { AttributionOptions, ControlPosition } from 'maplibre-gl';
+export type { AttributionControlOptions, ControlPosition } from 'maplibre-gl';

lib/v-mapbox/controls/fullscreen/VControlFullscreen.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-  import type { ControlPosition, FullscreenOptions } from './types';
   import { FullscreenControl } from 'maplibre-gl';
   import { onMounted } from 'vue';
   import { MapKey, injectStrict } from '../../utils';
+  import type { ControlPosition, FullscreenControlOptions } from './types';
 
-  const defaultOptions: FullscreenOptions = {
+  const defaultOptions: FullscreenControlOptions = {
     container: undefined,
   };
 
   const props = withDefaults(
     defineProps<{
-      options?: FullscreenOptions;
+      options?: FullscreenControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -19,7 +19,7 @@
     },
   );
 
-  let map = injectStrict(MapKey);
+  const map = injectStrict(MapKey);
 
   onMounted(() => {
     addControl();

lib/v-mapbox/controls/fullscreen/types.ts

@@ -1 +1 @@
-export type { ControlPosition, FullscreenOptions } from 'maplibre-gl';
+export type { FullscreenControlOptions, ControlPosition } from 'maplibre-gl';

lib/v-mapbox/controls/geolocate/VControlGeolocate.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-  import type { ControlPosition, GeolocateOptions } from './types';
   import { GeolocateControl } from 'maplibre-gl';
   import { onMounted } from 'vue';
-  import { geolocateControlEvents as events } from './events';
   import { MapKey, injectStrict } from '../../utils';
+  import { geolocateControlEvents as events } from './events';
+  import type { ControlPosition, GeolocateControlOptions } from './types';
 
-  const defaultOptions: GeolocateOptions = {
+  const defaultOptions: GeolocateControlOptions = {
     fitBoundsOptions: {
       linear: false,
       offset: [0, 0],
@@ -23,7 +23,7 @@
 
   const props = withDefaults(
     defineProps<{
-      options?: GeolocateOptions;
+      options?: GeolocateControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -34,7 +34,7 @@
 
   const emit = defineEmits(events);
 
-  let map = injectStrict(MapKey);
+  const map = injectStrict(MapKey);
 
   onMounted(() => {
     addControl();

lib/v-mapbox/controls/geolocate/types.ts

@@ -1 +1 @@
-export type { ControlPosition, GeolocateOptions } from 'maplibre-gl';
+export type { GeolocateControlOptions, ControlPosition } from 'maplibre-gl';

lib/v-mapbox/controls/navigation/VControlNavigation.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-  import type { ControlPosition, NavigationOptions } from './types';
   import { NavigationControl } from 'maplibre-gl';
   import { onMounted, inject } from 'vue';
   import { MapKey } from '../../utils';
+  import type { ControlPosition, NavigationOptions } from './types';
 
   const defaultOptions: NavigationOptions = {
     showCompass: true,

lib/v-mapbox/controls/scale/VControlScale.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-  import type { ControlPosition, ScaleOptions } from './types';
   import { onMounted, inject } from 'vue';
   import { ScaleControl } from 'maplibre-gl';
   import { MapKey } from '../../utils';
+  import type { ControlPosition, ScaleControlOptions } from './types';
 
-  const defaultOptions: ScaleOptions = {
+  const defaultOptions: ScaleControlOptions = {
     maxWidth: 100,
     unit: 'metric',
   };
 
   const props = withDefaults(
     defineProps<{
-      options?: ScaleOptions;
+      options?: ScaleControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -31,5 +31,3 @@
     map?.value.addControl(control, props.position);
   };
 </script>
-
-<template></template>

lib/v-mapbox/controls/scale/types.ts

@@ -1 +1 @@
-export type { ControlPosition, ScaleOptions } from 'maplibre-gl';
+export type { ControlPosition, ScaleControlOptions } from 'maplibre-gl';

lib/v-mapbox/layers/maplibre/canvas/VLayerMaplibreCanvas.vue

@@ -23,8 +23,8 @@
       before: '',
     },
   );
-  let map = injectStrict(MapKey);
-  let loaded: Ref<boolean> = ref(false);
+  const map = injectStrict(MapKey);
+  const loaded: Ref<boolean> = ref(false);
 
   const layer = {
     ...props.layer,
@@ -62,5 +62,5 @@
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>

lib/v-mapbox/layers/maplibre/geojson/VLayerMaplibreGeojson.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
   import type { Ref } from 'vue';
-  import type { Props } from './types';
   import { onMounted, onBeforeUnmount, ref, watch } from 'vue';
   import { injectStrict, MapKey } from '../../../utils';
+  import type { Props } from './types';
 
   const props = withDefaults(defineProps<Props>(), {
     sourceId: 'maplibre.gl-geojson-source',
@@ -11,8 +11,8 @@
     // layer: {} as LayerSpecification,
     before: '',
   });
-  let map = injectStrict(MapKey);
-  let loaded: Ref<boolean> = ref(false);
+  const map = injectStrict(MapKey);
+  const loaded: Ref<boolean> = ref(false);
 
   const layer = {
     ...props.layer,
@@ -51,12 +51,11 @@
   });
 
   const addLayer = (): void => {
-    console.log('props: ', props);
     map.value.addSource(layer.source, props.source);
     map.value.addLayer(layer, props.before);
   };
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>

lib/v-mapbox/layers/maplibre/image/VLayerMaplibreImage.vue

@@ -1,88 +1,76 @@
-<script lang="ts">
+<script setup lang="ts">
   import type {
     LayerSpecification as AnyLayer,
     ImageSourceSpecification as ImageSourceRaw,
   } from 'maplibre-gl';
-  import type { PropType, Ref } from 'vue';
-  import { defineComponent, onMounted, ref, watch } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
   import { injectStrict, MapKey } from '../../../utils';
 
-  export default defineComponent({
-    name: 'VLayerMapboxImage',
-    props: {
-      sourceId: {
-        type: String as PropType<string>,
-        default: 'maplibre.gl-image-source',
-        required: true,
-      },
-      layerId: {
-        type: String as PropType<string>,
-        default: 'maplibre.gl-image-layer',
-        required: true,
-      },
-      source: {
-        type: Object as PropType<ImageSourceRaw>,
-        required: true,
-      },
-      layer: {
-        type: Object as PropType<AnyLayer>,
-        default: () => ({}),
-        required: true,
-      },
-      before: {
-        type: String as PropType<string>,
-        default: '',
-        required: false,
-      },
+  const props = defineProps({
+    sourceId: {
+      type: String,
+      default: 'maplibre.gl-image-source',
+      required: true,
     },
-    setup(props) {
-      let map = injectStrict(MapKey);
-      let loaded: Ref<boolean> = ref(false);
+    layerId: {
+      type: String,
+      default: 'maplibre.gl-image-layer',
+      required: true,
+    },
+    source: {
+      type: Object as PropType<ImageSourceRaw>,
+      required: true,
+    },
+    layer: {
+      type: Object as PropType<AnyLayer>,
+      default: () => ({}),
+      required: true,
+    },
+    before: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  });
 
-      const layer = {
-        ...props.layer,
-        id: props.layerId,
-        source: props.sourceId,
-      };
+  const map = injectStrict(MapKey);
+  const loaded = ref(false);
 
-      map.value.on('style.load', () => {
-        // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
-        const styleTimeout = () => {
-          if (!map.value.isStyleLoaded()) {
-            loaded.value = false;
-            setTimeout(styleTimeout, 200);
-          } else {
-            loaded.value = true;
-          }
-        };
-        styleTimeout();
-      });
+  const layer = {
+    ...props.layer,
+    id: props.layerId,
+    source: props.sourceId,
+  };
 
-      /**
-       * Watcher(s)
-       */
-      watch(loaded, (value) => {
-        if (value) {
-          addLayer();
-        }
-      });
+  map.value.on('style.load', () => {
+    // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
+    const styleTimeout = () => {
+      if (!map.value.isStyleLoaded()) {
+        loaded.value = false;
+        setTimeout(styleTimeout, 200);
+      } else {
+        loaded.value = true;
+      }
+    };
+    styleTimeout();
+  });
 
-      onMounted(() => {
-        addLayer();
-      });
+  watch(loaded, (value) => {
+    if (value) {
+      addLayer();
+    }
+  });
 
-      /**
-       * Re–adds the layer when style changed
-       * @returns {void}
-       */
-      function addLayer(): void {
-        map.value.addSource(props.sourceId, props.source);
-        map.value.addLayer(layer, props.before);
-      }
-    },
+  onMounted(() => {
+    addLayer();
   });
+
+  const addLayer = (): void => {
+    map.value.addSource(props.sourceId, props.source);
+    map.value.addLayer(layer, props.before);
+  };
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>