NativeScript · farfromrefug · May 22, 2021 · Jun 8, 2021 · Jun 8, 2021 · Jun 8, 2021
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@
 **/yarn.lock
 **/pnpm-lock.yaml
 .npmrc
+.yarn
 
 # IDEs and editors
 .idea
@@ -54,3 +55,4 @@ Thumbs.db
 
 # types
 ios-typings-prj
+/packages/core/platforms/android/core.aar
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,5 +1,8 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+# . "$(dirname "$0")/_/husky.sh"
+
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
 
 export NVM_DIR="$HOME/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,5 +7,6 @@
         "**/*.js": true,
         "**/*.js.map": true
     },
-    "tslint.configFile": "./build/tslint.json"
+    "tslint.configFile": "./build/tslint.json",
+    "git.enabled": false
 }
diff --git a/apps/automated/nativescript.config.ts b/apps/automated/nativescript.config.ts
@@ -7,7 +7,4 @@ export default {
 	android: {
 		v8Flags: '--expose_gc',
 	},
-	cli: {
-		packageManager: 'npm',
-	},
 } as NativeScriptConfig;
diff --git a/apps/automated/package.json b/apps/automated/package.json
@@ -13,7 +13,7 @@
   "devDependencies": {
     "@nativescript/android": "~8.3.0",
     "@nativescript/ios": "~8.3.0",
-    "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
+    "@nativescript/webpack": "5.0.7",
     "typescript": "4.7.3"
   },
   "gitHead": "c06800e52ee1a184ea2dffd12a6702aaa43be4e3",

