chore(deps): update devdependency eslint to v9

eslint.config.mjs

@@ -0,0 +1,26 @@
+// @ts-check
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+export default createConfigForNuxt({
+  features: {
+    stylistic: true,
+    tooling: true,
+  },
+  dirs: {
+    src: ['src'],
+  },
+})
+  .append({
+    ignores: ['node_modules', 'dist', 'playground', 'docs'],
+  })
+  .override('nuxt/typescript/rules', {
+    rules: {
+      // Required while Leaflet's types are not updated
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  })
+  .override('nuxt/vue/rules', {
+    rules: {
+      'vue/multi-word-component-names': 'off',
+    },
+  })

package.json

@@ -29,6 +29,7 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "docs:dev": "vitepress dev docs",
@@ -53,7 +54,7 @@
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "caniuse-lite": "^1.0.30001649",
     "changelogen": "^0.5.5",
-    "eslint": "^8.57.0",
+    "eslint": "^9.8.0",
     "leaflet.heat": "^0.2.0",
     "leaflet.markercluster": "^1.5.3",
     "nuxt": "^3.12.4",

src/module.ts

@@ -2,7 +2,7 @@ import { defineNuxtModule, addComponent, createResolver, addImports } from '@nux
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {
-  markerCluster?: boolean,
+  markerCluster?: boolean
   heat?: boolean
 }
 
@@ -28,20 +28,20 @@ export const components = [
   'LRectangle',
   'LTileLayer',
   'LTooltip',
-  'LWmsTileLayer'
+  'LWmsTileLayer',
 ]
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: 'nuxt-leaflet',
     configKey: 'leaflet',
     compatibility: {
-      nuxt: '>=3.0.0'
-    }
+      nuxt: '>=3.0.0',
+    },
   },
   // Default configuration options of the Nuxt module
   defaults: {},
-  async setup (options, nuxt) {
+  async setup(options, nuxt) {
     // Create a resolver for the module
     const resolver = createResolver(import.meta.url)
 
@@ -55,7 +55,7 @@ export default defineNuxtModule<ModuleOptions>({
         export: component,
         filePath: '@vue-leaflet/vue-leaflet',
         chunkName: `nuxt-leaflet/${component}`,
-        mode: 'all'
+        mode: 'all',
       })
     }
 
@@ -69,7 +69,7 @@ export default defineNuxtModule<ModuleOptions>({
       addImports({
         name: 'useLMarkerCluster',
         as: 'useLMarkerCluster',
-        from: resolver.resolve('runtime/composables/useLMarkerCluster')
+        from: resolver.resolve('runtime/composables/useLMarkerCluster'),
       })
     }
 
@@ -79,8 +79,8 @@ export default defineNuxtModule<ModuleOptions>({
       addImports({
         name: 'useLHeat',
         as: 'useLHeat',
-        from: resolver.resolve('runtime/composables/useLHeat')
+        from: resolver.resolve('runtime/composables/useLHeat'),
       })
     }
-  }
+  },
 })

src/runtime/composables/useLHeat.ts

@@ -1,32 +1,32 @@
 // L can be loaded here as the composable should be loaded client-side only
-import L from 'leaflet';
-import type { Map } from 'leaflet';
+import L from 'leaflet'
+import type { Map } from 'leaflet'
 
 interface HeatPoint {
-  lat: number;
-  lng: number;
-  intensity: number;
+  lat: number
+  lng: number
+  intensity: number
 }
 
 interface Props {
-  leafletObject: Map;
-  heatPoints: HeatPoint[];
-  radius?: number;
+  leafletObject: Map
+  heatPoints: HeatPoint[]
+  radius?: number
 }
 
 export const useLHeat = async (props: Props) => {
   // Lazy-load leaflet.heat
   // Importing it at the top level will cause errors because it could be loaded before the Leaflet library
-  await import('leaflet.heat');
+  await import('leaflet.heat')
 
   const heat = L.heatLayer(
-    props.heatPoints.map((point) => [point.lat, point.lng, point.intensity]),
-    {radius: props.radius || 50}
-  );
+    props.heatPoints.map(point => [point.lat, point.lng, point.intensity]),
+    { radius: props.radius || 50 },
+  )
 
   // Add the heat layer to the map
