Update livesync (CSS/templates) for rc5

Author: hdeshev

nativescript-angular/platform.ts

@@ -20,7 +20,6 @@ import {
     OpaqueToken,
     ApplicationModule,
     ExceptionHandler,
-    NgModule,
     platformCore,
     CompilerOptions,
     COMPILER_OPTIONS,
@@ -29,11 +28,12 @@ import {
     Renderer,
     RootRenderer,
     SanitizationService,
-    PLATFORM_DIRECTIVES,
     PlatformRef,
+    ComponentRef,
+    NgModule,
     NgModuleFactory,
     NgModuleRef,
-    Testability,
+    EventEmitter,
     createPlatformFactory
 } from '@angular/core';
 import * as application from "application";
@@ -101,7 +101,6 @@ export class NativeScriptModule {
 
 export const NS_COMPILER_PROVIDERS = [
     COMPILER_PROVIDERS,
-    //provide(PLATFORM_DIRECTIVES, { useValue: NS_DIRECTIVES, multi: true }),
     {
         provide: COMPILER_OPTIONS,
         useValue: {providers: [
@@ -112,12 +111,17 @@ export const NS_COMPILER_PROVIDERS = [
     }
 ];
 
-type BootstrapperAction<M> = () => Promise<NgModuleRef<M>>;
+type BootstrapperAction = () => Promise<NgModuleRef<any>>;
 
-let lastBootstrappedApp: WeakRef<NgModuleRef<any>>;
+let lastBootstrappedModule: WeakRef<NgModuleRef<any>>;
+interface BootstrapParams {
+    appModuleType: Type,
+    appOptions?: AppOptions
+}
 
-class NativeScriptPlatformRef extends PlatformRef {
+let bootstrapCache: BootstrapParams;
 
+class NativeScriptPlatformRef extends PlatformRef {
     constructor(private platform: PlatformRef, private appOptions?: AppOptions) {
         super();
     }
@@ -126,11 +130,41 @@ class NativeScriptPlatformRef extends PlatformRef {
         throw new Error("Not implemented.");
     }
 
-    bootstrapModule<M>(moduleType: ConcreteType<M>, compilerOptions: CompilerOptions|CompilerOptions[] = []): Promise<NgModuleRef<M>> {
-        const mainPageEntry = this.createNavigationEntry(() => this.platform.bootstrapModule(moduleType, compilerOptions));
+    private _bootstrapper: BootstrapperAction;
+
+    bootstrapModule<M>(moduleType: ConcreteType<M>, compilerOptions: CompilerOptions | CompilerOptions[] = []): Promise<NgModuleRef<M>> {
+        this._bootstrapper = () => this.platform.bootstrapModule(moduleType, compilerOptions);
+        // Patch livesync
+        global.__onLiveSyncCore = () => this.livesyncModule();
+
+        const mainPageEntry = this.createNavigationEntry(this._bootstrapper);
+
         application.start(mainPageEntry);
+
         return null; //Make the compiler happy
     }
+
+    livesyncModule(): void {
+        rendererLog("ANGULAR LiveSync Started");
+
+        onBeforeLivesync.next(lastBootstrappedModule ? lastBootstrappedModule.get() : null);
+
+        const mainPageEntry = this.createNavigationEntry(
+            this._bootstrapper,
+            compRef => onAfterLivesync.next(compRef),
+            error => onAfterLivesync.error(error)
+        );
+        mainPageEntry.animated = false;
+        mainPageEntry.clearHistory = true;
+
+        const frame = topmost();
+        if (frame) {
+            if (frame.currentPage && frame.currentPage.modal) {
+                frame.currentPage.modal.closeModal();
+            }
+            frame.navigate(mainPageEntry);
+        }
+    }
 
     registerDisposeListener(dispose: () => void): void {
         this.platform.registerDisposeListener(dispose);
@@ -160,7 +194,7 @@ class NativeScriptPlatformRef extends PlatformRef {
         return this.platform.destroyed;
     }
 
-    private createNavigationEntry<M>(bootstrapAction: BootstrapperAction<M>, resolve?: (comp: NgModuleRef<any>) => void, reject?: (e: Error) => void, isReboot: boolean = false): NavigationEntry {
+    private createNavigationEntry(bootstrapAction: BootstrapperAction, resolve?: (comp: NgModuleRef<any>) => void, reject?: (e: Error) => void, isReboot: boolean = false): NavigationEntry {
         const navEntry: NavigationEntry = {
             create: (): Page => {
                 let page = new Page();
@@ -178,7 +212,7 @@ class NativeScriptPlatformRef extends PlatformRef {
                     bootstrapAction().then((moduleRef) => {
                         //profiling.stop('ng-bootstrap');
                         rendererLog('ANGULAR BOOTSTRAP DONE.');
-                        lastBootstrappedApp = new WeakRef(moduleRef);
+                        lastBootstrappedModule = new WeakRef(moduleRef);
 
                         if (resolve) {
                             resolve(moduleRef);
@@ -212,6 +246,9 @@ class NativeScriptPlatformRef extends PlatformRef {
 
         return navEntry;
     }
+
+    liveSyncApp() {
+    }
 }
 
 var _platformNativeScriptDynamic: PlatformFactory = createPlatformFactory(
@@ -221,3 +258,6 @@ export function platformNativeScriptDynamic(options?: AppOptions, extraProviders
     return new NativeScriptPlatformRef(_platformNativeScriptDynamic(extraProviders), options);
 }
 
+export const onBeforeLivesync = new EventEmitter<NgModuleRef<any>>();
+export const onAfterLivesync = new EventEmitter<NgModuleRef<any>>();
+

ng-sample/app/app.ts

@@ -6,8 +6,7 @@
 //profiling.start('application-start');
 
 // "nativescript-angular/application" import should be first in order to load some required settings (like globals and reflect-metadata)
-//import { nativeScriptBootstrap, onAfterLivesync, onBeforeLivesync} from "nativescript-angular/application";
-import { NativeScriptModule, platformNativeScriptDynamic } from "nativescript-angular/platform";
+import { NativeScriptModule, platformNativeScriptDynamic, onAfterLivesync, onBeforeLivesync } from "nativescript-angular/platform";
 import { NgModule } from "@angular/core";
 import { Router } from "@angular/router";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
@@ -31,7 +30,7 @@ import { HttpTest } from "./examples/http/http-test";
 import { ActionBarTest } from "./examples/action-bar/action-bar-test";
 import { ModalTest } from "./examples/modal/modal-test";
 import { PlatfromDirectivesTest } from "./examples/platform-directives/platform-directives-test";
-import { LivesyncApp, LivesyncTestRouterProviders } from "./examples/livesync-test/livesync-test-app";
+import { LivesyncApp } from "./examples/livesync-test/livesync-test-app";
 
 // new router
 import { RouterOutletAppComponent } from "./examples/router/router-outlet-test";
@@ -101,7 +100,7 @@ function makeExampleModule(componentType) {
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalTest));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(HttpTest));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PlatfromDirectivesTest));
-platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ActionBarTest));
+//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ActionBarTest));
 
 //new router
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RouterOutletAppComponent));
@@ -115,24 +114,25 @@ platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ActionBarTest));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationKeyframesTest));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationEnterLeaveTest));
 
-// Livesync test
-// var cahcedUrl: string;
-// onBeforeLivesync.subscribe((compRef) => {
-//     console.log("------- onBeforeLivesync");
-//     if (compRef) {
-//         const router = <Router>compRef.injector.get(Router);
-//         cahcedUrl = router.url;
-//         console.log("------- Caching URL: " + cahcedUrl);
-//     }
-// });
+//Livesync test
+var cachedUrl: string;
+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((compRef) => {
-//     console.log("------- onAfterLivesync cachedUrl:");
-//     const router = <Router>compRef.injector.get(Router);
-//     router.events.subscribe(e => console.log(e.toString()));
-//     if (router && cahcedUrl) {
-//         setTimeout(() => { router.navigateByUrl(cahcedUrl); }, 0);
-//     }
-// });
+onAfterLivesync.subscribe((moduleRef) => {
+    console.log("------- onAfterLivesync cachedUrl:");
+    const router = <Router>moduleRef.injector.get(Router);
+    router.events.subscribe(e => console.log(e.toString()));
+    if (router && cachedUrl) {
+        setTimeout(() => { router.navigateByUrl(cachedUrl); }, 0);
+    }
+});
 
-// nativeScriptBootstrap(LivesyncApp, [LivesyncTestRouterProviders]);
+platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LivesyncApp));
+console.log("APP RESTART");

ng-sample/app/examples/livesync-test/first/first.component.xml

@@ -1,4 +1,4 @@
 <StackLayout>
     <Label text="First Page" class="title"></Label>
     <Button text="Go to second" nsRouterLink="second"></Button>
-</StackLayout>
+</StackLayout>

ng-sample/app/examples/livesync-test/livesync-test-app.ts

@@ -7,16 +7,16 @@ import {SecondComponent} from "./second/second.component";
 
 @Component({
     selector: 'livesync-app-test',
-    directives: [NS_ROUTER_DIRECTIVES],
     template: `<page-router-outlet></page-router-outlet>`
 })
-export class LivesyncApp { }
+export class LivesyncApp {
+    static routes = [
+        { path: "", component: FirstComponent },
+        { path: "second", component: SecondComponent },
+    ];
 
-const routes: RouterConfig = [
-    { path: "", component: FirstComponent },
-    { path: "second", component: SecondComponent },
-];
-
-export const LivesyncTestRouterProviders = [
-    nsProvideRouter(routes, { enableTracing: false })
-];
+    static entries = [
+        FirstComponent,
+        SecondComponent,
+    ];
+}