diff --git a/apps/automated/src/pages/page11.ts b/apps/automated/src/pages/page11.ts
@@ -51,7 +51,7 @@ export function createPage() {
 	//page.content = GridLayout;
 	page.content = StackLayout;
 	var x = 1;
-	btn1.on(button.Button.tapEvent, function () {
+	btn1.on(button.tapEvent, function () {
 		x++;
 		var gravity;
 		//btn1.android.setLayoutParams(new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT));

diff --git a/apps/automated/src/pages/page7.ts b/apps/automated/src/pages/page7.ts
@@ -13,7 +13,7 @@ export function createPage() {
 	var vAligns: CoreTypes.VerticalAlignmentType[] = ['stretch', 'top', 'middle', 'bottom'];
 	//var hAligns = ["stretch", "left", "center", "right"];
 	var count = 0;
-	btn.on(buttons.Button.tapEvent, function () {
+	btn.on(buttons.tapEvent, function () {
 		//page.css = "button { vertical-align:" + vAligns[(count++) % 4] + " }";
 		btn.verticalAlignment = vAligns[count++ % 4];
 	});

diff --git a/apps/automated/src/pages/page8.ts b/apps/automated/src/pages/page8.ts
@@ -41,7 +41,7 @@ export function createPage() {
 	var counter = 0;
 	var btn = new btns.Button();
 	btn.text = 'tap';
-	btn.on(btns.Button.tapEvent, function () {
+	btn.on(btns.tapEvent, function () {
 		btn.text = 'hi: ' + counter++;
 	});
 	btn.isEnabled = false;
@@ -52,7 +52,7 @@ export function createPage() {
 	var info = new btns.Button();
 	info.text = 'info';
 	info.className = 'info';
-	info.on(btns.Button.tapEvent, function () {
+	info.on(btns.tapEvent, function () {
 		info.text = 'hi: ' + counter++;
 		btn.isEnabled = true;
 	});

diff --git a/apps/automated/src/pages/property-bindings.ts b/apps/automated/src/pages/property-bindings.ts
@@ -41,7 +41,7 @@ export function createPage() {
 	var count = 0;
 	var control = new btns.Button();
 	control.text = 'test control';
-	control.on(btns.Button.tapEvent, (data) => {
+	control.on(btns.tapEvent, (data) => {
 		control.text = 'count: ' + count++;
 	});
 	grid.addChild(control);

diff --git a/apps/automated/src/ui/animation/animation-tests.ts b/apps/automated/src/ui/animation/animation-tests.ts
@@ -267,15 +267,6 @@ export function test_AnimateOpacity(done) {
 		});
 }
 
-export function test_AnimateOpacity_ShouldThrow_IfNotNumber() {
-	var label = new Label();
-	helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {
-		TKUnit.assertThrows(() => {
-			label.animate({ opacity: <any>'0.75' });
-		}, 'Setting opacity to a non number should throw.');
-	});
-}
-
 export function test_AnimateDelay_ShouldThrow_IfNotNumber() {
 	var label = new Label();
 	helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {
@@ -303,15 +294,6 @@ export function test_AnimateIterations_ShouldThrow_IfNotNumber() {
 	});
 }
 
-export function test_AnimateRotate_ShouldThrow_IfNotNumber() {
-	var label = new Label();
-	helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {
-		TKUnit.assertThrows(() => {
-			label.animate({ rotate: <any>'1' });
-		}, 'Setting rotate to a non number should throw.');
-	});
-}
-
 export function test_AnimateScale_ShouldThrow_IfNotPair() {
 	var label = new Label();
 	helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {

diff --git a/apps/automated/src/ui/button/button-tests.ts b/apps/automated/src/ui/button/button-tests.ts
@@ -3,6 +3,7 @@ import * as helper from '../../ui-helper';
 import { View, EventData, Button, Observable, Color, Page, FormattedString } from '@nativescript/core';
 import * as buttonTestsNative from './button-tests-native';
 import * as spanModule from '@nativescript/core/text/span';
+import { tapEvent } from '@nativescript/core/ui/button';
 
 // >> button-require-others
 import { BindingOptions } from '@nativescript/core/ui/core/bindable';
@@ -100,7 +101,7 @@ var _testOnClick = function (views: Array<View>) {
 
 	var actualValue = false;
 	// >> button-tap
-	button.on(Button.tapEvent, function (args: EventData) {
+	button.on(tapEvent, function (args: EventData) {
 		// Do something
 		// >> (hide)
 		actualValue = true;

diff --git a/apps/automated/src/ui/page/page-tests-common.ts b/apps/automated/src/ui/page/page-tests-common.ts
@@ -181,7 +181,7 @@ function _test_PageNavigation_EventSequence(withTransition: boolean) {
 	helper.navigateWithEntry(navigationEntry);
 	helper.goBack();
 
-	const expectedEventSequence = ['navigatingTo', 'loaded', 'navigatedTo', 'navigatingFrom', 'unloaded', 'navigatedFrom'];
+	const expectedEventSequence = ['navigatingTo', 'loaded', 'navigatedTo', 'navigatingFrom', 'navigatedFrom', 'unloaded'];
 	TKUnit.arrayAssert(eventSequence, expectedEventSequence, 'Actual event sequence is not equal to expected. Actual: ' + eventSequence + '; Expected: ' + expectedEventSequence);
 }
 

diff --git a/apps/automated/src/ui/root-view/mymodule/MyControl.ts b/apps/automated/src/ui/root-view/mymodule/MyControl.ts
@@ -13,7 +13,7 @@ export class MyControl extends stackLayoutModule.StackLayout {
 		lbl.id = 'my-test-label';
 		var btn = new button.Button();
 		btn.text = 'Tap me!';
-		btn.on(button.Button.tapEvent, (args: EventData) => {
+		btn.on(button.tapEvent, (args: EventData) => {
 			lbl.text = 'Tap ' + counter++;
 		});
 

diff --git a/apps/automated/src/ui/tab-view/tab-view-navigation-tests.ts b/apps/automated/src/ui/tab-view/tab-view-navigation-tests.ts
@@ -7,7 +7,7 @@ import { Frame } from '@nativescript/core/ui/frame';
 import { Page } from '@nativescript/core/ui/page';
 import { ListView, ItemEventData } from '@nativescript/core/ui/list-view';
 import { TabView, TabViewItem } from '@nativescript/core/ui/tab-view';
-import { Button } from '@nativescript/core/ui/button';
+import { Button, tapEvent } from '@nativescript/core/ui/button';
 
 var ASYNC = 2;
 
@@ -44,7 +44,7 @@ function _createListView(): ListView {
 		var button = <Button>args.view;
 		if (!button) {
 			button = new Button();
-			button.on(Button.tapEvent, _clickHandlerFactory(args.index));
+			button.on(tapEvent, _clickHandlerFactory(args.index));
 			args.view = button;
 		}
 

diff --git a/apps/automated/src/xml-declaration/mymodule/MyControl.ts b/apps/automated/src/xml-declaration/mymodule/MyControl.ts
@@ -1,4 +1,5 @@
 import { StackLayout, Label, Button, EventData } from '@nativescript/core';
+import { tapEvent } from '@nativescript/core/ui/button';
 
 export class MyControl extends StackLayout {
 	constructor() {
@@ -9,7 +10,7 @@ export class MyControl extends StackLayout {
 		var lbl = new Label();
 		var btn = new Button();
 		btn.text = 'Tap me!';
-		btn.on(Button.tapEvent, (args: EventData) => {
+		btn.on(tapEvent, (args: EventData) => {
 			lbl.text = 'Tap ' + counter++;
 		});
 

diff --git a/apps/toolbox/nativescript.config.ts b/apps/toolbox/nativescript.config.ts
@@ -8,7 +8,4 @@ export default {
 		v8Flags: '--expose_gc',
 		suppressCallJSMethodExceptions: false,
 	},
-	cli: {
-		packageManager: 'npm',
-	},
 } as NativeScriptConfig;
diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
@@ -6,6 +6,9 @@
   <StackLayout class="p-20">
     <ScrollView class="h-full">
       <StackLayout>
+        <Button text="animation-curves-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="layout-stack-height-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="css-animations" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

diff --git a/apps/toolbox/src/pages/animation-curves-page.ts b/apps/toolbox/src/pages/animation-curves-page.ts
@@ -0,0 +1,68 @@
+import { getViewById, View, Page, Button, SegmentedBar, SegmentedBarItem, Label, Animation, AnimationDefinition } from '@nativescript/core';
+
+export function easeAnimate(args) {
+	const clicked = args.object as Button;
+	const page: Page = clicked.page;
+	const target = getViewById(page, 'target') as Label;
+	const select = getViewById(page, 'select') as SegmentedBar;
+	const item: SegmentedBarItem = select.items[select.selectedIndex];
+	const easeType: string = clicked.text;
+	const extent = 128;
+	let duration = easeType === 'spring' ? 800 : 500;
+	let delay = easeType === 'spring' ? 0 : 200;
+	let animateKey: string = null;
+	let animateValueTo: any = null;
+	let animateValueFrom: any = null;
+
+	switch (item.title) {
+		case 'height':
+			animateKey = 'height';
+			target.originX = target.originY = 0;
+			animateValueTo = 0;
+			animateValueFrom = extent;
+			break;
+		case 'width':
+			animateKey = 'width';
+			target.originX = target.originY = 0;
+			animateValueTo = 0;
+			animateValueFrom = extent;
+			break;
+		case 'opacity':
+			animateKey = 'opacity';
+			animateValueTo = 0;
+			animateValueFrom = 1;
+			break;
+		case 'color':
+			animateKey = 'backgroundColor';
+			animateValueTo = 'blue';
+			animateValueFrom = 'purple';
+			break;
+		case 'rotate':
+			animateKey = 'rotate';
+			target.originX = target.originY = 0.5;
+			animateValueTo = 180;
+			animateValueFrom = 0;
+			break;
+		case 'scale':
+			animateKey = 'scale';
+			target.originX = target.originY = 0.5;
+			animateValueTo = { x: 1.5, y: 1.5 };
+			animateValueFrom = { x: 1, y: 1 };
+			break;
+	}
+	target
+		.animate({
+			[animateKey]: animateValueTo,
+			duration,
+			curve: easeType,
+		})
+		.then(() => {
+			return target.animate({
+				[animateKey]: animateValueFrom,
+				delay,
+				duration,
+				curve: easeType,
+			});
+		})
+		.catch((e) => console.log(e));
+}
diff --git a/apps/toolbox/src/pages/animation-curves-page.xml b/apps/toolbox/src/pages/animation-curves-page.xml
@@ -0,0 +1,31 @@
+<Page>
+    <AbsoluteLayout>
+        <GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
+
+            <Label row="0" colSpan="3" text="Animate"/>
+            <SegmentedBar row="1" colSpan="3" id="select">
+                <SegmentedBar.items>
+                    <SegmentedBarItem title="height"/>
+                    <SegmentedBarItem title="width"/>
+                    <SegmentedBarItem title="opacity"/>
+                    <SegmentedBarItem title="color"/>
+                    <SegmentedBarItem title="rotate"/>
+                    <SegmentedBarItem title="scale"/>
+                </SegmentedBar.items>
+            </SegmentedBar>
+
+            <Label row="2" colSpan="3" text="Easing"/>
+            <Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
+            <Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
+            <Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
+            <Button row="4" col="0" text="spring" tap="easeAnimate"/>
+            <Button row="4" col="1" text="linear" tap="easeAnimate"/>
+            <Button row="4" col="2" text="ease" tap="easeAnimate"/>
+        </GridLayout>
+
+        <Label top="300" left="96" height="128" width="128"
+               borderColor="purple" borderWidth="1"/>
+        <Label top="300" left="96" height="128" width="128"
+               id="target" backgroundColor="purple"/>
+    </AbsoluteLayout>
+</Page>
diff --git a/apps/toolbox/src/pages/css-animations.css b/apps/toolbox/src/pages/css-animations.css
@@ -0,0 +1,79 @@
+.fade-blink {
+    animation-name: fadeAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+.scale-blink {
+    animation-name: scaleAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+.slide-blink {
+    animation-name: slideAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+.color-blink {
+    animation-name: colorAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeAndBack {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes colorAndBack {
+    0% {
+        background-color: blue;
+    }
+
+    50% {
+        background-color: yellow;
+    }
+
+    100% {
+        background-color: blue;
+    }
+}
+
+@keyframes slideAndBack {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(100%);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes scaleAndBack {
+    0% {
+        transform: scale(1, 1);
+    }
+
+    50% {
+        transform: scale(0, 0);
+    }
+
+    100% {
+        transform: scale(1, 1);
+    }
+}