feat(HMR): apply changes in application styles at runtime

Expose `HmrContext` interface.
Apply changes in `app.css` instantly.
Avoid navigation on livesync when changes in `app.css` have been made.
Apply changes in `app.css` on back navigation.

tns-core-modules/application/application-common.ts

@@ -70,11 +70,11 @@ export function setApplication(instance: iOSApplication | AndroidApplication): v
     app = instance;
 }
 
-export function livesync() {
+export function livesync(context?: HmrContext) {
     events.notify(<EventData>{ eventName: "livesync", object: app });
     const liveSyncCore = global.__onLiveSyncCore;
     if (liveSyncCore) {
-        liveSyncCore();
+        liveSyncCore(context);
     }
 }
 
@@ -92,7 +92,7 @@ export function loadAppCss(): void {
         events.notify(<LoadAppCSSEventData>{ eventName: "loadAppCss", object: app, cssFile: getCssFileName() });
     } catch (e) {
         throw new Error(`The file ${getCssFileName()} couldn't be loaded! ` +
-           `You may need to register it inside ./app/vendor.ts.`);
+            `You may need to register it inside ./app/vendor.ts.`);
     }
 }
 

tns-core-modules/application/application.android.ts

@@ -212,12 +212,12 @@ export function getNativeApplication(): android.app.Application {
     return nativeApp;
 }
 
-global.__onLiveSync = function () {
+global.__onLiveSync = function __onLiveSync(context?: HmrContext) {
     if (androidApp && androidApp.paused) {
         return;
     }
 
-    livesync();
+    livesync(context);
 };
 
 function initLifecycleCallbacks() {

tns-core-modules/application/application.ios.ts

@@ -18,6 +18,7 @@ export * from "./application-common";
 import { createViewFromEntry } from "../ui/builder";
 import { ios as iosView, View } from "../ui/core/view";
 import { Frame, NavigationEntry } from "../ui/frame";
+import { loadCss } from "../ui/styling/style-scope";
 import * as utils from "../utils/utils";
 import { profile, level as profilingLevel, Level } from "../profiling";
 
@@ -225,10 +226,21 @@ class IOSApplication implements IOSApplicationDefinition {
         }
     }
 
-    public _onLivesync(): void {
-        // If view can't handle livesync set window controller.
-        if (!this._rootView._onLivesync()) {
-            this.setWindowContent();
+    public _onLivesync(context?: HmrContext): void {
+        let executeLivesync = true;
+        // HMR has context, livesync does not
+        if (context) {
+            if (context.module === getCssFileName()) {
+                loadCss(context.module);
+                this._rootView._onCssStateChange();
+                executeLivesync = false;
+            }
+        }
+        if (executeLivesync) {
+            // If view can't handle livesync set window controller.
+            if (!this._rootView._onLivesync()) {
+                this.setWindowContent();
+            }
         }
     }
 
@@ -264,8 +276,8 @@ exports.ios = iosApp;
 setApplication(iosApp);
 
 // attach on global, so it can be overwritten in NativeScript Angular
-(<any>global).__onLiveSyncCore = function () {
-    iosApp._onLivesync();
+(<any>global).__onLiveSyncCore = function __onLiveSyncCore(context?: HmrContext) {
+    iosApp._onLivesync(context);
 }
 
 let mainEntry: NavigationEntry;
@@ -373,10 +385,10 @@ function setViewControllerView(view: View): void {
     }
 }
 
-global.__onLiveSync = function () {
+global.__onLiveSync = function __onLiveSync(context?: HmrContext) {
     if (!started) {
         return;
     }
 
-    livesync();
+    livesync(context);
 }