fix(inViewport): Avoid triggering change detection unless necessary

The scroll/resize handler now runs outside angular to avoid triggering change detection in response to every event. Change detection should now run only if the in-viewport status changes.

Author: lukas-shawford

.gitignore

@@ -12,3 +12,4 @@ src/**/*.js
 e2e/**/*.js
 e2e/**/*.js.map
 coverage
+.idea/

src/lib/src/in-viewport/in-viewport.directive.spec.ts

@@ -1,30 +1,32 @@
 import { fakeAsync, tick } from '@angular/core/testing';
-import { ElementRef } from '@angular/core';
+import { ElementRef, NgZone } from '@angular/core';
 import { WindowRef } from '../window/window.service';
 import { InViewportDirective } from './in-viewport.directive';
+import { FakeDOMStandardElement } from '../testing/dom';
+import { MockNgZone } from '../testing/mock-ng-zone';
 
 describe('InViewportDirective', () => {
   let node: HTMLElement;
   let el: ElementRef;
   let directive: InViewportDirective;
-  const renderer = {
-    listen: (element: HTMLElement, event: string, callback: () => void) => { }
-  };
   const text = 'Exercitation est eu reprehenderit veniam anim veniam enim laboris nisi.';
   let windowRef: WindowRef;
   let rectSpy = jasmine.createSpy('rectSpy');
   let cdRef = { detectChanges: () => {} };
+  let zone: NgZone;
 
   beforeEach(() => {
-    windowRef = new WindowRef();
+    windowRef = new FakeDOMStandardElement('window') as any as WindowRef;
     windowRef.innerWidth = 1366;
     windowRef.innerHeight = 768;
+    (<any>windowRef).addEventListener = () => {};
     rectSpy.and.returnValue({ left: 0, right: 1366, top: 0, bottom: 500 });
     node = document.createElement('p');
     node.innerText = text;
     el = new ElementRef(node);
     el.nativeElement.getBoundingClientRect = rectSpy;
-    directive = new InViewportDirective(el, <any>renderer, windowRef, <any>cdRef);
+    zone = new MockNgZone();
+    directive = new InViewportDirective(el, windowRef, <any>cdRef, zone);
     directive.ngAfterViewInit();
   });
 
@@ -144,18 +146,12 @@ describe('InViewportDirective', () => {
   describe('scrollable parent element', () => {
     it('should add event handler for parent element scroll events', () => {
       const div = document.createElement('div');
-      const spy = spyOn(renderer, 'listen');
+      const spy = spyOn(div, 'addEventListener');
       directive.parentEl = div;
       directive.ngAfterViewInit();
       expect(spy).toHaveBeenCalled();
     });
 
-    it('should do nothing if no parent element', () => {
-      const spy = spyOn(renderer, 'listen');
-      directive.ngAfterViewInit();
-      expect(spy).not.toHaveBeenCalled();
-    });
-
     it('should emit next value in viewport$ observable', fakeAsync(() => {
       const spy = spyOn(directive, 'calculateInViewportStatus');
       directive.onParentScroll();

src/lib/src/in-viewport/in-viewport.directive.ts

@@ -1,11 +1,15 @@
 import {
-  Directive, ElementRef, HostListener, HostBinding,
-  EventEmitter, Input, Output, OnDestroy, AfterViewInit,
-  Renderer2, ChangeDetectorRef
+  Directive, ElementRef, HostBinding, EventEmitter,
+  Input, Output, OnDestroy, AfterViewInit,
+  ChangeDetectorRef, NgZone
 } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
+import { fromEvent } from 'rxjs/observable/fromEvent';
+import 'rxjs/add/operator/auditTime';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/takeUntil';
+import 'rxjs/add/observable/merge';
 
 import { WindowRef } from '../window/window.service';
 import { Viewport } from '../shared/viewport.model';
@@ -123,13 +127,16 @@ export class InViewportDirective implements AfterViewInit, OnDestroy {
   /**
    * Creates an instance of InViewportDirective.
    * @param {ElementRef} el
+   * @param {WindowRef} win
+   * @param {ChangeDetectorRef} cdRef
+   * @param {NgZone} ngZone
    * @memberof InViewportDirective
    */
   constructor(
     private el: ElementRef,
-    private renderer: Renderer2,
     private win: WindowRef,
-    private cdRef: ChangeDetectorRef
+    private cdRef: ChangeDetectorRef,
+    private ngZone: NgZone
   ) { }
   /**
    * Subscribe to `viewport$` observable which
@@ -146,8 +153,22 @@ export class InViewportDirective implements AfterViewInit, OnDestroy {
       .debounceTime(this.debounce)
       .subscribe(() => this.calculateInViewportStatus());
 
+    // Listen for window scroll/resize events.
+    this.ngZone.runOutsideAngular(() => {
+      Observable.merge(
+          fromEvent(this.win as any, eventData.eventWindowResize),
+          fromEvent(this.win as any, eventData.eventWindowScroll)
+        )
+        .auditTime(this.debounce)
+        .subscribe(() => this.onViewportChange());
+    });
+
     if (this.parentEl) {
-      this.renderer.listen(this.parentEl, eventData.eventScroll, this.onParentScroll.bind(this));
+      this.ngZone.runOutsideAngular(() => {
+        fromEvent(this.parentEl, eventData.eventScroll)
+          .auditTime(this.debounce)
+          .subscribe(() => this.onParentScroll());
+      });
     }
   }
   /**
@@ -165,16 +186,13 @@ export class InViewportDirective implements AfterViewInit, OnDestroy {
    *
    * @memberof InViewportDirective
    */
-  @HostListener(eventData.eventWindowScroll)
-  @HostListener(eventData.eventWindowResize)
   public onViewportChange(): void {
     this.viewport$.next();
   }
   /**
    * Calculate inViewport status and emit event
    * when viewport status has changed
    *
-   * @param {Viewport} viewport
    * @memberof InViewportDirective
    */
   public calculateInViewportStatus(): void {
@@ -194,7 +212,7 @@ export class InViewportDirective implements AfterViewInit, OnDestroy {
     this.inViewport = (inParentViewport && inWindowViewport);
 
     if (oldInViewport !== this.inViewport) {
-      this.onInViewportChange.emit(this.inViewport);
+      this.ngZone.run(() => this.onInViewportChange.emit(this.inViewport));
     }
   }
   /**

src/lib/src/shared/event-data.ts

@@ -10,8 +10,8 @@ export const eventPathResize = [
   '$event.target.scrollY',
   '$event.target.scrollX'
 ];
-export const eventWindowResize = 'window:resize';
-export const eventWindowScroll = 'window:scroll';
+export const eventWindowResize = 'resize';
+export const eventWindowScroll = 'scroll';
 export const inViewportClass = 'class.sn-viewport-in';
 export const notInViewportClass = 'class.sn-viewport-out';
 

src/lib/src/testing/dom.ts

@@ -0,0 +1,24 @@
+export class FakeDOMStandardElement {
+  private listeners: object;
+  private nodeName: string;
+
+  constructor(nodeName: string) {
+    this.listeners = {};
+    this.nodeName = nodeName;
+  }
+
+  addEventListener(eventName: string, handler: any, useCapture: boolean) {
+    this.listeners[eventName] = handler;
+  }
+
+  removeEventListener(eventName: string, handler: any, useCapture: boolean) {
+    delete this.listeners[eventName];
+  }
+
+  trigger(eventName: string) {
+    let args = Array.prototype.slice.call(arguments, 1);
+    if (eventName in this.listeners) {
+      this.listeners[eventName].apply(null, args);
+    }
+  }
+}

src/lib/src/testing/mock-ng-zone.ts

@@ -0,0 +1,11 @@
+import { EventEmitter, NgZone } from '@angular/core';
+
+export class MockNgZone extends NgZone {
+  private _mockOnStable: EventEmitter<any> = new EventEmitter(false);
+  constructor() { super({enableLongStackTrace: false}); }
+  set onStable(v) {}
+  get onStable() { return this._mockOnStable; }
+  run(fn: Function): any { return fn(); }
+  runOutsideAngular(fn: Function): any { return fn(); }
+  simulateZoneExit(): void { this.onStable.emit(null); }
+}