fix: remove duplicate props causing ts-check fail + remove await impo…

…rt on maplibre-gl

components/MainMap/MapFeatures.vue

@@ -1,55 +1,27 @@
 <template>
   <div class="tw-flex tw-flex-grow">
-    <MapBase
-      ref="mapBase"
-      :features="features"
-      :bounds="defaultBounds"
-      :fit-bounds-padding-options="fitBoundsPaddingOptions"
-      :extra-attributions="extraAttributions"
-      :map-style="selectedBackground"
-      :rotate="!device.touch"
-      :show-attribution="!small"
-      :off-map-attribution="device.smallScreen && !small"
-      :hide-control="small"
-      :style-icon-filter="styleIconFilter"
-      :cooperative-gestures="cooperativeGestures"
-      :boundary-area="boundaryArea"
-      hash="map"
-      @map-init="onMapInit"
-      @map-data="onMapRender"
-      @map-dragend="onMapRender"
-      @map-moveend="onMapRender"
-      @map-resize="onMapRender"
-      @map-rotateend="onMapRender"
-      @map-touchmove="onMapRender"
-      @map-zoomend="onMapRender"
-      @map-style-load="onMapStyleLoad"
-      @feature-click="updateSelectedFeature"
-    >
+    <MapBase ref="mapBase" :features="features" :bounds="defaultBounds"
+      :fit-bounds-padding-options="fitBoundsPaddingOptions" :extra-attributions="extraAttributions"
+      :map-style="selectedBackground" :rotate="!device.touch" :show-attribution="!small"
+      :off-map-attribution="device.smallScreen && !small" :hide-control="small" :style-icon-filter="styleIconFilter"
+      :cooperative-gestures="cooperativeGestures" :boundary-area="boundaryArea" hash="map" @map-init="onMapInit"
+      @map-data="onMapRender" @map-dragend="onMapRender" @map-moveend="onMapRender" @map-resize="onMapRender"
+      @map-rotateend="onMapRender" @map-touchmove="onMapRender" @map-zoomend="onMapRender"
+      @map-style-load="onMapStyleLoad" @feature-click="updateSelectedFeature">
       <template #controls>
         <MapControlsExplore v-if="explorerModeEnabled" :map="mapTyped" />
         <MapControls3D :map="mapTyped" />
-        <MapControlsBackground
-          :map="mapTyped"
-          :backgrounds="availableStyles"
-          :initial-background="selectedBackground"
-          @change-background="selectedBackground = $event"
-        />
+        <MapControlsBackground :map="mapTyped" :backgrounds="availableStyles" :initial-background="selectedBackground"
+          @change-background="selectedBackground = $event" />
       </template>
       <template #body>
         <slot></slot>
       </template>
     </MapBase>
     <SnackBar @click="handleSnackAction" />
-    <div
-      v-if="isLoadingFeatures"
-      class="tw-fixed tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-black tw-bg-opacity-80"
-    >
-      <FontAwesomeIcon
-        icon="spinner"
-        class="tw-text-zinc-400 tw-animate-spin"
-        size="3x"
-      />
+    <div v-if="isLoadingFeatures"
+      class="tw-fixed tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-black tw-bg-opacity-80">
+      <FontAwesomeIcon icon="spinner" class="tw-text-zinc-400 tw-animate-spin" size="3x" />
     </div>
   </div>
 </template>
@@ -67,6 +39,7 @@ import type {
   GeoJSONSource,
   StyleSpecification,
 } from 'maplibre-gl'
+import { Marker } from 'maplibre-gl'
 import { mapActions, mapState, mapWritableState } from 'pinia'
 import { PropType, ref } from 'vue'
 
@@ -88,8 +61,6 @@ import { filterRouteByCategories, filterRouteByPoiIds } from '~/utils/styles'
 import { LatLng, MapStyleEnum } from '~/utils/types'
 import { getHashPart } from '~/utils/url'
 
