NativeScript · edusperoni · Dec 31, 2021 · Dec 31, 2021 · Dec 31, 2021 · Dec 31, 2021
diff --git a/.gitignore b/.gitignore
@@ -42,6 +42,7 @@ apps/**/*/*.map
 apps/**/*/platforms
 apps/**/*/webpack.*.js
 *.tgz
+.npmrc
 
 # System Files
 .DS_Store

diff --git a/apps/automated/package.json b/apps/automated/package.json
@@ -14,10 +14,10 @@
     "nativescript-theme-core": "file:../../node_modules/nativescript-theme-core"
   },
   "devDependencies": {
-    "@nativescript/android": "8.1.1",
-    "@nativescript/ios": "8.1.0",
+    "@nativescript/android": "alpha",
+    "@nativescript/ios": "alpha",
     "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
-    "typescript": "4.3.5"
+    "typescript": "4.5.4"
   },
   "gitHead": "c06800e52ee1a184ea2dffd12a6702aaa43be4e3",
   "readme": "NativeScript Application"

diff --git a/apps/automated/src/color/color-tests.ts b/apps/automated/src/color/color-tests.ts
@@ -72,6 +72,24 @@ export var test_rgb_Color_CSS = function () {
 	TKUnit.assertEqual(color.argb, 0xffff6464, 'Color.argb not properly parsed');
 };
 
