From a0230c8fbd94b61885100b57a1e4d42543245062 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 30 Jan 2025 09:34:12 -0500 Subject: [PATCH 1/2] Improve event callback types --- .../desktop/@wailsio/runtime/src/events.js | 31 +++++++++++----- .../@wailsio/runtime/types/events.d.ts | 37 ++++++++++++------- 2 files changed, 46 insertions(+), 22 deletions(-) diff --git a/v3/internal/runtime/desktop/@wailsio/runtime/src/events.js b/v3/internal/runtime/desktop/@wailsio/runtime/src/events.js index afbcbb9221c..aefeb8bd411 100644 --- a/v3/internal/runtime/desktop/@wailsio/runtime/src/events.js +++ b/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} 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} 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} 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} 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); } diff --git a/v3/internal/runtime/desktop/@wailsio/runtime/types/events.d.ts b/v3/internal/runtime/desktop/@wailsio/runtime/types/events.d.ts index f9757db6956..f1264c03460 100644 --- a/v3/internal/runtime/desktop/@wailsio/runtime/types/events.d.ts +++ b/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} 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(eventName: string, callback: WailsEventCallback, 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} 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: string, callback: WailsEventCallback): () => 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} 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(eventName: string, callback: WailsEventCallback): () => 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 { + /** + * @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 = (event: WailsEvent) => void; From 265fbff3df9f470a7a5a7ec3168e1924b8a7fee0 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 30 Jan 2025 11:00:08 -0500 Subject: [PATCH 2/2] Update templates to use generic --- v3/internal/templates/base/frontend/main.js | 4 ++-- v3/internal/templates/lit-ts/frontend/src/my-element.ts | 2 +- v3/internal/templates/preact-ts/frontend/src/app.tsx | 2 +- v3/internal/templates/qwik-ts/frontend/src/app.tsx | 2 +- v3/internal/templates/react-swc-ts/frontend/src/App.tsx | 2 +- v3/internal/templates/react-ts/frontend/src/App.tsx | 2 +- v3/internal/templates/solid-ts/frontend/src/App.tsx | 2 +- v3/internal/templates/svelte-ts/frontend/src/App.svelte | 2 +- v3/internal/templates/vanilla-ts/frontend/src/main.ts | 2 +- v3/internal/templates/vanilla/frontend/main.js | 4 ++-- .../templates/vue-ts/frontend/src/components/HelloWorld.vue | 2 +- 11 files changed, 13 insertions(+), 13 deletions(-) diff --git a/v3/internal/templates/base/frontend/main.js b/v3/internal/templates/base/frontend/main.js index c24b3b1ef3a..729e4089557 100644 --- a/v3/internal/templates/base/frontend/main.js +++ b/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; }); diff --git a/v3/internal/templates/lit-ts/frontend/src/my-element.ts b/v3/internal/templates/lit-ts/frontend/src/my-element.ts index de6c56c5d5b..38abeba8996 100644 --- a/v3/internal/templates/lit-ts/frontend/src/my-element.ts +++ b/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('time', (timeValue) => { this.time = timeValue.data; }); } diff --git a/v3/internal/templates/preact-ts/frontend/src/app.tsx b/v3/internal/templates/preact-ts/frontend/src/app.tsx index 93fab58d331..dfab19c798f 100644 --- a/v3/internal/templates/preact-ts/frontend/src/app.tsx +++ b/v3/internal/templates/preact-ts/frontend/src/app.tsx @@ -20,7 +20,7 @@ export function App() { } useEffect(() => { - Events.On('time', (timeValue: any) => { + Events.On('time', (timeValue) => { setTime(timeValue.data); }); }, []); diff --git a/v3/internal/templates/qwik-ts/frontend/src/app.tsx b/v3/internal/templates/qwik-ts/frontend/src/app.tsx index 3315315c281..e58e967afde 100644 --- a/v3/internal/templates/qwik-ts/frontend/src/app.tsx +++ b/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('time', (timeValue) => { time.value = timeValue.data; }); // Reload WML so it picks up the wml tags diff --git a/v3/internal/templates/react-swc-ts/frontend/src/App.tsx b/v3/internal/templates/react-swc-ts/frontend/src/App.tsx index 5706ca1c41c..907989f5a81 100644 --- a/v3/internal/templates/react-swc-ts/frontend/src/App.tsx +++ b/v3/internal/templates/react-swc-ts/frontend/src/App.tsx @@ -20,7 +20,7 @@ function App() { } useEffect(() => { - Events.On('time', (timeValue: any) => { + Events.On('time', (timeValue) => { setTime(timeValue.data); }); // Reload WML so it picks up the wml tags diff --git a/v3/internal/templates/react-ts/frontend/src/App.tsx b/v3/internal/templates/react-ts/frontend/src/App.tsx index edc81f820a7..abaac74f31e 100644 --- a/v3/internal/templates/react-ts/frontend/src/App.tsx +++ b/v3/internal/templates/react-ts/frontend/src/App.tsx @@ -20,7 +20,7 @@ function App() { } useEffect(() => { - Events.On('time', (timeValue: any) => { + Events.On('time', (timeValue) => { setTime(timeValue.data); }); // Reload WML so it picks up the wml tags diff --git a/v3/internal/templates/solid-ts/frontend/src/App.tsx b/v3/internal/templates/solid-ts/frontend/src/App.tsx index 5027e8c1d1d..b76207e20c2 100644 --- a/v3/internal/templates/solid-ts/frontend/src/App.tsx +++ b/v3/internal/templates/solid-ts/frontend/src/App.tsx @@ -20,7 +20,7 @@ function App() { } onMount(() => { - Events.On('time', (timeValue: any) => { + Events.On('time', (timeValue) => { setTime(timeValue.data); }); }); diff --git a/v3/internal/templates/svelte-ts/frontend/src/App.svelte b/v3/internal/templates/svelte-ts/frontend/src/App.svelte index 2a73938b012..f622d77a4dd 100644 --- a/v3/internal/templates/svelte-ts/frontend/src/App.svelte +++ b/v3/internal/templates/svelte-ts/frontend/src/App.svelte @@ -18,7 +18,7 @@ }); } - Events.On('time', (timeValue: any) => { + Events.On('time', (timeValue) => { time = timeValue.data; }); diff --git a/v3/internal/templates/vanilla-ts/frontend/src/main.ts b/v3/internal/templates/vanilla-ts/frontend/src/main.ts index 2e82cc21fd7..0c71df19ef6 100644 --- a/v3/internal/templates/vanilla-ts/frontend/src/main.ts +++ b/v3/internal/templates/vanilla-ts/frontend/src/main.ts @@ -18,6 +18,6 @@ greetButton.addEventListener('click', () => { }); }); -Events.On('time', (time: {data: any}) => { +Events.On('time', (time) => { timeElement.innerText = time.data; }); diff --git a/v3/internal/templates/vanilla/frontend/main.js b/v3/internal/templates/vanilla/frontend/main.js index c24b3b1ef3a..729e4089557 100644 --- a/v3/internal/templates/vanilla/frontend/main.js +++ b/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; }); diff --git a/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue b/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue index e73e33e2336..0fdb9463544 100644 --- a/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue +++ b/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('time', (timeValue) => { time.value = timeValue.data; }); })