second PR comment pass

Author: CaerusKaru

src/lib/media-query/_module.ts

@@ -11,7 +11,7 @@ import {MediaMonitor} from './media-monitor';
 import {OBSERVABLE_MEDIA_PROVIDER} from './observable-media-provider';
 import {DEFAULT_BREAKPOINTS_PROVIDER} from './breakpoints/break-points-provider';
 import {BreakPointRegistry} from './breakpoints/break-point-registry';
-import {MATCH_MEDIA_PROVIDER} from './match-media-provider';
+import {MatchMedia} from './match-media';
 
 /**
  * *****************************************************************
@@ -23,7 +23,7 @@ import {MATCH_MEDIA_PROVIDER} from './match-media-provider';
   providers: [
     DEFAULT_BREAKPOINTS_PROVIDER,  // Supports developer overrides of list of known breakpoints
     BreakPointRegistry,      // Registry of known/used BreakPoint(s)
-    MATCH_MEDIA_PROVIDER,    // Low-level service to publish observables w/ window.matchMedia()
+    MatchMedia,              // Low-level service to publish observables w/ window.matchMedia()
     MediaMonitor,            // MediaQuery monitor service observes all known breakpoints
     OBSERVABLE_MEDIA_PROVIDER  // easy subscription injectable `media$` matchMedia observable
   ]

src/lib/media-query/breakpoints/break-points-provider.ts

@@ -5,9 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {
-  InjectionToken,    // tslint:disable-line:no-unused-variable
-} from '@angular/core';
+import {InjectionToken} from '@angular/core';
 
 import {BreakPoint} from './break-point';
 import {BREAKPOINTS} from './break-points-token';
@@ -80,7 +78,7 @@ export const DEFAULT_BREAKPOINTS_PROVIDER = { // tslint:disable-line:variable-na
 export function CUSTOM_BREAKPOINTS_PROVIDER_FACTORY(_custom?: BreakPoint[],
                                                     options?: BreakPointProviderOptions) {
   return {
-    provide: BREAKPOINTS,
+    provide: <InjectionToken<BreakPoint[]>>BREAKPOINTS,
     useFactory: buildMergedBreakPoints(_custom, options)
   };
 }

src/lib/media-query/breakpoints/break-points-token.ts

@@ -6,8 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-// @TODO - remove after updating to TS v2.4
-// tslint:disable:no-unused-variable
 import {InjectionToken} from '@angular/core';
 import {BreakPoint} from './break-point';
 

src/lib/media-query/index.ts

@@ -21,6 +21,5 @@ export * from './breakpoints/break-points-provider';
 export * from './observable-media-provider';
 export * from './media-monitor-provider';
 export * from './server-match-media';
-export * from './match-media-provider';
 
 export * from './_module';

src/lib/media-query/match-media-provider.ts

@@ -19,9 +19,7 @@ import {BreakPointRegistry} from '../breakpoints/break-point-registry';
 @Injectable()
 export class MockMatchMedia extends MatchMedia {
 
-  /**
-   * Special flag used to test BreakPoint registrations with MatchMedia
-   */
+  /** Special flag used to test BreakPoint registrations with MatchMedia */
   autoRegisterQueries = true;
 
   /**
@@ -37,9 +35,7 @@ export class MockMatchMedia extends MatchMedia {
     this._actives = [];
   }
 
-  /**
-   * Easy method to clear all listeners for all mediaQueries
-   */
+  /** Easy method to clear all listeners for all mediaQueries */
   clearAll() {
     this._registry.forEach((mql: MockMediaQueryList, _) => {
       mql.destroy();
@@ -48,9 +44,7 @@ export class MockMatchMedia extends MatchMedia {
     this.useOverlaps = false;
   }
 
-  /**
-   * Feature to support manual, simulated activation of a mediaQuery.
-   */
+  /** Feature to support manual, simulated activation of a mediaQuery. */
   activate(mediaQuery: string, useOverlaps = false): boolean {
     useOverlaps = useOverlaps || this.useOverlaps;
     mediaQuery = this._validateQuery(mediaQuery);
@@ -65,9 +59,7 @@ export class MockMatchMedia extends MatchMedia {
     return this.hasActivated;
   }
 
-  /**
-   * Converts an optional mediaQuery alias to a specific, valid mediaQuery
-   */
+  /** Converts an optional mediaQuery alias to a specific, valid mediaQuery */
   _validateQuery(queryOrAlias) {
     let bp = this._breakpoints.findByAlias(queryOrAlias);
     if (bp) {
@@ -147,9 +139,7 @@ export class MockMatchMedia extends MatchMedia {
     return this.hasActivated;
   }
 
-  /**
-   * Deactivate all current Mock MQLs
-   */
+  /** Deactivate all current Mock MQLs */
   private _deactivateAll() {
     if (this._actives.length) {
       // Deactivate all current MQLs and reset the buffer
@@ -161,9 +151,7 @@ export class MockMatchMedia extends MatchMedia {
     return this;
   }
 
-  /**
-   * Insure the mediaQuery is registered with MatchMedia
-   */
+  /** Insure the mediaQuery is registered with MatchMedia */
   private _registerMediaQuery(mediaQuery) {
     if (!this._registry.has(mediaQuery) && this.autoRegisterQueries) {
       this.registerQuery(mediaQuery);
@@ -192,7 +180,7 @@ export class MockMatchMedia extends MatchMedia {
  */
 export class MockMediaQueryList implements MediaQueryList {
   private _isActive = false;
-  private _listeners: Array<MediaQueryListListener> = [];
+  private _listeners: MediaQueryListListener[] = [];
 
   get matches(): boolean {
     return this._isActive;
@@ -202,20 +190,18 @@ export class MockMediaQueryList implements MediaQueryList {
     return this._mediaQuery;
   }
 
-  constructor(private _mediaQuery: string) {
-  }
+  constructor(private _mediaQuery: string) {}
 
   /**
-   *
+   * Destroy the current list by deactivating the
+   * listeners and clearing the internal list
    */
   destroy() {
     this.deactivate();
     this._listeners = [];
   }
 
-  /**
-   * Notify all listeners that 'matches === TRUE'
-   */
+  /** Notify all listeners that 'matches === TRUE' */
   activate(): MockMediaQueryList {
     if (!this._isActive) {
       this._isActive = true;
@@ -226,9 +212,7 @@ export class MockMediaQueryList implements MediaQueryList {
     return this;
   }
 
-  /**
-   * Notify all listeners that 'matches === false'
-   */
+  /** Notify all listeners that 'matches === false' */
   deactivate(): MockMediaQueryList {
     if (this._isActive) {
       this._isActive = false;
@@ -239,9 +223,7 @@ export class MockMediaQueryList implements MediaQueryList {
     return this;
   }
 
-  /**
-   *
-   */
+  /** Add a listener to our internal list to activate later */
   addListener(listener: MediaQueryListListener) {
     if (this._listeners.indexOf(listener) === -1) {
       this._listeners.push(listener);
@@ -251,6 +233,7 @@ export class MockMediaQueryList implements MediaQueryList {
     }
   }
 
+  /** Don't need to remove listeners in the testing environment */
   removeListener(_: MediaQueryListListener) {
   }
 }

src/lib/media-query/mock/mock-match-media.ts

@@ -20,7 +20,7 @@ import {MatchMedia} from './match-media';
  */
 export class ServerMediaQueryList implements MediaQueryList {
   private _isActive = false;
-  private _listeners: Array<MediaQueryListListener> = [];
+  private _listeners: MediaQueryListListener[] = [];
 
   get matches(): boolean {
     return this._isActive;
@@ -41,9 +41,7 @@ export class ServerMediaQueryList implements MediaQueryList {
     this._listeners = [];
   }
 
-  /**
-   * Notify all listeners that 'matches === TRUE'
-   */
+  /** Notify all listeners that 'matches === TRUE' */
   activate(): ServerMediaQueryList {
     if (!this._isActive) {
       this._isActive = true;
@@ -54,9 +52,7 @@ export class ServerMediaQueryList implements MediaQueryList {
     return this;
   }
 
-  /**
-   * Notify all listeners that 'matches === false'
-   */
+  /** Notify all listeners that 'matches === false' */
   deactivate(): ServerMediaQueryList {
     if (this._isActive) {
       this._isActive = false;
@@ -67,9 +63,7 @@ export class ServerMediaQueryList implements MediaQueryList {
     return this;
   }
 
-  /**
-   * Add a listener to our internal list to activate later
-   */
+  /** Add a listener to our internal list to activate later */
   addListener(listener: MediaQueryListListener) {
     if (this._listeners.indexOf(listener) === -1) {
       this._listeners.push(listener);
@@ -79,9 +73,7 @@ export class ServerMediaQueryList implements MediaQueryList {
     }
   }
 
-  /**
-   * Don't need to remove listeners in the server environment
-   */
+  /** Don't need to remove listeners in the server environment */
   removeListener(_: MediaQueryListListener) {
   }
 }
@@ -106,19 +98,15 @@ export class ServerMatchMedia extends MatchMedia {
     this._observable$ = this._source.asObservable();
   }
 
-  /**
-   * Activate the specified breakpoint if we're on the server, no-op otherwise
-   */
+  /** Activate the specified breakpoint if we're on the server, no-op otherwise */
   activateBreakpoint(bp: BreakPoint) {
     const lookupBreakpoint = this._registry.get(bp.mediaQuery);
     if (lookupBreakpoint) {
       lookupBreakpoint.activate();
     }
   }
 
-  /**
-   * Deactivate the specified breakpoint if we're on the server, no-op otherwise
-   */
+  /** Deactivate the specified breakpoint if we're on the server, no-op otherwise */
   deactivateBreakpoint(bp: BreakPoint) {
     const lookupBreakpoint = this._registry.get(bp.mediaQuery);
     if (lookupBreakpoint) {

src/lib/media-query/server-match-media.ts

@@ -5,10 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {
-  InjectionToken,    // tslint:disable-line:no-unused-variable
-  ComponentRef,      // tslint:disable-line:no-unused-variable
-} from '@angular/core';
+import {InjectionToken} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {BEFORE_APP_SERIALIZED} from '@angular/platform-server';
 
@@ -22,7 +19,7 @@ import {
   ServerMatchMedia
 } from '@angular/flex-layout';
 
-let UNIQUE_CLASS = 0;
+let nextId = 0;
 const IS_DEBUG_MODE = false;
 
 /**
@@ -42,7 +39,7 @@ function generateCss(stylesheet: Map<HTMLElement, Map<string, string|number>>,
   stylesheet.forEach((styles, el) => {
     let className = classMap.get(el);
     if (!className) {
-      className = `${CLASS_NAME}${UNIQUE_CLASS++}`;
+      className = `${CLASS_NAME}${nextId++}`;
       classMap.set(el, className);
     }
     el.classList.add(className);
@@ -123,7 +120,7 @@ export function FLEX_SSR_SERIALIZER_FACTORY(serverSheet: ServerStylesheet,
  */
 export const SERVER_PROVIDERS = [
   {
-    provide: BEFORE_APP_SERIALIZED,
+    provide: <InjectionToken<() => void>>BEFORE_APP_SERIALIZED,
     useFactory: FLEX_SSR_SERIALIZER_FACTORY,
     deps: [
       ServerStylesheet,
@@ -136,5 +133,9 @@ export const SERVER_PROVIDERS = [
   {
     provide: SERVER_TOKEN,
     useValue: true
+  },
+  {
+    provide: MatchMedia,
+    useClass: ServerMatchMedia
   }
 ];

src/lib/server/server-provider.ts

@@ -5,12 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {
-  APP_BOOTSTRAP_LISTENER,
-  PLATFORM_ID,
-  InjectionToken,    // tslint:disable-line:no-unused-variable
-  ComponentRef,      // tslint:disable-line:no-unused-variable
-} from '@angular/core';
+import {APP_BOOTSTRAP_LISTENER, PLATFORM_ID, InjectionToken, ComponentRef} from '@angular/core';
 import {DOCUMENT, isPlatformBrowser} from '@angular/common';
 
 /**
@@ -35,7 +30,7 @@ export function removeStyles(_document: Document, platformId: Object) {
  *  Provider to remove SSR styles on the browser
  */
 export const BROWSER_PROVIDER = {
-  provide: APP_BOOTSTRAP_LISTENER,
+  provide: <InjectionToken<((compRef: ComponentRef<any>) => void)[]>>APP_BOOTSTRAP_LISTENER,
   useFactory: removeStyles,
   deps: [DOCUMENT, PLATFORM_ID],
   multi: true