feat(monorepo): build with esm modules (#8729)

fixes https://github.com/NativeScript/NativeScript/issues/8739

apps/automated/app/application/application-tests.ios.ts

@@ -21,6 +21,7 @@ if (isIOS) {
 // >> application-ios-delegate
 //// Add custom application delegate
 if (isIOS) {
+	@NativeClass
 	class MyDelegate extends UIResponder implements UIApplicationDelegate {
 		public static ObjCProtocols = [UIApplicationDelegate];
 

apps/automated/app/pages/page5.ts

@@ -49,11 +49,11 @@ function printTNSInfo() {
 	console.log('platform.Device.sdkVersion = ' + platform.Device.sdkVersion);
 	console.log('platform.Device.deviceType = ' + platform.Device.deviceType);
 
-	console.log('platform.screen.mainScreen.widthDIPs = ' + platform.screen.mainScreen.widthDIPs);
-	console.log('platform.screen.mainScreen.heightDIPs = ' + platform.screen.mainScreen.heightDIPs);
-	console.log('platform.screen.mainScreen.scale = ' + platform.screen.mainScreen.scale);
-	console.log('platform.screen.mainScreen.widthPixels = ' + platform.screen.mainScreen.widthPixels);
-	console.log('platform.screen.mainScreen.heightPixels = ' + platform.screen.mainScreen.heightPixels);
+	console.log('platform.Screen.mainScreen.widthDIPs = ' + platform.Screen.mainScreen.widthDIPs);
+	console.log('platform.Screen.mainScreen.heightDIPs = ' + platform.Screen.mainScreen.heightDIPs);
+	console.log('platform.Screen.mainScreen.scale = ' + platform.Screen.mainScreen.scale);
+	console.log('platform.Screen.mainScreen.widthPixels = ' + platform.Screen.mainScreen.widthPixels);
+	console.log('platform.Screen.mainScreen.heightPixels = ' + platform.Screen.mainScreen.heightPixels);
 }
 
 function print() {

apps/automated/app/ui/image/image-tests.ts

@@ -1,7 +1,6 @@
 import { Image } from '@nativescript/core/ui/image';
 import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout';
 import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout';
-import { isIOS, isAndroid } from '@nativescript/core/platform';
 import { PropertyChangeData } from '@nativescript/core';
 import * as utils from '@nativescript/core/utils';
 import * as TKUnit from '../../tk-unit';
@@ -24,7 +23,7 @@ export function test_recycling() {
 	helper.nativeView_recycling_test(() => new Image());
 }
 
-if (isAndroid) {
+if (global.isAndroid) {
 	(<any>backgroundModule).initImageCache(androidApp.startActivity, (<any>backgroundModule).CacheMode.memory); // use memory cache only.
 }
 
@@ -64,7 +63,7 @@ function runImageTestSync(image: ImageModule.Image, src: string) {
 
 	image.src = src;
 
-	let imageSourceAvailable = isIOS ? !!image.imageSource : true;
+	let imageSourceAvailable = global.isIOS ? !!image.imageSource : true;
 	TKUnit.assertFalse(image.isLoading, 'Image.isLoading should be false.');
 	TKUnit.assertTrue(imageSourceAvailable, 'imageSource should be set.');
 }
@@ -77,7 +76,7 @@ function runImageTestAsync(image: ImageModule.Image, src: string, done: (e: any)
 		image.off(IMAGE_LOADED_EVENT, handler);
 
 		try {
-			let imageSourceAvailable = isIOS ? !!image.imageSource : true;
+			let imageSourceAvailable = global.isIOS ? !!image.imageSource : true;
 			TKUnit.assertFalse(image.isLoading, 'Image.isLoading should be false.');
 			TKUnit.assertTrue(imageSourceAvailable, 'imageSource should be set.');
 			done(null);
@@ -254,7 +253,7 @@ export const test_SettingStretch_none = function () {
 };
 
 function ios<T>(func: T): T {
-	return isIOS ? func : undefined;
+	return global.isIOS ? func : undefined;
 }
 
 export const test_SettingImageSourceWhenSizedToParentDoesNotRequestLayout = ios(() => {

apps/automated/app/ui/layouts/grid-layout-tests.ts

@@ -347,7 +347,7 @@ export class GridLayoutTest extends testModule.UITest<RemovalTrackingGridLayout>
 		this.waitUntilTestElementLayoutIsValid();
 
 		TKUnit.assertTrue(btn.getMeasuredWidth() === this.testView.getMeasuredWidth());
-		TKUnit.assertTrue(this.testView.getMeasuredWidth() < platform.screen.mainScreen.widthPixels);
+		TKUnit.assertTrue(this.testView.getMeasuredWidth() < platform.Screen.mainScreen.widthPixels);
 	}
 
 	public test_measuredWidth_when_not_stretched_two_columns() {

apps/automated/app/ui/layouts/layout-helper.android.ts

@@ -1,13 +1,11 @@
-import { Button } from '@nativescript/core/ui/button';
-import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout';
-import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout';
+import { Button, StackLayout, GridLayout, Utils } from '@nativescript/core';
 
-import * as utils from '@nativescript/core/utils';
 import * as TKUnit from '../../tk-unit';
 import * as def from './layout-helper';
 
 var DELTA = 0.1;
 
+@NativeClass
 class NativeButton extends android.widget.Button {
 	constructor(context: android.content.Context, public owner: def.MeasuredView) {
 		super(context);
@@ -28,6 +26,7 @@ class NativeButton extends android.widget.Button {
 	}
 }
 
+@NativeClass
 class NativeStackLayout extends org.nativescript.widgets.StackLayout {
 	constructor(context: android.content.Context, public owner: def.MeasuredView) {
 		super(context);
@@ -48,6 +47,7 @@ class NativeStackLayout extends org.nativescript.widgets.StackLayout {
 	}
 }
 
+@NativeClass
 class NativeGridLayout extends org.nativescript.widgets.GridLayout {
 	constructor(context: android.content.Context, public owner: def.MeasuredView) {
 		super(context);
@@ -90,10 +90,10 @@ export class MyButton extends Button implements def.MyButton {
 	public heightMeasureSpec: number = Number.NaN;
 
 	public get measureWidth() {
-		return utils.layout.getMeasureSpecSize(this.widthMeasureSpec);
+		return Utils.layout.getMeasureSpecSize(this.widthMeasureSpec);
 	}
 	public get measureHeight() {
-		return utils.layout.getMeasureSpecSize(this.heightMeasureSpec);
+		return Utils.layout.getMeasureSpecSize(this.heightMeasureSpec);
 	}
 
 	public get measured(): boolean {
@@ -143,10 +143,10 @@ export class MyStackLayout extends StackLayout implements def.MyStackLayout {
 	public heightMeasureSpec: number = Number.NaN;
 
 	public get measureWidth() {
-		return utils.layout.getMeasureSpecSize(this.widthMeasureSpec);
+		return Utils.layout.getMeasureSpecSize(this.widthMeasureSpec);
 	}
 	public get measureHeight() {
-		return utils.layout.getMeasureSpecSize(this.heightMeasureSpec);
+		return Utils.layout.getMeasureSpecSize(this.heightMeasureSpec);
 	}
 
 	public get measured(): boolean {
@@ -196,10 +196,10 @@ export class MyGridLayout extends GridLayout implements def.MyGridLayout {
 	public heightMeasureSpec: number = Number.NaN;
 
 	public get measureWidth() {
-		return utils.layout.getMeasureSpecSize(this.widthMeasureSpec);
+		return Utils.layout.getMeasureSpecSize(this.widthMeasureSpec);
 	}
 	public get measureHeight() {
-		return utils.layout.getMeasureSpecSize(this.heightMeasureSpec);
+		return Utils.layout.getMeasureSpecSize(this.heightMeasureSpec);
 	}
 
 	public get measured(): boolean {
@@ -244,9 +244,9 @@ export function assertLayout(view: def.MeasuredView, left: number, top: number,
 }
 
 export function dp(value: number): number {
-	return utils.layout.toDeviceIndependentPixels(value);
+	return Utils.layout.toDeviceIndependentPixels(value);
 }
 
 export function dip(value: number): number {
-	return utils.layout.toDevicePixels(value);
+	return Utils.layout.toDevicePixels(value);
 }

apps/automated/app/ui/layouts/safe-area-tests.ts

@@ -95,8 +95,8 @@ export class SafeAreaTests extends testModule.UITest<any> {
 		const b = bottom(layout);
 		equal(l, 0, `${layout}.left - actual:${l}; expected: ${0}`);
 		equal(t, 0, `${layout}.top - actual:${t}; expected: ${0}`);
-		equal(r, platform.screen.mainScreen.widthPixels, `${layout}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
-		equal(b, platform.screen.mainScreen.heightPixels, `${layout}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
+		equal(r, platform.Screen.mainScreen.widthPixels, `${layout}.right - actual:${r}; expected: ${platform.Screen.mainScreen.widthPixels}`);
+		equal(b, platform.Screen.mainScreen.heightPixels, `${layout}.bottom - actual:${b}; expected: ${platform.Screen.mainScreen.heightPixels}`);
 	}
 
 	// Absolute

apps/automated/app/ui/list-view/list-view-safe-area-tests.ts

@@ -52,8 +52,8 @@ export class ListViewSafeAreaTest extends UITest<ListView> {
 		const b = bottom(listView);
 		equal(l, 0, `${listView}.left - actual:${l}; expected: ${0}`);
 		equal(t, 0, `${listView}.top - actual:${t}; expected: ${0}`);
-		equal(r, platform.screen.mainScreen.widthPixels, `${listView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
-		equal(b, platform.screen.mainScreen.heightPixels, `${listView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
+		equal(r, platform.Screen.mainScreen.widthPixels, `${listView}.right - actual:${r}; expected: ${platform.Screen.mainScreen.widthPixels}`);
+		equal(b, platform.Screen.mainScreen.heightPixels, `${listView}.bottom - actual:${b}; expected: ${platform.Screen.mainScreen.heightPixels}`);
 	}
 
 	private list_view_in_full_screen_test(pageOptions?: helper.PageOptions) {

apps/automated/app/ui/repeater/repeater-safe-area-tests.ts

@@ -46,8 +46,8 @@ export class RepeaterSafeAreaTest extends UITest<Repeater> {
 		const b = bottom(repeater);
 		equal(l, 0, `${repeater}.left - actual:${l}; expected: ${0}`);
 		equal(t, 0, `${repeater}.top - actual:${t}; expected: ${0}`);
-		equal(r, platform.screen.mainScreen.widthPixels, `${repeater}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
-		equal(b, platform.screen.mainScreen.heightPixels, `${repeater}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
+		equal(r, platform.Screen.mainScreen.widthPixels, `${repeater}.right - actual:${r}; expected: ${platform.Screen.mainScreen.widthPixels}`);
+		equal(b, platform.Screen.mainScreen.heightPixels, `${repeater}.bottom - actual:${b}; expected: ${platform.Screen.mainScreen.heightPixels}`);
 	}
 
 	private repeater_in_full_screen_test(pageOptions?: helper.PageOptions) {

apps/automated/app/ui/repeater/repeater-tests.ts

@@ -1,22 +1,6 @@
 import * as TKUnit from '../../tk-unit';
-import * as app from '@nativescript/core/application';
 import * as helper from '../../ui-helper';
-import * as viewModule from '@nativescript/core/ui/core/view';
-import * as stackLayoutModule from '@nativescript/core/ui/layouts/stack-layout';
-import * as wrapLayoutModule from '@nativescript/core/ui/layouts/wrap-layout';
-import * as layoutBaseModule from '@nativescript/core/ui/layouts/layout-base';
-import * as pageModule from '@nativescript/core/ui/page';
-import * as gestureModule from '@nativescript/core/ui/gestures';
-import { Label } from '@nativescript/core/ui/label';
-
-// >> article-require-repeater-module
-import * as repeaterModule from '@nativescript/core/ui/repeater';
-// << article-require-repeater-module
-
-// >> article-require-modules-repeater
-import * as observableArray from '@nativescript/core/data/observable-array';
-import * as labelModule from '@nativescript/core/ui/label';
-// << article-require-modules-repeater
+import { Application, Label, Page, StackLayout, WrapLayout, LayoutBase, View, GestureTypes, Repeater, ObservableArray } from '@nativescript/core';
 
 var FEW_ITEMS = [0, 1, 2];
 var MANY_ITEMS = [];
@@ -25,15 +9,15 @@ for (var i = 0; i < 100; i++) {
 }
 
 export function test_recycling() {
-	const setters = new Map<string, stackLayoutModule.StackLayout>();
-	setters.set('itemsLayout', new stackLayoutModule.StackLayout());
-	helper.nativeView_recycling_test(() => new repeaterModule.Repeater(), null, null, setters);
+	const setters = new Map<string, StackLayout>();
+	setters.set('itemsLayout', new StackLayout());
+	helper.nativeView_recycling_test(() => new Repeater(), null, null, setters);
 }
 
 export function test_set_items_to_array_loads_all_items() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		// >> article-repeater-with-array
 		var colors = ['red', 'green', 'blue'];
 		repeater.items = colors;
@@ -50,9 +34,9 @@ export function test_set_items_to_array_loads_all_items() {
 }
 
 export function test_set_items_to_array_creates_views() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.items = FEW_ITEMS;
 
 		TKUnit.waitUntilReady(() => repeater.isLayoutValid);
@@ -63,9 +47,9 @@ export function test_set_items_to_array_creates_views() {
 }
 
 export function test_refresh_after_adding_items_to_array_loads_new_items() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		var colors = ['red', 'green', 'blue'];
 		repeater.items = colors;
 
@@ -85,9 +69,9 @@ export function test_refresh_after_adding_items_to_array_loads_new_items() {
 }
 
 export function test_refresh_reloads_all_items() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		var testStarted = false;
 
 		var itemsToBind = <Array<any>>FEW_ITEMS;
@@ -114,9 +98,9 @@ export function test_refresh_reloads_all_items() {
 }
 
 export function test_set_itmes_to_null_clears_items() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.items = FEW_ITEMS;
 		TKUnit.waitUntilReady(() => repeater.isLayoutValid);
 		TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, 'views count.');
@@ -131,16 +115,16 @@ export function test_set_itmes_to_null_clears_items() {
 
 export function test_set_itemsLayout_accepted() {
 	// >> article-repeater-layout
-	var repeater = new repeaterModule.Repeater();
-	var stackLayout = new stackLayoutModule.StackLayout();
+	var repeater = new Repeater();
+	var stackLayout = new StackLayout();
 	stackLayout.orientation = 'horizontal';
 	repeater.itemsLayout = stackLayout;
 	// << article-repeater-layout
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.items = FEW_ITEMS;
 		TKUnit.waitUntilReady(() => repeater.isLayoutValid);
-		TKUnit.assert((<stackLayoutModule.StackLayout>repeater.itemsLayout).orientation === 'horizontal', 'views count.');
+		TKUnit.assert((<StackLayout>repeater.itemsLayout).orientation === 'horizontal', 'views count.');
 		TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, 'views count.');
 	}
 
@@ -148,9 +132,9 @@ export function test_set_itemsLayout_accepted() {
 }
 
 export function test_set_itmes_to_undefiend_clears_items() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.items = FEW_ITEMS;
 		TKUnit.waitUntilReady(() => repeater.isLayoutValid);
 		TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, 'views count.');
@@ -164,9 +148,9 @@ export function test_set_itmes_to_undefiend_clears_items() {
 }
 
 export function test_set_itmes_to_different_source_loads_new_items() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.items = [1, 2, 3];
 		TKUnit.waitUntilReady(() => repeater.isLayoutValid);
 		TKUnit.assertEqual(getChildrenCount(repeater), 3, 'views count.');
@@ -180,11 +164,11 @@ export function test_set_itmes_to_different_source_loads_new_items() {
 }
 
 export function test_set_items_to_observable_array_loads_all_items() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		// >> article-repeater-observablearray
-		var colors = new observableArray.ObservableArray(['red', 'green', 'blue']);
+		var colors = new ObservableArray(['red', 'green', 'blue']);
 		repeater.items = colors;
 		// << article-repeater-observablearray
 
@@ -198,10 +182,10 @@ export function test_set_items_to_observable_array_loads_all_items() {
 }
 
 export function test_add_to_observable_array_refreshes_the_Repeater() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
-		var colors = new observableArray.ObservableArray(['red', 'green', 'blue']);
+	function testAction(views: Array<View>) {
+		var colors = new ObservableArray(['red', 'green', 'blue']);
 		repeater.items = colors;
 
 		TKUnit.assertEqual(getChildrenCount(repeater), 3, 'getChildrenCount');
@@ -217,10 +201,10 @@ export function test_add_to_observable_array_refreshes_the_Repeater() {
 }
 
 export function test_remove_from_observable_array_refreshes_the_Repeater() {
-	var repeater = new repeaterModule.Repeater();
-	var data = new observableArray.ObservableArray([1, 2, 3]);
+	var repeater = new Repeater();
+	var data = new ObservableArray([1, 2, 3]);
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.items = data;
 
 		TKUnit.waitUntilReady(() => repeater.isLayoutValid);
@@ -235,10 +219,10 @@ export function test_remove_from_observable_array_refreshes_the_Repeater() {
 }
 
 export function test_splice_observable_array_refreshes_the_Repeater() {
-	var repeater = new repeaterModule.Repeater();
-	var data = new observableArray.ObservableArray(['a', 'b', 'c']);
+	var repeater = new Repeater();
+	var data = new ObservableArray(['a', 'b', 'c']);
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.items = data;
 
 		TKUnit.waitUntilReady(() => repeater.isLayoutValid);
@@ -254,7 +238,7 @@ export function test_splice_observable_array_refreshes_the_Repeater() {
 }
 
 export function test_usingAppLevelConvertersInRepeaterItems() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
 	var dateConverter = function (value, format) {
 		var result = format;
@@ -267,13 +251,13 @@ export function test_usingAppLevelConvertersInRepeaterItems() {
 		return result;
 	};
 
-	app.getResources()['dateConverter'] = dateConverter;
+	Application.getResources()['dateConverter'] = dateConverter;
 
-	var data = new observableArray.ObservableArray();
+	var data = new ObservableArray();
 
 	data.push({ date: new Date() });
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.itemTemplate = '<Label id="testLabel" text="{{ date, date | dateConverter(\'DD.MM.YYYY\') }}" />';
 		repeater.items = data;
 
@@ -286,9 +270,9 @@ export function test_usingAppLevelConvertersInRepeaterItems() {
 }
 
 export function test_BindingRepeaterToASimpleArray() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.itemTemplate = '<Label id="testLabel" text="{{ $value }}" />';
 		repeater.items = [1, 2, 3];
 
@@ -303,9 +287,9 @@ export function test_BindingRepeaterToASimpleArray() {
 }
 
 export function test_ItemTemplateFactoryFunction() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.itemTemplate = () => {
 			var label = new Label();
 			label.id = 'testLabel';
@@ -326,9 +310,9 @@ export function test_ItemTemplateFactoryFunction() {
 }
 
 export function test_BindingRepeaterToASimpleArrayWithExpression() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		repeater.itemTemplate = '<Label id="testLabel" text="{{ $value, $value + \' some static text\' }}" />';
 		repeater.items = [1, 2, 3];
 
@@ -343,14 +327,14 @@ export function test_BindingRepeaterToASimpleArrayWithExpression() {
 }
 
 export var test_RepeaterItemsGestureBindings = function () {
-	var testFunc = function (page: pageModule.Page) {
-		var repeater = <repeaterModule.Repeater>page.getViewById('repeater');
+	var testFunc = function (page: Page) {
+		var repeater = <Repeater>page.getViewById('repeater');
 		var hasObservers = false;
-		var eachChildCallback = function (childItem: viewModule.View) {
-			if (childItem instanceof labelModule.Label) {
-				var gestureObservers = childItem.getGestureObservers(gestureModule.GestureTypes.tap);
+		var eachChildCallback = function (childItem: View) {
+			if (childItem instanceof Label) {
+				var gestureObservers = childItem.getGestureObservers(GestureTypes.tap);
 				hasObservers = gestureObservers ? gestureObservers.length > 0 : false;
-			} else if (childItem instanceof layoutBaseModule.LayoutBase) {
+			} else if (childItem instanceof LayoutBase) {
 				childItem.eachChildView(eachChildCallback);
 			}
 
@@ -366,17 +350,17 @@ export var test_RepeaterItemsGestureBindings = function () {
 };
 
 export var test_RepeaterItemsParentBindingsShouldWork = function () {
-	var testFunc = function (page: pageModule.Page) {
-		var repeater = <repeaterModule.Repeater>page.getViewById('repeater');
+	var testFunc = function (page: Page) {
+		var repeater = <Repeater>page.getViewById('repeater');
 		var expectedText = page.bindingContext['parentViewProperty'];
 		var testPass = false;
-		var eachChildCallback = function (childItem: viewModule.View) {
-			if (childItem instanceof labelModule.Label) {
-				testPass = (<labelModule.Label>childItem).text === expectedText;
+		var eachChildCallback = function (childItem: View) {
+			if (childItem instanceof Label) {
+				testPass = (<Label>childItem).text === expectedText;
 				if (testPass === false) {
 					return false;
 				}
-			} else if (childItem instanceof layoutBaseModule.LayoutBase) {
+			} else if (childItem instanceof LayoutBase) {
 				childItem.eachChildView(eachChildCallback);
 			}
 
@@ -392,9 +376,9 @@ export var test_RepeaterItemsParentBindingsShouldWork = function () {
 };
 
 export function test_ChildrenAreNotCreatedUntilTheRepeaterIsLoaded() {
-	var repeater = new repeaterModule.Repeater();
+	var repeater = new Repeater();
 
-	repeater.itemsLayout = new wrapLayoutModule.WrapLayout();
+	repeater.itemsLayout = new WrapLayout();
 	TKUnit.assertEqual(getChildrenCount(repeater), 0, 'Repeater should not create its children until loaded.');
 
 	repeater.itemTemplate = '<Label id="testLabel" text="{{ $value, $value + \' some static text\' }}" />';
@@ -403,7 +387,7 @@ export function test_ChildrenAreNotCreatedUntilTheRepeaterIsLoaded() {
 	repeater.items = [1, 2, 3];
 	TKUnit.assertEqual(getChildrenCount(repeater), 0, 'Repeater should not create its children until loaded.');
 
-	function testAction(views: Array<viewModule.View>) {
+	function testAction(views: Array<View>) {
 		TKUnit.waitUntilReady(() => repeater.isLayoutValid);
 		TKUnit.assertEqual(getChildrenCount(repeater), 3, 'Repeater should have created its children when loaded.');
 	}
@@ -413,8 +397,8 @@ export function test_ChildrenAreNotCreatedUntilTheRepeaterIsLoaded() {
 
 /*
 export function test_no_memory_leak_when_items_is_regular_array(done) {
-    var createFunc = function (): repeaterModule.Repeater {
-        var repeater = new repeaterModule.Repeater();
+    var createFunc = function (): Repeater {
+        var repeater = new Repeater();
         repeater.items = FEW_ITEMS;
         return repeater;
     };
@@ -426,10 +410,10 @@ export function test_no_memory_leak_when_items_is_regular_array(done) {
 
 export function test_no_memory_leak_when_items_is_observable_array(done) {
     // Keep the reference to the observable array to test the weakEventListener
-    var colors = new observableArray.ObservableArray(["red", "green", "blue"]);
+    var colors = new ObservableArray(["red", "green", "blue"]);
 
-    var createFunc = function (): repeaterModule.Repeater {
-        var repeater = new repeaterModule.Repeater();
+    var createFunc = function (): Repeater {
+        var repeater = new Repeater();
         repeater.items = colors;
         return repeater;
     };
@@ -439,14 +423,14 @@ export function test_no_memory_leak_when_items_is_observable_array(done) {
     }, done);
 }
 */
-function getChildrenCount(repeater: repeaterModule.Repeater): number {
+function getChildrenCount(repeater: Repeater): number {
 	return repeater.itemsLayout.getChildrenCount();
 }
 
-function getChildAt(repeater: repeaterModule.Repeater, index: number): viewModule.View {
+function getChildAt(repeater: Repeater, index: number): View {
 	return repeater.itemsLayout.getChildAt(index);
 }
 
-function getChildAtText(repeater: repeaterModule.Repeater, index: number): string {
-	return (<labelModule.Label>getChildAt(repeater, index)).text + '';
+function getChildAtText(repeater: Repeater, index: number): string {
+	return (<Label>getChildAt(repeater, index)).text + '';
 }

apps/automated/app/ui/scroll-view/scroll-view-safe-area-tests.ts

@@ -55,8 +55,8 @@ class ScrollLayoutSafeAreaTest extends UITest<ScrollView> {
 		const b = bottom(scrollView);
 		equal(l, 0, `${scrollView}.left - actual:${l}; expected: ${0}`);
 		equal(t, 0, `${scrollView}.top - actual:${t}; expected: ${0}`);
-		equal(r, platform.screen.mainScreen.widthPixels, `${scrollView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
-		equal(b, platform.screen.mainScreen.heightPixels, `${scrollView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
+		equal(r, platform.Screen.mainScreen.widthPixels, `${scrollView}.right - actual:${r}; expected: ${platform.Screen.mainScreen.widthPixels}`);
+		equal(b, platform.Screen.mainScreen.heightPixels, `${scrollView}.bottom - actual:${b}; expected: ${platform.Screen.mainScreen.heightPixels}`);
 	}
 
 	private scroll_view_in_full_screen_test(pageOptions?: helper.PageOptions) {

apps/automated/app/ui/web-view/web-view-safe-area-tests.ts

@@ -46,8 +46,8 @@ export class WebViewSafeAreaTest extends UITest<WebView> {
 		const b = bottom(webView);
 		equal(l, 0, `${webView}.left - actual:${l}; expected: ${0}`);
 		equal(t, 0, `${webView}.top - actual:${t}; expected: ${0}`);
-		equal(r, platform.screen.mainScreen.widthPixels, `${webView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
-		equal(b, platform.screen.mainScreen.heightPixels, `${webView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
+		equal(r, platform.Screen.mainScreen.widthPixels, `${webView}.right - actual:${r}; expected: ${platform.Screen.mainScreen.widthPixels}`);
+		equal(b, platform.Screen.mainScreen.heightPixels, `${webView}.bottom - actual:${b}; expected: ${platform.Screen.mainScreen.heightPixels}`);
 	}
 
 	private webview_in_full_screen_test(pageOptions?: helper.PageOptions) {

apps/automated/app/xml-declaration/template-builder-tests/template-view.ts

@@ -1,8 +1,6 @@
 import { Property, LayoutBase, Builder } from '@nativescript/core';
 
-export module knownTemplates {
-	export var template = 'template';
-}
+Builder.knownTemplates.add('template');
 
 export class TemplateView extends LayoutBase {
 	public template: string;

apps/automated/tsconfig.json

@@ -1,18 +1,9 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs",
-    "target": "es5",
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "noEmitHelpers": true,
-    "noEmitOnError": true,
-    "skipLibCheck": true,
-    "lib": ["es2018", "dom"],
-    "baseUrl": ".",
     "paths": {
-      "~/*": ["src/*"]
+      "~/*": ["src/*"],
+      "tns-core-modules/*": ["@nativescript/core/*"]
     }
-  },
-  "exclude": ["node_modules", "platforms"]
+  }
 }

apps/automated/tsconfig.tns.json

@@ -1,7 +0,0 @@
-{
-    "extends": "./tsconfig",
-    "compilerOptions": {
-        "module": "ESNext",
-        "moduleResolution": "node"
-    }
-}

apps/playground/src/app.css

@@ -1,21 +0,0 @@
-/*
-In NativeScript, the app.css file is where you place CSS rules that
-you would like to apply to your entire application. Check out
-http://docs.nativescript.org/ui/styling for a full list of the CSS
-selectors and properties you can use to style UI components.
-
-/*
-In many cases you may want to use the NativeScript core theme instead
-of writing your own CSS rules. For a full list of class names in the theme
-refer to http://docs.nativescript.org/ui/theme. 
-The imported CSS rules must precede all other types of rules.
-*/
-@import '~nativescript-theme-core/css/core.light.css';
-
-/*
-The following CSS rule changes the font size of all UI
-components that have the btn class name.
-*/
-.btn {
-  font-size: 18;
-}

apps/playground/src/main-page.xml

@@ -1,11 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
-    <Page.actionBar>
-        <ActionBar title="My App" icon="" class="action-bar">
-        </ActionBar>
-    </Page.actionBar>
-    <StackLayout class="p-20">
-        <Label text="Tap the button" class="h1 text-center"/>
-        <Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
-        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
-    </StackLayout>
-</Page>

apps/playground/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "es5",
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "noEmitHelpers": true,
-    "noEmitOnError": true,
-    "skipLibCheck": true,
-    "lib": ["es2018", "dom"],
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["src/*"]
-    }
-  },
-  "exclude": ["node_modules", "platforms"]
-}

apps/playground/tsconfig.tns.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig",
-  "compilerOptions": {
-    "module": "esnext",
-    "moduleResolution": "node"
-  }
-}

apps/toolbox/package.json

@@ -1,6 +1,6 @@
 {
   "nativescript": {
-    "id": "org.ns.testcore",
+    "id": "org.nativescript.ToolBox",
     "tns-ios": {
       "version": "6.5.0"
     },

apps/toolbox/src/app-platform.android.css

@@ -0,0 +1,127 @@
+Button {
+  background-color: transparent;
+  border-color: transparent;
+  border-width: 1;
+  text-transform: capitalize;
+  android-elevation: 0;
+  android-dynamic-elevation-offset: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.component-label{
+    margin-left: 12;
+    min-width: 100;
+}
+
+.component-select-fix{
+    padding-top: 6;
+    text-align: right;
+    vertical-align: middle;
+    padding-right: 8;
+}
+
+.header{
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.code-text-view-fix{
+    font-size: 15px;
+}
+
+.go-back{
+    font-family: "ns-playground-font";
+    font-size: 30;
+    color: #3350ff;
+}
+
+.header-label{
+   padding-top: 8%;
+   padding-left: 40%;
+   font-size: 20px;
+   color: black;
+}
+
+.components-header-label{
+    padding-top: 8%;
+    text-align: center;
+    font-size: 20px;
+    color: black;
+}
+
+.components-link{
+    color: #3350ff;
+    font-size: 20px;
+    padding-top: 8%;
+    margin-left: -25px;
+}
+
+.navigation-bar{
+    background-color: #f4f4f5;
+    height: 5%;
+    max-height: 3;
+}
+
+.navigation-bar-components{
+    background-color: #f4f4f5;
+    height: 8%;
+}
+
+.segmented-bar{
+    background-color: #f4f4f5;
+    padding-bottom: 10%
+}
+
+.custom-segmented-bar-root-fix{
+    padding-top: 15%;
+}
+
+.custom-segmented-bar-border-fix{
+    border-radius: 15px;
+    border-width: 5px;
+}
+
+.selected-segment{
+    color: #f4f4f5;
+    padding-top: 5%;
+    background-color: #3350ff;
+    text-align: center;
+}
+
+.unselected-segment{
+    color: #3350ff;
+    padding-top: 5%;
+    background-color: #f4f4f5;
+    text-align: center;
+}
+
+.action-item-details{
+    color: #007aff;
+    font-size: 20px;
+    padding-right: 15;
+}
+
+.listview-separator{
+    margin-left: 66;
+    background-color: #949494;
+    height: 1px;
+}
+
+.icon-around{
+    background-color: #3350ff;
+    height: 42;
+    width: 42;
+    border-radius: 3;
+    vertical-align: middle;
+    text-align: center;
+}
+
+.list-view-row{
+    padding: 6 0 6 12;
+}
+
+.list-group{
+    background-color: white;
+    padding-top: 6;
+}

apps/toolbox/src/app-platform.ios.css

@@ -0,0 +1,93 @@
+.header{
+    font-weight: bold;
+}
+
+.component-label{
+    width: 100%;
+}
+
+.component-select-fix{
+    text-align: right;
+    vertical-align: middle;
+    padding-right: 8;
+}
+
+.view-code-segment{
+    height: 5%;
+    width: 100%;
+}
+
+.go-back{
+    font-family: "ns-playground-font";
+    font-size: 30;
+    color: #3350ff;
+}
+
+.header-label{
+   padding-top: 5%;
+   padding-left: 35%;
+   font-weight: bold;
+}
+
+.components-header-label{
+    text-align: center;
+    font-weight: bold;
+}
+
+.components-link{
+    color: #3350ff;
+    padding-top: 5%;
+    margin-left: -2%;
+}
+
+.navigation-bar{
+    height: 7%;
+}
+
+.navigation-bar-components{
+    height: 7%;
+}
+
+.custom-segmented-bar-border-fix{
+    border-radius: 5px;
+    border-width: 2px;
+    font-size: 14px;
+}
+
+.selected-segment{
+    color: #f4f4f5;
+    padding-top: 5%;
+    background-color: #3350ff;
+    text-align: center;
+}
+
+.unselected-segment{
+    color: #3350ff;
+    padding-top: 5%;
+    text-align: center;
+}
+
+.action-item-details{
+    color: #007aff;
+}
+
+.listview-separator{
+    background-color: #949494;
+    margin-left: 70;
+    height: 1px;
+}
+
+.icon-around{
+    background-color: #3350ff;
+    height: 40;
+    width: 40;
+    border-radius: 5;
+    vertical-align: middle;
+    text-align: center;
+    min-width: 40;
+    margin-right: 15;
+}
+
+.list-group {
+    margin-top: 7;
+}

apps/toolbox/src/app.css

@@ -0,0 +1,104 @@
+@import '~nativescript-theme-core/css/core.light.css';
+@import './app-platform.css';
+
+/*
+The following CSS rule changes the font size of all UI
+components that have the btn class name.
+*/
+.btn {
+  font-size: 18;
+}
+
+.bold{
+    font-weight: bold;
+}
+
+.icon-label{
+    font-size: 22;
+    font-family: "ns-playground-font";
+    text-align: center;
+    vertical-align: middle;
+    color: white;
+}
+
+.component-select{
+    text-align: right;
+    font-family: "ns-playground-font";
+    font-size: 22;
+}
+
+.component-code{
+    height: 100%;
+    vertical-align: top;
+}
+
+.code-text-view{
+    padding: 30px;
+}
+
+.custom-segmented-bar-root{
+    width: 100%;
+    padding-bottom: 10%;
+}
+
+.custom-segmented-bar-border{
+    width: 80%;
+    border-color: #3350ff;
+    height: 5%;
+}
+
+.component-details-layout{
+    padding: 40px;
+}
+
+.description-textview{
+    font-size: 18px;
+}
+
+.va-middle{
+    vertical-align: middle;
+}
+
+.image-text {
+    text-align: center;
+    color: gray;
+    padding-left: 15;
+    padding-right: 15;
+    font-size: 13;
+}
+
+.image-item {
+    margin-top: 15;
+}
+
+.image-button {
+    padding-top: 15px;
+}
+
+.img-circle {
+	border-radius: 50%
+}
+
+.list-view-row {
+    padding: 7 0 7 15;
+}
+
+.list-group .list-group-item {
+	padding: 8;
+	margin: 0
+}
+
+.list-group .list-group-item Label {
+    padding: 7;
+}
+
+.list-group .thumb {
+	stretch: fill;
+	width: 40;
+	height: 40;
+	margin-right: 16
+}
+
+.list-group .list-group-item-heading {
+	margin-bottom: 5
+}

apps/toolbox/src/list-page-model.ts

@@ -0,0 +1,32 @@
+import { Observable, Dialogs, DialogStrings } from '@nativescript/core';
+
+export class ListPageModel extends Observable {
+	components: Array<any> = [
+		{ name: 'Button', iconText: 'p' },
+		{ name: 'Image', iconText: 'q' },
+		{ name: 'Label', iconText: 't' },
+		{ name: 'Switch', iconText: 'z' },
+		{ name: 'Slider', iconText: 'v' },
+		{ name: 'TextField', iconText: 'x' },
+		{ name: 'TextView', iconText: 'w' },
+		{ name: 'DatePicker', iconText: 'A' },
+		{ name: 'Chart', iconText: 'B' },
+		{ name: 'ListView', iconText: 'u' },
+		{ name: 'Accelerometer', iconText: 'E' },
+		{ name: 'Location', iconText: 'D' },
+		{ name: 'Camera', iconText: String.fromCharCode(parseInt('e034', 16)) },
+		{ name: 'ImagePicker', iconText: 'q' },
+	];
+
+	selectItemTemplate(item: any, index: number, items: Array<any>) {
+		return index == items.length - 1 ? 'last' : 'not-last';
+	}
+
+	componentsItemTap(args): void {
+		Dialogs.alert({
+			title: 'Want to play?',
+			message: 'Nothing to see here yet. Feel free to add more examples to play around.',
+			okButtonText: DialogStrings.OK,
+		});
+	}
+}

apps/toolbox/src/list-page.ts

@@ -0,0 +1,7 @@
+import { EventData, Page } from '@nativescript/core';
+import { ListPageModel } from './list-page-model';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new ListPageModel();
+}

apps/toolbox/src/list-page.xml

@@ -0,0 +1,55 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" actionBarHidden="false">
+     <Page.actionBar>
+        <ActionBar>
+            <Label text="Components" class="header"/>
+        </ActionBar>
+    </Page.actionBar>
+
+    <ListView class="list-group" items="{{ components }}" itemTap="{{ componentsItemTap }} " separatorColor="#00000000"
+        itemTemplateSelector="{{ selectItemTemplate }}">
+        <ListView.itemTemplates>
+            <template key="not-last">
+                <StackLayout class="list-row-item">
+                    <GridLayout>
+                        <FlexboxLayout flexDirection="row" class="list-view-row" verticalAlignment="center">
+                            <ios>
+                                <Label text="{{ iconText }}" class="icon-around icon-label"/>
+                            </ios>
+                            <android>
+                                <StackLayout class="icon-around">
+                                    <Label text="{{ iconText }}" class="icon-label"/>
+                                </StackLayout>
+                            </android>
+                            <StackLayout class="va-middle">
+                                <Label text="{{ name }}" class="component-label"></Label>
+                            </StackLayout>
+                        </FlexboxLayout>
+                        <Label text="J" class="component-select component-select-fix"></Label>
+                    </GridLayout>
+                    <StackLayout class="listview-separator"/>
+                </StackLayout>
+            </template>
+            <template key="last">
+                <StackLayout class="list-row-item">
+                    <GridLayout>
+                        <FlexboxLayout flexDirection="row" class="list-view-row" verticalAlignment="center">
+                            <ios>
+                                <Label text="{{ iconText }}" class="icon-around icon-label"/>
+                            </ios>
+                            <android>
+                                <StackLayout class="icon-around">
+                                    <Label text="{{ iconText }}" class="icon-label"/>
+                                </StackLayout>
+                            </android>
+                            <StackLayout class="va-middle">
+                                <Label text="{{ name }}" class="component-label"></Label>
+                            </StackLayout>
+                        </FlexboxLayout>
+                        <Label text="J" class="component-select component-select-fix"></Label>
+                    </GridLayout>
+                </StackLayout>
+            </template>
+        </ListView.itemTemplates>
+    </ListView>
+
+</Page>

apps/toolbox/src/main-page.xml

@@ -0,0 +1,20 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="Dev Toolbox" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+    <StackLayout class="p-t-20 p-x-20">
+        <Label text="Tap the button" class="h1 text-center"/>
+        <Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
+        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
+        <StackLayout class="c-bg-grey w-full m-y-5" height="1"></StackLayout>
+        <ScrollView class="h-full">
+          <StackLayout>
+            <Label text="More things to tool around with:" class="t-12 text-center font-italic m-t-10"/>
+            <Button text="View List" tap="{{ viewList }}" class="btn"/>
+            <!-- add more examples below as desired to test and play around -->
+          </StackLayout>
+        </ScrollView>
+        
+    </StackLayout>
+</Page>

apps/toolbox/src/main-view-model.ts

@@ -1,4 +1,4 @@
-import { Observable } from '@nativescript/core';
+import { Observable, Frame } from '@nativescript/core';
 
 export class HelloWorldModel extends Observable {
 	private _counter: number;
@@ -28,6 +28,12 @@ export class HelloWorldModel extends Observable {
 		this.updateMessage();
 	}
 
+	viewList() {
+		Frame.topmost().navigate({
+			moduleName: 'list-page',
+		});
+	}
+
 	private updateMessage() {
 		if (this._counter <= 0) {
 			this.message = 'Hoorraaay! You unlocked the NativeScript clicker achievement!';

apps/toolbox/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  }
+}

apps/ui/app/action-bar/font-icons-page.ts

@@ -3,7 +3,7 @@ import { Frame, EventData, Button, ActionBar } from '@nativescript/core';
 const iconModes = ['automatic', 'alwaysOriginal', 'alwaysTemplate', undefined];
 
 export function navigate(args) {
-	Frame.topmost().navigate('ui-tests-app/action-bar/clean');
+	Frame.topmost().navigate('action-bar/clean-page');
 }
 
 export function onChangeRenderingMode(args: EventData) {

apps/ui/app/events/gestures-page.ts

@@ -1,14 +1,9 @@
-import { GestureEventData, RotationGestureEventData, GestureTypes, SwipeGestureEventData, PanGestureEventData, PinchGestureEventData, GestureStateTypes } from '@nativescript/core/ui/gestures';
-import { Button } from '@nativescript/core/ui/button';
-import { Label } from '@nativescript/core/ui/label';
-import { Page } from '@nativescript/core/ui/page';
-import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout';
-import { screen, isAndroid } from '@nativescript/core/platform';
+import { Screen, StackLayout, Page, Label, Button, GestureEventData, RotationGestureEventData, GestureTypes, SwipeGestureEventData, PanGestureEventData, PinchGestureEventData, GestureStateTypes } from '@nativescript/core';
 
 export function createPage() {
 	const stack = new StackLayout();
 	var stopButton = new Button();
-	if (isAndroid) {
+	if (global.isAndroid) {
 		stopButton.height = 30;
 		stopButton.fontSize = 8;
 	}
@@ -16,7 +11,7 @@ export function createPage() {
 	stopButton.automationText = 'stopGesturesDetecting';
 	stack.addChild(stopButton);
 
-	const labelHeight = Math.round(screen.mainScreen.heightPixels / (10 * screen.mainScreen.scale));
+	const labelHeight = Math.round(Screen.mainScreen.heightPixels / (10 * Screen.mainScreen.scale));
 
 	const tapLabel = createLabel('Tap here', labelHeight);
 	stack.addChild(tapLabel);

apps/ui/tsconfig.json

@@ -1,19 +1,9 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs",
-    "target": "es5",
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "noEmitHelpers": true,
-    "noEmitOnError": true,
-    "skipLibCheck": true,
-    "lib": ["es2018", "dom"],
-    "baseUrl": ".",
     "paths": {
       "~/*": ["src/*"],
       "tns-core-modules/*": ["@nativescript/core/*"]
     }
-  },
-  "exclude": ["e2e", "node_modules", "platforms"]
+  }
 }

apps/ui/tsconfig.tns.json

@@ -1,7 +0,0 @@
-{
-    "extends": "./tsconfig",
-    "compilerOptions": {
-        "module": "esnext",
-        "moduleResolution": "node"
-    }
-}