refactor: use debounce logic from rxjs

Author: crisbeto

src/lib/core/observe-content/observe-content.spec.ts

@@ -89,15 +89,6 @@ describe('Observe content', () => {
       tick(500);
       expect(fixture.componentInstance.spy).toHaveBeenCalledTimes(1);
     }));
-
-    it('should should keep track of and merge all of the mutation records', fakeAsync(() => {
-      invokeCallbacks([1]);
-      invokeCallbacks([2]);
-      invokeCallbacks([3]);
-
-      tick(500);
-      expect(fixture.componentInstance.spy).toHaveBeenCalledWith([1, 2, 3]);
-    }));
   });
 });
 

src/lib/core/observe-content/observe-content.ts

@@ -10,8 +10,9 @@ import {
   AfterContentInit,
   Injector,
 } from '@angular/core';
-
-import {debounce} from '../util/debounce';
+import {Observable} from 'rxjs/Observable';
+import {Subject} from 'rxjs/Subject';
+import 'rxjs/add/operator/debounceTime';
 
 /**
  * Directive that triggers a callback whenever the content of
@@ -23,36 +24,24 @@ import {debounce} from '../util/debounce';
 export class ObserveContent implements AfterContentInit, OnDestroy {
   private _observer: MutationObserver;
 
-  /** Collects any MutationRecords that haven't been emitted yet. */
-  private _pendingRecords: MutationRecord[] = [];
-
   /** Event emitted for each change in the element's content. */
   @Output('cdkObserveContent') event = new EventEmitter<MutationRecord[]>();
 
+  /** Used for debouncing the emitted values to the observeContent event. */
+  private _debouncer = new Subject<MutationRecord[]>();
+
   /** Debounce interval for emitting the changes. */
   @Input() debounce: number;
 
   constructor(private _elementRef: ElementRef, private _injector: Injector) { }
 
   ngAfterContentInit() {
-    let callback: MutationCallback;
-
-    // If a debounce interval is specified, keep track of the mutations and debounce the emit.
-    if (this.debounce > 0) {
-      let debouncedEmit = debounce((mutations: MutationRecord[]) => {
-        this.event.emit(this._pendingRecords);
-        this._pendingRecords = [];
-      }, this.debounce);
-
-      callback = (mutations: MutationRecord[]) => {
-        this._pendingRecords.push.apply(this._pendingRecords, mutations);
-        debouncedEmit();
-      };
-    } else {
-      callback = (mutations: MutationRecord[]) => this.event.emit(mutations);
-    }
+    this._debouncer
+      .debounceTime(this.debounce)
+      .subscribe(mutations => this.event.emit(mutations));
 
-    this._observer = new (this._injector.get(MutationObserver))(callback);
+    this._observer = new (this._injector.get(MutationObserver) as any)(
+        (mutations: MutationRecord[]) => this._debouncer.next(mutations));
 
     this._observer.observe(this._elementRef.nativeElement, {
       characterData: true,

src/lib/core/util/debounce.spec.ts

@@ -32,6 +32,7 @@ const ROLLUP_GLOBALS = {
   'rxjs/add/operator/first': 'Rx.Observable.prototype',
   'rxjs/add/operator/startWith': 'Rx.Observable.prototype',
   'rxjs/add/operator/switchMap': 'Rx.Observable.prototype',
+  'rxjs/add/operator/debounceTime': 'Rx.Observable.prototype',
   'rxjs/Observable': 'Rx'
 };