fix(universal): gate several browser-specific bits on being on the

browser

Related to #308

Author: jelbourn

src/lib/button/button.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import {coerceBooleanProperty, FocusOriginMonitor} from '../core';
 import {mixinDisabled, CanDisable} from '../core/common-behaviors/disabled';
+import {isBrowser} from '../core/platform/browser';
 
 
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
@@ -22,9 +23,7 @@ import {mixinDisabled, CanDisable} from '../core/common-behaviors/disabled';
  */
 @Directive({
   selector: 'button[md-button], button[mat-button], a[md-button], a[mat-button]',
-  host: {
-    '[class.mat-button]': 'true'
-  }
+  host: {'class': 'mat-button'}
 })
 export class MdButtonCssMatStyler {}
 
@@ -36,9 +35,7 @@ export class MdButtonCssMatStyler {}
   selector:
       'button[md-raised-button], button[mat-raised-button], ' +
       'a[md-raised-button], a[mat-raised-button]',
-  host: {
-    '[class.mat-raised-button]': 'true'
-  }
+  host: {'class': 'mat-raised-button'}
 })
 export class MdRaisedButtonCssMatStyler {}
 
@@ -49,9 +46,7 @@ export class MdRaisedButtonCssMatStyler {}
 @Directive({
   selector:
       'button[md-icon-button], button[mat-icon-button], a[md-icon-button], a[mat-icon-button]',
-  host: {
-    '[class.mat-icon-button]': 'true',
-  }
+  host: {'class': 'mat-icon-button'}
 })
 export class MdIconButtonCssMatStyler {}
 
@@ -61,9 +56,7 @@ export class MdIconButtonCssMatStyler {}
  */
 @Directive({
   selector: 'button[md-fab], button[mat-fab], a[md-fab], a[mat-fab]',
-  host: {
-    '[class.mat-fab]': 'true'
-  }
+  host: {'class': 'mat-fab'}
 })
 export class MdFabCssMatStyler {}
 
@@ -73,9 +66,7 @@ export class MdFabCssMatStyler {}
  */
 @Directive({
   selector: 'button[md-mini-fab], button[mat-mini-fab], a[md-mini-fab], a[mat-mini-fab]',
-  host: {
-    '[class.mat-mini-fab]': 'true'
-  }
+  host: {'class': 'mat-mini-fab'}
 })
 export class MdMiniFabCssMatStyler {}
 
