From 55028b0c923d3cd5fa424e4c02d552cb21228b64 Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Tue, 3 Jan 2017 11:05:15 +0200
Subject: [PATCH] Fix: Custom components within other custom components:
 occasionally not loaded "in time" and ignoring css

Resolves #1639
---
 .../ui-tests-app/issues/component/customView.css  |  4 ++++
 .../ui-tests-app/issues/component/customView.xml  |  5 +++--
 .../issues/component2/customView2.css             |  4 ++++
 .../issues/component2/customView2.xml             |  5 +++--
 .../issues/component3/customView3.css             |  4 ++++
 .../issues/component3/customView3.xml             |  5 +++--
 apps/app/ui-tests-app/issues/issue-1639.css       |  4 ++++
 apps/app/ui-tests-app/issues/issue-1639.xml       |  7 ++++---
 tns-core-modules/ui/builder/builder.ts            | 15 ++++++++++++++-
 9 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 apps/app/ui-tests-app/issues/component/customView.css
 create mode 100644 apps/app/ui-tests-app/issues/component2/customView2.css
 create mode 100644 apps/app/ui-tests-app/issues/component3/customView3.css
 create mode 100644 apps/app/ui-tests-app/issues/issue-1639.css

diff --git a/apps/app/ui-tests-app/issues/component/customView.css b/apps/app/ui-tests-app/issues/component/customView.css
new file mode 100644
index 000000000..d3d578304
--- /dev/null
+++ b/apps/app/ui-tests-app/issues/component/customView.css
@@ -0,0 +1,4 @@
+.local-green {
+    color: green;
+    margin-left: 10;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/issues/component/customView.xml b/apps/app/ui-tests-app/issues/component/customView.xml
index 7b9ec87ad..399b1c357 100644
--- a/apps/app/ui-tests-app/issues/component/customView.xml
+++ b/apps/app/ui-tests-app/issues/component/customView.xml
@@ -1,4 +1,5 @@
-<StackLayout xmlns:cC2="/ui-tests-app/issues/component2">
-    <Label class="ui-tests-app-issue-1639-green" text="customView green" textWrap="true" />
+<StackLayout xmlns:cC2="/ui-tests-app/issues/component2" style.borderWidth="1" style.borderColor="black">
+    <Label class="ui-tests-app-issue-1639-green" text="customView green from app.css" textWrap="true" />
+    <Label class="local-green" text="customView green from customView.css" textWrap="true" />
     <cC2:customView2/>
 </StackLayout>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/issues/component2/customView2.css b/apps/app/ui-tests-app/issues/component2/customView2.css
new file mode 100644
index 000000000..bc37ef5e9
--- /dev/null
+++ b/apps/app/ui-tests-app/issues/component2/customView2.css
@@ -0,0 +1,4 @@
+.local-blue {
+    color: blue;
+    margin-left: 20;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/issues/component2/customView2.xml b/apps/app/ui-tests-app/issues/component2/customView2.xml
index 01d4eca37..f2352edeb 100644
--- a/apps/app/ui-tests-app/issues/component2/customView2.xml
+++ b/apps/app/ui-tests-app/issues/component2/customView2.xml
@@ -1,4 +1,5 @@
-<StackLayout xmlns:cC3="/ui-tests-app/issues/component3">
-    <Label class="ui-tests-app-issue-1639-blue" text="customView2 blue" textWrap="true" />
+<StackLayout xmlns:cC3="/ui-tests-app/issues/component3" style.borderWidth="1" style.borderColor="black">
+    <Label class="ui-tests-app-issue-1639-blue" text="customView2 blue from app.css" textWrap="true" />
+    <Label class="local-blue" text="customView2 blue from customView2.css" textWrap="true" />
     <cC3:customView3/>
 </StackLayout>
diff --git a/apps/app/ui-tests-app/issues/component3/customView3.css b/apps/app/ui-tests-app/issues/component3/customView3.css
new file mode 100644
index 000000000..ae15e4d21
--- /dev/null
+++ b/apps/app/ui-tests-app/issues/component3/customView3.css
@@ -0,0 +1,4 @@
+.local-yellow {
+    color: yellow;
+    margin-left: 30;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/issues/component3/customView3.xml b/apps/app/ui-tests-app/issues/component3/customView3.xml
index b0cd7c01b..cf0145de7 100644
--- a/apps/app/ui-tests-app/issues/component3/customView3.xml
+++ b/apps/app/ui-tests-app/issues/component3/customView3.xml
@@ -1,3 +1,4 @@
-<StackLayout>
-    <Label class="ui-tests-app-issue-1639-yellow" text="customView3 yellow" textWrap="true" />
+<StackLayout style.borderWidth="1" style.borderColor="black">
+    <Label class="ui-tests-app-issue-1639-yellow" text="customView3 yellow from app.css" textWrap="true" />
+    <Label class="local-yellow" text="customView3 yellow from customView3.css" textWrap="true" />
 </StackLayout>
diff --git a/apps/app/ui-tests-app/issues/issue-1639.css b/apps/app/ui-tests-app/issues/issue-1639.css
new file mode 100644
index 000000000..8d4867a5e
--- /dev/null
+++ b/apps/app/ui-tests-app/issues/issue-1639.css
@@ -0,0 +1,4 @@
+.local-red {
+    color: red;
+    margin-left: 0;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/issues/issue-1639.xml b/apps/app/ui-tests-app/issues/issue-1639.xml
index 29739e292..101362b40 100644
--- a/apps/app/ui-tests-app/issues/issue-1639.xml
+++ b/apps/app/ui-tests-app/issues/issue-1639.xml
@@ -1,6 +1,7 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:cC="ui-tests-app/issues/component">
-  <StackLayout>
-    <Label class="ui-tests-app-issue-1639-red" text="main-page red" textWrap="true" />
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:cC="ui-tests-app/issues/component" id="main-page">
+  <StackLayout style.borderWidth="1" style.borderColor="black">
+    <Label class="ui-tests-app-issue-1639-red" text="main-page red from app.css" textWrap="true" />
+    <Label class="local-red" text="main-page red from issue-1639.css" textWrap="true" />
    <cC:customView/>
   </StackLayout>
 </Page>
\ No newline at end of file
diff --git a/tns-core-modules/ui/builder/builder.ts b/tns-core-modules/ui/builder/builder.ts
index a4f058204..4fecb6baa 100644
--- a/tns-core-modules/ui/builder/builder.ts
+++ b/tns-core-modules/ui/builder/builder.ts
@@ -63,6 +63,12 @@ function parseInternal(value: string, context: any, uri?: string): ComponentModu
 }
 
 function loadCustomComponent(componentPath: string, componentName?: string, attributes?: Object, context?: Object, parentPage?: Page): ComponentModule {
+    if (!parentPage && context){
+        // Read the parent page that was passed down below
+        // https://github.com/NativeScript/NativeScript/issues/1639
+        parentPage = context["_parentPage"];
+        delete context["_parentPage"];
+    }
     var result: ComponentModule;
     componentPath = componentPath.replace("~/", "");
     const moduleName = componentPath + "/" + componentName;
@@ -89,7 +95,14 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
                 subExports = global.loadModule(jsFilePath)
             }
         }
-
+        
+        // Pass the parent page down the chain in case of custom components nested on many levels. Use the context for piggybacking.
+        // https://github.com/NativeScript/NativeScript/issues/1639
+        if (!subExports) {
+            subExports = {};    
+        }
+        subExports["_parentPage"] = parentPage;
+        
         result = loadInternal(xmlFilePath, subExports);
 
         // Attributes will be transfered to the custom component