fix(events): ensure both listen decorator and jsx can assign same event

Author: adamdbradley

src/core/listeners.ts

@@ -20,6 +20,7 @@ export function initElementListeners(plt: PlatformApi, elm: HostElement) {
           elm,
           listenMeta.eventName,
           createListenerCallback(plt, elm, listenMeta.eventMethodName),
+          1,
           listenMeta.eventCapture,
           listenMeta.eventPassive
         );
@@ -70,6 +71,7 @@ export function enableEventListener(plt: PlatformApi, instance: ComponentInstanc
             elm,
             eventName,
             (ev: any) => instance[listenMeta.eventMethodName](ev),
+            1,
             listenMeta.eventCapture,
             (passive === undefined) ? listenMeta.eventPassive : !!passive,
             attachTo
@@ -79,7 +81,7 @@ export function enableEventListener(plt: PlatformApi, instance: ComponentInstanc
       } else {
         // we're disabling the event listener
         // so let's just remove it entirely
-        plt.domApi.$removeEventListener(elm, eventName);
+        plt.domApi.$removeEventListener(elm, eventName, 1);
       }
     }
   }

src/core/test/listeners.spec.ts

@@ -360,7 +360,7 @@ describe('instance listeners', () => {
       };
 
       // test if target-addEventListener is called properly
-      domApi.$addEventListener(el, eventName, f, capture, passive);
+      domApi.$addEventListener(el, eventName, f, 0, capture, passive);
       expect(target.addEventListener).toHaveBeenCalledWith(targetName, internalCallback, {
         passive: passive,
         capture: capture
@@ -376,7 +376,7 @@ describe('instance listeners', () => {
       expect(calledCallback).toBeTruthy();
 
       // test if the listener is removed
-      domApi.$removeEventListener(el, eventName);
+      domApi.$removeEventListener(el, eventName, 0);
       expect(target.removeEventListener).toHaveBeenCalledWith(targetName, internalCallback, {
         passive: passive,
         capture: capture

src/declarations/dom.ts

@@ -27,8 +27,8 @@ export interface DomApi {
   $hasAttribute(elm: any, key: string): boolean;
   $elementRef?(elm: any, referenceName: string): any;
   $parentElement?(node: Node): any;
-  $addEventListener?(elm: any, eventName: string, eventListener: any, useCapture?: boolean, usePassive?: boolean, attachTo?: string|Element): void;
-  $removeEventListener?(elm: any, eventName?: string): any;
+  $addEventListener?(elm: any, eventName: string, eventListener: any, assignerId: 0 | 1, useCapture?: boolean, usePassive?: boolean, attachTo?: string|Element): void;
+  $removeEventListener?(elm: any, eventName?: string, assignerId?: 0 | 1): any;
   $dispatchEvent?(elm: Element | Document | Window, eventName: string, data: any): CustomEvent;
   $supportsShadowDom?: boolean;
   $supportsEventOptions?: boolean;

src/renderer/dom-api.ts

@@ -114,7 +114,7 @@ export const createDomApi = (App: AppGlobal, win: any, doc: Document): DomApi =>
       return elm;
     },
 
-    $addEventListener: (assignerElm, eventName, listenerCallback, useCapture, usePassive, attachTo, eventListenerOpts?: any, splt?: string[], assignersEventName?: string) => {
+    $addEventListener: (assignerElm, eventName, listenerCallback, assignerId, useCapture, usePassive, attachTo, eventListenerOpts?: any, splt?: string[], assignersEventName?: string) => {
       // remember the original name before we possibly change it
       let attachToElm = assignerElm;
       let eventListener = listenerCallback;
@@ -123,7 +123,7 @@ export const createDomApi = (App: AppGlobal, win: any, doc: Document): DomApi =>
       // this element from the unregister listeners weakmap
       let assignersUnregListeners = unregisterListenerFns.get(assignerElm);
 
-      assignersEventName = eventName;
+      assignersEventName = eventName + assignerId;
 
       if (assignersUnregListeners && assignersUnregListeners[assignersEventName]) {
         // removed any existing listeners for this event for the assigner element
@@ -202,13 +202,13 @@ export const createDomApi = (App: AppGlobal, win: any, doc: Document): DomApi =>
       }
     },
 
-    $removeEventListener: (elm, eventName, assignersUnregListeners?: any) => {
+    $removeEventListener: (elm, eventName, assignerId, assignersUnregListeners?: any) => {
       // get the unregister listener functions for this element
       if ((assignersUnregListeners = unregisterListenerFns.get(elm))) {
         // this element has unregister listeners
         if (eventName) {
           // passed in one specific event name to remove
-          assignersUnregListeners[eventName] && assignersUnregListeners[eventName]();
+          assignersUnregListeners[eventName + assignerId] && assignersUnregListeners[eventName + assignerId]();
 
         } else {
           // remove all event listeners

src/renderer/vdom/set-accessor.ts

@@ -78,12 +78,12 @@ export const setAccessor = (plt: d.PlatformApi, elm: HTMLElement, memberName: st
     if (newValue) {
       if (newValue !== oldValue) {
         // add listener
-        plt.domApi.$addEventListener(elm, memberName, newValue);
+        plt.domApi.$addEventListener(elm, memberName, newValue, 0);
       }
 
     } else if (_BUILD_.updatable) {
       // remove listener
-      plt.domApi.$removeEventListener(elm, memberName);
+      plt.domApi.$removeEventListener(elm, memberName, 0);
     }
 
   } else if (memberName !== 'list' && memberName !== 'type' && !isSvg &&