refactor(core): create generic sort operations (#996)

* improve performance with `MediaObserver::media$` property

Author: CaerusKaru

src/lib/core/breakpoints/break-point-registry.ts

@@ -9,7 +9,7 @@ import {Injectable, Inject} from '@angular/core';
 
 import {BreakPoint} from './break-point';
 import {BREAKPOINTS} from './break-points-token';
-import {sortAscendingPriority} from './breakpoint-tools';
+import {sortAscendingPriority} from '../utils/sort';
 
 export type OptionalBreakPoint = BreakPoint | null;
 

src/lib/core/breakpoints/breakpoint-tools.ts

@@ -5,8 +5,6 @@
  * 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 {OptionalBreakPoint} from './break-point-registry';
 import {BreakPoint} from './break-point';
 import {extendObject} from '../../utils/object-extend';
 
@@ -64,16 +62,3 @@ export function mergeByAlias(defaults: BreakPoint[], custom: BreakPoint[] = []):
 
   return validateSuffixes(Object.keys(dict).map(k => dict[k]));
 }
-
-/** HOF to sort the breakpoints by priority */
-export function sortDescendingPriority(a: OptionalBreakPoint, b: OptionalBreakPoint): number {
-  const priorityA = a ? a.priority || 0 : 0;
-  const priorityB = b ? b.priority || 0 : 0;
-  return priorityB - priorityA;
-}
-
-export function sortAscendingPriority(a: BreakPoint, b: BreakPoint): number {
-  const pA = a.priority || 0;
-  const pB = b.priority || 0;
-  return pA - pB;
-}

src/lib/core/breakpoints/data/break-points.spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {TestBed, inject} from '@angular/core/testing';
-import {sortDescendingPriority} from '../breakpoint-tools';
+import {sortDescendingPriority} from '../../utils/sort';
 
 import {BreakPoint} from '../break-point';
 import {BREAKPOINTS} from '../break-points-token';

src/lib/core/breakpoints/index.ts

@@ -12,8 +12,3 @@ export * from './data/orientation-break-points';
 export * from './break-point';
 export * from './break-point-registry';
 export * from './break-points-token';
-
-export {
-  sortDescendingPriority,
-  sortAscendingPriority
-} from './breakpoint-tools';

src/lib/core/media-change.ts

@@ -19,6 +19,7 @@ export class MediaChange {
    * @param mediaQuery e.g. (min-width: 600px) and (max-width: 959px)
    * @param mqAlias e.g. gt-sm, md, gt-lg
    * @param suffix e.g. GtSM, Md, GtLg
+   * @param priority the priority of activation for the given breakpoint
    */
   constructor(public matches = false,
               public mediaQuery = 'all',

src/lib/core/media-marshaller/media-marshaller.ts

@@ -11,7 +11,7 @@ import {merge, Observable, Subject, Subscription} from 'rxjs';
 import {filter, tap} from 'rxjs/operators';
 
 import {BreakPoint} from '../breakpoints/break-point';
-import {sortDescendingPriority} from '../breakpoints/breakpoint-tools';
+import {sortDescendingPriority} from '../utils/sort';
 import {BreakPointRegistry} from '../breakpoints/break-point-registry';
 import {MatchMedia} from '../match-media/match-media';
 import {MediaChange} from '../media-change';

src/lib/core/media-marshaller/print-hook.ts

@@ -12,7 +12,7 @@ import {MediaChange} from '../media-change';
 import {BreakPoint} from '../breakpoints/break-point';
 import {LAYOUT_CONFIG, LayoutConfigOptions} from '../tokens/library-config';
 import {BreakPointRegistry, OptionalBreakPoint} from '../breakpoints/break-point-registry';
-import {sortDescendingPriority} from '../breakpoints/breakpoint-tools';
+import {sortDescendingPriority} from '../utils/sort';
 
 /**
  * Interface to apply PrintHook to call anonymous `target.updateStyles()`

src/lib/core/media-observer/media-observer.ts

@@ -14,6 +14,7 @@ import {MediaChange} from '../media-change';
 import {MatchMedia} from '../match-media/match-media';
 import {PrintHook} from '../media-marshaller/print-hook';
 import {BreakPointRegistry, OptionalBreakPoint} from '../breakpoints/break-point-registry';
+import {sortDescendingPriority} from '../utils/sort';
 
 /**
  * MediaObserver enables applications to listen for 1..n mediaQuery activations and to determine
@@ -64,12 +65,7 @@ export class MediaObserver {
    * @breaking-change 7.0.0-beta.24
    * @deletion-target v7.0.0-beta.25
    */
-  get media$(): Observable<MediaChange> {
-    return this._media$.pipe(
-      filter((changes: MediaChange[]) => changes.length > 0),
-      map((changes: MediaChange[]) => changes[0])
-    );
-  }
+  readonly media$: Observable<MediaChange>;
 
   /** Filter MediaChange notifications for overlapping breakpoints */
   filterOverlaps = false;
@@ -78,6 +74,10 @@ export class MediaObserver {
               protected matchMedia: MatchMedia,
               protected hook: PrintHook) {
     this._media$ = this.watchActivations();
+    this.media$ = this._media$.pipe(
+      filter((changes: MediaChange[]) => changes.length > 0),
+      map((changes: MediaChange[]) => changes[0])
+    );
   }
 
 
@@ -176,10 +176,10 @@ export class MediaObserver {
         .map(query => new MediaChange(true, query))
         .map(replaceWithPrintAlias)
         .map(mergeMQAlias)
-        .sort(sortChangesByPriority);
+        .sort(sortDescendingPriority);
   }
 
-  private _media$: Observable<MediaChange[]>;
+  private readonly _media$: Observable<MediaChange[]>;
 }
 
 /**
@@ -190,9 +190,3 @@ function toMediaQuery(query: string, locator: BreakPointRegistry) {
   return bp ? bp.mediaQuery : query;
 }
 
-/** HOF to sort the breakpoints by priority */
-export function sortChangesByPriority(a: MediaChange, b: MediaChange): number {
-  const priorityA = a ? a.priority || 0 : 0;
-  const priorityB = b ? b.priority || 0 : 0;
-  return priorityB - priorityA;
-}

src/lib/core/public-api.ts

@@ -17,6 +17,7 @@ export * from './base/index';
 export * from './breakpoints/index';
 export * from './match-media/index';
 export * from './media-observer/index';
+export * from './utils/index';
 
 export * from './style-utils/style-utils';
 export * from './style-builder/style-builder';

src/lib/core/utils/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+export * from './sort';