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

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

.gitignore

@@ -40,6 +40,7 @@ apps/**/*/*.map
 apps/**/*/platforms
 apps/**/*/webpack.*.js
 *.tgz
+!tools/plugins/nps-i-1.1.0.tgz
 
 # System Files
 .DS_Store

.npsrc

@@ -0,0 +1,3 @@
+{
+  "config": "./tools/workspace-scripts.js"
+}

.prettierignore

@@ -13,10 +13,12 @@ tests
 packages/types-android
 packages/types-ios
 packages/ui-mobile-base
+tools/assets/App_Resources
 *.cmd
 *.md
 *.json
 *.js
 *.map
 *.css
-*.scss
+*.scss
+*.sh

.travis.yml

@@ -3,8 +3,8 @@ node_js:
   - "node"
 script:
 - npm run setup
-- nx run core:unit
-- nx run core:build.npm
+- npm start @nativescript.core.test
+- npm start @nativescript.core.build
 
 # public API changes check
 # - npm run api-extractor-ci

README.md

@@ -6,9 +6,14 @@ TypeScript driven development for native platform api's.
 
 # Develop
 
+```bash
+# setup workspace for development
+$ npm run setup
+# list all available commands to run
+$ npm start
 ```
-npm run setup
-```
+
+Browse commands with descriptions of all available workspace scripts.
 
 # Packages
 
@@ -30,52 +35,39 @@ npm run setup
 
 ## @nativescript/core
 
-```
-npx apps:playground:ios
-npm run apps:playground:android
-
-
-npm run packages:core:build
-npm run packages:core:test
-
-
-
-
-// livesync develop changes
-nx run core-e2e-playground:ios
-nx run core-e2e-playground:android
-
-// clean and reset
-nx run core-e2e-playground:clean
-
-// unit tests
-nx run core:unit
-nx run core:unit.watch
-
-// build/prepare for npm (output: 'dist/packages/core')
-nx run core:build.npm
+```bash
+# livesync develop changes
+$ npm start apps.playground.ios
+$ npm start apps.playground.android
+#
+# unit tests
+$ npm start packages.core.test
+$ npm start packages.core.test.watch
+#
+# build for npm (output: 'dist/packages/core')
+$ npm start packages.core.build
 ```
 
 There are additional targets you can test changes against:
 
-```
-// variety of manual ui testing
-nx run core-e2e-ui:ios
-nx run core-e2e-ui:android
-nx run core-e2e-ui:clean
-
-// used in CI automated tests but you can run these manually as well to check if you caused any regressions
-nx run core-e2e-automated:ios
-nx run core-e2e-automated:android
-nx run core-e2e-automated:clean
-
-
+```bash
+# variety of manual ui testing
+$ npm start apps.ui.ios
+$ npm start apps.ui.android
+$ npm start apps.ui.clean
+#
+# used in CI automated tests but you can run these manually as well to check if you caused any regressions
+$ npm start apps.automated.ios
+$ npm start apps.automated.android
+$ npm start apps.automated.clean
 ```
 
 #### Compatibility package for old style tns-core-modules
 
-```
-nx run tns-core-modules-compat:build
+Old imports from `tns-core-modules/*`
+
+```bash
+$ npm start packages.core-compat.build
 ```
 
 ## @nativescript/ui-mobile-base
@@ -84,16 +76,17 @@ Base native classes for ui components.
 Included with @nativescript/core right now as direct dependency but also published separately for others to build on top of if desired.
 
 If you would like to make changes to source just build when ready to test your changes (you can then clean any testing target to try your changes)
-```
-nx run ui-mobile-base:build
+
+```bash
+$ npm start packages.ui-mobile-base.build
 ```
 
 ## @nativescript/webpack
 
-```
-// To try any webpack changes, just build and then clean targets to try
-nx run webpack:build
-
-// unit tests
-nx run webpack:test
+```bash
+# To try any webpack changes, just build and then clean targets to try
+$ npm start packages.webpack.build
+#
+# unit tests
+$ npm start packages.webpack.test
 ```

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"
-    }
-}

migrations.json

