fix: register custom event in HTMLElementEventMap to eliminate casts

Augment HTMLElementEventMap with 'leaflet-register' so that
addEventListener('leaflet-register', handler) natively accepts
(e: LeafletRegisterEvent) => void, removing the need for
as EventListener casts in all 14 consumer components.

src/components/leaflet-circle-marker.ts

@@ -43,13 +43,12 @@ export class LeafletCircleMarker extends TypedBase {
       buildOptions(this, PROPS, ['lat', 'lng']),
     );
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/components/leaflet-circle.ts

@@ -43,13 +43,12 @@ export class LeafletCircle extends TypedBase {
       buildOptions(this, PROPS, ['lat', 'lng']),
     );
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/components/leaflet-feature-group.ts

@@ -18,13 +18,12 @@ export class LeafletFeatureGroup extends HTMLElement {
   connectedCallback() {
     this.#obj = new FeatureGroup([], buildOptions(this, {}));
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     for (const [el, entry] of this.#children) {
       if (entry.type === 'popup') this.#obj?.unbindPopup();
       else if (entry.type === 'tooltip') this.#obj?.unbindTooltip();

src/components/leaflet-geojson.ts

@@ -52,13 +52,12 @@ export class LeafletGeoJSON extends TypedBase {
     );
     this.#obj = new GeoJSON(data, { style: styleOpts as PathOptions });
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     for (const [el, entry] of this.#children) {
       if (entry.type === 'popup') this.#obj?.unbindPopup();
       else if (entry.type === 'tooltip') this.#obj?.unbindTooltip();

src/components/leaflet-image-overlay.ts

@@ -53,13 +53,12 @@ export class LeafletImageOverlay extends TypedBase {
       buildOptions(this, PROPS, ['url', 'bounds']),
     );
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/components/leaflet-layer-group.ts

@@ -18,13 +18,12 @@ export class LeafletLayerGroup extends HTMLElement {
   connectedCallback() {
     this.#obj = new LayerGroup([], buildOptions(this, {}));
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     for (const [el, entry] of this.#children) {
       if (entry.type === 'popup') this.#obj?.unbindPopup();
       else if (entry.type === 'tooltip') this.#obj?.unbindTooltip();

src/components/leaflet-marker.ts

@@ -49,13 +49,12 @@ export class LeafletMarker extends TypedBase {
       buildOptions(this, PROPS, ['lat', 'lng']),
     );
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/components/leaflet-polygon.ts

@@ -39,7 +39,7 @@ export class LeafletPolygon extends TypedBase {
   connectedCallback() {
     this.#obj = new Polygon(this.#getCoords(), buildOptions(this, PROPS));
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
 
     this.addEventListener('line-updated', this.#syncCoords);
@@ -51,8 +51,7 @@ export class LeafletPolygon extends TypedBase {
     this.#observer?.disconnect();
     this.#observer = undefined;
     this.removeEventListener('line-updated', this.#syncCoords);
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/components/leaflet-polyline.ts

@@ -39,7 +39,7 @@ export class LeafletPolyline extends TypedBase {
   connectedCallback() {
     this.#obj = new Polyline(this.#getCoords(), buildOptions(this, PROPS));
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
 
     this.addEventListener('line-updated', this.#syncCoords);
@@ -51,8 +51,7 @@ export class LeafletPolyline extends TypedBase {
     this.#observer?.disconnect();
     this.#observer = undefined;
     this.removeEventListener('line-updated', this.#syncCoords);
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/components/leaflet-rectangle.ts

@@ -38,13 +38,12 @@ export class LeafletRectangle extends TypedBase {
   connectedCallback() {
     this.#obj = new Rectangle(this.#parsedBounds(), buildOptions(this, PROPS, ['bounds']));
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/components/leaflet-svg-overlay.ts

@@ -51,13 +51,12 @@ export class LeafletSVGOverlay extends TypedBase {
       buildOptions(this, PROPS, ['bounds']),
     );
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/components/leaflet-tile-layer-wms.ts

@@ -50,13 +50,12 @@ export class LeafletTileLayerWMS extends TypedBase {
       buildOptions(this, PROPS, ['url']) as Record<string, string>,
     );
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/components/leaflet-tile-layer.ts

@@ -46,13 +46,12 @@ export class LeafletTileLayer extends TypedBase {
     const url = this.getAttribute('url') || '';
     this.#obj = new TileLayer(url, buildOptions(this, PROPS, ['url']));
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/components/leaflet-video-overlay.ts

@@ -54,13 +54,12 @@ export class LeafletVideoOverlay extends TypedBase {
       buildOptions(this, PROPS, ['url', 'bounds']),
     );
     this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
-    this.addEventListener('leaflet-register', this.#childHandler as EventListener);
+    this.addEventListener('leaflet-register', this.#childHandler);
     registerWithParent(this, this.#obj);
   }
 
   disconnectedCallback() {
-    if (this.#childHandler)
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;

src/core/register.ts

@@ -5,6 +5,12 @@ export type LeafletRegisterEvent = CustomEvent<{
   element: HTMLElement;
 }>;
 
+declare global {
+  interface HTMLElementEventMap {
+    'leaflet-register': LeafletRegisterEvent;
+  }
+}
+
 export type ChildEntry = {
   type: 'layer' | 'popup' | 'tooltip';
 };