+export var test_rgb_Color_CSS_lvl4 = function () {
+	var alpha = 0.5;
+	var expected = 0x80;
+	// <snippet module="color" title="color">
+	// ### Creating a Color from four RGB values
+	// ``` JavaScript
+	// Creates the color with 255 red, 100 green, 100 blue
+	var color = new Color(`rgb(255 100 100 / ${alpha})`);
+	// ```
+	// </snippet>
+	TKUnit.assertEqual(color.a, expected, 'Color.a not properly parsed');
+	TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
+	TKUnit.assertEqual(color.g, 100, 'Color.g not properly parsed');
+	TKUnit.assertEqual(color.b, 100, 'Color.b not properly parsed');
+	TKUnit.assertEqual(color.hex, '#FF646480', 'Color.hex not properly parsed');
+	TKUnit.assertEqual(color.argb, 0x80ff6464, 'Color.argb not properly parsed');
+};
+
 export var test_rgba_Color_CSS = function () {
 	var alpha = 0.5;
 	var expected = 0x80;

diff --git a/apps/automated/src/http/http-string-worker.ts b/apps/automated/src/http/http-string-worker.ts
@@ -1,13 +1,13 @@
 // todo: figure out why this worker is including the whole core and not just the Http module
 // ie. tree-shaking is not working as expected here. (same setup works in a separate app)
-import { initGlobal } from '@nativescript/core/globals/index';
-initGlobal();
+// import { initGlobal } from '@nativescript/core/globals/index';
+// initGlobal();
 
-import { Http } from '@nativescript/core';
+import { getString } from '@nativescript/core/http';
 
 declare var postMessage: any;
 
-Http.getString('https://httpbin.org/get').then(
+getString('https://httpbin.org/get').then(
 	function (r) {
 		postMessage(r);
 	},

diff --git a/apps/automated/src/ui/core/bindable/bindable-tests.ts b/apps/automated/src/ui/core/bindable/bindable-tests.ts
@@ -659,17 +659,19 @@ export function test_BindingConverterCalledEvenWithNullValue() {
 	const testPropertyValue = null;
 	const expectedValue = 'collapsed';
 	pageViewModel.set('testProperty', testPropertyValue);
-	appModule.getResources()['converter'] = function (value) {
-		if (value) {
-			return 'visible';
-		} else {
-			return 'collapsed';
-		}
+	appModule.getResources()['converter'] = {
+		toView: function (value) {
+			if (value) {
+				return 'visible';
+			} else {
+				return 'collapsed';
+			}
+		},
 	};
 
 	const testFunc = function (views: Array<View>) {
 		const testLabel = <Label>views[0];
-		testLabel.bind({ sourceProperty: 'testProperty', targetProperty: 'text', expression: 'testProperty | converter' });
+		testLabel.bind({ sourceProperty: 'testProperty', targetProperty: 'text', expression: 'testProperty | converter()' });
 
 		const page = <Page>views[1];
 		page.bindingContext = pageViewModel;

diff --git a/apps/automated/src/ui/frame/frame-tests.android.ts b/apps/automated/src/ui/frame/frame-tests.android.ts
@@ -1,10 +1,10 @@
-import { Frame } from '@nativescript/core/ui/frame';
+import { Frame, GridLayout, Label, Page, Trace, View } from '@nativescript/core';
 import * as TKUnit from '../../tk-unit';
 import { unsetValue } from '@nativescript/core/ui/core/view';
 import { PercentLength } from '@nativescript/core/ui/styling/style-properties';
+import { buildUIAndRunTest } from '../../ui-helper';
 export * from './frame-tests-common';
 
-
 export function test_percent_width_and_height_set_to_page_support() {
 	let topFrame = Frame.topmost();
 	let currentPage = topFrame.currentPage;
@@ -65,3 +65,140 @@ export function test_percent_margin_set_to_page_support() {
 	TKUnit.assertTrue(PercentLength.equals(currentPage.marginRight, 0));
 	TKUnit.assertTrue(PercentLength.equals(currentPage.marginBottom, 0));
 }
+
+export function test_nested_frames() {
+	let topFrame = Frame.topmost();
+	let currentPage = topFrame.currentPage;
+	console.log(Frame.topmost(), currentPage);
+	class PageAbstraction {
+		page: Page;
+		root: GridLayout;
+		setContent(content: View) {
+			this.root.insertChild(content, 0);
+			content.marginTop = 30;
+		}
+	}
+
+	const pageFactory = (color: string) => {
+		const page = new Page();
+		page.backgroundColor = color;
+		const gl = new GridLayout();
+		const label = new Label();
+		page.on('navigatedTo', () => {
+			let depth = 0;
+			let parent = label.parent;
+			let parentFrame: Frame = null;
+			while (parent) {
+				if (parent instanceof Frame) {
+					parentFrame = parentFrame || parent;
+					depth++;
+				}
+				parent = parent.parent;
+			}
+			label.text = `Depth: ${depth} - Page: ${parentFrame?.backStack.length}`;
+		});
+		label.style.zIndex = 999;
+		gl.insertChild(label, 0);
+		page.content = gl;
+		const abs = new PageAbstraction();
+		abs.root = gl;
+		abs.page = page;
+
+		return abs;
+	};
+
+	const page1 = pageFactory('red');
+	const page2 = pageFactory('blue');
+	const page3 = pageFactory('green');
+	const parentPage2 = pageFactory('yellow');
+
+	const frameFactory = () => {
+		const frame = new Frame();
+		frame._popFromFrameStack();
+		frame.navigate = function (...args) {
+			// console.log('navigateTo', args, args[0].create().backgroundColor);
+			Frame.prototype.navigate.call(frame, ...args);
+			this._popFromFrameStack();
+		};
+		frame.goBack = function (...args) {
+			// console.log('goBack', args);
+			Frame.prototype.goBack.call(frame, ...args);
+			this._popFromFrameStack();
+		};
+		frame.on('navigatingTo', () => ((frame as any).__midNav = true));
+		frame.on('navigatedTo', () => ((frame as any).__midNav = false));
+		return frame;
+	};
+
+	const innerFrame = frameFactory();
+	const innerFrame2 = frameFactory();
+	page1.setContent(innerFrame2);
+
+	innerFrame.navigate({
+		create: () => {
+			return page1.page;
+		},
+	});
+
+	innerFrame2.navigate({
+		create: () => {
+			return page2.page;
+		},
+	});
+	function validateState(frame: Frame) {
+		TKUnit.waitUntilReady(() => (frame as any).__midNav === false, 1);
+		TKUnit.assertTrue(frame._executingContext == null);
+		TKUnit.assertTrue(frame._currentEntry != null);
+		if (frame.isLoaded) {
+			TKUnit.assertTrue(frame._currentEntry.fragment != null);
+		}
+	}
+	// TKUnit.wait(1);
+	buildUIAndRunTest(innerFrame, ([parentFrame, parentPage]) => {
+		Trace.enable();
+		Trace.setCategories(Trace.categories.concat(Trace.categories.NativeLifecycle, Trace.categories.Transition));
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame2.navigate({
+			create: () => {
+				return page3.page;
+			},
+		});
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame.navigate({
+			create: () => parentPage2.page,
+		});
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame.goBack();
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame2.goBack();
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame.navigate({
+			create: () => parentPage2.page,
+		});
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame.goBack();
+		validateState(innerFrame);
+		validateState(innerFrame2);
+
+		// innerFrame.navigate({
+		// 	create: () => parentPage2.page,
+		// });
+		// TKUnit.wait(1);
+		// innerFrame.goBack();
+		// TKUnit.wait(1);
+		// TKUnit.assertTrue(innerFrame2._currentEntry.fragment != null);
+		// TKUnit.wait(5);
+	});
+
+	// TKUnit.waitUntilReady(() => {
+	// 	return innerFrame.isLayoutValid;
+	// }, 1);
+
+	TKUnit.wait(10);
+}
diff --git a/apps/automated/src/ui/list-view/list-view-tests.ts b/apps/automated/src/ui/list-view/list-view-tests.ts
@@ -437,15 +437,17 @@ export class ListViewTest extends UITest<ListView> {
 	public test_usingAppLevelConvertersInListViewItems() {
 		var listView = this.testView;
 
-		var dateConverter = function (value, format) {
-			var result = format;
-			var day = value.getDate();
-			result = result.replace('DD', day < 10 ? '0' + day : day);
-			var month = value.getMonth() + 1;
-			result = result.replace('MM', month < 10 ? '0' + month : month);
-			result = result.replace('YYYY', value.getFullYear());
-
-			return result;
+		var dateConverter = {
+			toView: function (value, format) {
+				var result = format;
+				var day = value.getDate();
+				result = result.replace('DD', day < 10 ? '0' + day : day);
+				var month = value.getMonth() + 1;
+				result = result.replace('MM', month < 10 ? '0' + month : month);
+				result = result.replace('YYYY', value.getFullYear());
+
+				return result;
+			},
 		};
 
 		Application.getResources()['dateConverter'] = dateConverter;
@@ -565,10 +567,12 @@ export class ListViewTest extends UITest<ListView> {
 		var listView = this.testView;
 		var converterCalledCounter = 0;
 
-		var testConverter = function (value) {
-			converterCalledCounter++;
+		var testConverter = {
+			toView: function (value) {
+				converterCalledCounter++;
 
-			return value;
+				return value;
+			},
 		};
 
 		Application.getResources()['testConverter'] = testConverter;
@@ -578,7 +582,7 @@ export class ListViewTest extends UITest<ListView> {
 		listView.bindingContext = listViewModel;
 
 		listView.bind({ sourceProperty: 'items', targetProperty: 'items' });
-		listView.itemTemplate = '<Label id="testLabel" text="{{ $value, $value | testConverter }}" />';
+		listView.itemTemplate = '<Label id="testLabel" text="{{ $value, $value | testConverter() }}" />';
 
 		this.waitUntilListViewReady();
 
@@ -589,10 +593,12 @@ export class ListViewTest extends UITest<ListView> {
 		var listView = this.testView;
 		var converterCalledCounter = 0;
 
-		var testConverter = function (value) {
-			converterCalledCounter++;
+		var testConverter = {
+			toView: function (value) {
+				converterCalledCounter++;
 
-			return value;
+				return value;
+			},
 		};
 
 		Application.getResources()['testConverter'] = testConverter;
@@ -602,7 +608,7 @@ export class ListViewTest extends UITest<ListView> {
 		listView.bindingContext = listViewModel;
 
 		listView.bind({ sourceProperty: 'items', targetProperty: 'items' });
-		listView.itemTemplate = '<StackLayout><Label id="testLabel" text="{{ $value, $value | testConverter }}" /></StackLayout>';
+		listView.itemTemplate = '<StackLayout><Label id="testLabel" text="{{ $value, $value | testConverter() }}" /></StackLayout>';
 
 		this.waitUntilListViewReady();
 

diff --git a/apps/automated/src/ui/repeater/repeater-tests.ts b/apps/automated/src/ui/repeater/repeater-tests.ts
@@ -252,15 +252,17 @@ export function test_splice_observable_array_refreshes_the_Repeater() {
 export function test_usingAppLevelConvertersInRepeaterItems() {
 	var repeater = new Repeater();
 
-	var dateConverter = function (value, format) {
-		var result = format;
-		var day = value.getDate();
-		result = result.replace('DD', month < 10 ? '0' + day : day);
-		var month = value.getMonth() + 1;
-		result = result.replace('MM', month < 10 ? '0' + month : month);
-		result = result.replace('YYYY', value.getFullYear());
-
-		return result;
+	var dateConverter = {
+		toView: function (value, format) {
+			var result = format;
+			var day = value.getDate();
+			result = result.replace('DD', month < 10 ? '0' + day : day);
+			var month = value.getMonth() + 1;
+			result = result.replace('MM', month < 10 ? '0' + month : month);
+			result = result.replace('YYYY', value.getFullYear());
+
+			return result;
+		},
 	};
 
 	Application.getResources()['dateConverter'] = dateConverter;
@@ -275,7 +277,7 @@ export function test_usingAppLevelConvertersInRepeaterItems() {
 
 		TKUnit.waitUntilReady(() => repeater.isLayoutValid);
 
-		TKUnit.assertEqual(getChildAtText(repeater, 0), dateConverter(new Date(), 'DD.MM.YYYY'), 'element');
+		TKUnit.assertEqual(getChildAtText(repeater, 0), dateConverter.toView(new Date(), 'DD.MM.YYYY'), 'element');
 	}
 
 	helper.buildUIAndRunTest(repeater, testAction);

diff --git a/apps/automated/src/ui/styling/style-properties-tests.ts b/apps/automated/src/ui/styling/style-properties-tests.ts
@@ -59,6 +59,10 @@ export function test_setting_borderColorRGB_property_from_CSS_is_applied_to_Styl
 	test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255, 0, 0)');
 }
 
+export function test_setting_borderColorRGBLvl4_property_from_CSS_is_applied_to_Style() {
+	test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255 0 0 / 1)');
+}
+
 export function test_setting_borderColorRGBA_property_from_CSS_is_applied_to_Style() {
 	test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgba(255,0,0,1)');
 }

diff --git a/apps/toolbox/package.json b/apps/toolbox/package.json
@@ -11,9 +11,9 @@
     "nativescript-theme-core": "file:../../node_modules/nativescript-theme-core"
   },
   "devDependencies": {
-    "@nativescript/android": "8.1.1",
-    "@nativescript/ios": "8.1.0",
+    "@nativescript/android": "alpha",
+    "@nativescript/ios": "alpha",
     "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
-    "typescript": "4.3.5"
+    "typescript": "4.5.4"
   }
 }
diff --git a/apps/toolbox/src/app.css b/apps/toolbox/src/app.css
@@ -5,6 +5,9 @@
 The following CSS rule changes the font size of all UI
 components that have the btn class name.
 */
+Button {
+    text-transform: none;
+}
 .btn-view-demo {
   background-color: #65ADF1;
   border-radius: 5;