Merge pull request #33 from Q42/feature/improve-event-attribute-types

Feature/improve event attribute types

Author: marcelduin

package.json

@@ -10,7 +10,8 @@
 		"publish": "node publish.js",
 		"docs": "npm run create:client --prefix ../Micrio/server/doc.micr.io",
 		"asbuild:untouched": "asc src/wasm/exports.ts --target debug --sourceMap \"http://localhost:2000/build/untouched.wasm.map\" --importMemory",
-		"asbuild:optimized": "asc src/wasm/exports.ts --target release -O3s --converge --runtime stub --disable mutable-globals --disable sign-extension --noExportMemory --noAssert --pedantic --importMemory"
+		"asbuild:optimized": "asc src/wasm/exports.ts --target release -O3s --converge --runtime stub --disable mutable-globals --disable sign-extension --noExportMemory --noAssert --pedantic --importMemory",
+		"typecheck": "tsc"
 	},
 	"keywords": [
 		"micrio"

src/svelte/common/Controls.svelte

@@ -82,8 +82,8 @@
 	let secondaryPortrait:boolean = $state(false);
 
 	/** Event handler for 'splitscreen-start'. Sets up secondary controls if needed. */
-	function splitStart(e:Event) {
-		const img = (e as CustomEvent).detail as MicrioImage;
+	function splitStart(e:Models.MicrioEventMap['splitscreen-start']) {
+		const img = e.detail;
 		// Only show separate controls for the secondary image if it's interactive (not passive)
 		secondaryPortrait = micrio.canvas.viewport.portrait; // Store orientation for styling
 		if(!img.opts.isPassive) secondaryControls = img;

src/svelte/common/Gallery.svelte

@@ -373,9 +373,9 @@
 	}
 
 	/** Handles the end of a pan gesture (or pinch). */
-	function pEnd(e:Event) : void {
+	function pEnd(e:Models.MicrioEventMap['panend']) : void {
 		// If triggered by 'panend' but detail is missing, it means pinch took over, reset panning
-		const d = (e as CustomEvent).detail;
+		const d = e.detail;
 		if(e.type == 'panend' && !d) {
 			panning = false;
 		}

src/svelte/common/Subtitles.svelte

@@ -90,7 +90,7 @@
 	/** Local state variable to store the current media playback time. */
 	let currentTime:number = $state(0);
 	/** Event handler to update `currentTime` based on 'timeupdate' events dispatched by Media.svelte. */
-	const setTime = (e:Event) => currentTime = (e as CustomEvent).detail;
+	const setTime = (e:Models.MicrioEventMap['timeupdate']) => currentTime = e.detail;
 
 	// --- Lifecycle ---
 

src/svelte/components/Marker.svelte

@@ -505,9 +505,12 @@
 		}
 	}
 
-	/** Handles external position changes (e.g., from Spaces editor). */
+	/**
+	 * Handles external position changes (e.g., from Spaces editor).
+	 * TODO: what event should this be in the MicrioEventMap? It's the 'changed' event of a div!
+	 */
 	function changed(e:Event) {
-		const m = (e as CustomEvent).detail as typeof marker;
+		const m = (e as Models.MicrioEvent<typeof marker>).detail;
 		marker.x = m.x;
 		marker.y = m.y;
 		moved(); // Recalculate position

src/ts/element.ts

@@ -1,6 +1,8 @@
 import type { Writable } from 'svelte/store';
 import type { Models } from '../types/models';
 import type { Camera } from './camera';
+
+/** @ts-ignore */
 import type Svelte from '../svelte/Main.svelte';
 
 import { once, deepCopy, fetchJson, jsonCache, fetchInfo, fetchAlbumInfo, idIsV5 } from './utils';
@@ -189,7 +191,7 @@ export class HTMLMicrioElement extends HTMLElement {
 	 * Called when an observed attribute changes. Handles changes to `id`, `muted`, `data-grid`, `data-limited`, and `lang`.
 	 * @internal
 	*/
-	attributeChangedCallback(attr:string, oldVal:string, newVal:string) {
+	attributeChangedCallback(attr:keyof Models.Attributes.MicrioCustomAttributes, oldVal:string, newVal:string) {
 		switch(attr) {
 			case 'id': { // Handle ID change (initial load or subsequent open)
 				if(!this.isConnected || !newVal) return;
@@ -255,6 +257,18 @@ export class HTMLMicrioElement extends HTMLElement {
 		}
 	}
 
+	// Custom overloads for addEventListener to support fully typed custom Micrio events
+	addEventListener<K extends keyof Models.MicrioEventMap>(type: K, listener: (this: HTMLMicrioElement, ev: Models.MicrioEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+	addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLMicrioElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+	addEventListener(type: string, listener: (this: HTMLMicrioElement, ev: Event) => any, options?: boolean | AddEventListenerOptions): void;
+	addEventListener(type: string, listener: EventListener | EventListenerObject, useCapture?: boolean): void { super.addEventListener(type, listener, useCapture); }
+
+	// Custom overloads for removeEventListener to support fully typed custom Micrio events
+	removeEventListener<K extends keyof Models.MicrioEventMap>(type: K, listener: (this: HTMLMicrioElement, ev: Models.MicrioEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+	removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLMicrioElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+	removeEventListener(type: string, listener: (this: HTMLMicrioElement, ev: Event) => any, options?: boolean | EventListenerOptions): void;
+	removeEventListener(type: string, listener: EventListener | EventListenerObject, useCapture?: boolean): void { super.removeEventListener(type, listener, useCapture); }
+
 	/** Destroys the Micrio instance, cleans up resources, and removes event listeners. */
 	destroy() : void {
 		this.current.set(undefined); // Clear current image
@@ -348,7 +362,7 @@ export class HTMLMicrioElement extends HTMLElement {
 		// --- Final Setup & Open ---
 		this.keepRendering = !!opts.settings.keepRendering; // Set continuous rendering flag
 		const doOpen = opts.id || opts.gallery || opts.grid; // Check if there's something to open
-		this.events.dispatch('print', opts); // Dispatch 'print' event
+		this.events.dispatch('print', opts as Models.ImageInfo.ImageInfo); // Dispatch 'print' event
 
 		// Handle lazy loading
 		if(opts.settings.lazyload !== undefined && 'IntersectionObserver' in window) {

src/ts/events.ts

@@ -61,7 +61,7 @@ function cancelPrevent(e:AllEvents){
  * @internal
  * @readonly
  */
-export const UpdateEvents:string[] = [
+export const UpdateEvents:(keyof Models.MicrioEventMap)[] = [
 	'move',
 	'marker-open',
 	'marker-opened',
@@ -237,7 +237,7 @@ export const UpdateEvents:string[] = [
 	 * @param type The event type string.
 	 * @param detail Optional event detail payload.
 	 */
-	dispatch(type:string, detail?:any) : void {
+	dispatch<K extends keyof Models.MicrioEventDetails>(type:K, detail?:Models.MicrioEventDetails[K]) : void {
 		this.micrio.dispatchEvent(new CustomEvent(type, detail !== undefined ? { detail } : undefined))
 	}
 

src/ts/grid.ts

@@ -419,7 +419,7 @@ export class Grid {
 	/**
 	 * Parses an individual image grid string into a GridImage object.
 	 * @param s The grid string for a single image.
-	 * @returns The parsed {@link Models.Grid.GridImage} object.
+	 * @returns The parsed `Models.Grid.GridImage` object.
 	*/
 	getImage(s:string) : Models.Grid.GridImage {
 		const g = s.split('|'), p = g[0].split(','), // Split main parts and size

src/ts/image.ts

@@ -674,7 +674,7 @@ export class MicrioImage {
 		// Dispatch pre-data event allowing external modification of all loaded data
 		this.wasm.micrio.events.dispatch('pre-data', {
 			[this.id]: d, // Current image data
-			...Object.fromEntries(micIdsUnique.map((id,i) => [id, micData[i]])) // Preloaded linked data
+			...Object.fromEntries(micIdsUnique.map((id,i) => [id, micData[i]!])) // Preloaded linked data
 		});
 
 		// If linked images were already initialized but lacked data, set it now

src/ts/state.ts

@@ -283,8 +283,8 @@ export namespace State {
 			this.view.subscribe(view => {
 				this._view = view; // Update internal reference
 				const nV = view?.toString(); // Stringify for simple comparison
-				const detail = {image, view}; // Event detail payload
 				if(view && nV && pV != nV) { // If view changed
+					const detail = {image, view}; // Event detail payload
 					pV = nV;
 					const nW = view[2]-view[0], nH = view[3]-view[1]; // Calculate new width/height
 					// Dispatch 'zoom' event if dimensions changed significantly