bug #1921 [Live] Fix typing for loading hooks + HookManager (YummYume)

This PR was merged into the 2.x branch.

Discussion
----------

[Live] Fix typing for loading hooks + HookManager

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Issues        |
| License       | MIT

See #1916 (comment) for context

Fixes the typo on the loading hooks and add the hook typing to the `HookManager` (was forgotten in my first pr)

Commits
-------

9428547 Fix typing for loading hooks + HookManager

Author: kbond

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

@@ -13,8 +13,8 @@ export type ComponentHooks = {
     'response:error': (backendResponse: BackendResponse, controls: {
         displayError: boolean;
     }) => MaybePromise;
-    'loading.state.started': (element: HTMLElement, request: BackendRequest) => MaybePromise;
-    'loading.state.finished': (element: HTMLElement) => 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;

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

@@ -1,6 +1,7 @@
+import type { ComponentHookName, ComponentHookCallback } from './Component';
 export default class {
     private hooks;
-    register(hookName: string, callback: (...args: any[]) => void): void;
-    unregister(hookName: string, callback: (...args: any[]) => void): void;
-    triggerHook(hookName: string, ...args: any[]): void;
+    register<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void;
+    unregister<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void;
+    triggerHook<T extends string | ComponentHookName = ComponentHookName>(hookName: T, ...args: Parameters<ComponentHookCallback<T>>): void;
 }

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

@@ -22,8 +22,8 @@ export type ComponentHooks = {
     '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,
+    'loading.state:started': (element: HTMLElement, request: BackendRequest) => MaybePromise,
+    'loading.state:finished': (element: HTMLElement) => MaybePromise,
     'model:set': (model: string, value: any, component: Component) => MaybePromise,
 };
 

src/LiveComponent/assets/src/HookManager.ts

@@ -1,13 +1,21 @@
+import type { ComponentHookName, ComponentHookCallback } from './Component';
+
 export default class {
-    private hooks: Map<string, Array<(...args: any[]) => void>> = new Map();
+    private hooks: Map<ComponentHookName | string, Array<(...args: any[]) => void>> = new Map();
 
-    register(hookName: string, callback: (...args: any[]) => void): void {
+    register<T extends string | ComponentHookName = ComponentHookName>(
+        hookName: T,
+        callback: ComponentHookCallback<T>
+    ): void {
         const hooks = this.hooks.get(hookName) || [];
         hooks.push(callback);
         this.hooks.set(hookName, hooks);
     }
 
-    unregister(hookName: string, callback: (...args: any[]) => void): void {
+    unregister<T extends string | ComponentHookName = ComponentHookName>(
+        hookName: T,
+        callback: ComponentHookCallback<T>
+    ): void {
         const hooks = this.hooks.get(hookName) || [];
         const index = hooks.indexOf(callback);
         if (index === -1) {
@@ -18,7 +26,10 @@ export default class {
         this.hooks.set(hookName, hooks);
     }
 
-    triggerHook(hookName: string, ...args: any[]): void {
+    triggerHook<T extends string | ComponentHookName = ComponentHookName>(
+        hookName: T,
+        ...args: Parameters<ComponentHookCallback<T>>
+    ): void {
         const hooks = this.hooks.get(hookName) || [];
         hooks.forEach((callback) => callback(...args));
     }