(pnpm) depend on leaflet instead of dynamically loading it

components/LanguageMap.vue

@@ -3,11 +3,13 @@
 </template>
 
 
-<script>
+<script lang="ts">
 import dark from '../plugins/dark.ts';
-import walsLanguages from '../assets/languages.csv';
+import walsLanguages from '~/assets/languages.csv';
 import locales from '../locale/locales.ts';
 import { clearUrl } from '~/src/helpers.ts';
+import type { LocaleDescription } from '../locale/locales.ts';
+import type { GridLayerOptions } from 'leaflet/index.d.ts';
 
 const MOBILE_BREAKPOINT = 992;
 
@@ -16,32 +18,37 @@ const localesByWalsCode = locales.reduce((acc, language) => {
         acc[language.walsCode] = language;
     }
     return acc;
-}, {});
+}, {} as Record<string, LocaleDescription>);
+
+declare module 'leaflet' {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace GridLayer {
+        class TinyWorld extends GridLayer {
+            constructor(options?: GridLayerOptions & { render: unknown });
+        }
+    }
+}
 
 export default dark.extend({
     async mounted() {
-        await this.$loadStylesheet(
+        const { default: L } = await import('leaflet');
-            'leaflet',
-            'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css',
-        );
-        await this.$loadScript(
-            'leaflet',
-            'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js',
-        );
         await this.$loadScript(
             'tinyworldmap',
             'https://tinyworldmap.com/dist/v3/tiny-world-borders.js',
         );
 
-        const pos = window.innerWidth < MOBILE_BREAKPOINT ? [45, 15] : [40, 65];
+        const map = L.map('map', {
-        const map = window.L.map('map', { attributionControl: false }).setView(pos, 3);
+            attributionControl: false,
+            center: window.innerWidth < MOBILE_BREAKPOINT ? [45, 15] : [40, 65],
+            zoom: 3,
+        });
 
-        window.L.control.attribution({ position: 'bottomright' })
+        L.control.attribution({ position: 'bottomright' })
             .addAttribution('&copy; <a href="https://doi.org/10.5281/zenodo.7385533" target="_blank" title="Dryer, Matthew S. & Haspelmath, Martin (eds.) 2013. The World Atlas of Language Structures Online. Leipzig: Max Planck Institute for Evolutionary Anthropology.">WALS</a>')
             .addAttribution('<a href="https://wals.info" target="_blank">wals.info</a>')
             .addTo(map);
 
-        new window.L.GridLayer.TinyWorld({
+        new L.GridLayer.TinyWorld({
             minZoom: 1,
             maxZoom: 5,
             render: {
@@ -67,7 +74,7 @@ export default dark.extend({
             }
             const locale = localesByWalsCode[walsLanguage.id];
 
-            const circle = window.L.circle([walsLanguage.latitude, walsLanguage.longitude], {
+            const circle = L.circle([walsLanguage.latitude, walsLanguage.longitude], {
                 color: '#971064',
                 fillColor: '#c71585',
                 fillOpacity: 0.5,
@@ -83,6 +90,8 @@ export default dark.extend({
 </script>
 
 <style lang="scss">
+@import '~leaflet/dist/leaflet.css';
+
 #map {
     height: 500px;
     z-index: 0;

package.json

@@ -46,6 +46,7 @@
         "js-md5": "^0.7.3",
         "jsdom": "^21.0.0",
         "jsonwebtoken": "^8.5.1",
+        "leaflet": "^1.9.4",
         "lodash": "^4.17.21",
         "luxon": "^1.28.1",
         "markdown-it": "^14.0.0",
@@ -104,6 +105,7 @@
         "@types/express-session": "^1.17.10",
         "@types/js-md5": "^0.7.2",
         "@types/jsonwebtoken": "^8.5.9",
+        "@types/leaflet": "^1.9.12",
         "@types/lodash": "^4.14.197",
         "@types/luxon": "^1.27.1",
         "@types/multer": "1.4.5",

pnpm-lock.yaml

@@ -101,6 +101,9 @@ dependencies:
   jsonwebtoken:
     specifier: ^8.5.1
     version: 8.5.1
+  leaflet:
+    specifier: ^1.9.4
+    version: 1.9.4
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
@@ -271,6 +274,9 @@ devDependencies:
   '@types/jsonwebtoken':
     specifier: ^8.5.9
     version: 8.5.9
+  '@types/leaflet':
+    specifier: ^1.9.12
+    version: 1.9.12
   '@types/lodash':
     specifier: ^4.14.197
     version: 4.14.197
@@ -4797,6 +4803,10 @@ packages:
       '@types/webpack': 4.41.38
     dev: true
 
+  /@types/geojson@7946.0.14:
+    resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==}
+    dev: true
+
   /@types/graceful-fs@4.1.9:
     resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
     dependencies:
@@ -4872,6 +4882,12 @@ packages:
       '@types/node': 20.11.5
     dev: false
 
+  /@types/leaflet@1.9.12:
+    resolution: {integrity: sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+    dev: true
+
   /@types/less@3.0.5:
     resolution: {integrity: sha512-OdhItUN0/Cx9+sWumdb3dxASoA0yStnZahvKcaSQmSR5qd7hZ6zhSriSQGUU3F8GkzFpIILKzut4xn9/GvhusA==}
     dev: true
@@ -11387,6 +11403,10 @@ packages:
       invert-kv: 2.0.0
     dev: true
 
+  /leaflet@1.9.4:
+    resolution: {integrity: sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==}
+    dev: false
+
   /leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}