feat(generators): {N} HMR livesync routing navigation restore (#52)

src/app.nativescript/_files/app/main.ts

@@ -1,5 +1,5 @@
 // https://github.com/NativeScript/nativescript-dev-webpack/issues/660#issuecomment-422711983
-import 'reflect-metadata'; 
+import 'reflect-metadata';
 import { platformNativeScriptDynamic } from 'nativescript-angular/platform';
 import { AppOptions } from 'nativescript-angular/platform-common';
 import { enableProdMode } from '@angular/core';
@@ -13,19 +13,21 @@ if (typeof __UGLIFIED__ !== 'undefined' && __UGLIFIED__) {
 
 let options: AppOptions = {};
 if (module['hot']) {
-    const hmrUpdate = require('nativescript-dev-webpack/hmr').hmrUpdate;
+  // attach to livesync hooks and perform navigation
+  require('@<%= npmScope %>/nativescript').attachLivesyncNavigation();
+  const hmrUpdate = require('nativescript-dev-webpack/hmr').hmrUpdate;
 
-    options.hmrOptions = {
-        moduleTypeFactory: () => AppModule,
-        livesyncCallback: (platformReboot) => {
-            console.log("HMR: Sync...")
-            hmrUpdate();
-            setTimeout(platformReboot, 0);
-        },
+  options.hmrOptions = {
+    moduleTypeFactory: () => AppModule,
+    livesyncCallback: platformReboot => {
+      console.log('HMR: Sync...');
+      hmrUpdate();
+      setTimeout(platformReboot, 0);
     }
-    hmrUpdate();
+  };
+  hmrUpdate();
 
-    module['hot'].accept(['./app.module']);
+  module['hot'].accept(['./app.module']);
 }
 
 platformNativeScriptDynamic(options).bootstrapModule(AppModule);

src/migrations/migrations.json

@@ -39,6 +39,11 @@
         "version": "7.0.0",
         "description": "Update {N} 5.0",
         "factory": "./update-7-0-0/update-7-0-0"
+      },
+      "update-to-7.0.1": {
+        "version": "7.0.1",
+        "description": "Add {N} HMR livesync navigation hook",
+        "factory": "./update-7-0-1/update-7-0-1"
       }
     }
   }

src/migrations/update-7-0-1/update-7-0-1.ts

@@ -0,0 +1,68 @@
+import {
+  chain,
+  Rule,
+  SchematicContext,
+  Tree
+} from "@angular-devkit/schematics";
+import { join } from 'path';
+import * as fs from 'fs';
+
+import { getJsonFromFile, updateJsonFile, createOrUpdate, updateJsonInTree } from '../../utils';
+
+function updateNativeScriptApps(tree: Tree, context: SchematicContext) {
+  const appsDir = tree.getDir("apps");
+  const appFolders = appsDir.subdirs;
+  const nxConfigPath = `nx.json`;
+  const nxJson = getJsonFromFile(tree, nxConfigPath);
+  const npmScope = nxJson.npmScope;
+  const cwd = process.cwd();
+  // console.log('webpackConfig:',webpackConfig);
+  const mainPath = join(cwd, 'node_modules/@nstudio/schematics/src/app.nativescript/_files/app/main.ts');
+  // console.log('webpackConfigPath:', webpackConfigPath);
+  let mainFile = fs.readFileSync(mainPath, 'UTF-8');
+  mainFile = mainFile.replace('<%= npmScope %>', npmScope);
+
+  const hmrNavigationPath = join(cwd, 'node_modules/@nstudio/schematics/src/xplat/_nativescript_files/utils/livesync-navigation.ts');
+  let hmrNavigation = fs.readFileSync(hmrNavigationPath, 'UTF-8');
+
+  // update {N} apps and configs
+  for (const dir of appFolders) {
+    // console.log(dir);
+    if (dir.indexOf("nativescript-") === 0) {
+      const appDir = `${appsDir.path}/${dir}`;
+      // console.log('appDir:', appDir); 
+
+      createOrUpdate(
+        tree,
+        `${appDir}/app/main.ts`,
+        mainFile
+      );
+    }
+  }
+
+  if (tree.exists('xplat/nativescript')) {
+    createOrUpdate(
+      tree,
+      `xplat/nativescript/utils/livesync-navigation.ts`,
+      hmrNavigation
+    );
+
+    const utilsTreePath = 'xplat/nativescript/utils/index.ts';
+    const utilsFullPath = join(cwd, utilsTreePath);
+    let utilsIndex;
+    if (fs.existsSync(utilsFullPath)) {
+      utilsIndex = fs.readFileSync(utilsFullPath, 'UTF-8');
+      utilsIndex += `\nexport * from './livesync-navigation';`;
+      createOrUpdate(
+        tree,
+        utilsTreePath,
+        utilsIndex
+      );
+    }
+  }
+  return tree;
+}
+
+export default function(): Rule {
+  return chain([updateNativeScriptApps]);
+}

src/xplat/_nativescript_files/utils/index.ts

@@ -1 +1,2 @@
-export * from './icons';
+export * from './icons';
+export * from './livesync-navigation';

src/xplat/_nativescript_files/utils/livesync-navigation.ts

@@ -0,0 +1,30 @@
+import { NgZone } from '@angular/core';
+import { Router } from '@angular/router';
+import { onBeforeLivesync, onAfterLivesync } from 'nativescript-angular/platform-common';
+import { RouterExtensions } from 'nativescript-angular/router';
+
+let cachedUrl: string;
+export function attachLivesyncNavigation() {
+  onBeforeLivesync.subscribe(moduleRef => {
+      console.log('#### onBeforeLivesync');
+      if (moduleRef) {
+          const router = <Router>moduleRef.injector.get(Router);
+          cachedUrl = router.url;
+          console.log('-------> Caching URL: ' + cachedUrl);
+      }
+  });
+
+  onAfterLivesync.subscribe(({ moduleRef, error }) => {
+      console.log(`#### onAfterLivesync moduleRef: ${moduleRef} error: ${error}`);
+      if (moduleRef) {
+          const router = <RouterExtensions>moduleRef.injector.get(RouterExtensions);
+          const ngZone = <NgZone>moduleRef.injector.get(NgZone);
+          if (router && cachedUrl) {
+            ngZone.run(() => {
+              router.navigateByUrl(cachedUrl, { animated: false });
+            });
+          }
+      }
+  });
+}
+