feat(server): add ability to specify breakpoints for MediaObserver (#999)

On the server, there is no conception of "browser window," because Angular's
browser implementation doesn't implement it. This means MatchMedia breakpoint activations will not work on the server. 

Layout SSR will generate CSS Stylesheets for all known breakpoints. And for the static, delivered-first HTML pages the directives are replaced with their associated, generated CSS classnames. 

But for programmatic usages of `MediaObserver`, we don't have a fallback mechanism to *announce* breakpoint activations. This PR allows a user to specify which activations they want to trigger via the MediaObserver for programmatic view listeners.

This can be done using the following configuration:

```ts
FlexLayoutModule.withConfig({serverBreakpoints: ['xs', 'lt-md']})
```

Fixes #991 .

Author: CaerusKaru

src/lib/core/tokens/library-config.ts

@@ -17,6 +17,7 @@ export interface LayoutConfigOptions {
   useColumnBasisZero?: boolean;
   printWithBreakpoints?: string[];
   mediaTriggerAutoRestore?: boolean;
+  ssrObserveBreakpoints?: string[];
 }
 
 export const DEFAULT_CONFIG: LayoutConfigOptions = {
@@ -27,7 +28,8 @@ export const DEFAULT_CONFIG: LayoutConfigOptions = {
   serverLoaded: false,
   useColumnBasisZero: true,
   printWithBreakpoints: [],
-  mediaTriggerAutoRestore: true
+  mediaTriggerAutoRestore: true,
+  ssrObserveBreakpoints: [],
 };
 
 export const LAYOUT_CONFIG = new InjectionToken<LayoutConfigOptions>(

src/lib/server/server-provider.ts

@@ -15,7 +15,9 @@ import {
   BreakPoint,
   ɵMatchMedia as MatchMedia,
   StylesheetMap,
-  sortAscendingPriority
+  sortAscendingPriority,
+  LayoutConfigOptions,
+  LAYOUT_CONFIG,
 } from '@angular/flex-layout/core';
 
 import {ServerMatchMedia} from './server-match-media';
@@ -27,10 +29,12 @@ import {ServerMatchMedia} from './server-match-media';
  *        element
  * @param mediaController the MatchMedia service to activate/deactivate breakpoints
  * @param breakpoints the registered breakpoints to activate/deactivate
+ * @param layoutConfig the library config, and specifically the breakpoints to activate
  */
 export function generateStaticFlexLayoutStyles(serverSheet: StylesheetMap,
-                                               mediaController: MatchMedia,
-                                               breakpoints: BreakPoint[]) {
+                                               mediaController: ServerMatchMedia,
+                                               breakpoints: BreakPoint[],
+                                               layoutConfig: LayoutConfigOptions) {
   // Store the custom classes in the following map, that way only
   // one class gets allocated per HTMLElement, and each class can
   // be referenced in the static media queries
@@ -43,14 +47,29 @@ export function generateStaticFlexLayoutStyles(serverSheet: StylesheetMap,
 
   [...breakpoints].sort(sortAscendingPriority).forEach((bp, i) => {
     serverSheet.clearStyles();
-    (mediaController as ServerMatchMedia).activateBreakpoint(bp);
+    mediaController.activateBreakpoint(bp);
     const stylesheet = new Map(serverSheet.stylesheet);
     if (stylesheet.size > 0) {
       styleText += generateCss(stylesheet, bp.mediaQuery, classMap);
     }
-    (mediaController as ServerMatchMedia).deactivateBreakpoint(breakpoints[i]);
+    mediaController.deactivateBreakpoint(breakpoints[i]);
   });
 
+  const serverBps = layoutConfig.ssrObserveBreakpoints;
+  if (serverBps) {
+    serverBps
+      .reduce((acc: BreakPoint[], serverBp: string) => {
+        const foundBp = breakpoints.find(bp => serverBp === bp.alias);
+        if (!foundBp) {
+          console.warn(`FlexLayoutServerModule: unknown breakpoint alias "${serverBp}"`);
+        } else {
+          acc.push(foundBp);
+        }
+        return acc;
+      }, [])
+      .forEach(mediaController.activateBreakpoint);
+  }
+
   return styleText;
 }
 
@@ -59,14 +78,16 @@ export function generateStaticFlexLayoutStyles(serverSheet: StylesheetMap,
  * components and attach it to the head of the DOM
  */
 export function FLEX_SSR_SERIALIZER_FACTORY(serverSheet: StylesheetMap,
-                                            matchMedia: MatchMedia,
+                                            mediaController: ServerMatchMedia,
                                             _document: Document,
-                                            breakpoints: BreakPoint[]) {
+                                            breakpoints: BreakPoint[],
+                                            layoutConfig: LayoutConfigOptions) {
   return () => {
     // This is the style tag that gets inserted into the head of the DOM,
     // populated with the manual media queries
     const styleTag = _document.createElement('style');
-    const styleText = generateStaticFlexLayoutStyles(serverSheet, matchMedia, breakpoints);
+    const styleText = generateStaticFlexLayoutStyles(serverSheet, mediaController, breakpoints,
+      layoutConfig);
     styleTag.classList.add(`${CLASS_NAME}ssr`);
     styleTag.textContent = styleText;
     _document.head!.appendChild(styleTag);
@@ -85,6 +106,7 @@ export const SERVER_PROVIDERS = [
       MatchMedia,
       DOCUMENT,
       BREAKPOINTS,
+      LAYOUT_CONFIG,
     ],
     multi: true
   },
@@ -117,7 +139,8 @@ export type ClassMap = Map<HTMLElement, string>;
 function generateCss(stylesheet: StyleSheet, mediaQuery: string, classMap: ClassMap) {
   let css = '';
   stylesheet.forEach((styles, el) => {
-    let keyVals = '', className = getClassName(el, classMap);
+    let keyVals = '';
+    let className = getClassName(el, classMap);
 
     styles.forEach((v, k) => {
       keyVals += v ? format(`${k}:${v};`) : '';
@@ -138,13 +161,13 @@ function generateCss(stylesheet: StyleSheet, mediaQuery: string, classMap: Class
 function format(...list: string[]): string {
   let result = '';
   list.forEach((css, i) => {
-    result += IS_DEBUG_MODE ? formatSegment(css, i != 0) : css;
+    result += IS_DEBUG_MODE ? formatSegment(css, i !== 0) : css;
   });
   return result;
 }
 
 function formatSegment(css: string, asPrefix: boolean = true): string {
-  return asPrefix ? '\n' + css : css + '\n';
+  return asPrefix ? `\n${css}` : `${css}\n`;
 }
 
 /**
@@ -162,4 +185,3 @@ function getClassName(element: HTMLElement, classMap: Map<HTMLElement, string>)
 
   return className;
 }
-