From a7076f988eef34f37117db0031cff00a1cb57459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADt=20Rozs=C3=ADval?= <mail@vitrozsival.cz>
Date: Thu, 17 Oct 2019 23:26:07 +0200
Subject: [PATCH] Fix naja global variable and allow async listeners (#39214)

* Add types for naja

* Follow PR rules

* Change interface name

* Extend EventTarget

* Include all event types in map

* Improve events typing

* Add naja options interface

* Make options readonly

* Add more accurate typings

* Update signatures

* Update global variable name and allow async listeners

* Move namespace export
---
 types/naja/index.d.ts    | 25 +++++++++++++------------
 types/naja/naja-tests.ts | 13 +++++++++++++
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/types/naja/index.d.ts b/types/naja/index.d.ts
index 8773c74362..6df9b39f58 100644
--- a/types/naja/index.d.ts
+++ b/types/naja/index.d.ts
@@ -4,8 +4,6 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.5
 
-export as namespace Naja;
-
 interface FormsHandler {
     netteForms: object;
     initForms(element: Element): void;
@@ -39,9 +37,9 @@ export interface SnippetUpdateEvent extends Event {
     readonly snippet: HTMLElement;
 }
 
-export type SnippetUpdateListener = (
-    event: SnippetUpdateEvent,
-) => void | { handleEvent(event: SnippetUpdateEvent): void };
+export type SnippetUpdateListener =
+    | ((event: SnippetUpdateEvent) => Promise<void> | void)
+    | { handleEvent(event: SnippetUpdateEvent): Promise<void> | void };
 
 interface SnippetListeners {
     afterUpdate: SnippetUpdateListener;
@@ -128,7 +126,9 @@ export interface CompleteEvent<T extends object = any> extends Event {
     readonly options: Readonly<NajaOptions>;
 }
 
-export type NajaEventListener<T extends Event = Event> = (event: T) => void | { handleEvent(event: T): void };
+export type NajaEventListener<T extends Event = Event> =
+    | ((event: T) => Promise<void> | void)
+    | { handleEvent(event: T): Promise<void> | void };
 
 interface NajaEventsMap {
     init: NajaEventListener<InitEvent>;
@@ -148,9 +148,9 @@ interface NajaEventTarget extends EventTarget {
         listener: NajaEventsMap[K],
         options?: boolean | AddEventListenerOptions,
     ): void;
-    addEventListener(
-        type: string,
-        listener: EventListenerOrEventListenerObject | null,
+    addEventListener<T extends Event>(
+        type: T['type'],
+        listener: NajaEventListener<T>,
         options?: boolean | AddEventListenerOptions,
     ): void;
     removeEventListener<K extends keyof NajaEventsMap>(
@@ -158,9 +158,9 @@ interface NajaEventTarget extends EventTarget {
         listener: NajaEventsMap[K],
         options?: boolean | AddEventListenerOptions,
     ): void;
-    removeEventListener(
-        type: string,
-        listener: EventListenerOrEventListenerObject | null,
+    removeEventListener<T extends Event>(
+        type: T['type'],
+        listener: NajaEventListener<T>,
         options?: boolean | AddEventListenerOptions,
     ): void;
 }
@@ -183,3 +183,4 @@ export interface Naja extends NajaEventTarget {
 declare const naja: Naja;
 
 export default naja;
+export as namespace naja;
diff --git a/types/naja/naja-tests.ts b/types/naja/naja-tests.ts
index fe950aec5f..3788ae9a07 100644
--- a/types/naja/naja-tests.ts
+++ b/types/naja/naja-tests.ts
@@ -57,9 +57,22 @@ naja.addEventListener('complete', completeListener);
 naja.removeEventListener('start', genericListener);
 naja.snippetHandler.removeEventListener('beforeUpdate', null);
 
+type TestEvent = CustomEvent<{ customProperty: string }>;
+interface OtherEvent extends Event {
+    otherProperty: number;
+    type: 'otherEvent';
+}
+
+const handler = (event: TestEvent): void => console.log(typeof event.detail.customProperty === 'string');
+
 document.addEventListener('DOMContentLoaded', () => {
     naja.initialize();
     naja.initialize({ history: false, selector: '[data-ajax]', customOption: 1 });
     naja.fireEvent('customEvent', { extra: 1 });
     naja.fireEvent('anotherEvent');
+    naja.addEventListener<TestEvent>('testEvent', handler);
+    naja.addEventListener('someEvent', event => console.log(event.target));
+    naja.removeEventListener('testEvent', handler);
+    naja.removeEventListener('someEvent', event => {});
+    naja.addEventListener<OtherEvent>('otherEvent', event => console.log(event.otherProperty === 1));
 });