chore(deps): update devdependency eslint to v9 (#36)

* chore(deps): update devdependency eslint to v9

* chore: update dependencies

* chore: add eslint config, run lint:fix

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Gugustinette <[email protected]>

Author: renovate[bot]

.eslintignore

@@ -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',
+    },
+  })

.eslintrc

@@ -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",

eslint.config.mjs

@@ -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'),
       })
     }
-  }
+  },
 })

package-lock.json

@@ -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
 }

package.json

@@ -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/module.ts

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

src/runtime/composables/useLHeat.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 () => {