fix(engine): fixing event target from slotted element (#359)

* fix(engine): fixing event target from slotted element

* fix(engine): linting

* fix(engine): linting

* fix(engine): pr fixes

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

@@ -1,11 +1,11 @@
 import assert from "./assert";
-import { vmBeingRendered, invokeEventListener, EventListenerContext } from "./invoker";
+import { vmBeingRendered } from "./invoker";
 import { freeze, isArray, isUndefined, isNull, isFunction, isObject, isString, ArrayPush, assign, create, forEach, StringSlice, StringCharCodeAt, isNumber, isTrue, hasOwnProperty } from "./language";
 import { EmptyArray, SPACE_CHAR, ViewModelReflection, resolveCircularModuleDependency } from "./utils";
 import { renderVM, createVM, appendVM, removeVM, VM, getCustomElementVM, Slotset, allocateInSlot } from "./vm";
 import { ComponentConstructor } from "./component";
 import { VNode, VNodeData, VNodes, VElement, VComment, VText, Hooks } from "../3rdparty/snabbdom/types";
-import { patchShadowDomEvent, isValidEventForCustomElement } from "./events";
+import { getWrappedTemplateListener } from "./events";
 
 export interface RenderAPI {
     s(slotName: string, data: VNodeData, children: VNodes, slotset: Slotset): VNode;
@@ -410,12 +410,7 @@ export function b(fn: EventListener): EventListener {
         throw new Error();
     }
     const vm: VM = vmBeingRendered;
-    return function handler(event: Event) {
-        if (isValidEventForCustomElement(event)) {
-            patchShadowDomEvent(vm, event);
-            invokeEventListener(vm, EventListenerContext.COMPONENT_LISTENER, fn, vm.component, event);
-        }
-    };
+    return getWrappedTemplateListener(vm, fn);
 }
 
 // [k]ey function

packages/lwc-engine/src/framework/events.ts

@@ -9,7 +9,7 @@ import {
 } from "./dom/node";
 import { VM, OwnerKey, getElementOwnerVM, getCustomElementVM } from "./vm";
 import { isNull, ArraySplice, ArrayIndexOf, create, ArrayPush, isUndefined, isFunction, getOwnPropertyDescriptor, defineProperties, isTrue } from "./language";
-import { isRendering, vmBeingRendered, invokeEventListener, EventListenerContext, componentEventListenerType } from "./invoker";
+import { isRendering, vmBeingRendered, invokeEventListener, EventListenerContext, componentEventListenerType, invokeComponentCallback } from "./invoker";
 import { patchShadowDomTraversalMethods } from "./dom/traverse";
 
 interface WrappedListener extends EventListener {
@@ -139,6 +139,24 @@ function getWrappedComponentsListener(vm: VM, listener: EventListener): WrappedL
     return wrappedListener;
 }
 
+// This method is for wrapping event listeners bound in the template.
+export function getWrappedTemplateListener(vm: VM, fn: EventListener): EventListener {
+    if (process.env.NODE_ENV !== 'production') {
+        assert.vm(vm);
+    }
+    return function handler(event: Event) {
+        if (isValidEventForCustomElement(event)) {
+            patchShadowDomEvent(vm, event);
+
+            // We do not want to call invoker/invokeEventListener because
+            // that method is for calling events added to the custom element from within.
+            // Instead, we can just call the component callback directly because the callback
+            // is guaranteed to not be attached directly to the root or component instance.
+            invokeComponentCallback(vm, fn, [event]);
+        }
+    };
+}
+
 function createElementEventListener(vm: VM) {
     if (process.env.NODE_ENV !== 'production') {
         assert.vm(vm);

packages/lwc-integration/src/components/events/test-slotted-custom-element-event-target/child/child.html

@@ -0,0 +1,3 @@
+<template>
+    Child
+</template>

packages/lwc-integration/src/components/events/test-slotted-custom-element-event-target/child/child.js

@@ -0,0 +1,5 @@
+import { Element } from 'engine';
+
+export default class Child extends Element {
+
+}

packages/lwc-integration/src/components/events/test-slotted-custom-element-event-target/parent/parent.html

@@ -0,0 +1,6 @@
+<template>
+    <div onclick={handleClick}>
+        <slot></slot>
+    </div>
+    <div class="correct-event-target" if:true={eventTargetIsCorrectTag}>Event target is correct</div>
+</template>

packages/lwc-integration/src/components/events/test-slotted-custom-element-event-target/parent/parent.js

@@ -0,0 +1,8 @@
+import { Element, track } from 'engine';
+
+export default class XParent extends Element {
+    @track eventTargetIsCorrectTag = false;
+    handleClick(evt) {
+        this.eventTargetIsCorrectTag = evt.target.tagName === 'X-CHILD';
+    }
+}

packages/lwc-integration/src/components/events/test-slotted-custom-element-event-target/slotted-custom-element-event-target.spec.js

@@ -0,0 +1,16 @@
+const assert = require('assert');
+
+describe('Event target in slot elements', () => {
+    const URL = 'http://localhost:4567/slotted-custom-element-event-target/';
+
+    before(() => {
+        browser.url(URL);
+    });
+
+    it('should receive event with correct target', function () {
+        browser.execute(function () {
+            document.querySelector('x-child').click();
+        });
+        assert.strictEqual(browser.getText('.correct-event-target'), 'Event target is correct');
+    });
+});

packages/lwc-integration/src/components/events/test-slotted-custom-element-event-target/slotted-custom-element-event-target/slotted-custom-element-event-target.html

@@ -0,0 +1,5 @@
+<template>
+    <x-parent>
+        <x-child></x-child>
+    </x-parent>
+</template>

packages/lwc-integration/src/components/events/test-slotted-custom-element-event-target/slotted-custom-element-event-target/slotted-custom-element-event-target.js

@@ -0,0 +1,5 @@
+import { Element } from 'engine';
+
+export default class SlottedElementEventTarget extends Element {
+
+}

packages/lwc-integration/src/components/events/test-slotted-native-element-event-target/child/child.html

@@ -0,0 +1,6 @@
+<template>
+    <div class="div-click" onclick={handleClick}>
+        <slot></slot>
+    </div>
+    <div class="correct-event-target" if:true={eventTargetIsPTag}>Event target is correct</div>
+</template>

packages/lwc-integration/src/components/events/test-slotted-native-element-event-target/child/child.js

@@ -0,0 +1,8 @@
+import { Element, track } from 'engine';
+
+export default class Child extends Element {
+    @track eventTargetIsPTag = false;
+    handleClick(evt) {
+        this.eventTargetIsPTag = evt.target.tagName === 'P';
+    }
+}

packages/lwc-integration/src/components/events/test-slotted-native-element-event-target/slotted-native-element-event-target.spec.js

@@ -0,0 +1,16 @@
+const assert = require('assert');
+
+describe('Event target in slot elements', () => {
+    const URL = 'http://localhost:4567/slotted-native-element-event-target/';
+
+    before(() => {
+        browser.url(URL);
+    });
+
+    it('should receive event with correct target', function () {
+        browser.execute(function () {
+            document.querySelector('p').click();
+        });
+        assert.strictEqual(browser.getText('.correct-event-target'), 'Event target is correct');
+    });
+});

packages/lwc-integration/src/components/events/test-slotted-native-element-event-target/slotted-native-element-event-target/slotted-native-element-event-target.html

@@ -0,0 +1,5 @@
+<template>
+    <x-child>
+        <p>Click Me</p>
+    </x-child>
+</template>

packages/lwc-integration/src/components/events/test-slotted-native-element-event-target/slotted-native-element-event-target/slotted-native-element-event-target.js

@@ -0,0 +1,5 @@
+import { Element } from 'engine';
+
+export default class SlottedElementEventTarget extends Element {
+
+}