Revert "fix(engine): regular dom nodes can use object type event list…

…eners " (#979)

* Revert "fix(engine): regular dom nodes can use object type event listeners (#943) (#950)"

This reverts commit faf5bf4.

* Revert "fix(engine): patching events from lwc to be deterministic (#870)"

This reverts commit 8d3fc9f.

packages/@lwc/engine/src/env/element.ts

@@ -7,6 +7,8 @@
 import { hasOwnProperty, getOwnPropertyDescriptor } from "../shared/language";
 
 const {
+    addEventListener,
+    removeEventListener,
     hasAttribute,
     getAttribute,
     getAttributeNS,
@@ -22,20 +24,6 @@ const {
     getElementsByTagNameNS,
 } = Element.prototype;
 
-let {
-    addEventListener,
-    removeEventListener,
-} = Element.prototype;
-
-/**
- * This trick to try to pick up the __lwcOriginal__ out of the intrinsic is to please
- * jsdom, who usually reuse intrinsic between different document.
- */
-// @ts-ignore jsdom
-addEventListener = addEventListener.__lwcOriginal__ || addEventListener;
-// @ts-ignore jsdom
-removeEventListener = removeEventListener.__lwcOriginal__ || removeEventListener;
-
 const innerHTMLSetter: (this: Element, s: string) => void = hasOwnProperty.call(Element.prototype, 'innerHTML') ?
     getOwnPropertyDescriptor(Element.prototype, 'innerHTML')!.set! :
     getOwnPropertyDescriptor(HTMLElement.prototype, 'innerHTML')!.set!;  // IE11

packages/@lwc/engine/src/env/window.ts

@@ -26,23 +26,7 @@ if (typeof MO === 'undefined') {
 const MutationObserver = MO;
 const MutationObserverObserve = MutationObserver.prototype.observe;
 
-let {
-    addEventListener: windowAddEventListener,
-    removeEventListener: windowRemoveEventListener,
-} = window;
-
-/**
- * This trick to try to pick up the __lwcOriginal__ out of the intrinsic is to please
- * jsdom, who usually reuse intrinsic between different document.
- */
-// @ts-ignore jsdom
-windowAddEventListener = windowAddEventListener.__lwcOriginal__ || windowAddEventListener;
-// @ts-ignore jsdom
-windowRemoveEventListener = windowRemoveEventListener.__lwcOriginal__ || windowRemoveEventListener;
-
 export {
     MutationObserver,
     MutationObserverObserve,
-    windowAddEventListener,
-    windowRemoveEventListener,
 };

packages/@lwc/engine/src/faux-shadow/__tests__/events.spec.ts

@@ -334,10 +334,13 @@ describe('events', () => {
                 render() {
                     return rootHTML;
                 }
+                handleClick(evt) {
+                    // event handler is here to trigger patching of the event
+                }
             }
             const rootHTML = compileTemplate(`
                 <template>
-                    <div></div>
+                    <div onclick={handleClick}></div>
                 </template>
             `);
 
@@ -572,58 +575,4 @@ describe('events', () => {
             });
         });
     });
-    describe('event patching preserves standard listener specs', () => {
-        it('Issue#941: an object type EventListener works on standard html nodes outside custom element', () => {
-            let target;
-            const eventListener = {
-                handleEvent: function(evt) {
-                    expect(this).toBe(eventListener);
-                    target = evt.target;
-                }
-            };
-
-            class MyComponent extends LightningElement {
-            }
-            const elm = createElement('x-foo', { is: MyComponent });
-            const span = document.createElement('span');
-            span.appendChild(elm);
-            span.addEventListener('click', eventListener);
-            document.body.appendChild(span);
-            elm.click();
-            expect(target).toBe(elm);    
-        });
-        it('Issue#941: an object type EventListener works on standard html nodes in the template', () => {
-            expect.assertions(2);
-            const tpl = compileTemplate(`
-                <template>
-                    <button>click me</button>
-                </template>
-            `);
-
-            class MyComponent extends LightningElement {
-                renderedCallback() {
-                    const button = this.template.querySelector('button');
-                    const eventListener = {
-                        handleEvent: function(evt) {
-                            expect(this).toBe(eventListener);
-                            expect(evt.target).toBe(button);
-                        }
-                    };
-                    button.addEventListener('click', eventListener);
-                }
-
-                triggerInternalClick() {
-                    this.template.querySelector('button').click();
-                }
-
-                render() {
-                    return tpl;
-                }
-            }
-            MyComponent.publicMethods = ['triggerInternalClick'];
-            const elm = createElement('x-foo', { is: MyComponent });
-            document.body.appendChild(elm);
-            elm.triggerInternalClick();
-        });
-    });
 });

