fix(listen): ensure window events from Listen decorator are captured

Author: adamdbradley

src/renderer/dom-api.ts

@@ -131,7 +131,7 @@ export const createDomApi = (App: AppGlobal, win: any, doc: Document): DomApi =>
         assignersUnregListeners[assignersEventName]();
       }
 
-      if (_BUILD_.event && typeof attachTo === 'string') {
+      if ((_BUILD_.event || _BUILD_.listener) && typeof attachTo === 'string') {
         // attachTo is a string, and is probably something like
         // "parent", "window", or "document"
         // and the eventName would be like "mouseover" or "mousemove"
@@ -141,7 +141,7 @@ export const createDomApi = (App: AppGlobal, win: any, doc: Document): DomApi =>
         // we were passed in an actual element to attach to
         attachToElm = attachTo;
 
-      } else if (_BUILD_.event) {
+      } else if (_BUILD_.event || _BUILD_.listener) {
         // depending on the event name, we could actually be attaching
         // this element to something like the document or window
         splt = eventName.split(':');
@@ -159,7 +159,7 @@ export const createDomApi = (App: AppGlobal, win: any, doc: Document): DomApi =>
         // somehow we're referencing an element that doesn't exist
         // let's not continue
 
-        if (_BUILD_.event) {
+        if (_BUILD_.event || _BUILD_.listener) {
           // test to see if we're looking for an exact keycode
           splt = eventName.split('.');
 

test/karma/test-app/components.d.ts

@@ -204,6 +204,9 @@ export namespace Components {
   interface LifecycleUnloadRoot {}
   interface LifecycleUnloadRootAttributes extends StencilHTMLAttributes {}
 
+  interface ListenWindow {}
+  interface ListenWindowAttributes extends StencilHTMLAttributes {}
+
   interface NodeGlobals {}
   interface NodeGlobalsAttributes extends StencilHTMLAttributes {}
 
@@ -412,6 +415,7 @@ declare global {
     'LifecycleUnloadA': Components.LifecycleUnloadA;
     'LifecycleUnloadB': Components.LifecycleUnloadB;
     'LifecycleUnloadRoot': Components.LifecycleUnloadRoot;
+    'ListenWindow': Components.ListenWindow;
     'NodeGlobals': Components.NodeGlobals;
     'ReflectToAttr': Components.ReflectToAttr;
     'ScopedBasicRoot': Components.ScopedBasicRoot;
@@ -490,6 +494,7 @@ declare global {
     'lifecycle-unload-a': Components.LifecycleUnloadAAttributes;
     'lifecycle-unload-b': Components.LifecycleUnloadBAttributes;
     'lifecycle-unload-root': Components.LifecycleUnloadRootAttributes;
+    'listen-window': Components.ListenWindowAttributes;
     'node-globals': Components.NodeGlobalsAttributes;
     'reflect-to-attr': Components.ReflectToAttrAttributes;
     'scoped-basic-root': Components.ScopedBasicRootAttributes;
@@ -743,6 +748,12 @@ declare global {
     new (): HTMLLifecycleUnloadRootElement;
   };
 
+  interface HTMLListenWindowElement extends Components.ListenWindow, HTMLStencilElement {}
+  var HTMLListenWindowElement: {
+    prototype: HTMLListenWindowElement;
+    new (): HTMLListenWindowElement;
+  };
+
   interface HTMLNodeGlobalsElement extends Components.NodeGlobals, HTMLStencilElement {}
   var HTMLNodeGlobalsElement: {
     prototype: HTMLNodeGlobalsElement;
@@ -1019,6 +1030,7 @@ declare global {
     'lifecycle-unload-a': HTMLLifecycleUnloadAElement
     'lifecycle-unload-b': HTMLLifecycleUnloadBElement
     'lifecycle-unload-root': HTMLLifecycleUnloadRootElement
+    'listen-window': HTMLListenWindowElement
     'node-globals': HTMLNodeGlobalsElement
     'reflect-to-attr': HTMLReflectToAttrElement
     'scoped-basic-root': HTMLScopedBasicRootElement
@@ -1097,6 +1109,7 @@ declare global {
     'lifecycle-unload-a': HTMLLifecycleUnloadAElement;
     'lifecycle-unload-b': HTMLLifecycleUnloadBElement;
     'lifecycle-unload-root': HTMLLifecycleUnloadRootElement;
+    'listen-window': HTMLListenWindowElement;
     'node-globals': HTMLNodeGlobalsElement;
     'reflect-to-attr': HTMLReflectToAttrElement;
     'scoped-basic-root': HTMLScopedBasicRootElement;

test/karma/test-app/listen-window/cmp-a.tsx

@@ -0,0 +1,31 @@
+import { Component, Listen, State } from '../../../../dist';
+
+
+@Component({
+  tag: 'listen-window'
+})
+export class ListenWindow {
+  @State() clicked = 0;
+  @State() scrolled = 0;
+
+  @Listen('window:click')
+  winClick() {
+    this.clicked++;
+  }
+
+  @Listen('window:scroll')
+  winScroll() {
+    this.scrolled++;
+  }
+
+  render() {
+    return (
+      <div>
+        <div id="clicked">Clicked: {this.clicked}</div>
+        <div>Scrolled: {this.scrolled}</div>
+        <button>Click!</button>
+        <div style={{background: 'gray', paddingTop: '2000px'}}></div>
+      </div>
+    );
+  }
+}

test/karma/test-app/listen-window/index.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<script src="/build/testapp.js"></script>
+
+<listen-window></listen-window>

test/karma/test-app/listen-window/karma.spec.ts

@@ -0,0 +1,24 @@
+import { setupDomTests, waitForChanges } from '../util';
+
+describe('listen-window', () => {
+  const { setupDom, tearDownDom } = setupDomTests(document);
+  let app: HTMLElement;
+
+  beforeEach(async () => {
+    app = await setupDom('/listen-window/index.html');
+  });
+  afterEach(tearDownDom);
+
+  it('window should receive click events', async () => {
+    const clicked = app.querySelector('#clicked');
+    expect(clicked.textContent.trim()).toBe('Clicked: 0');
+
+    const btn = app.querySelector('button');
+    btn.click();
+
+    await waitForChanges();
+
+    expect(clicked.textContent.trim()).toBe('Clicked: 1');
+  });
+
+});