feat: TypeScript 4.8+ support and NativeClass decorator improvements (#10081)

apps/automated/package.json

@@ -14,7 +14,7 @@
     "@nativescript/android": "~8.3.0",
     "@nativescript/ios": "~8.3.0",
     "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
-    "typescript": "4.7.3"
+    "typescript": "4.8.4"
   },
   "gitHead": "c06800e52ee1a184ea2dffd12a6702aaa43be4e3",
   "readme": "NativeScript Application"

apps/automated/project.json

@@ -1,4 +1,5 @@
 {
+	"name": "apps-automated",
 	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"sourceRoot": "apps/automated/app",
 	"projectType": "application",

apps/automated/src/ui/styling/style-properties-tests.ts

@@ -556,7 +556,7 @@ export function test_setting_font_shorthand_property() {
 	test_font_shorthand_property('normal normal normal 15px/30px Arial', 'Arial', 15, 'normal', 'normal');
 }
 
-function test_font_shorthand_property(short: string, family: string, size: number, style: string, weight: string) {
+function test_font_shorthand_property(short: string, family: string, size: number, style: string, weight: string | number) {
 	const testView = new Button();
 	(<any>testView.style)['font'] = short;
 

apps/toolbox/package.json

@@ -15,6 +15,6 @@
     "@nativescript/android": "~8.3.0",
     "@nativescript/ios": "~8.3.0",
     "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
-    "typescript": "4.7.3"
+    "typescript": "4.8.4"
   }
 }

apps/toolbox/project.json

@@ -1,4 +1,5 @@
 {
+	"name": "apps-toolbox",
 	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"sourceRoot": "apps/toolbox/src",
 	"projectType": "application",

apps/ui/package.json

@@ -14,7 +14,7 @@
     "@nativescript/android": "~8.3.0",
     "@nativescript/ios": "~8.3.0",
     "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
-    "typescript": "4.7.3"
+    "typescript": "4.8.4"
   },
   "gitHead": "8ab7726d1ee9991706069c1359c552e67ee0d1a4",
   "readme": "NativeScript Application",

apps/ui/project.json

@@ -1,4 +1,5 @@
 {
+	"name": "apps-ui",
 	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"sourceRoot": "apps/ui/src",
 	"projectType": "application",

nx.json

@@ -4,13 +4,6 @@
 		"appsDir": "apps",
 		"libsDir": "packages"
 	},
-	"implicitDependencies": {
-		"workspace.json": "*",
-		"tsconfig.json": "*",
-		"tslint.json": "*",
-		"nx.json": "*",
-		".eslintrc.json": "*"
-	},
 	"tasksRunnerOptions": {
 		"default": {
 			"runner": "nx/tasks-runners/default",
@@ -82,5 +75,18 @@
 	"affected": {
 		"defaultBase": "master"
 	},
-	"$schema": "./node_modules/nx/schemas/nx-schema.json"
+	"$schema": "./node_modules/nx/schemas/nx-schema.json",
+	"namedInputs": {
+		"default": ["{projectRoot}/**/*", "sharedGlobals"],
+		"sharedGlobals": ["{workspaceRoot}/workspace.json", "{workspaceRoot}/tsconfig.json", "{workspaceRoot}/tslint.json", "{workspaceRoot}/nx.json"],
+		"production": ["default", "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)", "!{projectRoot}/tsconfig.spec.json", "!{projectRoot}/jest.config.[jt]s"]
+	},
+	"targetDefaults": {
+		"build": {
+			"inputs": ["production", "^production"]
+		},
+		"test": {
+			"inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
+		}
+	}
 }

package.json

@@ -23,18 +23,18 @@
   "devDependencies": {
     "@nativescript/hook": "^2.0.0",
     "@nativescript/nx": "~4.0.0",
-    "@nrwl/cli": "14.5.4",
+    "@nrwl/cli": "15.0.12",
-    "@nrwl/eslint-plugin-nx": "14.5.4",
+    "@nrwl/eslint-plugin-nx": "15.0.12",
-    "@nrwl/jest": "14.5.4",
+    "@nrwl/jest": "15.0.12",
-    "@nrwl/node": "14.5.4",
+    "@nrwl/node": "15.0.12",
-    "@nrwl/workspace": "14.5.4",
+    "@nrwl/workspace": "15.0.12",
     "@nstudio/focus": "^14.3.0",
     "@nstudio/nps-i": "~2.0.0",
     "@prettier/plugin-xml": "^2.2.0",
     "@types/chai": "^4.2.11",
-    "@types/jest": "27.4.1",
+    "@types/jest": "28.1.8",
     "@types/mocha": "^7.0.2",
-    "@types/node": "18.0.0",
+    "@types/node": "18.7.1",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
     "@typescript-eslint/parser": "^5.30.0",
     "chai": "^4.2.0",
@@ -47,7 +47,7 @@
     "eslint-config-prettier": "^8.1.0",
     "gonzales": "^1.0.7",
     "husky": "^8.0.1",
-    "jest": "27.5.1",
+    "jest": "28.1.3",
     "lint-staged": "^13.0.1",
     "mocha": "^8.0.1",
     "mocha-typescript": "^1.1.17",
@@ -61,15 +61,15 @@
     "sass": "^1.45.2",
     "shady-css-parser": "^0.1.0",
     "tree-kill": "^1.2.2",
-    "ts-jest": "27.1.4",
+    "ts-jest": "28.0.8",
-    "ts-node": "10.8.1",
+    "ts-node": "10.9.1",
     "ts-patch": "^2.0.1",
     "tslint": "6.1.3",
     "tslint-to-eslint-config": "^2.13.0",
     "typedoc": "^0.22.17",
-    "typescript": "~4.7.3",
+    "typescript": "4.8.4",
     "zx": "^7.0.5",
-    "nx": "14.5.4"
+    "nx": "15.0.12"
   },
   "lint-staged": {
     "**/*": [

packages/core/project.json

@@ -1,4 +1,5 @@
 {
+	"name": "core",
 	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"sourceRoot": "packages/core",
 	"projectType": "library",
@@ -16,11 +17,11 @@
 				"jestConfig": "packages/core/jest.config.ts",
 				"passWithNoTests": true
 			},
-			"outputs": ["coverage/packages/core"]
+			"outputs": ["{workspaceRoot}/coverage/packages/core"]
 		},
 		"build": {
-			"executor": "@nrwl/workspace:run-commands",
+			"executor": "nx:run-commands",
-			"outputs": ["dist/packages"],
+			"outputs": ["{workspaceRoot}/dist/packages"],
 			"options": {
 				"commands": [
 					"npx rimraf dist/packages/core",
@@ -34,7 +35,7 @@
 			}
 		},
 		"unit": {
-			"executor": "@nrwl/workspace:run-commands",
+			"executor": "nx:run-commands",
 			"options": {
 				"commands": ["../../../node_modules/.bin/tsc -p tsconfig.json && ../../../node_modules/.bin/mocha --config=.mocharc.yml"],
 				"cwd": "packages/core/__tests__",
@@ -42,7 +43,7 @@
 			}
 		},
 		"unit.watch": {
-			"executor": "@nrwl/workspace:run-commands",
+			"executor": "nx:run-commands",
 			"options": {
 				"commands": ["../../../node_modules/.bin/tsc -p tsconfig.json && ../../../node_modules/.bin/mocha --watch --config=.mocharc.yml"],
 				"cwd": "packages/core/__tests__",

packages/core/ui/styling/font.d.ts

@@ -2,37 +2,37 @@
 	public static default: Font;
 
 	public fontFamily: string;
-	public fontStyle: FontStyle;
+	public fontStyle: FontStyleType;
-	public fontWeight: FontWeight;
+	public fontWeight: FontWeightType;
 	public fontSize: number;
 	public fontScale: number;
 
 	public isBold: boolean;
 	public isItalic: boolean;
 
-	constructor(family: string, size: number, style?: FontStyle, weight?: FontWeight, scale?: number);
+	constructor(family: string, size: number, style?: FontStyleType, weight?: FontWeightType, scale?: number);
 
 	public getAndroidTypeface(): any /* android.graphics.Typeface */;
 	public getUIFont(defaultFont: any /* UIFont */): any /* UIFont */;
 
 	public withFontFamily(family: string): Font;
-	public withFontStyle(style: FontStyle): Font;
+	public withFontStyle(style: FontStyleType): Font;
-	public withFontWeight(weight: FontWeight): Font;
+	public withFontWeight(weight: FontWeightType): Font;
 	public withFontSize(size: number): Font;
 	public withFontScale(scale: number): Font;
 
 	public static equals(value1: Font, value2: Font): boolean;
 }
 
-export type FontStyle = 'normal' | 'italic';
+export type FontStyleType = 'normal' | 'italic';
 export namespace FontStyle {
 	export const NORMAL: 'normal';
 	export const ITALIC: 'italic';
 	export function isValid(value: any): boolean;
-	export function parse(value: string): FontStyle;
+	export function parse(value: string): FontStyleType;
 }
 
-export type FontWeight = '100' | '200' | '300' | 'normal' | '400' | '500' | '600' | 'bold' | '700' | '800' | '900' | number;
+export type FontWeightType = '100' | '200' | '300' | 'normal' | '400' | '500' | '600' | 'bold' | '700' | '800' | '900' | number;
 export namespace FontWeight {
 	export const THIN: '100';
 	export const EXTRA_LIGHT: '200';
@@ -44,13 +44,13 @@ export namespace FontWeight {
 	export const EXTRA_BOLD: '800';
 	export const BLACK: '900';
 	export function isValid(value: any): boolean;
-	export function parse(value: string): FontWeight;
+	export function parse(value: string): FontWeightType;
 }
 
 export interface ParsedFont {
-	fontStyle?: FontStyle;
+	fontStyle?: FontStyleType;
 	fontVariant?: string;
-	fontWeight?: FontWeight;
+	fontWeight?: FontWeightType;
 	lineHeight?: string;
 	fontSize?: string;
 	fontFamily?: string;

packages/core/ui/styling/style-properties.ts

@@ -17,6 +17,7 @@ import { CoreTypes } from '../../core-types';
 import { parseBackground } from '../../css/parser';
 import { LinearGradient } from './linear-gradient';
 import { CSSShadow, parseCSSShadow } from './css-shadow';
+import { FontStyleType, FontWeightType } from './font-common';
 
 function equalsCommon(a: CoreTypes.LengthType, b: CoreTypes.LengthType): boolean;
 function equalsCommon(a: CoreTypes.PercentLengthType, b: CoreTypes.PercentLengthType): boolean;
@@ -1362,7 +1363,7 @@ export const fontSizeProperty = new InheritedCssProperty<Style, number>({
 });
 fontSizeProperty.register(Style);
 
-export const fontStyleProperty = new InheritedCssProperty<Style, FontStyle>({
+export const fontStyleProperty = new InheritedCssProperty<Style, FontStyleType>({
 	name: 'fontStyle',
 	cssName: 'font-style',
 	affectsLayout: global.isIOS,
@@ -1378,7 +1379,7 @@ export const fontStyleProperty = new InheritedCssProperty<Style, FontStyle>({
 });
 fontStyleProperty.register(Style);
 
-export const fontWeightProperty = new InheritedCssProperty<Style, FontWeight>({
+export const fontWeightProperty = new InheritedCssProperty<Style, FontWeightType>({
 	name: 'fontWeight',
 	cssName: 'font-weight',
 	affectsLayout: global.isIOS,

packages/core/ui/styling/style/index.ts

@@ -1,6 +1,6 @@
 import { Style as StyleDefinition } from '.';
 import { Color } from '../../../color';
-import { Font, FontStyle, FontWeight } from '../font';
+import { Font, FontStyleType, FontWeightType } from '../font';
 import { Background } from '../background';
 import { ViewBase } from '../../core/view-base';
 import { LinearGradient } from '../../styling/linear-gradient';
@@ -150,8 +150,8 @@ export class Style extends Observable implements StyleDefinition {
 
 	public fontSize: number;
 	public fontFamily: string;
-	public fontStyle: FontStyle;
+	public fontStyle: FontStyleType;
-	public fontWeight: FontWeight;
+	public fontWeight: FontWeightType;
 	public font: string;
 
 	public maxLines: CoreTypes.MaxLinesType;

packages/core/ui/text-base/formatted-string.ts

@@ -5,7 +5,7 @@ import { ObservableArray, ChangedData } from '../../data/observable-array';
 import { AddArrayFromBuilder, AddChildFromBuilder } from '../core/view';
 import { ViewBase } from '../core/view-base';
 import { Color } from '../../color';
-import { FontStyle, FontWeight } from '../styling/font';
+import { FontStyleType, FontWeightType } from '../styling/font';
 import { CoreTypes } from '../../core-types';
 
 export class FormattedString extends ViewBase implements FormattedStringDefinition, AddArrayFromBuilder, AddChildFromBuilder {
@@ -31,17 +31,17 @@ export class FormattedString extends ViewBase implements FormattedStringDefiniti
 		this.style.fontSize = value;
 	}
 
-	get fontStyle(): FontStyle {
+	get fontStyle(): FontStyleType {
 		return this.style.fontStyle;
 	}
-	set fontStyle(value: FontStyle) {
+	set fontStyle(value: FontStyleType) {
 		this.style.fontStyle = value;
 	}
 
-	get fontWeight(): FontWeight {
+	get fontWeight(): FontWeightType {
 		return this.style.fontWeight;
 	}
-	set fontWeight(value: FontWeight) {
+	set fontWeight(value: FontWeightType) {
 		this.style.fontWeight = value;
 	}
 

packages/core/ui/text-base/span.ts

@@ -1,7 +1,7 @@
 import { Color } from '../../color';
 import { Span as SpanDefinition } from './span';
 import { ViewBase } from '../core/view-base';
-import { FontStyle, FontWeight } from '../styling/font';
+import { FontStyleType, FontWeightType } from '../styling/font';
 import { CoreTypes } from '../../core-types';
 import { EventData } from '../../data/observable';
 import { isNullOrUndefined, isString } from '../../utils/types';
@@ -26,18 +26,18 @@ export class Span extends ViewBase implements SpanDefinition {
 	}
 
 	// Italic
-	get fontStyle(): FontStyle {
+	get fontStyle(): FontStyleType {
 		return this.style.fontStyle;
 	}
-	set fontStyle(value: FontStyle) {
+	set fontStyle(value: FontStyleType) {
 		this.style.fontStyle = value;
 	}
 
 	// Bold
-	get fontWeight(): FontWeight {
+	get fontWeight(): FontWeightType {
 		return this.style.fontWeight;
 	}
-	set fontWeight(value: FontWeight) {
+	set fontWeight(value: FontWeightType) {
 		this.style.fontWeight = value;
 	}
 

packages/types-android/project.json

@@ -1,23 +1,18 @@
 {
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"name": "types-android",
-  "sourceRoot": "packages/types-android/src",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
+	"sourceRoot": "packages/types-android/src",
-  "generators": {},
+	"projectType": "library",
-  "targets": {
+	"generators": {},
-    "build": {
+	"targets": {
-      "executor": "@nrwl/workspace:run-commands",
+		"build": {
-      "outputs": [
+			"executor": "nx:run-commands",
-        "dist/packages"
+			"outputs": ["{workspaceRoot}/dist/packages"],
-      ],
+			"options": {
-      "options": {
+				"commands": ["mkdir -p ../../dist/packages/types-android", "cp -R src/* ../../dist/packages/types-android", "cp package.json *.md ../../dist/packages/types-android"],
-        "commands": [
+				"cwd": "packages/types-android",
-          "mkdir -p ../../dist/packages/types-android",
+				"parallel": false
-          "cp -R src/* ../../dist/packages/types-android",
+			}
-          "cp package.json *.md ../../dist/packages/types-android"
+		}
-        ],
+	}
-        "cwd": "packages/types-android",
-        "parallel": false
-      }
-    }
-  }
 }

packages/types-ios/project.json

@@ -1,24 +1,17 @@
 {
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"name": "types-ios",
-  "sourceRoot": "packages/types-ios/src",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
+	"sourceRoot": "packages/types-ios/src",
-  "generators": {},
+	"projectType": "library",
-  "targets": {
+	"generators": {},
-    "build": {
+	"targets": {
-      "executor": "@nrwl/workspace:run-commands",
+		"build": {
-      "outputs": [
+			"executor": "nx:run-commands",
-        "dist/packages"
+			"outputs": ["{workspaceRoot}/dist/packages"],
-      ],
+			"options": {
-      "options": {
+				"commands": ["./tools/scripts/typings-gen.sh latest", "mkdir -p dist/packages/types-ios", "cp -R packages/types-ios/src/* dist/packages/types-ios", "cp packages/types-ios/package.json dist/packages/types-ios", "cp packages/types-ios/README.md dist/packages/types-ios/README.md"],
-        "commands": [
+				"parallel": false
-          "./tools/scripts/typings-gen.sh latest",
+			}
-          "mkdir -p dist/packages/types-ios",
+		}
-          "cp -R packages/types-ios/src/* dist/packages/types-ios",
+	}
-          "cp packages/types-ios/package.json dist/packages/types-ios",
-          "cp packages/types-ios/README.md dist/packages/types-ios/README.md"
-        ],
-        "parallel": false
-      }
-    }
-  }
 }

packages/types-minimal/project.json

@@ -1,24 +1,17 @@
 {
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"name": "types-minimal",
-  "sourceRoot": "packages/types-minimal/src",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
+	"sourceRoot": "packages/types-minimal/src",
-  "generators": {},
+	"projectType": "library",
-  "targets": {
+	"generators": {},
-    "build": {
+	"targets": {
-      "executor": "@nrwl/workspace:run-commands",
+		"build": {
-      "outputs": [
+			"executor": "nx:run-commands",
-        "dist/packages"
+			"outputs": ["{workspaceRoot}/dist/packages"],
-      ],
+			"options": {
-      "options": {
+				"commands": ["./tools/scripts/typings-minimal-copy.sh", "mkdir -p dist/packages/types-minimal", "cp -R packages/types-minimal/src/* dist/packages/types-minimal", "cp packages/types-minimal/package.json dist/packages/types-minimal", "cp packages/types-minimal/README.md dist/packages/types-minimal/README.md"],
-        "commands": [
+				"parallel": false
-          "./tools/scripts/typings-minimal-copy.sh",
+			}
-          "mkdir -p dist/packages/types-minimal",
+		}
-          "cp -R packages/types-minimal/src/* dist/packages/types-minimal",
+	}
-          "cp packages/types-minimal/package.json dist/packages/types-minimal",
-          "cp packages/types-minimal/README.md dist/packages/types-minimal/README.md"
-        ],
-        "parallel": false
-      }
-    }
-  }
 }

packages/types/project.json

@@ -1,12 +1,13 @@
 {
+	"name": "types",
 	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"sourceRoot": "packages/types",
 	"projectType": "library",
 	"generators": {},
 	"targets": {
 		"build": {
-			"executor": "@nrwl/workspace:run-commands",
+			"executor": "nx:run-commands",
-			"outputs": ["dist/packages"],
+			"outputs": ["{workspaceRoot}/dist/packages"],
 			"options": {
 				"commands": ["mkdir -p ../../dist/packages/types", "cp -R * ../../dist/packages/types"],
 				"cwd": "packages/types",

packages/ui-mobile-base/project.json

@@ -1,19 +1,17 @@
 {
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"name": "ui-mobile-base",
-  "sourceRoot": "packages/ui-mobile-base",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
+	"sourceRoot": "packages/ui-mobile-base",
-  "generators": {},
+	"projectType": "library",
-  "targets": {
+	"generators": {},
-    "build": {
+	"targets": {
-      "executor": "@nrwl/workspace:run-commands",
+		"build": {
-      "options": {
+			"executor": "nx:run-commands",
-        "commands": [
+			"options": {
-          "./build.sh",
+				"commands": ["./build.sh", "cp -R dist/package/platforms/* ../../packages/core/platforms"],
-          "cp -R dist/package/platforms/* ../../packages/core/platforms"
+				"cwd": "packages/ui-mobile-base",
-        ],
+				"parallel": false
-        "cwd": "packages/ui-mobile-base",
+			}
-        "parallel": false
+		}
-      }
+	}
-    }
-  }
 }

packages/webpack5/package.json

@@ -67,7 +67,7 @@
 		"jest-matcher-utils": "29.1.2",
 		"nativescript-vue-template-compiler": "2.9.3",
 		"ts-jest": "29.0.3",
-		"typescript": "4.7.4"
+		"typescript": "4.8.4"
 	},
 	"peerDependencies": {
 		"nativescript-vue-template-compiler": "^2.8.1"

packages/webpack5/project.json

@@ -1,4 +1,5 @@
 {
+	"name": "webpack5",
 	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"sourceRoot": "packages/webpack5",
 	"projectType": "library",
@@ -11,8 +12,8 @@
 			}
 		},
 		"build": {
-			"executor": "@nrwl/workspace:run-commands",
+			"executor": "nx:run-commands",
-			"outputs": ["dist/packages"],
+			"outputs": ["{workspaceRoot}/dist/packages"],
 			"options": {
 				"command": "npx zx ./tools/scripts/pack-webpack5.mjs"
 			}

packages/webpack5/src/transformers/NativeClass/index.ts

@@ -8,8 +8,9 @@ import ts from 'typescript';
 export default function (ctx: ts.TransformationContext) {
 	function isNativeClassExtension(node: ts.ClassDeclaration) {
 		return (
-			node.decorators &&
+			ts.canHaveDecorators(node) &&
-			node.decorators.filter((d) => {
+			ts.getDecorators(node) &&
+			ts.getDecorators(node).filter((d) => {
 				const fullText = d.getFullText().trim();
 				return fullText.indexOf('@NativeClass') > -1;
 			}).length > 0
@@ -24,14 +25,14 @@ export default function (ctx: ts.TransformationContext) {
 
 	function createHelper(node: ts.Node) {
 		// we remove the decorator for now!
-		return ts.createIdentifier(
+		return ts.factory.createIdentifier(
 			ts
 				.transpileModule(
 					node.getText().replace(/@NativeClass(\((.|\n)*?\))?/gm, ''),
 					{
 						compilerOptions: {
 							noEmitHelpers: true,
-							module: ts.ModuleKind.CommonJS,
+							module: ts.ModuleKind.ESNext,
 							target: ts.ScriptTarget.ES5,
 						},
 					}
@@ -44,7 +45,7 @@ export default function (ctx: ts.TransformationContext) {
 	}
 
 	return (source: ts.SourceFile) =>
-		ts.updateSourceFileNode(
+		ts.factory.updateSourceFile(
 			source,
 			ts.visitNodes(source.statements, visitNode)
 		);

tools/scripts/project.json

@@ -1,12 +1,13 @@
 {
+	"name": "core-api-docs",
 	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"sourceRoot": "tools/scripts",
 	"projectType": "library",
 	"generators": {},
 	"targets": {
 		"build": {
-			"executor": "@nrwl/workspace:run-commands",
+			"executor": "nx:run-commands",
-			"outputs": ["tools/scripts/dist"],
+			"outputs": ["{projectRoot}/dist"],
 			"options": {
 				"commands": ["./build-docs.sh"],
 				"cwd": "tools/scripts",