packages/@lwc/engine/src/faux-shadow/events.ts

@@ -5,6 +5,10 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 import assert from "../shared/assert";
+import {
+    addEventListener,
+    removeEventListener,
+} from "../env/element";
 import {
     compareDocumentPosition,
     DOCUMENT_POSITION_CONTAINED_BY,
@@ -16,15 +20,6 @@ import { eventCurrentTargetGetter, eventTargetGetter } from "../env/dom";
 import { pathComposer } from "./../3rdparty/polymer/path-composer";
 import { retarget } from "./../3rdparty/polymer/retarget";
 
-import "../polyfills/event-listener/main";
-
-// intentionally extracting the patched addEventListener and removeEventListener from Node.prototype
-// due to the issues with JSDOM patching hazard.
-const {
-    addEventListener,
-    removeEventListener,
-} = Node.prototype;
-
 interface WrappedListener extends EventListener {
     placement: EventListenerContext;
     original: EventListener;
@@ -207,6 +202,7 @@ function domListener(evt: Event) {
         enumerable: true,
         configurable: true,
     });
+    patchEvent(evt);
     // in case a listener adds or removes other listeners during invocation
     const bookkeeping: WrappedListener[] = ArraySlice.call(listeners);
 
@@ -283,7 +279,7 @@ function isValidEventForCustomElement(event: Event): boolean {
 
 export function addCustomElementEventListener(elm: HTMLElement, type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
     if (process.env.NODE_ENV !== 'production') {
-        assert.invariant(isFunction(listener), `Invalid second argument for this.addEventListener() in ${toString(elm)} for event "${type}". Expected an EventListener but received ${listener}.`);
+        assert.invariant(isFunction(listener), `Invalid second argument for this.template.addEventListener() in ${toString(elm)} for event "${type}". Expected an EventListener but received ${listener}.`);
         // TODO: issue #420
         // this is triggered when the component author attempts to add a listener programmatically into a lighting element node
         if (!isUndefined(options)) {

packages/@lwc/engine/src/framework/api.ts

@@ -32,7 +32,7 @@ import {
     createTextHook,
     createCommentHook,
 } from "./hooks";
-import { markAsDynamicChildren } from "./patch";
+import { markAsDynamicChildren, patchEvent } from "./patch";
 import {
     isNativeShadowRootAvailable,
 } from "../env/dom";
@@ -547,6 +547,9 @@ export function b(fn: EventListener): EventListener {
     }
     const vm: VM = vmBeingRendered;
     return function(event: Event) {
+        if (vm.fallback) {
+            patchEvent(event);
+        }
         invokeEventListener(vm, fn, vm.component, event);
     };
 }

packages/@lwc/engine/src/framework/base-lightning-element.ts

@@ -180,7 +180,7 @@ BaseLightningElement.prototype = {
         if (process.env.NODE_ENV !== 'production') {
             assert.isTrue(vm && "cmpRoot" in vm, `${vm} is not a vm.`);
             assert.invariant(!isRendering, `${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
-            assert.invariant(isFunction(listener), `Invalid second argument for this.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
+            assert.invariant(isFunction(listener), `Invalid second argument for this.template.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
         }
         const wrappedListener = getWrappedComponentsListener(vm, listener);
         vm.elm.addEventListener(type, wrappedListener, options);

packages/@lwc/engine/src/framework/patch.ts

@@ -5,6 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 import { VNodes } from "../3rdparty/snabbdom/types";
+import { patchEvent } from "../faux-shadow/faux";
 import { tagNameGetter } from "../env/element";
 import { updateDynamicChildren, updateStaticChildren } from "../3rdparty/snabbdom/snabbdom";
 import { setPrototypeOf, create, isUndefined, isTrue } from "../shared/language";
@@ -98,3 +99,7 @@ export function patchCustomElementProto(elm: HTMLElement, options: { def: Compon
     setPrototypeOf(elm, patchedBridge.prototype);
     setCSSToken(elm, shadowAttribute);
 }
+
+export {
+    patchEvent,
+};