[Live] Add signature overload for on and off methods of component

Author: YummYume

src/LiveComponent/assets/dist/Component/index.d.ts

@@ -1,8 +1,24 @@
 import { BackendInterface } from '../Backend/Backend';
 import ValueStore from './ValueStore';
+import BackendRequest from '../Backend/BackendRequest';
 import { ElementDriver } from './ElementDriver';
 import { PluginInterface } from './plugins/PluginInterface';
 import BackendResponse from '../Backend/BackendResponse';
+type MaybePromise<T = void> = T | Promise<T>;
+export type ComponentHooks = {
+    'connect': (component: Component) => MaybePromise;
+    'disconnect': (component: Component) => MaybePromise;
+    'request:started': (requestConfig: any) => MaybePromise;
+    'render:finished': (component: Component) => MaybePromise;
+    'response:error': (backendResponse: BackendResponse, controls: {
+        displayError: boolean;
+    }) => MaybePromise;
+    'loading.state.started': (element: HTMLElement, request: BackendRequest) => MaybePromise;
+    'loading.state.finished': (element: HTMLElement) => MaybePromise;
+    'model:set': (model: string, value: any, component: Component) => MaybePromise;
+};
+export type ComponentHookName = keyof ComponentHooks;
+export type ComponentHookCallback<T extends string = ComponentHookName> = T extends ComponentHookName ? ComponentHooks[T] : (...args: any[]) => MaybePromise;
 export default class Component {
     readonly element: HTMLElement;
     readonly name: string;
@@ -30,8 +46,8 @@ export default class Component {
     addPlugin(plugin: PluginInterface): void;
     connect(): void;
     disconnect(): void;
-    on(hookName: string, callback: (...args: any[]) => void): void;
-    off(hookName: string, callback: (...args: any[]) => void): void;
+    on<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void;
+    off<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void;
     set(model: string, value: any, reRender?: boolean, debounce?: number | boolean): Promise<BackendResponse>;
     getData(model: string): any;
     action(name: string, args?: any, debounce?: number | boolean): Promise<BackendResponse>;
@@ -55,3 +71,4 @@ export default class Component {
     _updateFromParentProps(props: any): void;
 }
 export declare function proxifyComponent(component: Component): Component;
+export {};

src/LiveComponent/assets/dist/HookManager.d.ts

@@ -1,6 +1,6 @@
 export default class {
     private hooks;
-    register(hookName: string, callback: () => void): void;
-    unregister(hookName: string, callback: () => void): void;
+    register(hookName: string, callback: (...args: any[]) => void): void;
+    unregister(hookName: string, callback: (...args: any[]) => void): void;
     triggerHook(hookName: string, ...args: any[]): void;
 }

src/LiveComponent/assets/dist/PollingDirector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import Component from './Component';
 export default class {
     component: Component;
@@ -7,7 +6,7 @@ export default class {
         actionName: string;
         duration: number;
     }>;
-    pollingIntervals: NodeJS.Timer[];
+    pollingIntervals: number[];
     constructor(component: Component);
     addPoll(actionName: string, duration: number): void;
     startAllPolling(): void;

src/LiveComponent/assets/dist/live_controller.js

@@ -2625,7 +2625,7 @@ class PollingDirector {
                 this.component.action(actionName, {}, 0);
             };
         }
-        const timer = setInterval(() => {
+        const timer = window.setInterval(() => {
             callback();
         }, duration);
         this.pollingIntervals.push(timer);

src/LiveComponent/assets/src/Component/index.ts

@@ -14,6 +14,25 @@ import { findComponents, registerComponent, unregisterComponent } from '../Compo
 
 declare const Turbo: any;
 
+type MaybePromise<T = void> = T | Promise<T>;
+
+export type ComponentHooks = {
+    'connect': (component: Component) => MaybePromise,
+    'disconnect': (component: Component) => MaybePromise,
+    'request:started': (requestConfig: any) => MaybePromise,
+    'render:finished': (component: Component) => MaybePromise,
+    'response:error': (backendResponse: BackendResponse, controls: { displayError: boolean }) => MaybePromise,
+    'loading.state.started': (element: HTMLElement, request: BackendRequest) => MaybePromise,
+    'loading.state.finished': (element: HTMLElement) => MaybePromise,
+    'model:set': (model: string, value: any, component: Component) => MaybePromise,
+};
+
+export type ComponentHookName = keyof ComponentHooks;
+
+export type ComponentHookCallback<T extends string = ComponentHookName> = T extends ComponentHookName
+    ? ComponentHooks[T]
+    : (...args: any[]) => MaybePromise;
+
 export default class Component {
     readonly element: HTMLElement;
     readonly name: string;
@@ -109,24 +128,11 @@ export default class Component {
         this.externalMutationTracker.stop();
     }
 
-    /**
-     * Add a named hook to the component. Available hooks are:
-     *
-     *     * connect (component: Component) => {}
-     *     * disconnect (component: Component) => {}
-     *     * request:started (requestConfig: any) => {}
-     *     * render:started (html: string, response: BackendResponse, controls: { shouldRender: boolean }) => {}
-     *     * render:finished (component: Component) => {}
-     *     * response:error (backendResponse: BackendResponse, controls: { displayError: boolean }) => {}
-     *     * loading.state:started (element: HTMLElement, request: BackendRequest) => {}
-     *     * loading.state:finished (element: HTMLElement) => {}
-     *     * model:set (model: string, value: any, component: Component) => {}
-     */
-    on(hookName: string, callback: (...args: any[]) => void): void {
+    on<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void {
         this.hooks.register(hookName, callback);
     }
 
-    off(hookName: string, callback: (...args: any[]) => void): void {
+    off<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void {
         this.hooks.unregister(hookName, callback);
     }
 

src/LiveComponent/assets/src/HookManager.ts

@@ -1,13 +1,13 @@
 export default class {
     private hooks: Map<string, Array<(...args: any[]) => void>> = new Map();
 
-    register(hookName: string, callback: () => void): void {
+    register(hookName: string, callback: (...args: any[]) => void): void {
         const hooks = this.hooks.get(hookName) || [];
         hooks.push(callback);
         this.hooks.set(hookName, hooks);
     }
 
-    unregister(hookName: string, callback: () => void): void {
+    unregister(hookName: string, callback: (...args: any[]) => void): void {
         const hooks = this.hooks.get(hookName) || [];
         const index = hooks.indexOf(callback);
         if (index === -1) {

src/LiveComponent/assets/src/PollingDirector.ts

@@ -4,7 +4,7 @@ export default class {
     component: Component;
     isPollingActive = true;
     polls: Array<{ actionName: string; duration: number }>;
-    pollingIntervals: NodeJS.Timer[] = [];
+    pollingIntervals: number[] = [];
 
     constructor(component: Component) {
         this.component = component;
@@ -55,7 +55,7 @@ export default class {
             };
         }
 
-        const timer = setInterval(() => {
+        const timer = window.setInterval(() => {
             callback();
         }, duration);
         this.pollingIntervals.push(timer);