[V3] Add generic to runtime event handlers

v3/internal/runtime/desktop/@wailsio/runtime/src/events.js

@@ -10,9 +10,13 @@ The electron alternative for Go
 
 /* jshint esversion: 9 */
 
-/**
- * @typedef {import("./types").WailsEvent} WailsEvent
+/** 
+ * @template D
+ * @callback WailsEventCallback
+ * @param {WailsEvent<D>} event
+ * @return {void}
  */
+
 import {newRuntimeCallerWithID, objectNames} from "./runtime";
 
 import {EventTypes} from "./event_types";
@@ -38,8 +42,14 @@ class Listener {
         };
     }
 }
-
+/** 
+ * @template [D=unknown] 
+ */
 export class WailsEvent {
+    /** 
+     * @param {string} name - The name of the event
+     * @param {D} data - The data emitted by the event
+     */
     constructor(name, data = null) {
         this.name = name;
         this.data = data;
@@ -67,11 +77,12 @@ function dispatchWailsEvent(event) {
 /**
  * Register a callback function to be called multiple times for a specific event.
  *
+ * @template [D=unknown]
  * @param {string} eventName - The name of the event to register the callback for.
- * @param {function} callback - The callback function to be called when the event is triggered.
+ * @param {WailsEventCallback<D>} callback - The callback function to be called when the event is triggered.
  * @param {number} maxCallbacks - The maximum number of times the callback can be called for the event. Once the maximum number is reached, the callback will no longer be called.
  *
- @return {function} - A function that, when called, will unregister the callback from the event.
+ @return {() => void} - A function that, when called, will unregister the callback from the event.
  */
 export function OnMultiple(eventName, callback, maxCallbacks) {
     let listeners = eventListeners.get(eventName) || [];
@@ -84,17 +95,19 @@ export function OnMultiple(eventName, callback, maxCallbacks) {
 /**
  * Registers a callback function to be executed when the specified event occurs.
  *
+ * @template [D=unknown]
  * @param {string} eventName - The name of the event.
- * @param {function} callback - The callback function to be executed. It takes no parameters.
- * @return {function} - A function that, when called, will unregister the callback from the event. */
+ * @param {WailsEventCallback<D>} callback - The callback function to be executed.
+ * @return {() => void} - A function that, when called, will unregister the callback from the event. */
 export function On(eventName, callback) { return OnMultiple(eventName, callback, -1); }
 
 /**
  * Registers a callback function to be executed only once for the specified event.
  *
+ * @template [D=unknown]
  * @param {string} eventName - The name of the event.
- * @param {function} callback - The function to be executed when the event occurs.
- * @return {function} - A function that, when called, will unregister the callback from the event.
+ * @param {WailsEventCallback<D>} callback - The function to be executed when the event occurs.
+ * @return {() => void} - A function that, when called, will unregister the callback from the event.
  */
 export function Once(eventName, callback) { return OnMultiple(eventName, callback, 1); }
 

v3/internal/runtime/desktop/@wailsio/runtime/types/events.d.ts

@@ -2,28 +2,31 @@ export function setup(): void;
 /**
  * Register a callback function to be called multiple times for a specific event.
  *
+ * @template [D=unknown]
  * @param {string} eventName - The name of the event to register the callback for.
- * @param {function} callback - The callback function to be called when the event is triggered.
+ * @param {WailsEventCallback<D>} callback - The callback function to be called when the event is triggered.
  * @param {number} maxCallbacks - The maximum number of times the callback can be called for the event. Once the maximum number is reached, the callback will no longer be called.
  *
- @return {function} - A function that, when called, will unregister the callback from the event.
+ @return {() => void} - A function that, when called, will unregister the callback from the event.
  */
-export function OnMultiple(eventName: string, callback: Function, maxCallbacks: number): Function;
+export function OnMultiple<D = unknown>(eventName: string, callback: WailsEventCallback<D>, maxCallbacks: number): () => void;
 /**
  * Registers a callback function to be executed when the specified event occurs.
  *
+ * @template [D=unknown]
  * @param {string} eventName - The name of the event.
- * @param {function} callback - The callback function to be executed. It takes no parameters.
- * @return {function} - A function that, when called, will unregister the callback from the event. */
-export function On(eventName: string, callback: Function): Function;
+ * @param {WailsEventCallback<D>} callback - The callback function to be executed.
+ * @return {() => void} - A function that, when called, will unregister the callback from the event. */
+export function On<D = unknown>(eventName: string, callback: WailsEventCallback<D>): () => void;
 /**
  * Registers a callback function to be executed only once for the specified event.
  *
+ * @template [D=unknown]
  * @param {string} eventName - The name of the event.
- * @param {function} callback - The function to be executed when the event occurs.
- * @return {function} - A function that, when called, will unregister the callback from the event.
+ * @param {WailsEventCallback<D>} callback - The function to be executed when the event occurs.
+ * @return {() => void} - A function that, when called, will unregister the callback from the event.
  */
-export function Once(eventName: string, callback: Function): Function;
+export function Once<D = unknown>(eventName: string, callback: WailsEventCallback<D>): () => void;
 /**
  * Removes event listeners for the specified event names.
  *
@@ -232,8 +235,16 @@ export const Types: {
         ThemeChanged: string;
     };
 };
-export class WailsEvent {
-    constructor(name: any, data?: any);
-    name: any;
-    data: any;
+/**
+ * @template [D=unknown]
+ */
+export class WailsEvent<D = unknown> {
+    /**
+     * @param {string} name - The name of the event
+     * @param {D} data - The data emitted by the event
+     */
+    constructor(name: string, data?: D);
+    name: string;
+    data: D;
 }
+export type WailsEventCallback<D> = (event: WailsEvent<D>) => void;

v3/internal/templates/base/frontend/main.js

@@ -16,6 +16,6 @@ window.doGreet = () => {
     });
 }
 
-Events.On('time', (time) => {
-    timeElement.innerText = time.data;
+Events.On('time', (timeValue) => {
+    timeElement.innerText = timeValue.data;
 });

v3/internal/templates/lit-ts/frontend/src/my-element.ts

@@ -23,7 +23,7 @@ export class MyElement extends LitElement {
 
     constructor() {
         super();
-        Events.On('time', (timeValue: { data: string }) => {
+        Events.On<string>('time', (timeValue) => {
             this.time = timeValue.data;
         });
     }

v3/internal/templates/preact-ts/frontend/src/app.tsx

@@ -20,7 +20,7 @@ export function App() {
     }
 
     useEffect(() => {
-        Events.On('time', (timeValue: any) => {
+        Events.On<string>('time', (timeValue) => {
             setTime(timeValue.data);
         });
     }, []);

v3/internal/templates/qwik-ts/frontend/src/app.tsx

@@ -20,7 +20,7 @@ export const App = component$(() => {
   }
 
   useVisibleTask$(() => {
-    Events.On('time', (timeValue: any) => {
+    Events.On<string>('time', (timeValue) => {
       time.value = timeValue.data;
     });
     // Reload WML so it picks up the wml tags

v3/internal/templates/react-swc-ts/frontend/src/App.tsx

@@ -20,7 +20,7 @@ function App() {
   }
 
   useEffect(() => {
-    Events.On('time', (timeValue: any) => {
+    Events.On<string>('time', (timeValue) => {
       setTime(timeValue.data);
     });
     // Reload WML so it picks up the wml tags

v3/internal/templates/react-ts/frontend/src/App.tsx

@@ -20,7 +20,7 @@ function App() {
   }
 
   useEffect(() => {
-    Events.On('time', (timeValue: any) => {
+    Events.On<string>('time', (timeValue) => {
       setTime(timeValue.data);
     });
     // Reload WML so it picks up the wml tags

v3/internal/templates/solid-ts/frontend/src/App.tsx

@@ -20,7 +20,7 @@ function App() {
   }
 
   onMount(() => {
-    Events.On('time', (timeValue: any) => {
+    Events.On<string>('time', (timeValue) => {
       setTime(timeValue.data);
     });
   });

v3/internal/templates/svelte-ts/frontend/src/App.svelte

@@ -18,7 +18,7 @@
     });
   }
 
-  Events.On('time', (timeValue: any) => {
+  Events.On<string>('time', (timeValue) => {
     time = timeValue.data;
   });
 </script>

v3/internal/templates/vanilla-ts/frontend/src/main.ts

@@ -18,6 +18,6 @@ greetButton.addEventListener('click', () => {
     });
 });
 
-Events.On('time', (time: {data: any}) => {
+Events.On<string>('time', (time) => {
     timeElement.innerText = time.data;
 });

v3/internal/templates/vanilla/frontend/main.js

@@ -16,6 +16,6 @@ window.doGreet = () => {
     });
 }
 
-Events.On('time', (time) => {
-    timeElement.innerText = time.data;
+Events.On('time', (timeValue) => {
+    timeElement.innerText = timeValue.data;
 });

v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue

@@ -22,7 +22,7 @@ const doGreet = () => {
 }
 
 onMounted(() => {
-  Events.On('time', (timeValue: { data: string }) => {
+  Events.On<string>('time', (timeValue) => {
     time.value = timeValue.data;
   });
 })