refactor: HMR and webpack improvements (#7462)

* chore: update project

* refactor: clear module-name cache on orientation

* feat: add custom component in qualifiers app

* feat: enable HMR for custom components

* refactor: remove redundant check

* chore: clean console.log

e2e/file-qualifiers/app/App_Resources/Android/app.gradle

@@ -2,15 +2,19 @@
 
 // Uncomment to add recyclerview-v7 dependency
 //dependencies {
-//	compile 'com.android.support:recyclerview-v7:+'
+//	implementation 'com.android.support:recyclerview-v7:+'
 //}
 
-android {  
-  defaultConfig {  
+// If you want to add something to be applied before applying plugins' include.gradle files
+// e.g. project.ext.googlePlayServicesVersion = "15.0.1"
+// create a file named before-plugins.gradle in the current directory and place it there
+
+android {
+  defaultConfig {
+    minSdkVersion 17
     generatedDensities = []
-    applicationId = "org.nativescript.animation"
-  }  
-  aaptOptions {  
-    additionalParameters "--no-version-vectors"  
-  }  
-} 
+  }
+  aaptOptions {
+    additionalParameters "--no-version-vectors"
+  }
+}

e2e/file-qualifiers/app/App_Resources/Android/src/main/AndroidManifest.xml

@@ -10,10 +10,6 @@
 		android:largeScreens="true"
 		android:xlargeScreens="true"/>
 
-	<uses-sdk
-		android:minSdkVersion="17"
-		android:targetSdkVersion="__APILEVEL__"/>
-
 	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
 	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 	<uses-permission android:name="android.permission.INTERNET"/>
@@ -28,7 +24,7 @@
 		<activity
 			android:name="com.tns.NativeScriptActivity"
 			android:label="@string/title_activity_kimera"
-			android:configChanges="keyboardHidden|orientation|screenSize"
+			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
 			android:theme="@style/LaunchScreenTheme">
 
 			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

e2e/file-qualifiers/app/App_Resources/Android/src/main/res/values/strings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="app_name">TestApp</string>
+    <string name="title_activity_kimera">TestApp</string>
+</resources>

e2e/file-qualifiers/app/App_Resources/Android/src/main/res/xml/provider_paths.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="external_files" path="."/>
+</paths>

e2e/file-qualifiers/app/app.css

@@ -1,5 +1,4 @@
 .root-footer {
-    horizontal-align: middle;
     color: black;
     background-color: lightgreen
 }

e2e/file-qualifiers/app/app.land.css

@@ -1,5 +1,4 @@
 .root-footer {
-    horizontal-align: middle;
     color: black;
     background-color: lightpink;
 }

e2e/file-qualifiers/app/app.ts

@@ -1,3 +1,7 @@
 import * as application from "tns-core-modules/application";
+import { setCategories, categories, enable } from "tns-core-modules/trace";
+
+setCategories(categories.Livesync);
+enable();
 
 application.run({ moduleName: "app-root" });

e2e/file-qualifiers/app/components/my-component.css

@@ -0,0 +1,5 @@
+.custom-component {
+    color: navy;
+    font-weight: bold;
+    font-size: 20;
+}

e2e/file-qualifiers/app/components/my-component.land.css

@@ -0,0 +1,5 @@
+.custom-component {
+    color: darkolivegreen;
+    font-weight: bold;
+    font-size: 20;
+}

e2e/file-qualifiers/app/components/my-component.land.ts

@@ -0,0 +1,3 @@
+export function onLoaded() {
+    console.log("---> Custom component LANDSCAPE loaded");
+}

e2e/file-qualifiers/app/components/my-component.land.xml

@@ -0,0 +1,3 @@
+<StackLayout class="p-20" loaded="onLoaded">
+    <Label text="CUSTOM COMPONENT - LANDSCAPE" class="custom-component" />
+</StackLayout>

e2e/file-qualifiers/app/components/my-component.ts

@@ -0,0 +1,3 @@
+export function onLoaded() {
+    console.log("---> Custom component DEFAULT loaded");
+}

e2e/file-qualifiers/app/components/my-component.xml

@@ -0,0 +1,3 @@
+<StackLayout class="p-20" loaded="onLoaded">
+    <Label text="CUSTOM COMPONENT - DEFAULT" class="custom-component" />
+</StackLayout>

e2e/file-qualifiers/app/main/main-page-vm.ts

@@ -0,0 +1,3 @@
+import { fromObject } from "tns-core-modules/data/observable";
+
+export const vm = fromObject({ prop: "property from VM" });

e2e/file-qualifiers/app/main/main-page.land.ts

@@ -1,7 +1,17 @@
-export function onNavigatedTo(args) {
-    console.log("---> [LANDSCAPE] onNavigatedTo");
+import { topmost } from "tns-core-modules/ui/frame";
+import { vm } from "./main-page-vm";
+
+export function onNavigatingTo(args) {
+    console.log("---> [LANDSCAPE] onNavigatingTo");
+    args.object.page.bindingContext = vm;
+}
+
+export function tap(args) {
+    console.log("---> [LANDSCAPE] tap");
 }
 
 export function navigate(args) {
     console.log("---> [LANDSCAPE] navigate");
-}
+
+    topmost().navigate("other/other-page");
+}

e2e/file-qualifiers/app/main/main-page.land.xml

@@ -1,7 +1,13 @@
-<Page navigatedTo="onNavigatedTo">
+<Page navigatingTo="onNavigatingTo" xmlns:cc="components">
     <StackLayout class="page-content">
         <Label text="This is LANDSACPE page" />
         
-        <Button text="hey there" tap="navigate" />
+        <Button text="tap" tap="tap" />
+
+        <Button text="navigate" tap="navigate" />
+
+        <Label text="{{ prop }}" />
+
+        <cc:my-component />
     </StackLayout>
 </Page>

e2e/file-qualifiers/app/main/main-page.ts

@@ -1,7 +1,17 @@
-export function onNavigatedTo(args) {
-    console.log("---> [DEFAULT] onNavigatedTo");
+import { topmost } from "tns-core-modules/ui/frame";
+import { vm } from "./main-page-vm";
+
+export function onNavigatingTo(args) {
+    console.log("---> [DEFAULT] onNavigatingTo");
+    args.object.page.bindingContext = vm;
+}
+
+export function tap(args) {
+    console.log("---> [DEFAULT] tap");
 }
 
 export function navigate(args) {
     console.log("---> [DEFAULT] navigate");
+
+    topmost().navigate("other/other-page");
 }

e2e/file-qualifiers/app/main/main-page.xml

@@ -1,7 +1,13 @@
-<Page navigatedTo="onNavigatedTo">
+<Page navigatingTo="onNavigatingTo" xmlns:cc="components">
     <StackLayout class="page-content">
         <Label text="This is DEFAULT page" />
         
-        <Button text="hey there" tap="navigate" />
+        <Button text="tap" tap="tap" />
+
+        <Button text="navigate" tap="navigate" />
+
+        <Label text="{{ prop }}" />
+        
+        <cc:my-component />
     </StackLayout>
 </Page>

e2e/file-qualifiers/app/other/other-page.css

@@ -0,0 +1,4 @@
+.page-content {
+    padding: 20;
+    background-color: lightblue;
+}

e2e/file-qualifiers/app/other/other-page.land.css

@@ -0,0 +1,4 @@
+.page-content {
+    padding: 20;
+    background-color: lightcoral;
+}

e2e/file-qualifiers/app/other/other-page.land.ts

@@ -0,0 +1,15 @@
+import { topmost } from "tns-core-modules/ui/frame";
+
+export function onNavigatedTo(args) {
+    console.log("---> [LANDSCAPE other] onNavigatedTo");
+}
+
+export function tap(args) {
+    console.log("---> [LANDSCAPE other] tap");
+}
+
+export function navigate(args) {
+    console.log("---> [LANDSCAPE other] navigate");
+
+    topmost().navigate("main/main-page");
+}

e2e/file-qualifiers/app/other/other-page.land.xml

@@ -0,0 +1,12 @@
+<Page navigatedTo="onNavigatedTo" xmlns:cc="components">
+    <StackLayout class="page-content">
+        <Label text="This is LANDSACPE other page" />
+        
+        <Button text="tap" tap="tap" />
+
+        <Button text="navigate" tap="navigate" />
+
+        <cc:my-component />
+
+    </StackLayout>
+</Page>

e2e/file-qualifiers/app/other/other-page.ts

@@ -0,0 +1,15 @@
+import { topmost } from "tns-core-modules/ui/frame";
+
+export function onNavigatedTo(args) {
+    console.log("---> [DEFAULT other] onNavigatedTo");
+}
+
+export function tap(args) {
+    console.log("---> [DEFAULT other] tap");
+}
+
+export function navigate(args) {
+    console.log("---> [DEFAULT other] navigate");
+
+    topmost().navigate("main/main-page");
+}

e2e/file-qualifiers/app/other/other-page.xml

@@ -0,0 +1,11 @@
+<Page navigatedTo="onNavigatedTo" xmlns:cc="components">
+    <StackLayout class="page-content">
+        <Label text="This is DEFAULT other page" />
+        
+        <Button text="tap" tap="tap" />
+
+        <Button text="navigate" tap="navigate" />
+
+        <cc:my-component />
+    </StackLayout>
+</Page>

e2e/file-qualifiers/app/package.json

@@ -2,7 +2,5 @@
   "android": {
     "v8Flags": "--expose_gc"
   },
-  "main": "app.js",
-  "name": "tns-template-hello-world-ts",
-  "version": "3.4.0"
+  "main": "app.js"
 }

e2e/file-qualifiers/webpack.config.js

@@ -179,25 +179,14 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
-                                registerModules: /(root|page|app)(\.(land|port|phone|tablet|minH\d+|minW\d+|minWH\d+))?\.(xml|css|js|ts|scss)$/ // NB: MODIFIED                              
                             }
                         },
                     ].filter(loader => !!loader)
                 },
 
                 {
-                    test: /(page|app)(\.(land|port|phone|tablet|minH\d+|minW\d+|minWH\d+))?\.ts$/,
-                    use: "nativescript-dev-webpack/script-hot-loader"
-                },
-
-                {
-                    test: /\.(css|scss)$/,
-                    use: "nativescript-dev-webpack/style-hot-loader"
-                },
-
-                {
-                    test: /\.(html|xml)$/,
-                    use: "nativescript-dev-webpack/markup-hot-loader"
+                    test: /\.(ts|css|scss|less|html|xml)$/,
+                    use: "nativescript-dev-webpack/hmr/hot-loader"
                 },
 
                 { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },