feat(HMR): apply changes in page styles at runtime when app root is a frame (#6857)

* feat(HMR): apply changes in page styles at runtime

* fix: livesync tests

* test: changeCssFile method

* refactor: address comments

Add a comment.
Update `let` to `const`.
Update `changesCssFile` test.

* test: add an assert

tests/app/ui/styling/style-tests.ts

@@ -674,6 +674,23 @@ export function test_CSS_isAppliedOnPage_From_addCssFile() {
     });
 }
 
+export function test_CSS_isAppliedOnPage_From_changeCssFile() {
+    const testButton = new buttonModule.Button();
+    testButton.text = "Test";
+
+    const testCss = "button { color: blue; }";
+
+    const testFunc = function (views: Array<viewModule.View>) {
+        helper.assertViewColor(testButton, "#0000FF");
+        const page: pageModule.Page = <pageModule.Page>views[1];
+        page.changeCssFile("~/ui/styling/test.css");
+        helper.assertViewBackgroundColor(page, "#FF0000");
+        TKUnit.assert(testButton.style.color === undefined, "Color should not have a value");
+    }
+
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
+}
+
 const invalidCSS = ".invalid { " +
     "color: invalidValue; " +
     "background-color: invalidValue; " +

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

@@ -82,19 +82,23 @@ export function setApplication(instance: iOSApplication | AndroidApplication): v
 export function livesync(rootView: View, context?: ModuleContext) {
     events.notify(<EventData>{ eventName: "livesync", object: app });
     const liveSyncCore = global.__onLiveSyncCore;
-    let reapplyAppCss = false;
+    let reapplyAppStyles = false;
+    let reapplyLocalStyles = false;
 
-    if (context) {
-        const fullFileName = getCssFileName();
-        const fileName = fullFileName.substring(0, fullFileName.lastIndexOf(".") + 1);
+    if (context && context.path) {
         const extensions = ["css", "scss"];
-        reapplyAppCss = extensions.some(ext => context.path === fileName.concat(ext));
+        const appStylesFullFileName = getCssFileName();
+        const appStylesFileName = appStylesFullFileName.substring(0, appStylesFullFileName.lastIndexOf(".") + 1);
+        reapplyAppStyles = extensions.some(ext => context.path === appStylesFileName.concat(ext));
+        if (!reapplyAppStyles) {
+            reapplyLocalStyles = extensions.some(ext => context.path.endsWith(ext));
+        }
     }
 
-    if (reapplyAppCss && rootView) {
+    if (reapplyAppStyles && rootView) {
         rootView._onCssStateChange();
     } else if (liveSyncCore) {
-        liveSyncCore();
+        reapplyLocalStyles ? liveSyncCore(context) : liveSyncCore();
     }
 }
 

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

@@ -225,9 +225,9 @@ class IOSApplication implements IOSApplicationDefinition {
         }
     }
 
-    public _onLivesync(): void {
+    public _onLivesync(context?: ModuleContext): void {
         // If view can't handle livesync set window controller.
-        if (this._rootView && !this._rootView._onLivesync()) {
+        if (this._rootView && !this._rootView._onLivesync(context)) {
             this.setWindowContent();
         }
     }
@@ -264,8 +264,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 (context?: ModuleContext) {
+    iosApp._onLivesync(context);
 }
 
 let mainEntry: NavigationEntry;

tns-core-modules/module.d.ts

@@ -52,7 +52,7 @@ declare namespace NodeJS {
         __inspector?: any;
         __extends: any;
         __onLiveSync: (context?: { type: string, path: string }) => void;
-        __onLiveSyncCore: () => void;
+        __onLiveSyncCore: (context?: { type: string, path: string }) => void;
         __onUncaughtError: (error: NativeScriptError) => void;
         __onDiscardedError: (error: NativeScriptError) => void;
         TNS_WEBPACK?: boolean;

tns-core-modules/ui/core/view/view-common.ts

@@ -105,6 +105,14 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this._updateStyleScope(cssFileName);
     }
 
+    public changeCssFile(cssFileName: string): void {
+        const scope = this._styleScope;
+        if (scope && cssFileName) {
+            scope.changeCssFile(cssFileName);
+            this._onCssStateChange();
+        }
+    }
+
     public _updateStyleScope(cssFileName?: string, cssString?: string, css?: string): void {
         let scope = this._styleScope;
         if (!scope) {

tns-core-modules/ui/core/view/view.d.ts

@@ -586,6 +586,13 @@ export abstract class View extends ViewBase {
      */
     addCssFile(cssFileName: string): void;
 
+    /**
+     * @private
+     * Changes the current css to the content of the file.
+     * @param cssFileName - A valid file name (from the application root) which contains a valid css.
+     */
+    changeCssFile(cssFileName: string): void;
+
     // Lifecycle events
     _getNativeViewsCount(): number;
 
@@ -673,7 +680,7 @@ export abstract class View extends ViewBase {
     /**
      * @private
      */
-    _onLivesync(): boolean;
+    _onLivesync(context?: { type: string, path: string }): boolean;
     /**
      * @private
      */

tns-core-modules/ui/frame/frame-common.ts

@@ -563,7 +563,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
         return result;
     }
 
-    public _onLivesync(): boolean {
+    public _onLivesync(context?: ModuleContext): boolean {
         super._onLivesync();
 
         if (!this._currentEntry || !this._currentEntry.entry) {
@@ -571,6 +571,17 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
         }
 
         const currentEntry = this._currentEntry.entry;
+        if (context && context.path) {
+            // Use topmost instead of this to cover nested frames scenario
+            const topmostFrame = topmost();
+            const moduleName = topmostFrame.currentEntry.moduleName;
+            const reapplyStyles = context.path.includes(moduleName);
+            if (reapplyStyles && moduleName) {
+                topmostFrame.currentPage.changeCssFile(context.path);
+                return true;
+            }
+        }
+
         const newEntry: NavigationEntry = {
             animated: false,
             clearHistory: true,

tns-core-modules/ui/frame/frame.android.ts

@@ -82,13 +82,13 @@ function getAttachListener(): android.view.View.OnAttachStateChangeListener {
     return attachStateChangeListener;
 }
 
-export function reloadPage(): void {
+export function reloadPage(context?: ModuleContext): void {
     const activity = application.android.foregroundActivity;
     const callbacks: AndroidActivityCallbacks = activity[CALLBACKS];
     if (callbacks) {
         const rootView: View = callbacks.getRootView();
 
-        if (!rootView || !rootView._onLivesync()) {
+        if (!rootView || !rootView._onLivesync(context)) {
             callbacks.resetActivityContent(activity);
         }
     } else {

tns-core-modules/ui/styling/style-scope.d.ts

@@ -29,6 +29,7 @@ export class CssState {
 export class StyleScope {
     public css: string;
     public addCss(cssString: string, cssFileName: string): void;
+    public changeCssFile(cssFileName: string): void;
 
     public static createSelectorsFromCss(css: string, cssFileName: string, keyframes: Object): RuleSet[];
     public static createSelectorsFromImports(tree: SyntaxTree, keyframes: Object): RuleSet[];

tns-core-modules/ui/styling/style-scope.ts

@@ -568,6 +568,19 @@ export class StyleScope {
         this.appendCss(null, cssFileName);
     }
 
+    @profile
+    private changeCssFile(cssFileName: string): void {
+        if (!cssFileName) {
+            return;
+        }
+
+        const cssSelectors = CSSSource.fromURI(cssFileName, this._keyframes);
+        this._css = cssSelectors.source;
+        this._localCssSelectors = cssSelectors.selectors;
+        this._localCssSelectorVersion++;
+        this.ensureSelectors();
+    }
+
     @profile
     private setCss(cssString: string, cssFileName?): void {
         this._css = cssString;