feat(listen): remove Listen target: 'parent' option

Possible 'parent' does not exist, making for many edge cases to check for and additional runtime.

src/app-data/index.ts

@@ -19,7 +19,6 @@ export const BUILD: BuildConditionals = {
   hostListenerTargetWindow: true,
   hostListenerTargetDocument: true,
   hostListenerTargetBody: true,
-  hostListenerTargetParent: true,
   hostListenerTarget: true,
   member: true,
   method: true,

src/client/client-host-ref.ts

@@ -26,7 +26,7 @@ export const registerHost = (elm: d.HostElement, cmpMeta: d.ComponentRuntimeMeta
     elm['s-p'] = [];
     elm['s-rc'] = [];
   }
-  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
+  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
   return hostRefs.set(elm, hostRef);
 };
 

src/compiler/app-core/app-data.ts

@@ -29,7 +29,6 @@ export const getBuildFeatures = (cmps: ComponentCompilerMeta[]) => {
     hostListenerTargetWindow: cmps.some(c => c.hasListenerTargetWindow),
     hostListenerTargetDocument: cmps.some(c => c.hasListenerTargetDocument),
     hostListenerTargetBody: cmps.some(c => c.hasListenerTargetBody),
-    hostListenerTargetParent: cmps.some(c => c.hasListenerTargetParent),
     hostListenerTarget: cmps.some(c => c.hasListenerTarget),
     member: cmps.some(c => c.hasMember),
     method: cmps.some(c => c.hasMethod),

src/compiler/transformers/collections/parse-collection-deprecated.ts

@@ -78,7 +78,6 @@ function parseComponentDeprecated(config: d.Config, compilerCtx: d.CompilerCtx,
     hasListenerTargetWindow: false,
     hasListenerTargetDocument: false,
     hasListenerTargetBody: false,
-    hasListenerTargetParent: false,
     hasMember: false,
     hasMethod: false,
     hasMode: false,

src/compiler/transformers/component-build-conditionals.ts

@@ -33,7 +33,6 @@ export const setComponentBuildConditionals = (cmpMeta: d.ComponentCompilerMeta)
     cmpMeta.hasListenerTargetWindow = cmpMeta.listeners.some(l => l.target === 'window');
     cmpMeta.hasListenerTargetDocument = cmpMeta.listeners.some(l => l.target === 'document');
     cmpMeta.hasListenerTargetBody = cmpMeta.listeners.some(l => l.target === 'body');
-    cmpMeta.hasListenerTargetParent = cmpMeta.listeners.some(l => l.target === 'parent');
     cmpMeta.hasListenerTarget = cmpMeta.listeners.some(l => !!l.target);
   }
 

src/compiler/transformers/static-to-meta/component.ts

@@ -85,7 +85,6 @@ export const parseStaticComponentMeta = (
     hasListenerTargetWindow: false,
     hasListenerTargetDocument: false,
     hasListenerTargetBody: false,
-    hasListenerTargetParent: false,
     hasMember: false,
     hasMethod: false,
     hasMode: false,

src/declarations/stencil-private.ts

@@ -104,7 +104,6 @@ export interface BuildFeatures {
   hostListenerTargetWindow: boolean;
   hostListenerTargetDocument: boolean;
   hostListenerTargetBody: boolean;
-  hostListenerTargetParent: boolean;
   hostListenerTarget: boolean;
   method: boolean;
   prop: boolean;
@@ -737,7 +736,6 @@ export interface ComponentCompilerFeatures {
   hasListenerTargetWindow: boolean;
   hasListenerTargetDocument: boolean;
   hasListenerTargetBody: boolean;
-  hasListenerTargetParent: boolean;
   hasMember: boolean;
   hasMethod: boolean;
   hasMode: boolean;

src/declarations/stencil-public-runtime.ts

@@ -151,7 +151,7 @@ export interface ListenOptions {
   passive?: boolean;
 }
 
-export type ListenTargetOptions = 'parent' | 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 
 export interface StateDecorator {
   (): PropertyDecorator;

src/hydrate/platform/index.ts

@@ -125,7 +125,7 @@ export const registerHost = (elm: d.HostElement, cmpMeta: d.ComponentRuntimeMeta
   hostRef.$onReadyPromise$ = new Promise(r => (hostRef.$onReadyResolve$ = r));
   elm['s-p'] = [];
   elm['s-rc'] = [];
-  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
+  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
   return hostRefs.set(elm, hostRef);
 };
 

src/runtime/connected-callback.ts

@@ -15,11 +15,6 @@ export const connectedCallback = (elm: d.HostElement) => {
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
 
-    if (BUILD.hostListenerTargetParent) {
-      // only run if we have listeners being attached to a parent
-      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
-    }
-
     if (!(hostRef.$flags$ & HOST_FLAGS.hasConnected)) {
       // first time this component has connected
       hostRef.$flags$ |= HOST_FLAGS.hasConnected;
@@ -92,7 +87,7 @@ export const connectedCallback = (elm: d.HostElement) => {
 
       // reattach any event listeners to the host
       // since they would have been removed when disconnected
-      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
 
       // fire off connectedCallback() on component instance
       fireConnectedCallback(hostRef.$lazyInstance$);

src/runtime/host-listener.ts

@@ -3,28 +3,13 @@ import { BUILD } from '@app-data';
 import { doc, plt, supportsListenerOptions, win } from '@platform';
 import { HOST_FLAGS, LISTENER_FLAGS } from '@utils';
 
-export const addHostEventListeners = (elm: d.HostElement, hostRef: d.HostRef, listeners: d.ComponentRuntimeHostListener[], attachParentListeners: boolean) => {
+export const addHostEventListeners = (elm: d.HostElement, hostRef: d.HostRef, listeners: d.ComponentRuntimeHostListener[]) => {
   if (BUILD.hostListener && listeners) {
     // this is called immediately within the element's constructor
     // initialize our event listeners on the host element
     // we do this now so that we can listen to events that may
     // have fired even before the instance is ready
 
-    if (BUILD.hostListenerTargetParent) {
-      // this component may have event listeners that should be attached to the parent
-      if (attachParentListeners) {
-        // this is being ran from within the connectedCallback
-        // which is important so that we know the host element actually has a parent element
-        // filter out the listeners to only have the ones that ARE being attached to the parent
-        listeners = listeners.filter(([flags]) => flags & LISTENER_FLAGS.TargetParent);
-      } else {
-        // this is being ran from within the component constructor
-        // everything BUT the parent element listeners should be attached at this time
-        // filter out the listeners that are NOT being attached to the parent
-        listeners = listeners.filter(([flags]) => !(flags & LISTENER_FLAGS.TargetParent));
-      }
-    }
-
     listeners.map(([flags, name, method]) => {
       const target = BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
       const handler = hostListenerProxy(hostRef, method);
@@ -52,7 +37,6 @@ const getHostListenerTarget = (elm: Element, flags: number): EventTarget => {
   if (BUILD.hostListenerTargetDocument && flags & LISTENER_FLAGS.TargetDocument) return doc;
   if (BUILD.hostListenerTargetWindow && flags & LISTENER_FLAGS.TargetWindow) return win;
   if (BUILD.hostListenerTargetBody && flags & LISTENER_FLAGS.TargetBody) return doc.body;
-  if (BUILD.hostListenerTargetParent && flags & LISTENER_FLAGS.TargetParent) return elm.parentElement;
   return elm;
 };
 

src/runtime/test/listen.spec.tsx

@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Listen, State, h } from '@stencil/core';
+import { Component, Event, EventEmitter, Listen, State } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 describe('listen', () => {
@@ -45,7 +45,6 @@ describe('listen', () => {
     @Component({ tag: 'cmp-a' })
     class CmpA {
       @State() selfClicks = 0;
-      @State() parentClicks = 0;
       @State() bodyClicks = 0;
       @State() documentClicks = 0;
       @State() windowClicks = 0;
@@ -55,11 +54,6 @@ describe('listen', () => {
         this.selfClicks++;
       }
 
-      @Listen('click', { target: 'parent' })
-      onParentClick() {
-        this.parentClicks++;
-      }
-
       @Listen('click', { target: 'body' })
       onBodyClick() {
         this.bodyClicks++;
@@ -76,7 +70,7 @@ describe('listen', () => {
       }
 
       render() {
-        return `${this.selfClicks},${this.parentClicks},${this.bodyClicks},${this.documentClicks},${this.windowClicks}`;
+        return `${this.selfClicks},${this.bodyClicks},${this.documentClicks},${this.windowClicks}`;
       }
     }
 
@@ -89,43 +83,43 @@ describe('listen', () => {
     const other = doc.querySelector('other') as any;
 
     expect(root).toEqualHtml(`
-      <cmp-a>0,0,0,0,0</cmp-a>
+      <cmp-a>0,0,0,0</cmp-a>
     `);
 
     root.click();
     await waitForChanges();
     expect(root).toEqualHtml(`
-      <cmp-a>1,1,1,1,1</cmp-a>
+      <cmp-a>1,1,1,1</cmp-a>
     `);
 
     parent.click();
     await waitForChanges();
     expect(root).toEqualHtml(`
-      <cmp-a>1,2,2,2,2</cmp-a>
+      <cmp-a>1,2,2,2</cmp-a>
     `);
 
     other.click();
     await waitForChanges();
     expect(root).toEqualHtml(`
-      <cmp-a>1,2,3,3,3</cmp-a>
+      <cmp-a>1,3,3,3</cmp-a>
     `);
 
     body.click();
     await waitForChanges();
     expect(root).toEqualHtml(`
-      <cmp-a>1,2,4,4,4</cmp-a>
+      <cmp-a>1,4,4,4</cmp-a>
     `);
 
     doc.dispatchEvent(new CustomEvent('click', { bubbles: true }));
     await waitForChanges();
     expect(root).toEqualHtml(`
-      <cmp-a>1,2,4,5,5</cmp-a>
+      <cmp-a>1,4,5,5</cmp-a>
     `);
 
     win.dispatchEvent(new CustomEvent('click', { bubbles: true }));
     await waitForChanges();
     expect(root).toEqualHtml(`
-      <cmp-a>1,2,4,5,6</cmp-a>
+      <cmp-a>1,4,5,6</cmp-a>
     `);
   });
 

src/testing/platform/testing-host-ref.ts

@@ -37,6 +37,6 @@ export const registerHost = (elm: d.HostElement, cmpMeta: d.ComponentRuntimeMeta
   hostRef.$onReadyPromise$ = new Promise(r => (hostRef.$onReadyResolve$ = r));
   elm['s-p'] = [];
   elm['s-rc'] = [];
-  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
+  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
   hostRefs.set(elm, hostRef);
 };

src/utils/constants.ts

@@ -30,8 +30,7 @@ export const enum LISTENER_FLAGS {
 
   TargetDocument = 1 << 2,
   TargetWindow = 1 << 3,
-  TargetParent = 1 << 4,
-  TargetBody = 1 << 5,
+  TargetBody = 1 << 4,
 }
 
 export const enum HOST_FLAGS {

src/utils/format-component-runtime-meta.ts

@@ -156,9 +156,6 @@ const computeListenerFlags = (listener: d.ComponentCompilerListener) => {
     case 'window':
       flags |= LISTENER_FLAGS.TargetWindow;
       break;
-    case 'parent':
-      flags |= LISTENER_FLAGS.TargetParent;
-      break;
     case 'body':
       flags |= LISTENER_FLAGS.TargetBody;
       break;