-  props.leafletObject.addLayer(heat);
+  props.leafletObject.addLayer(heat)
 
   // Return the heat layer
-  return heat;
+  return heat
 }

src/runtime/composables/useLMarkerCluster.ts

@@ -1,40 +1,40 @@
-import type { MarkerOptions, Map } from 'leaflet';
+import type { MarkerOptions, Map } from 'leaflet'
 
 interface MarkerProps {
-  name?: string;
-  lat: number;
-  lng: number;
-  options?: MarkerOptions;
+  name?: string
+  lat: number
+  lng: number
+  options?: MarkerOptions
 }
 
 interface Props {
-  leafletObject: Map;
-  markers: MarkerProps[];
+  leafletObject: Map
+  markers: MarkerProps[]
 }
 
 export const useLMarkerCluster = async (props: Props) => {
   // Get Leaflet from the window object
-  const L = window.L;
+  const L = window.L
 
   // Lazy-load leaflet.markercluster
   // Importing it at the top level will cause errors because it could be loaded before the Leaflet library
-  const { MarkerClusterGroup } = await import('leaflet.markercluster');
+  const { MarkerClusterGroup } = await import('leaflet.markercluster')
 
   // Initialize marker cluster
-  const markerCluster =  new MarkerClusterGroup();
+  const markerCluster = new MarkerClusterGroup()
 
   // For each marker in props
   props.markers.forEach((location: any) => {
     // Create a Leaflet marker
     const marker = L.marker([location.lat, location.lng], {
       title: location.name,
       ...location.options,
-    });
+    })
 
     // Add the marker to the cluster
-    markerCluster.addLayer(marker);
-  });
+    markerCluster.addLayer(marker)
+  })
 
   // Add the marker cluster to the map
-  props.leafletObject.addLayer(markerCluster);
+  props.leafletObject.addLayer(markerCluster)
 }

src/types/dev-types.d.ts

@@ -2,5 +2,5 @@
  * Leaflet Markercluster module declaration
  */
 declare module 'leaflet.markercluster' {
-  export const MarkerClusterGroup: any;
+  export const MarkerClusterGroup: any
 }

test/basic.test.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest'
 import { fileURLToPath } from 'node:url'
+import { describe, it, expect } from 'vitest'
 import { setup, $fetch } from '@nuxt/test-utils'
 
 describe('nuxt leaflet', async () => {

test/fixtures/basic/app.vue

@@ -28,4 +28,4 @@ const mapInitialized = () => {
   console.log('Map is ready')
   console.log(map.value.maxZoom)
 }
-</script>
+</script>

test/fixtures/basic/nuxt.config.ts

@@ -2,7 +2,7 @@ import NuxtLeaflet from '../../../src/module'
 
 export default defineNuxtConfig({
   modules: [
-    NuxtLeaflet
+    NuxtLeaflet,
   ],
-  compatibilityDate: '2024-04-03'
+  compatibilityDate: '2024-04-03',
 })

test/fixtures/heat/app.vue

@@ -20,47 +20,48 @@
 </template>
 
 <script setup lang="ts">
-import L from 'leaflet';
-import { ref } from 'vue';
+// eslint-disable-next-line
+import L from 'leaflet'
+import { ref } from 'vue'
 
-const isDrawing = ref(false);
-const map = ref(null) as any;
+const isDrawing = ref(false)
+const map = ref(null) as any
 
 // Create heat data
 const heatPoints = [{
   lat: 47.21322,
   lng: -1.559482,
-  intensity: 100.0
+  intensity: 100.0,
 }, {
   lat: 47.21322,
   lng: -1.558482,
-  intensity: 50.0
+  intensity: 50.0,
 }, {
   lat: 47.21322,
   lng: -1.557482,
-  intensity: 25.0
+  intensity: 25.0,
 }, {
   lat: 47.21322,
   lng: -1.556482,
-  intensity: 10.0
-}];
+  intensity: 10.0,
+}]
 
 // When the map is ready
 const onMapReady = async () => {
   const heat = await useLHeat({
     leafletObject: map.value.leafletObject,
-    heatPoints: heatPoints
-  });
+    heatPoints: heatPoints,
+  })
 
   // (optional) Make the heat layer drawable
   map.value.leafletObject.on({
-    movestart: function () { isDrawing.value = false; },
-    moveend:   function () { isDrawing.value = true; },
+    movestart: function () { isDrawing.value = false },
+    moveend: function () { isDrawing.value = true },
     mousemove: function (e: any) {
       if (isDrawing.value) {
-        heat.addLatLng(e.latlng);
+        heat.addLatLng(e.latlng)
       }
-    }
+    },
   })
 }
 </script>

