refactor(router): Do page navigation with RouteReuseStrategy (#949)

Author: vakrilov

Diff for: .gitignore

@@ -21,6 +21,7 @@ tags
 .DS_Store
 npm-debug.log
 nativescript-angular*.tgz
+package-lock.json
 
 tests/app/**/*.js
 tests/test-output.txt

Diff for: nativescript-angular/router.ts

@@ -5,14 +5,15 @@ import {
     Optional,
     SkipSelf,
 } from "@angular/core";
-import { RouterModule, Routes, ExtraOptions } from "@angular/router";
+import { RouterModule, Routes, ExtraOptions, RouteReuseStrategy } from "@angular/router";
 import { LocationStrategy, PlatformLocation } from "@angular/common";
 import { Frame } from "tns-core-modules/ui/frame";
 import { NSRouterLink } from "./router/ns-router-link";
 import { NSRouterLinkActive } from "./router/ns-router-link-active";
 import { PageRouterOutlet } from "./router/page-router-outlet";
 import { NSLocationStrategy, LocationState } from "./router/ns-location-strategy";
 import { NativescriptPlatformLocation } from "./router/ns-platform-location";
+import { NsRouteReuseStrategy } from "./router/ns-route-reuse-strategy";
 import { RouterExtensions } from "./router/router-extensions";
 import { NativeScriptCommonModule } from "./common";
 
@@ -37,6 +38,8 @@ export type LocationState = LocationState;
         NativescriptPlatformLocation,
         { provide: PlatformLocation, useClass: NativescriptPlatformLocation },
         RouterExtensions,
+        NsRouteReuseStrategy,
+        { provide: RouteReuseStrategy, useExisting: NsRouteReuseStrategy }
     ],
     imports: [
         RouterModule,

Diff for: nativescript-angular/router/ns-location-strategy.ts

@@ -67,7 +67,7 @@ export class NSLocationStrategy extends LocationStrategy {
 
     replaceState(state: any, title: string, url: string, queryParams: string): void {
         if (this.states.length > 0) {
-            routerLog("NSLocationStrategy.replaceState changing exisitng state: " +
+            routerLog("NSLocationStrategy.replaceState changing existing state: " +
                 `${state}, title: ${title}, url: ${url}, queryParams: ${queryParams}`);
             const topState = this.peekState();
             topState.state = state;
@@ -104,7 +104,7 @@ export class NSLocationStrategy extends LocationStrategy {
             if (state.isPageNavigation) {
                 // This was a page navigation - so navigate through frame.
                 routerLog("NSLocationStrategy.back() while not navigating back but top" +
-                    " state is page - will call frame.goback()");
+                    " state is page - will call frame.goBack()");
                 this.frame.goBack();
             } else {
                 // Nested navigation - just pop the state

Diff for: nativescript-angular/router/ns-route-reuse-strategy.ts

@@ -0,0 +1,133 @@
+import { Injectable } from "@angular/core";
+import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from "@angular/router";
+
+import { routeReuseStrategyLog as log } from "../trace";
+import { NSLocationStrategy } from "./ns-location-strategy";
+import { pageRouterActivatedSymbol, destroyComponentRef } from "./page-router-outlet";
+
+interface CacheItem {
+    key: string;
+    state: DetachedRouteHandle;
+}
+
+/**
+ * Detached state cache
+ */
+class DetachedStateCache {
+    private cache = new Array<CacheItem>();
+
+    public get length(): number {
+        return this.cache.length;
+    }
+
+    public push(cacheItem: CacheItem) {
+        this.cache.push(cacheItem);
+    }
+
+    public pop(): CacheItem {
+        return this.cache.pop();
+    }
+
+    public peek(): CacheItem {
+        return this.cache[this.cache.length - 1];
+    }
+
+    public clear() {
+        log(`DetachedStateCache.clear() ${this.cache.length} items will be destroyed`);
+
+        while (this.cache.length > 0) {
+            const state = <any>this.cache.pop().state;
+            if (!state.componentRef) {
+                throw new Error("No componentRed found in DetachedRouteHandle");
+            }
+
+            destroyComponentRef(state.componentRef);
+        }
+    }
+}
+
+/**
+ * Does not detach any subtrees. Reuses routes as long as their route config is the same.
+ */
+@Injectable()
+export class NsRouteReuseStrategy implements RouteReuseStrategy {
+    private cache: DetachedStateCache = new DetachedStateCache();
+
+    constructor(private location: NSLocationStrategy) { }
+
+    shouldDetach(route: ActivatedRouteSnapshot): boolean {
+        const key = getSnapshotKey(route);
+        const isPageActivated = route[pageRouterActivatedSymbol];
+        const isBack = this.location._isPageNavigatingBack();
+        const shouldDetach = !isBack && isPageActivated;
+
+        log(`shouldDetach isBack: ${isBack} key: ${key} result: ${shouldDetach}`);
+
+        return shouldDetach;
+    }
+
+    shouldAttach(route: ActivatedRouteSnapshot): boolean {
+        const key = getSnapshotKey(route);
+        const isBack = this.location._isPageNavigatingBack();
+        const shouldDetach = isBack && this.cache.peek().key === key;
+
+        log(`shouldAttach isBack: ${isBack} key: ${key} result: ${shouldDetach}`);
+
+        return shouldDetach;
+    }
+
+
+    store(route: ActivatedRouteSnapshot, state: DetachedRouteHandle): void {
+        const key = getSnapshotKey(route);
+        log(`store key: ${key}, state: ${state}`);
+
+        if (state) {
+            this.cache.push({ key, state });
+        } else {
+            const topItem = this.cache.peek();
+            if (topItem.key === key) {
+                this.cache.pop();
+            } else {
+                throw new Error("Trying to pop from DetachedStateCache but keys don't match. " +
+                    `expected: ${topItem.key} actual: ${key}`);
+            }
+        }
+    }
+
+    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
+        const key = getSnapshotKey(route);
+        const isBack = this.location._isPageNavigatingBack();
+        const cachedItem = this.cache.peek();
+
+        let state = null;
+        if (isBack && cachedItem && cachedItem.key === key) {
+            state = cachedItem.state;
+        }
+
+        log(`retrieved isBack: ${isBack} key: ${key} state: ${state}`);
+
+        return state;
+    }
+
+    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+        const shouldReuse = future.routeConfig === curr.routeConfig;
+
+        if (shouldReuse && curr && curr[pageRouterActivatedSymbol]) {
+            // When reusing route - copy the pageRouterActivated to the new snapshot
+            // Its needed in shouldDetach to determine if the route should be detached.
+            future[pageRouterActivatedSymbol] = curr[pageRouterActivatedSymbol];
+        }
+
+        log(`shouldReuseRoute result: ${shouldReuse}`);
+
+        return shouldReuse;
+    }
+
+    clearCache() {
+        this.cache.clear();
+    }
+}
+
+function getSnapshotKey(snapshot: ActivatedRouteSnapshot): string {
+    return snapshot.pathFromRoot.join("->");
+}