@@ -165,6 +156,13 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
    * with either an 'md-' or 'mat-' prefix.
    */
   _hasAttributeWithPrefix(...unprefixedAttributeNames: string[]) {
+    // If not on the browser, say that there are none of the attributes present.
+    // Since these only affect how the ripple displays (and ripples only happen on the client),
+    // detecting these attributes isn't necessary when not on the browser.
+    if (!isBrowser()) {
+      return false;
+    }
+
     return unprefixedAttributeNames.some(suffix => {
       const el = this._getHostElement();
 

src/lib/core/overlay/position/viewport-ruler.ts

@@ -13,15 +13,18 @@ export class ViewportRuler {
   private _documentRect?: ClientRect;
 
   constructor(scrollDispatcher: ScrollDispatcher) {
-    // Initially cache the document rectangle.
-    this._cacheViewportGeometry();
-
     // Subscribe to scroll and resize events and update the document rectangle on changes.
     scrollDispatcher.scrolled(null, () => this._cacheViewportGeometry());
   }
 
   /** Gets a ClientRect for the viewport's bounds. */
   getViewportRect(documentRect = this._documentRect): ClientRect {
+    // Cache the document bounding rect so that we don't recompute it for multiple calls.
+    if (!documentRect) {
+      this._cacheViewportGeometry();
+      documentRect = this._documentRect;
+    }
+
     // Use the document element's bounding rect rather than the window scroll properties
     // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll
     // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different
@@ -51,6 +54,12 @@ export class ViewportRuler {
    * @param documentRect
    */
   getViewportScrollPosition(documentRect = this._documentRect) {
+    // Cache the document bounding rect so that we don't recompute it for multiple calls.
+    if (!documentRect) {
+      this._cacheViewportGeometry();
+      documentRect = this._documentRect;
+    }
+
     // The top-left-corner of the viewport is determined by the scroll position of the document
     // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about
     // whether `document.body` or `document.documentElement` is the scrolled element, so reading

src/lib/core/overlay/scroll/scroll-dispatcher.ts

@@ -1,4 +1,5 @@
-import {Injectable, ElementRef, Optional, SkipSelf, NgZone} from '@angular/core';
+import {ElementRef, Injectable, NgZone, Optional, SkipSelf} from '@angular/core';
+import {isBrowser} from '../../platform/browser';
 import {Scrollable} from './scrollable';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
@@ -62,6 +63,10 @@ export class ScrollDispatcher {
    * to override the default "throttle" time.
    */
   scrolled(auditTimeInMs: number = DEFAULT_SCROLL_TIME, callback: () => any): Subscription {
+    if (!isBrowser()) {
+      return Subscription.EMPTY;
+    }
+
     // In the case of a 0ms delay, use an observable without auditTime
     // since it does add a perceptible delay in processing overhead.
     let observable = auditTimeInMs > 0 ?

src/lib/core/platform/browser.ts

@@ -0,0 +1,4 @@
+/** Gets whether the current platform is a web browser (versus node). */
+export function isBrowser() {
+  return typeof document === 'object';
+}

src/lib/core/ripple/ripple-renderer.ts

@@ -1,7 +1,9 @@
 import {ElementRef, NgZone} from '@angular/core';
+import {isBrowser} from '../platform/browser';
 import {ViewportRuler} from '../overlay/position/viewport-ruler';
 import {RippleRef, RippleState} from './ripple-ref';
 
+
 /** Fade-in duration for the ripples. Can be modified with the speedFactor option. */
 export const RIPPLE_FADE_IN_DURATION = 450;
 
@@ -47,15 +49,18 @@ export class RippleRenderer {
   rippleDisabled: boolean = false;
 
   constructor(_elementRef: ElementRef, private _ngZone: NgZone, private _ruler: ViewportRuler) {
-    this._containerElement = _elementRef.nativeElement;
+    // Only do anything if we're on the browser.
+    if (isBrowser()) {
+      this._containerElement = _elementRef.nativeElement;
 
-    // Specify events which need to be registered on the trigger.
-    this._triggerEvents.set('mousedown', this.onMousedown.bind(this));
-    this._triggerEvents.set('mouseup', this.onMouseup.bind(this));
-    this._triggerEvents.set('mouseleave', this.onMouseLeave.bind(this));
+      // Specify events which need to be registered on the trigger.
+      this._triggerEvents.set('mousedown', this.onMousedown.bind(this));
+      this._triggerEvents.set('mouseup', this.onMouseup.bind(this));
+      this._triggerEvents.set('mouseleave', this.onMouseLeave.bind(this));
 
-    // By default use the host element as trigger element.
-    this.setTriggerElement(this._containerElement);
+      // By default use the host element as trigger element.
+      this.setTriggerElement(this._containerElement);
+    }
   }
 
   /** Fades in a ripple at the given coordinates. */

src/lib/core/style/focus-origin-monitor.ts

@@ -12,6 +12,7 @@ import {
 } from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
+import {isBrowser} from '../platform/browser';
 
 
 // This is the value used by AngularJS Material. Through trial and error (on iPhone 6S) they found
@@ -64,6 +65,11 @@ export class FocusOriginMonitor {
    *     When the element is blurred, null will be emitted.
    */
   monitor(element: Element, renderer: Renderer, checkChildren: boolean): Observable<FocusOrigin> {
+    // Do nothing if we're not on the browser platform.
+    if (!isBrowser()) {
+      return Observable.of();
+    }
+
     // Check if we're already monitoring this element.
     if (this._elementInfo.has(element)) {
       let info = this._elementInfo.get(element);
@@ -126,6 +132,11 @@ export class FocusOriginMonitor {
 
   /** Register necessary event listeners on the document and window. */
   private _registerDocumentEvents() {
+    // Do nothing if we're not on the browser platform.
+    if (!isBrowser()) {
+      return Observable.of();
+    }
+
     // Note: we listen to events in the capture phase so we can detect them even if the user stops
     // propagation.
 

tools/gulp/util/rollup-helper.ts

@@ -36,7 +36,8 @@ 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/Observable': 'Rx'
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subscription': 'Rx',
 };
 
 export type BundleConfig = {