Apply page css when using nav-entry with create method

tns-core-modules/ui/core/properties/properties.ts

@@ -17,7 +17,7 @@ let inheritableProperties = new Array<InheritedProperty<any, any>>();
 let inheritableCssProperties = new Array<InheritedCssProperty<any, any>>();
 
 function print(map) {
-    let symbols = (<any>Object).getOwnPropertySymbols(map);
+    let symbols = Object.getOwnPropertySymbols(map);
     for (let symbol of symbols) {
         const prop = map[symbol];
         if (!prop.registered) {
@@ -955,7 +955,7 @@ function inheritableCssPropertyValuesOn(style: Style): Array<{ property: Inherit
 }
 
 export function initNativeView(view: ViewBase): void {
-    let symbols = (<any>Object).getOwnPropertySymbols(view);
+    let symbols = Object.getOwnPropertySymbols(view);
     for (let symbol of symbols) {
         const property: Property<any, any> = symbolPropertyMap[symbol];
         if (!property) {
@@ -976,7 +976,7 @@ export function initNativeView(view: ViewBase): void {
     }
 
     const style = view.style;
-    symbols = (<any>Object).getOwnPropertySymbols(style);
+    symbols = Object.getOwnPropertySymbols(style);
     for (let symbol of symbols) {
         const property: CssProperty<any, any> = cssSymbolPropertyMap[symbol];
         if (!property) {
@@ -998,7 +998,7 @@ export function initNativeView(view: ViewBase): void {
 }
 
 export function resetNativeView(view: ViewBase): void {
-    let symbols = (<any>Object).getOwnPropertySymbols(view);
+    let symbols = Object.getOwnPropertySymbols(view);
     for (let symbol of symbols) {
         const property: Property<any, any> = symbolPropertyMap[symbol];
         if (!property) {
@@ -1017,7 +1017,7 @@ export function resetNativeView(view: ViewBase): void {
 
     const style = view.style;
 
-    symbols = (<any>Object).getOwnPropertySymbols(style);
+    symbols = Object.getOwnPropertySymbols(style);
     for (let symbol of symbols) {
         const property: CssProperty<any, any> = cssSymbolPropertyMap[symbol];
         if (!property) {
@@ -1053,7 +1053,7 @@ export function clearInheritedProperties(view: ViewBase): void {
 }
 
 export function resetCSSProperties(style: Style): void {
-    let symbols = (<any>Object).getOwnPropertySymbols(style);
+    let symbols = Object.getOwnPropertySymbols(style);
     for (let symbol of symbols) {
         let cssProperty;
         if (cssProperty = cssSymbolPropertyMap[symbol]) {

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

@@ -83,14 +83,16 @@ export function resolvePageFromEntry(entry: NavigationEntry): Page {
         if (!page) {
             throw new Error("Failed to create Page with entry.create() function.");
         }
+
+        page._refreshCss();
     }
     else if (entry.moduleName) {
         // Current app full path.
         let currentAppPath = knownFolders.currentApp().path;
         //Full path of the module = current app full path + module name.
         let moduleNamePath = path.join(currentAppPath, entry.moduleName);
-        console.log("frame module path: " + moduleNamePath);
+        traceWrite("frame module path: " + moduleNamePath, traceCategories.Navigation);
-        console.log("frame module module: " + entry.moduleName);
+        traceWrite("frame module module: " + entry.moduleName, traceCategories.Navigation);
 
         let moduleExports;
         // web-pack case where developers register their page JS file manually.

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

@@ -26,10 +26,12 @@ export class PageBase extends ContentView implements PageDefinition {
     private _navigationContext: any;
 
     private _actionBar: ActionBar;
+    private _cssAppliedVersion: number;
 
+    public _styleScope: StyleScope; // same as in ViewBase, but strongly typed
     public _modal: PageBase;
     public _fragmentTag: string;
-
+    
     public actionBarHidden: boolean;
     public enableSwipeBackNavigation: boolean;
     public backgroundSpanUnderStatusBar: boolean;
@@ -79,16 +81,8 @@ export class PageBase extends ContentView implements PageDefinition {
         return this;
     }
 
-    public refreshCssIfAppCssChanged(): void {
-        // If app css changed ensureSelectors will return true.
-        // Need when app css change and page is in the backstack.
-        if (this._styleScope.ensureSelectors()) {
-            this._refreshCss();
-        }
-    }
-
     public onLoaded(): void {
-        this.refreshCssIfAppCssChanged();
+        this._refreshCss();
         super.onLoaded();
     }
 
@@ -124,16 +118,21 @@ export class PageBase extends ContentView implements PageDefinition {
         }
     }
 
+    // Used in component-builder.ts
     public _refreshCss(): void {
-        const styleScope = this._styleScope;
+        const scopeVersion = this._styleScope.ensureSelectors();
-        this._resetCssValues();
+        if (scopeVersion !== this._cssAppliedVersion) {
-        const checkSelectors = (view: View): boolean => {
+            const styleScope = this._styleScope;
-            styleScope.applySelectors(view);
+            this._resetCssValues();
-            return true;
+            const checkSelectors = (view: View): boolean => {
-        };
+                styleScope.applySelectors(view);
+                return true;
+            };
 
-        checkSelectors(this);
+            checkSelectors(this);
-        eachDescendant(this, checkSelectors);
+            eachDescendant(this, checkSelectors);
+            this._cssAppliedVersion = scopeVersion;
+        }
     }
 
     public getKeyframeAnimationWithName(animationName: string): KeyframeAnimationInfo {
@@ -310,6 +309,8 @@ statusBarStyleProperty.register(Style);
 /**
  * Property backing androidStatusBarBackground.
  */
-export const androidStatusBarBackgroundProperty = new CssProperty<Style, Color>({ name: "androidStatusBarBackground", cssName:"android-status-bar-background", 
+export const androidStatusBarBackgroundProperty = new CssProperty<Style, Color>({
-    equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
+    name: "androidStatusBarBackground", cssName: "android-status-bar-background",
+    equalityComparer: Color.equals, valueConverter: (v) => new Color(v)
+});
 androidStatusBarBackgroundProperty.register(Style);

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

@@ -22,7 +22,7 @@ export class StyleScope {
 
     public static createSelectorsFromCss(css: string, cssFileName: string, keyframes: Object): RuleSet[];
     public static createSelectorsFromImports(tree: SyntaxTree, keyframes: Object): RuleSet[];
-    public ensureSelectors(): boolean;
+    public ensureSelectors(): number;
 
     public applySelectors(view: ViewBase): void
     public query(options: Node): SelectorCore[];

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

@@ -200,7 +200,7 @@ export class StyleScope {
         return undefined;
     }
 
-    public ensureSelectors(): boolean {
+    public ensureSelectors(): number {
         let toMerge: RuleSet[][];
         if (this._applicationCssSelectorsAppliedVersion !== applicationCssSelectorVersion ||
             this._localCssSelectorVersion !== this._localCssSelectorsAppliedVersion ||
@@ -218,12 +218,10 @@ export class StyleScope {
         if (toMerge && toMerge.length > 0) {
             this._mergedCssSelectors = toMerge.filter(m => !!m).reduce((merged, next) => merged.concat(next), []);
             this._applyKeyframesOnSelectors();
-        } else {
+            this._selectors = new SelectorsMap(this._mergedCssSelectors);
-            return false;
         }
 
-        this._selectors = new SelectorsMap(this._mergedCssSelectors);
+        return this._getSelectorsVersion();
-        return true;
     }
 
     public applySelectors(view: ViewBase): void {
@@ -245,6 +243,12 @@ export class StyleScope {
         this._viewIdToKey = {};
     }
 
+    private _getSelectorsVersion() {
+        // The counters can only go up. So we can return just appVersion + localVersion
+        // The 100000 * appVersion is just for easier debugging
+        return 100000 * this._applicationCssSelectorsAppliedVersion + this._localCssSelectorsAppliedVersion;
+    }
+
     private _applyKeyframesOnSelectors() {
         for (let i = this._mergedCssSelectors.length - 1; i >= 0; i--) {
             let ruleset = this._mergedCssSelectors[i];