test/fixtures/heat/nuxt.config.ts

@@ -2,7 +2,7 @@ import NuxtLeaflet from '../../../src/module'
 
 export default defineNuxtConfig({
   modules: [
-    NuxtLeaflet
+    NuxtLeaflet,
   ],
-  compatibilityDate: '2024-04-03'
+  compatibilityDate: '2024-04-03',
 })

test/fixtures/markercluster/app.vue

@@ -20,10 +20,10 @@
 </template>
 
 <script setup lang="ts">
-import L from 'leaflet';
-import { ref } from 'vue';
+import L from 'leaflet'
+import { ref } from 'vue'
 
-const map = ref(null) as any;
+const map = ref(null) as any
 
 // Create locations data (20 locations around Nantes)
 const locations = [
@@ -33,12 +33,12 @@ const locations = [
     icon: L.icon({
       iconUrl: '/nuxt-leaflet-logo.png',
       iconSize: [30, 30],
-    })
+    }),
   } },
   {
     // name is optional (no tooltip will be displayed if not provided)
     /* name: 'Saint-Nazaire', */
-    lat: 47.273018, lng: -2.213733 
+    lat: 47.273018, lng: -2.213733,
   },
   { name: 'La Baule', lat: 47.286835, lng: -2.393108 },
   { name: 'Pornic', lat: 47.112, lng: -2.102 },
@@ -57,14 +57,14 @@ const locations = [
   { name: 'Sainte-Luce-sur-Loire', lat: 47.233, lng: -1.483 },
   { name: 'Bouguenais', lat: 47.183, lng: -1.583 },
   { name: 'Saint-Sébastien-sur-Loire', lat: 47.183, lng: -1.483 },
-  { name: 'Basse-Goulaine', lat: 47.2, lng: -1.483 }
-];
+  { name: 'Basse-Goulaine', lat: 47.2, lng: -1.483 },
+]
 
 // When the map is ready
 const onMapReady = () => {
   useLMarkerCluster({
     leafletObject: map.value.leafletObject,
-    markers: locations
-  });
+    markers: locations,
+  })
 }
 </script>

test/fixtures/markercluster/nuxt.config.ts

@@ -2,8 +2,8 @@ import NuxtLeaflet from '../../../src/module'
 
 export default defineNuxtConfig({
   modules: [
-    NuxtLeaflet
+    NuxtLeaflet,
   ],
   compatibilityDate: '2024-04-03',
-  ssr: false
+  ssr: false,
 })

test/heat.test.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest'
 import { fileURLToPath } from 'node:url'
+import { describe, it, expect } from 'vitest'
 import { setup, $fetch } from '@nuxt/test-utils'
 
 describe('nuxt leaflet', async () => {

test/markercluster.test.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest'
 import { fileURLToPath } from 'node:url'
+import { describe, it, expect } from 'vitest'
 import { setup, $fetch } from '@nuxt/test-utils'
 
 describe('nuxt leaflet', async () => {