Update router direction type

Author: michaeltintiuc

src/app-initialize.ts

@@ -2,6 +2,7 @@
 // tslint:disable-next-line:no-import-side-effect
 import { IonicConfig } from '@ionic/core';
 
+// Webpack import for ionicons
 import { addIcons } from 'ionicons';
 import { ICON_PATHS } from 'ionicons/icons';
 
@@ -14,6 +15,5 @@ export function appInitialize(config?: IonicConfig) {
 
   Ionic.config = config;
   defineCustomElements(window);
-
   addIcons(ICON_PATHS);
 }

src/components/ion-vue-router.ts

@@ -1,4 +1,5 @@
 import Vue, { CreateElement, RenderContext, VNodeData } from 'vue';
+import { NavDirection } from '@ionic/core';
 
 type TransitionDone = () => void;
 interface Props {
@@ -69,7 +70,7 @@ function catchIonicGoBack(parent: Vue, event: Event): void {
   let defaultHref: string;
 
   // Explicitly override router direction to always trigger a back transition
-  $router.directionOverride = -1;
+  $router.directionOverride = 'back';
 
   // If we can go back - do so
   if ($router.canGoBack()) {
@@ -127,8 +128,8 @@ function transition(parent: Vue, props: Props, leavingEl: HTMLElement) {
   return ionRouterOutlet.componentOnReady().then((el: HTMLIonRouterOutletElement) => {
     return el.commit(enteringEl, leavingEl, {
       deepWait: true,
-      duration: !props.animated ? 0 : undefined,
-      direction: parent.$router.direction === 1 ? 'forward' : 'back',
+      duration: !props.animated || parent.$router.direction === 'root' ? 0 : undefined,
+      direction: parent.$router.direction as NavDirection,
       showGoBack: parent.$router.canGoBack(),
     });
   }).catch(console.error);

src/interfaces.ts

@@ -1,11 +1,12 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import { RouterDirection } from '@ionic/core';
 import { RouterOptions } from 'vue-router/types/router';
 
 declare module 'vue-router/types/router' {
   interface VueRouter {
-    direction: number;
-    directionOverride: number | null;
+    direction: RouterDirection;
+    directionOverride: RouterDirection | null;
     transition: Promise<void>;
     canGoBack(): boolean;
   }
@@ -61,7 +62,7 @@ export interface ApiCache {
 }
 
 export interface RouterArgs extends RouterOptions {
-  direction?: number;
+  direction?: RouterDirection;
   viewCount?: number;
 }
 

src/router.ts

@@ -2,12 +2,12 @@ import VueRouter, { Route } from 'vue-router';
 import { PluginFunction } from 'vue';
 import { RouterArgs } from './interfaces';
 import IonVueRouter from './components/ion-vue-router';
-import { BackButtonEvent } from '@ionic/core';
+import { BackButtonEvent, RouterDirection } from '@ionic/core';
 
 // Extend the official VueRouter
 export default class Router extends VueRouter {
-  direction: number;
-  directionOverride: number | null;
+  direction: RouterDirection;
+  directionOverride: RouterDirection | null;
   viewCount: number;
   prevRouteStack: Route[];
   history: any;
@@ -18,7 +18,7 @@ export default class Router extends VueRouter {
     super(args);
 
     // The direction user navigates in
-    this.direction = args.direction || 1;
+    this.direction = args.direction || 'forward';
 
     // Override normal direction
     this.directionOverride = null;
@@ -65,12 +65,12 @@ export default class Router extends VueRouter {
       }
 
       // Increment or decrement the view count
-      this.viewCount += this.direction;
+      this.viewCount += this.direction === 'back' ? -1 : 1;
 
       // Call the original method
       this.history._updateRoute(nextRoute);
 
-      // Reset direction for overrides
+      // Reset direction overrides
       this.directionOverride = null;
     };
   }
@@ -81,7 +81,7 @@ export default class Router extends VueRouter {
     return this.viewCount > 1 && this.currentRoute.fullPath.length > 1;
   }
 
-  guessDirection(nextRoute: Route): number {
+  guessDirection(nextRoute: Route): RouterDirection {
     if (this.prevRouteStack.length !== 0) {
       const prevRoute: Route = this.prevRouteStack[this.prevRouteStack.length - 1];
 
@@ -93,15 +93,15 @@ export default class Router extends VueRouter {
         } else {
           this.prevRouteStack.pop();
         }
-        return -1;
+        return 'back';
       }
     }
 
     // Forward movement, push next route to stack
     if (this.history.current.fullPath !== nextRoute.fullPath) {
       this.prevRouteStack.push(this.history.current);
     }
-    return 1;
+    return 'forward';
   }
 }
 

types/interfaces.d.ts

@@ -1,10 +1,11 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import { RouterDirection } from '@ionic/core';
 import { RouterOptions } from 'vue-router/types/router';
 declare module 'vue-router/types/router' {
     interface VueRouter {
-        direction: number;
-        directionOverride: number | null;
+        direction: RouterDirection;
+        directionOverride: RouterDirection | null;
         transition: Promise<void>;
         canGoBack(): boolean;
     }
@@ -47,7 +48,7 @@ export interface ApiCache {
     [key: string]: any;
 }
 export interface RouterArgs extends RouterOptions {
-    direction?: number;
+    direction?: RouterDirection;
     viewCount?: number;
 }
 export interface ProxyControllerInterface {

types/router.d.ts

@@ -1,9 +1,10 @@
 import VueRouter, { Route } from 'vue-router';
 import { PluginFunction } from 'vue';
 import { RouterArgs } from './interfaces';
+import { RouterDirection } from '@ionic/core';
 export default class Router extends VueRouter {
-    direction: number;
-    directionOverride: number | null;
+    direction: RouterDirection;
+    directionOverride: RouterDirection | null;
     viewCount: number;
     prevRouteStack: Route[];
     history: any;
@@ -13,6 +14,6 @@ export default class Router extends VueRouter {
     extendTransitionConfirmation(): void;
     extendHistory(): void;
     canGoBack(): boolean;
-    guessDirection(nextRoute: Route): number;
+    guessDirection(nextRoute: Route): RouterDirection;
 }
 //# sourceMappingURL=router.d.ts.map