feat(observe-content): refactor so logic can be used without directive

Author: mmalerba

src/cdk/observers/observe-content.spec.ts

@@ -1,11 +1,11 @@
-import {Component} from '@angular/core';
-import {async, TestBed, ComponentFixture, fakeAsync, tick} from '@angular/core/testing';
-import {ObserversModule, MutationObserverFactory} from './observe-content';
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {async, ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
+import {ContentObserverFactory, MutationObserverFactory, ObserversModule} from './observe-content';
 
 // TODO(elad): `ProxyZone` doesn't seem to capture the events raised by
 // `MutationObserver` and needs to be investigated
 
-describe('Observe content', () => {
+describe('Observe content directive', () => {
   describe('basic usage', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
@@ -120,6 +120,57 @@ describe('Observe content', () => {
   });
 });
 
+describe('Observe content injectable', () => {
+  describe('basic usage', () => {
+    let callbacks: Function[];
+    let invokeCallbacks = (args?: any) => callbacks.forEach(callback => callback(args));
+
+    beforeEach(fakeAsync(() => {
+      callbacks = [];
+
+      TestBed.configureTestingModule({
+        imports: [ObserversModule],
+        declarations: [UnobservedComponentWithTextContent],
+        providers: [{
+          provide: MutationObserverFactory,
+          useValue: {
+            create: function(callback: Function) {
+              callbacks.push(callback);
+
+              return {
+                observe: () => {},
+                disconnect: () => {}
+              };
+            }
+          }
+        }]
+      });
+
+      TestBed.compileComponents();
+    }));
+
+    it('should trigger the callback when the content of the element changes',
+        fakeAsync(inject([ContentObserverFactory], (cof: ContentObserverFactory) => {
+          let fixture = TestBed.createComponent(UnobservedComponentWithTextContent);
+          fixture.detectChanges();
+
+          const spy = jasmine.createSpy('content observer');
+
+          const observer = cof.create(fixture.componentInstance.contentEl.nativeElement);
+          observer.changes.subscribe(() => spy());
+          observer.start();
+
+          expect(spy).not.toHaveBeenCalled();
+
+          fixture.componentInstance.text = 'text';
+          fixture.detectChanges();
+          invokeCallbacks();
+
+          expect(spy).toHaveBeenCalled();
+        })));
+  });
+});
+
 
 @Component({
   template: `
@@ -147,3 +198,11 @@ class ComponentWithDebouncedListener {
   debounce = 500;
   spy = jasmine.createSpy('MutationObserver callback');
 }
+
+@Component({
+  template: `<div #contentEl>{{text}}</div>`
+})
+class UnobservedComponentWithTextContent {
+  @ViewChild('contentEl') contentEl: ElementRef;
+  text = '';
+}

src/cdk/observers/observe-content.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
 import {
   AfterContentInit,
   Directive,
@@ -16,12 +16,10 @@ import {
   Input,
   NgModule,
   NgZone,
-  OnChanges,
   OnDestroy,
   Output,
-  SimpleChanges,
 } from '@angular/core';
-import {Subject} from 'rxjs';
+import {Observable, Subject} from 'rxjs';
 import {debounceTime} from 'rxjs/operators';
 
 /**
@@ -35,6 +33,56 @@ export class MutationObserverFactory {
   }
 }
 
+
+/** A factory that creates ContentObservers. */
+@Injectable({providedIn: 'root'})
+export class ContentObserverFactory {
+  constructor(private _mutationObserverFactory: MutationObserverFactory, private _ngZone: NgZone) {}
+
+  create(element: Element, debounce?: number) {
+    const changes = new Subject<MutationRecord[]>();
+    const observer = this._ngZone.runOutsideAngular(
+        () => this._mutationObserverFactory.create((mutations) => changes.next(mutations)));
+    return new ContentObserver(element, observer, changes, debounce);
+  }
+}
+
+
+/** A class that observes an element for content changes. */
+export class ContentObserver {
+  changes: Observable<MutationRecord[]>;
+
+  constructor(private _element: Element, private _mutationObserver: MutationObserver | null,
+              private _rawChanges: Subject<MutationRecord[]>, debounce: number = 0) {
+    this.changes = debounce ?
+        this._rawChanges.pipe(debounceTime(debounce)) : this._rawChanges.asObservable();
+  }
+
+  start(): ContentObserver {
+    if (this._mutationObserver) {
+      this._mutationObserver.observe(this._element, {
+        characterData: true,
+        childList: true,
+        subtree: true
+      });
+    }
+    return this;
+  }
+
+  pause() {
+    if (this._mutationObserver) {
+      this._mutationObserver.disconnect();
+    }
+  }
+
+  stop() {
+    this.pause();
+    this._rawChanges.complete();
+    this._mutationObserver = null;
+  }
+}
+
+
 /**
  * Directive that triggers a callback whenever the content of
  * its associated element has changed.
@@ -43,10 +91,7 @@ export class MutationObserverFactory {
   selector: '[cdkObserveContent]',
   exportAs: 'cdkObserveContent',
 })
-export class CdkObserveContent implements AfterContentInit, OnChanges, OnDestroy {
-  private _observer: MutationObserver | null;
-  private _disabled = false;
-
+export class CdkObserveContent implements AfterContentInit, OnDestroy {
   /** Event emitted for each change in the element's content. */
   @Output('cdkObserveContent') event = new EventEmitter<MutationRecord[]>();
 
@@ -58,65 +103,42 @@ export class CdkObserveContent implements AfterContentInit, OnChanges, OnDestroy
   get disabled() { return this._disabled; }
   set disabled(value: any) {
     this._disabled = coerceBooleanProperty(value);
+    if (this._observer) {
+      if (this._disabled) {
+        this._observer.pause();
+      } else {
+        this._observer.start();
+      }
+    }
   }
-
-  /** Used for debouncing the emitted values to the observeContent event. */
-  private _debouncer = new Subject<MutationRecord[]>();
+  private _disabled = false;
 
   /** Debounce interval for emitting the changes. */
-  @Input() debounce: number;
+  @Input()
+  get debounce(): number { return this._debounce; }
+  set debounce(value: number) {
+    this._debounce = coerceNumberProperty(value);
+  }
+  private _debounce: number;
 
-  constructor(
-    private _mutationObserverFactory: MutationObserverFactory,
-    private _elementRef: ElementRef,
-    private _ngZone: NgZone) { }
+  private _observer: ContentObserver;
 
-  ngAfterContentInit() {
-    if (this.debounce > 0) {
-      this._ngZone.runOutsideAngular(() => {
-        this._debouncer.pipe(debounceTime(this.debounce))
-            .subscribe((mutations: MutationRecord[]) => this.event.emit(mutations));
-      });
-    } else {
-      this._debouncer.subscribe(mutations => this.event.emit(mutations));
-    }
+  constructor(private _contentObserverFactory: ContentObserverFactory,
+              private _elementRef: ElementRef, private _ngZone: NgZone) {}
 
-    this._observer = this._ngZone.runOutsideAngular(() => {
-      return this._mutationObserverFactory.create((mutations: MutationRecord[]) => {
-        this._debouncer.next(mutations);
-      });
-    });
+  ngAfterContentInit() {
+    this._observer =
+        this._contentObserverFactory.create(this._elementRef.nativeElement, this.debounce);
+    this._ngZone.run(
+        () => this._observer.changes.subscribe(mutations => this.event.next(mutations)));
 
     if (!this.disabled) {
-      this._enable();
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['disabled']) {
-      changes['disabled'].currentValue ? this._disable() : this._enable();
+      this._observer.start();
     }
   }
 
   ngOnDestroy() {
-    this._disable();
-    this._debouncer.complete();
-  }
-
-  private _disable() {
-    if (this._observer) {
-      this._observer.disconnect();
-    }
-  }
-
-  private _enable() {
-    if (this._observer) {
-      this._observer.observe(this._elementRef.nativeElement, {
-        characterData: true,
-        childList: true,
-        subtree: true
-      });
-    }
+    this._observer.stop();
   }
 }