-const { Marker } = await import('maplibre-gl')
-
 type ITMarker = InstanceType<typeof Marker>
 
 const STYLE_LAYERS = [
@@ -213,7 +184,7 @@ export default defineNuxtComponent({
       // Change visible data
       const source = this.map.getSource(POI_SOURCE)
       if (source?.type == 'geojson' && 'setData' in source) {
-        ;(source as GeoJSONSource).setData({
+        ; (source as GeoJSONSource).setData({
           type: 'FeatureCollection',
           features: this.features,
         })
@@ -465,8 +436,8 @@ export default defineNuxtComponent({
       ) {
         filterRouteByPoiIds(this.map as Map, [
           this.selectedFeature.properties?.metadata?.id ||
-            this.selectedFeature?.id ||
-            this.selectedFeature?.properties?.id,
+          this.selectedFeature?.id ||
+          this.selectedFeature?.properties?.id,
         ])
 
         if (
@@ -480,14 +451,14 @@ export default defineNuxtComponent({
               originalFeature.properties?.metadata?.id &&
               this.selectedFeature?.properties?.metadata?.id &&
               originalFeature.properties?.metadata?.id ===
-                this.selectedFeature?.properties?.metadata?.id
+              this.selectedFeature?.properties?.metadata?.id
           )
           const lngLat = (
             originalFeature && originalFeature.geometry.type === 'Point'
               ? originalFeature.geometry.coordinates
               : this.selectedFeature.geometry.type === 'Point'
-              ? this.selectedFeature.geometry?.coordinates
-              : this.defaultBounds
+                ? this.selectedFeature.geometry?.coordinates
+                : this.defaultBounds
           ) as [number, number]
 
           this.selectedFeatureMarker = new Marker({

components/Map/Map.vue

@@ -19,6 +19,14 @@ import type {
   MapLibreEvent,
   MapTouchEvent,
 } from 'maplibre-gl'
+import {
+  Map,
+  AttributionControl,
+  NavigationControl,
+  GeolocateControl,
+  FullscreenControl,
+  ScaleControl,
+} from 'maplibre-gl'
 import { mapState } from 'pinia'
 import { PropType } from 'vue'
 
@@ -28,15 +36,6 @@ import { siteStore } from '~/stores/site'
 import { fetchStyle } from '~/utils/styles'
 import { MapStyleEnum } from '~/utils/types'
 
-const {
-  Map,
-  AttributionControl,
-  NavigationControl,
-  GeolocateControl,
-  FullscreenControl,
-  ScaleControl,
-} = await import('maplibre-gl')
-
 type ITMap = InstanceType<typeof Map>
 type ITAttributionControl = InstanceType<typeof AttributionControl>
 type ITFullscreenControl = InstanceType<typeof FullscreenControl>

components/Map/MapPois.vue

@@ -1,16 +1,7 @@
 <template>
-  <MapBase
-    ref="mapBase"
-    :features="features"
-    :center="center"
-    :bounds="bounds"
-    :zoom="selectionZoom.poi"
-    :fullscreen-control="fullscreenControl"
-    :extra-attributions="extraAttributions"
-    :off-map-attribution="offMapAttribution"
-    @map-init="onMapInit"
-    @map-style-load="onMapStyleLoad"
-  />
+  <MapBase ref="mapBase" :features="features" :center="center" :bounds="bounds" :zoom="selectionZoom.poi"
+    :fullscreen-control="fullscreenControl" :extra-attributions="extraAttributions"
+    :off-map-attribution="offMapAttribution" @map-init="onMapInit" @map-style-load="onMapStyleLoad" />
 </template>
 
 <script lang="ts">
@@ -57,10 +48,6 @@ export default defineNuxtComponent({
       >,
       default: undefined,
     },
-    fullscreenControl: {
-      type: Boolean,
-      default: false,
-    },
     cluster: {
       type: Boolean,
       default: true,

lib/markerLayerFactory.ts

@@ -5,6 +5,7 @@ import type {
   LngLatBoundsLike,
   FitBoundsOptions,
 } from 'maplibre-gl'
+import { Marker } from 'maplibre-gl'
 import { createApp } from 'vue'
 
 import { ApiPoi } from './apiPois'
@@ -14,8 +15,6 @@ import { createMarkerDonutChart } from './clusters'
 import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
 import { TupleLatLng } from '~/utils/types'
 
-const { Marker } = await import('maplibre-gl')
-
 type ITMarker = InstanceType<typeof Marker>
 
 export const markerLayerTextFactory = (

utils/histoire-plugin-screenshot.ts

@@ -2,6 +2,7 @@
 // MIT License
 
 import type { FileOptions } from 'capture-website'
+import captureWebsite from 'capture-website'
 import { defu } from 'defu'
 import fs from 'fs-extra'
 import type { Plugin } from 'histoire'
@@ -58,7 +59,6 @@ export function HstScreenshot(options: ScreenshotPluginOptions = {}): Plugin {
     name: '@histoire/plugin-screenshot',
 
     onBuild: async (api) => {
-      const { default: captureWebsite } = await import('capture-website')
       await fs.ensureDir(finalOptions.saveFolder!)
 
       api.onPreviewStory(async ({ file, story, variant, url }) => {