fix(prerender): router compatible with prerender

Author: manucorporat

core/package-lock.json

@@ -9,14 +9,14 @@ import { DATA_URL, STORED_DEMO_MODE_KEY, STORED_DEMO_URL_KEY } from '../helpers'
 })
 export class ThemeBuilder {
 
-  @State() cssText: string = '';
+  @State() cssText = '';
   demoData: { name: string, url: string }[];
   @State() demoMode: string;
   @State() demoUrl: string;
   @State() hoverProperty: string;
   @State() propertiesUsed: string[];
   themeData: { name: string }[];
-  @State() themeName: string = '';
+  @State() themeName = '';
 
   componentWillLoad () {
     return fetch(DATA_URL).then(rsp => {

core/scripts/theme-builder/src/components/theme-builder/theme-builder.tsx

@@ -856,7 +856,7 @@ declare global {
       /**
        * The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
        */
-      'type': string;
+      'type': 'submit' | 'reset' | 'button';
     }
   }
 
@@ -934,7 +934,7 @@ declare global {
       /**
        * The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
        */
-      'type'?: string;
+      'type'?: 'submit' | 'reset' | 'button';
     }
   }
 }

core/src/components.d.ts

@@ -88,7 +88,7 @@ export class Button {
    * Possible values are: `"submit"`, `"reset"` and `"button"`.
    * Default value is: `"button"`
    */
-  @Prop() type = 'button';
+  @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
   /**
    * Emitted when the button has focus.

core/src/components/button/button.tsx

@@ -15,7 +15,7 @@ export class Gesture {
 
   private detail: GestureDetail;
   private positions: number[] = [];
-  private gesture!: GestureDelegate;
+  private gesture?: GestureDelegate;
   private lastTouch = 0;
   private pan!: PanRecognizer;
   private hasCapturedPan = false;
@@ -27,6 +27,7 @@ export class Gesture {
   @Prop({ connect: 'ion-gesture-controller' }) gestureCtrl!: HTMLIonGestureControllerElement;
   @Prop({ context: 'queue' }) queue!: QueueController;
   @Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
+  @Prop({ context: 'isServer' }) isServer!: boolean;
 
   @Prop() disabled = false;
   @Prop() attachTo: string | HTMLElement = 'child';
@@ -65,6 +66,9 @@ export class Gesture {
   }
 
   async componentWillLoad() {
+    if (this.isServer) {
+      return;
+    }
     this.gesture = await this.gestureCtrl.create({
       name: this.gestureName,
       priority: this.gesturePriority,
@@ -73,6 +77,9 @@ export class Gesture {
   }
 
   componentDidLoad() {
+    if (this.isServer) {
+      return;
+    }
     // in this case, we already know the GestureController and Gesture are already
     // apart of the same bundle, so it's safe to load it this way
     // only create one instance of GestureController, and reuse the same one later
@@ -91,7 +98,9 @@ export class Gesture {
       this.blocker.destroy();
       this.blocker = undefined;
     }
-    this.gesture.destroy();
+    if (this.gesture) {
+      this.gesture.destroy();
+    }
   }
 
   @Watch('disabled')
@@ -267,7 +276,7 @@ export class Gesture {
   }
 
   private tryToCapturePan(): boolean {
-    if (!this.gesture.capture()) {
+    if (this.gesture && !this.gesture.capture()) {
       return false;
     }
     this.hasCapturedPan = true;

core/src/components/gesture/gesture.tsx

@@ -126,7 +126,11 @@ export class Menu {
     if (this.type == null) {
       this.type = this.mode === 'ios' ? 'reveal' : 'overlay';
     }
-    this.menuCtrl = await this.lazyMenuCtrl.componentOnReady();
+    if (this.isServer) {
+      this.disabled = true;
+    } else {
+      this.menuCtrl = await this.lazyMenuCtrl.componentOnReady();
+    }
   }
 
   componentDidLoad() {

core/src/components/menu/menu.tsx

@@ -25,25 +25,37 @@ export class Router {
   @Prop({ context: 'config' }) config!: Config;
   @Prop({ context: 'queue' }) queue!: QueueController;
   @Prop({ context: 'window' }) win!: Window;
+  @Prop({ context: 'isServer' }) isServer!: boolean;
 
   @Prop() base = '';
   @Prop() useHash = true;
 
   @Event() ionRouteChanged!: EventEmitter<RouterEventDetail>;
 
-  componentDidLoad() {
-    this.init = true;
-    console.debug('[ion-router] router did load');
+  componentWillLoad() {
+    console.debug('[ion-router] router will load');
 
     const tree = readRoutes(this.el);
     this.routes = flattenRouterTree(tree);
     this.redirects = readRedirects(this.el);
 
-    // TODO: use something else
-    requestAnimationFrame(() => {
-      this.historyDirection();
-      this.writeNavStateRoot(this.getPath(), RouterDirection.None);
-    });
+    return this.writeNavStateRoot(this.getPath(), RouterDirection.None);
+  }
+
+  componentDidLoad() {
+    this.init = true;
+
+    console.debug('[ion-router] router did load');
+
+    // const tree = readRoutes(this.el);
+    // this.routes = flattenRouterTree(tree);
+    // this.redirects = readRedirects(this.el);
+
+    // // TODO: use something else
+    // requestAnimationFrame(() => {
+    //   this.historyDirection();
+    //   this.writeNavStateRoot(this.getPath(), RouterDirection.None);
+    // });
   }
 
   @Listen('ionRouteRedirectChanged')

core/src/components/router/router.tsx

@@ -35,7 +35,7 @@ export function isTablet(win: Window) {
 }
 
 export function isDevice(win: Window) {
-  return win.matchMedia('(any-pointer:coarse)').matches;
+  return matchMedia(win, '(any-pointer:coarse)');
 }
 
 export function isHybrid(win: Window) {
@@ -63,3 +63,9 @@ export function needInputShims(win: Window) {
 export function testUserAgent(win: Window, expr: RegExp) {
   return expr.test(win.navigator.userAgent);
 }
+
+export function matchMedia(win: Window, query: string, fallback = false): boolean {
+  return win.matchMedia
+    ? win.matchMedia(query).matches
+    : fallback;
+}

core/src/utils/platform.ts

@@ -1,4 +1,4 @@
-import { isAndroid, isCordova, isElectron, isIOS, isIpad, isIphone, isPhablet, isTablet } from './platform';
+import { isAndroid, isCordova, isElectron, isIOS, isIpad, isIphone, isPhablet, isTablet, matchMedia } from './platform';
 import { Config, Mode } from '../interface';
 
 export function updateTestResults(displayWhen: DisplayWhen) {
@@ -29,7 +29,7 @@ export function isSizeMatch(win: Window, multiSizeString: string) {
   const sizes = multiSizeString.replace(/\s/g, '').split(',');
   for (const size of sizes) {
     const mediaQuery = SIZE_TO_MEDIA[size];
-    if (mediaQuery && win.matchMedia(mediaQuery).matches) {
+    if (mediaQuery && matchMedia(win, mediaQuery)) {
       return true;
     }
   }
@@ -39,7 +39,7 @@ export function isSizeMatch(win: Window, multiSizeString: string) {
 export function getTestResult(displayWhen: DisplayWhen) {
   const resultsToConsider: boolean[] = [];
   if (displayWhen.mediaQuery) {
-    resultsToConsider.push(displayWhen.win.matchMedia(displayWhen.mediaQuery).matches);
+    resultsToConsider.push(matchMedia(displayWhen.win, displayWhen.mediaQuery));
   }
   if (displayWhen.size) {
     resultsToConsider.push(isSizeMatch(displayWhen.win, displayWhen.size));
@@ -80,9 +80,10 @@ export function isOrientationMatch(win: Window, orientation: string) {
 }
 
 export function isPortrait(win: Window): boolean {
-  return win.matchMedia('(orientation: portrait)').matches;
+  return matchMedia(win, '(orientation: portrait)');
 }
 
+
 const SIZE_TO_MEDIA: any = {
   'xs': '(min-width: 0px)',
   'sm': '(min-width: 576px)',