From a7b0df26165c05ece48d81eeeb51c4a38c9b0969 Mon Sep 17 00:00:00 2001
From: Buddy <git@buddy.wtf>
Date: Sun, 7 Jun 2026 22:27:23 -0700
Subject: [PATCH] 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  | 5 ++---
 src/components/leaflet-circle.ts         | 5 ++---
 src/components/leaflet-feature-group.ts  | 5 ++---
 src/components/leaflet-geojson.ts        | 5 ++---
 src/components/leaflet-image-overlay.ts  | 5 ++---
 src/components/leaflet-layer-group.ts    | 5 ++---
 src/components/leaflet-marker.ts         | 5 ++---
 src/components/leaflet-polygon.ts        | 5 ++---
 src/components/leaflet-polyline.ts       | 5 ++---
 src/components/leaflet-rectangle.ts      | 5 ++---
 src/components/leaflet-svg-overlay.ts    | 5 ++---
 src/components/leaflet-tile-layer-wms.ts | 5 ++---
 src/components/leaflet-tile-layer.ts     | 5 ++---
 src/components/leaflet-video-overlay.ts  | 5 ++---
 src/core/register.ts                     | 6 ++++++
 15 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/src/components/leaflet-circle-marker.ts b/src/components/leaflet-circle-marker.ts
index 9e42993..caed33b 100644
--- a/src/components/leaflet-circle-marker.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/components/leaflet-circle.ts b/src/components/leaflet-circle.ts
index 84d7627..a696c57 100644
--- a/src/components/leaflet-circle.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/components/leaflet-feature-group.ts b/src/components/leaflet-feature-group.ts
index f5e6c68..46f668f 100644
--- a/src/components/leaflet-feature-group.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     for (const [el, entry] of this.#children) {
       if (entry.type === 'popup') this.#obj?.unbindPopup();
       else if (entry.type === 'tooltip') this.#obj?.unbindTooltip();
diff --git a/src/components/leaflet-geojson.ts b/src/components/leaflet-geojson.ts
index 91ad33f..0127242 100644
--- a/src/components/leaflet-geojson.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     for (const [el, entry] of this.#children) {
       if (entry.type === 'popup') this.#obj?.unbindPopup();
       else if (entry.type === 'tooltip') this.#obj?.unbindTooltip();
diff --git a/src/components/leaflet-image-overlay.ts b/src/components/leaflet-image-overlay.ts
index eeaa0bd..554267a 100644
--- a/src/components/leaflet-image-overlay.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/components/leaflet-layer-group.ts b/src/components/leaflet-layer-group.ts
index 724f69a..342ca50 100644
--- a/src/components/leaflet-layer-group.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     for (const [el, entry] of this.#children) {
       if (entry.type === 'popup') this.#obj?.unbindPopup();
       else if (entry.type === 'tooltip') this.#obj?.unbindTooltip();
diff --git a/src/components/leaflet-marker.ts b/src/components/leaflet-marker.ts
index 17ded2b..edc4672 100644
--- a/src/components/leaflet-marker.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/components/leaflet-polygon.ts b/src/components/leaflet-polygon.ts
index 48b6010..89ca903 100644
--- a/src/components/leaflet-polygon.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/components/leaflet-polyline.ts b/src/components/leaflet-polyline.ts
index b93f3c3..b1bb1c9 100644
--- a/src/components/leaflet-polyline.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/components/leaflet-rectangle.ts b/src/components/leaflet-rectangle.ts
index 58dda86..a4e93d4 100644
--- a/src/components/leaflet-rectangle.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/components/leaflet-svg-overlay.ts b/src/components/leaflet-svg-overlay.ts
index 126e101..050f96d 100644
--- a/src/components/leaflet-svg-overlay.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/components/leaflet-tile-layer-wms.ts b/src/components/leaflet-tile-layer-wms.ts
index 58d49a5..667ce2a 100644
--- a/src/components/leaflet-tile-layer-wms.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/components/leaflet-tile-layer.ts b/src/components/leaflet-tile-layer.ts
index 74b33c2..1ece531 100644
--- a/src/components/leaflet-tile-layer.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/components/leaflet-video-overlay.ts b/src/components/leaflet-video-overlay.ts
index 45f0953..268f8e0 100644
--- a/src/components/leaflet-video-overlay.ts
+++ b/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)
-      this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
+    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
     this.#children.clear();
     this.#obj?.remove();
     this.#obj = undefined;
diff --git a/src/core/register.ts b/src/core/register.ts
index 21ab8d5..2f548ec 100644
--- a/src/core/register.ts
+++ b/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';
 };