@@ -0,0 +1,32 @@
+{
+  "migrations": [
+    {
+      "version": "10.0.0-beta.0",
+      "description": "Add default branch to nx.json",
+      "factory": "./src/migrations/update-10-0-0/update-10-0-0",
+      "package": "@nrwl/workspace",
+      "name": "add-default-branch-to-nx-json"
+    },
+    {
+      "version": "10.0.0-beta.0",
+      "description": "Migrate tsconfigs to solution style tsconfigs",
+      "factory": "./src/migrations/update-10-0-0/solution-tsconfigs",
+      "package": "@nrwl/workspace",
+      "name": "solution-tsconfigs"
+    },
+    {
+      "version": "10.0.1-beta.0",
+      "description": "Migrate .eslintrc files to reference new tsconfig",
+      "factory": "./src/migrations/update-10-0-1/migrate-eslintrc",
+      "package": "@nrwl/workspace",
+      "name": "migrate-eslintrc-tsconfig"
+    },
+    {
+      "version": "10.0.0-beta.2",
+      "description": "update jest configs to include setup env files",
+      "factory": "./src/migrations/update-10-0-0/update-jest-configs",
+      "package": "@nrwl/jest",
+      "name": "update-10.0.0"
+    }
+  ]
+}

nx.json

@@ -27,7 +27,7 @@
     "apps-automated": {
       "tags": []
     },
-    "apps-playground": {
+    "apps-toolbox": {
       "tags": []
     },
     "apps-ui": {
@@ -36,7 +36,7 @@
     "core": {
       "tags": []
     },
-    "tns-core-modules-compat": {
+    "core-compat": {
       "tags": []
     },
     "types-ios": {

package.json

@@ -1,24 +1,22 @@
 {
   "name": "nativescript",
-  "version": "7.0.0-rc.24",
+  "version": "7.0.0-rc.47",
   "license": "MIT",
   "scripts": {
-    "nx": "nx",
-    "format": "nx format:write",
-    "setup": "npx rimraf -- hooks node_modules package-lock.json && npm i && nx run core:setup"
+    "setup": "npx rimraf -- hooks node_modules package-lock.json && npm i && ts-patch install && nx run core:setup",
+    "start": "nps"
   },
   "private": true,
   "dependencies": {
     "nativescript-theme-core": "^1.0.4"
   },
   "devDependencies": {
-    "nativescript": "rc",
     "@nativescript/hook": "^1.0.0",
-    "@nrwl/eslint-plugin-nx": "~9.5.1",
-    "@nrwl/jest": "~9.5.1",
-    "@nrwl/node": "~9.5.1",
-    "@nrwl/nx-cloud": "^9.3.0",
-    "@nrwl/workspace": "~9.5.1",
+    "@nrwl/eslint-plugin-nx": "~10.0.7",
+    "@nrwl/jest": "~10.0.7",
+    "@nrwl/node": "~10.0.7",
+    "@nrwl/nx-cloud": "~10.0.0",
+    "@nrwl/workspace": "~10.0.7",
     "@types/chai": "^4.2.11",
     "@types/jest": "~26.0.4",
     "@types/mocha": "^7.0.2",
@@ -40,7 +38,11 @@
     "mocha": "^8.0.1",
     "mocha-typescript": "^1.1.17",
     "module-alias": "^2.2.2",
+    "nativescript": "rc",
     "node-sass": "~4.14.1",
+    "nps": "^5.10.0",
+    "nps-i": "file:tools/plugins/nps-i-1.1.0.tgz",
+    "nps-utils": "^1.7.0",
     "parse-css": "git+https://github.com/tabatkins/parse-css.git",
     "parserlib": "^1.1.1",
     "prettier": "~2.0.5",
@@ -49,9 +51,10 @@
     "terser-webpack-plugin": "~3.0.6",
     "ts-jest": "~26.1.1",
     "ts-node": "~8.10.2",
+    "ts-patch": "^1.2.5",
     "tslint": "~6.1.2",
-    "typescript": "~3.9.0",
-    "webpack": "~4.43.0",
+    "typescript": "~3.9.7",
+    "webpack": "~4.44.1",
     "webpack-cli": "~3.3.12"
   },
   "husky": {
@@ -61,7 +64,7 @@
   },
   "lint-staged": {
     "**/*": [
-      "nx format:write"
+      "nx format:write --files"
     ]
   }
 }