switch to typed event target

Author: autumn-mck

bun.lock

@@ -11,6 +11,7 @@
 	},
 	"dependencies": {
 		"jszip": "^3.10.1",
+		"typescript-event-target": "^1.1.1",
 		"vite": "^7.1.0"
 	}
 }

package.json

@@ -1,12 +1,17 @@
+import { TypedEventTarget } from "typescript-event-target";
 import { type Datapack } from "./datapack";
 
-export class DatapacksChangedEvent extends CustomEvent<ReadonlyArray<Datapack>> {
+class DatapacksChangedEvent extends CustomEvent<ReadonlyArray<Datapack>> {
 	constructor(datapacks: ReadonlyArray<Datapack>) {
 		super("datapacksChanged", { detail: datapacks });
 	}
 }
 
-class DatapackStore extends EventTarget {
+export interface DatapackStoreEvents {
+	datapacksChanged: DatapacksChangedEvent;
+}
+
+class DatapackStore extends TypedEventTarget<DatapackStoreEvents> {
 	private datapacks = new Map<string, Datapack>();
 
 	getAll(): ReadonlyArray<Datapack> {
@@ -39,7 +44,7 @@ class DatapackStore extends EventTarget {
 	}
 
 	private notifyChange() {
-		this.dispatchEvent(new DatapacksChangedEvent(this.getAll()));
+		this.dispatchTypedEvent("datapacksChanged", new DatapacksChangedEvent(this.getAll()));
 	}
 }
 

src/datapackStore.ts

@@ -1,5 +1,5 @@
 import { type Datapack, loadDatapack } from "./datapack";
-import { DatapacksChangedEvent, datapackStore } from "./datapackStore";
+import { type DatapackStoreEvents, datapackStore } from "./datapackStore";
 
 const fileUploadElement = document.getElementById("input")!;
 fileUploadElement.addEventListener("change", onFileUploaded, { passive: true });
@@ -19,8 +19,8 @@ async function onFileUploaded(e: Event) {
 	datapackStore.add(validDatapacks);
 }
 
-function updateDatapackDisplay(event: Event) {
-	const { detail } = event as DatapacksChangedEvent;
+function updateDatapackDisplay(event: DatapackStoreEvents["datapacksChanged"]) {
+	const { detail } = event;
 	const dpDisplayElement = detail.map(createDatapackDisplayElement);
 
 	const datapackDisplay = document.getElementById("datapack-display")!;