feat: visionOS support (#5783)

Co-Authored-By: Nathan Walker <[email protected]>
NativeScript · Apr 3, 2024 · 6a6a832 · 6a6a832
1 parent 280b10d
commit 6a6a832
Show file tree

Hide file tree

Showing 52 changed files with 1,578 additions and 855 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
   <br>
 </h1>
 
-<h4 align="center">The NativeScript CLI lets you create, build, and deploy <a href="https://docs.nativescript.org/" target="_blank">NativeScript</a>-based apps on iOS and Android devices.</h4>
+<h4 align="center">The NativeScript CLI lets you create, build, and deploy <a href="https://docs.nativescript.org/" target="_blank">NativeScript</a> apps.</h4>
   </a>
 </h4>
 
@@ -18,30 +18,51 @@
 
 Get it using: `npm install -g nativescript`
 
-* [What is NativeScript](#what-is-nativescript "Quick overview of NativeScript, the JavaScript framework for cross-platform development of native iOS and Android apps")
-* [How the NativeScript CLI works](#how-the-nativescript-cli-works "How the CLI works in more detail")
-* [Supported Platforms](#supported-platforms "The mobile platforms you can target with NativeScript")
-* [System Requirements](#system-requirements "The hardware and software requirements for setting up and working with the NativeScript CLI")
-* [Installation](#installation "How to configure and install the NativeScript CLI")
-    * [Install the NativeScript CLI](#install-the-nativescript-cli)
-    * [Configure Proxy Usage](#configure-proxy-settings)
-* [Quick Start](#quick-start "Get started with the NativeScript CLI")
-    * [The Commands](#the-commands)
-    * [Create Project](#create-project)
-    * [Develop Your Project](#develop-your-project)
-    * [Build Your Project](#build-your-project)
-    * [Run Your Project](#run-your-project)
-* [Extending the CLI](#extending-the-cli)
-* [Troubleshooting](#troubleshooting)
-* [How to Contribute](#how-to-contribute)
-* [How to Build](#how-to-build)
-* [Get Help](#get-help)
-* [License](#license)
+- [What is NativeScript](#what-is-nativescript)
+- [How the NativeScript CLI works](#how-the-nativescript-cli-works)
+- [Supported Platforms](#supported-platforms)
+- [System Requirements](#system-requirements)
+- [Installation](#installation)
+  - [Install the NativeScript CLI](#install-the-nativescript-cli)
+  - [Configure Proxy Settings](#configure-proxy-settings)
+    - [Set Proxy Settings](#set-proxy-settings)
+      - [Attributes](#attributes)
+      - [Options](#options)
+      - [Limitations](#limitations)
+    - [Display Current Proxy Settings](#display-current-proxy-settings)
+    - [Clear Proxy Settings](#clear-proxy-settings)
+- [Quick Start](#quick-start)
+  - [The Commands](#the-commands)
+  - [Create Project](#create-project)
+  - [Develop Your Project](#develop-your-project)
+    - [Development with NativeScript](#development-with-nativescript)
+    - [Development in `app`](#development-in-app)
+    - [Development in `platforms`](#development-in-platforms)
+    - [Modifying Configuration Files](#modifying-configuration-files)
+    - [Modifying Entitlements File (iOS only)](#modifying-entitlements-file-ios-only)
+  - [Build Your Project](#build-your-project)
+  - [Run Your Project](#run-your-project)
+- [Extending the CLI](#extending-the-cli)
+- [Troubleshooting](#troubleshooting)
+- [How to Contribute](#how-to-contribute)
+- [How to Build](#how-to-build)
+- [Get Help](#get-help)
+- [License](#license)
 
 What is NativeScript
 ===
 
-NativeScript is a cross-platform JavaScript framework that lets you develop native iOS and Android apps from a single code base. The framework provides JavaScript access to the native APIs, user interface, and rendering engines of iOS and Android. By using JavaScript or TypeScript, you can create one project that builds into an iOS or Android app with completely native user experience.
+NativeScript provides platform APIs directly to the JavaScript runtime (_with strong types_) for a rich TypeScript development experience. 
+
+Some popular use cases:
+
+- Building Web, iOS, Android and Vision Pro apps with a shared codebase (aka, cross platform apps)
+- Building native platform apps with portable JavaScript skills
+- Augmenting JavaScript projects with platform API capabilities
+- AndroidTV and Watch development
+- watchOS development
+- Learning native platforms through JavaScript understanding
+- Exploring platform API documentation by trying APIs [directly from a web browser](https://preview.nativescript.org/) without requiring a platform development machine setup.
 
 To learn more about NativeScript, you can check the following resources:
 

diff --git a/lib/bootstrap.ts b/lib/bootstrap.ts
@@ -180,24 +180,32 @@ injector.requireCommand("platform|update", "./commands/update-platform");
 injector.requireCommand("run|*all", "./commands/run");
 injector.requireCommand("run|ios", "./commands/run");
 injector.requireCommand("run|android", "./commands/run");
+injector.requireCommand("run|vision", "./commands/run");
+injector.requireCommand("run|visionos", "./commands/run");
 injector.requireCommand("typings", "./commands/typings");
 
 injector.requireCommand("preview", "./commands/preview");
 
 injector.requireCommand("debug|ios", "./commands/debug");
 injector.requireCommand("debug|android", "./commands/debug");
+injector.requireCommand("debug|vision", "./commands/debug");
+injector.requireCommand("debug|visionos", "./commands/debug");
 injector.requireCommand("fonts", "./commands/fonts");
 
 injector.requireCommand("prepare", "./commands/prepare");
 injector.requireCommand("build|ios", "./commands/build");
 injector.requireCommand("build|android", "./commands/build");
+injector.requireCommand("build|vision", "./commands/build");
+injector.requireCommand("build|visionos", "./commands/build");
 injector.requireCommand("deploy", "./commands/deploy");
 
 injector.require("testExecutionService", "./services/test-execution-service");
 injector.requireCommand("dev-test|android", "./commands/test");
 injector.requireCommand("dev-test|ios", "./commands/test");
 injector.requireCommand("test|android", "./commands/test");
 injector.requireCommand("test|ios", "./commands/test");
+// injector.requireCommand("test|vision", "./commands/test");
+// injector.requireCommand("test|visionos", "./commands/test");
 injector.requireCommand("test|init", "./commands/test-init");
 injector.requireCommand("dev-generate-help", "./commands/generate-help");
 

diff --git a/lib/commands/build.ts b/lib/commands/build.ts
@@ -108,7 +108,7 @@ export class BuildIosCommand extends BuildCommandBase implements ICommand {
 		$platformValidationService: IPlatformValidationService,
 		$logger: ILogger,
 		$buildDataService: IBuildDataService,
-		private $migrateController: IMigrateController
+		protected $migrateController: IMigrateController
 	) {
 		super(
 			$options,
@@ -221,3 +221,41 @@ export class BuildAndroidCommand extends BuildCommandBase implements ICommand {
 }
 
 injector.registerCommand("build|android", BuildAndroidCommand);
+
+export class BuildVisionOsCommand extends BuildIosCommand implements ICommand {
+	constructor(
+		protected $options: IOptions,
+		$errors: IErrors,
+		$projectData: IProjectData,
+		$platformsDataService: IPlatformsDataService,
+		$devicePlatformsConstants: Mobile.IDevicePlatformsConstants,
+		$buildController: IBuildController,
+		$platformValidationService: IPlatformValidationService,
+		$logger: ILogger,
+		$buildDataService: IBuildDataService,
+		protected $migrateController: IMigrateController
+	) {
+		super(
+			$options,
+			$errors,
+			$projectData,
+			$platformsDataService,
+			$devicePlatformsConstants,
+			$buildController,
+			$platformValidationService,
+			$logger,
+			$buildDataService,
+			$migrateController
+		);
+	}
+
+	public async canExecute(args: string[]): Promise<boolean> {
+		this.$errors.fail(
+			'Building for "visionOS" platform is not supported via the CLI. Please open the project in Xcode and build it from there.'
+		);
+		return false;
+	}
+}
+
+injector.registerCommand("build|vision", BuildVisionOsCommand);
+injector.registerCommand("build|visionos", BuildVisionOsCommand);
diff --git a/lib/commands/create-project.ts b/lib/commands/create-project.ts
@@ -15,6 +15,8 @@ export class CreateProjectCommand implements ICommand {
 	private static BlankTemplateDescription = "A blank app";
 	private static BlankTsTemplateKey = "Blank Typescript";
 	private static BlankTsTemplateDescription = "A blank typescript app";
+	private static BlankVisionTemplateKey = "visionOS";
+	private static BlankVisionTemplateDescription = "A visionOS app";
 	private static HelloWorldTemplateKey = "Hello World";
 	private static HelloWorldTemplateDescription = "A Hello World app";
 	private static DrawerTemplateKey = "SideDrawer";
@@ -58,15 +60,43 @@ export class CreateProjectCommand implements ICommand {
 
 		let projectName = args[0];
 		let selectedTemplate: string;
-		if (this.$options.js) {
-			selectedTemplate = constants.JAVASCRIPT_NAME;
-		} else if (this.$options.vue && this.$options.tsc) {
+		if (
+			this.$options["vision-ng"] ||
+			(this.$options.vision && this.$options.ng)
+		) {
+			selectedTemplate = constants.RESERVED_TEMPLATE_NAMES["vision-ng"];
+		} else if (
+			this.$options["vision-react"] ||
+			(this.$options.vision && this.$options.react)
+		) {
+			selectedTemplate = constants.RESERVED_TEMPLATE_NAMES["vision-react"];
+		} else if (this.$options["vision-solid"]) {
+			// note: we don't have solid templates or --solid
+			selectedTemplate = constants.RESERVED_TEMPLATE_NAMES["vision-solid"];
+		} else if (
+			this.$options["vision-svelte"] ||
+			(this.$options.vision && this.$options.svelte)
+		) {
+			selectedTemplate = constants.RESERVED_TEMPLATE_NAMES["vision-svelte"];
+		} else if (
+			this.$options["vision-vue"] ||
+			(this.$options.vision && (this.$options.vue || this.$options.vuejs))
+		) {
+			selectedTemplate = constants.RESERVED_TEMPLATE_NAMES["vision-vue"];
+		} else if (
+			(this.$options.vue || this.$options.vuejs) &&
+			this.$options.tsc
+		) {
 			selectedTemplate = "@nativescript/template-blank-vue-ts";
+		} else if (this.$options.vision) {
+			selectedTemplate = constants.RESERVED_TEMPLATE_NAMES["vision"];
+		} else if (this.$options.js) {
+			selectedTemplate = constants.JAVASCRIPT_NAME;
 		} else if (this.$options.tsc) {
 			selectedTemplate = constants.TYPESCRIPT_NAME;
 		} else if (this.$options.ng) {
 			selectedTemplate = constants.ANGULAR_NAME;
-		} else if (this.$options.vue) {
+		} else if (this.$options.vue || this.$options.vuejs) {
 			selectedTemplate = constants.VUE_NAME;
 		} else if (this.$options.react) {
 			selectedTemplate = constants.REACT_NAME;
@@ -262,6 +292,11 @@ can skip this prompt next time using the --template option, or the --ng, --react
 				value: "@nativescript/template-tab-navigation-ts",
 				description: CreateProjectCommand.TabsTemplateDescription,
 			},
+			{
+				key: CreateProjectCommand.BlankVisionTemplateKey,
+				value: "@nativescript/template-hello-world-ts-vision",
+				description: CreateProjectCommand.BlankVisionTemplateDescription,
+			},
 		];
 
 		return templates;
@@ -284,6 +319,11 @@ can skip this prompt next time using the --template option, or the --ng, --react
 				value: "@nativescript/template-tab-navigation-ng",
 				description: CreateProjectCommand.TabsTemplateDescription,
 			},
+			{
+				key: CreateProjectCommand.BlankVisionTemplateKey,
+				value: "@nativescript/template-hello-world-ng-vision",
+				description: CreateProjectCommand.BlankVisionTemplateDescription,
+			},
 		];
 
 		return templates;
@@ -296,6 +336,11 @@ can skip this prompt next time using the --template option, or the --ng, --react
 				value: constants.RESERVED_TEMPLATE_NAMES.react,
 				description: CreateProjectCommand.HelloWorldTemplateDescription,
 			},
+			{
+				key: CreateProjectCommand.BlankVisionTemplateKey,
+				value: "@nativescript/template-blank-react-vision",
+				description: CreateProjectCommand.BlankVisionTemplateDescription,
+			},
 		];
 
 		return templates;
@@ -308,6 +353,11 @@ can skip this prompt next time using the --template option, or the --ng, --react
 				value: constants.RESERVED_TEMPLATE_NAMES.svelte,
 				description: CreateProjectCommand.HelloWorldTemplateDescription,
 			},
+			{
+				key: CreateProjectCommand.BlankVisionTemplateKey,
+				value: "@nativescript/template-blank-svelte-vision",
+				description: CreateProjectCommand.BlankVisionTemplateDescription,
+			},
 		];
 
 		return templates;
@@ -335,6 +385,11 @@ can skip this prompt next time using the --template option, or the --ng, --react
 				value: "@nativescript/template-tab-navigation-vue",
 				description: CreateProjectCommand.TabsTemplateDescription,
 			},
+			{
+				key: CreateProjectCommand.BlankVisionTemplateKey,
+				value: "@nativescript/template-blank-vue-vision",
+				description: CreateProjectCommand.BlankVisionTemplateDescription,
+			},
 		];
 
 		return templates;
@@ -346,6 +401,33 @@ can skip this prompt next time using the --template option, or the --ng, --react
 
 		const greyDollarSign = color.grey("$");
 		this.$logger.clearScreen();
+		let runDebugNotes: Array<string> = [];
+		if (
+			this.$options.vision ||
+			this.$options["vision-ng"] ||
+			this.$options["vision-react"] ||
+			this.$options["vision-solid"] ||
+			this.$options["vision-svelte"] ||
+			this.$options["vision-vue"]
+		) {
+			runDebugNotes = [
+				`Run the project on Vision Pro with:`,
+				"",
+				`  ${greyDollarSign} ${color.green("ns run visionos --no-hmr")}`,
+			];
+		} else {
+			runDebugNotes = [
+				`Run the project on multiple devices:`,
+				"",
+				`  ${greyDollarSign} ${color.green("ns run ios")}`,
+				`  ${greyDollarSign} ${color.green("ns run android")}`,
+				"",
+				"Debug the project with Chrome DevTools:",
+				"",
+				`  ${greyDollarSign} ${color.green("ns debug ios")}`,
+				`  ${greyDollarSign} ${color.green("ns debug android")}`,
+			];
+		}
 		this.$logger.info(
 			[
 				[
@@ -358,15 +440,7 @@ can skip this prompt next time using the --template option, or the --ng, --react
 					`cd ${relativePath}`
 				)} and then:`,
 				"",
-				`Run the project on multiple devices:`,
-				"",
-				`  ${greyDollarSign} ${color.green("ns run ios")}`,
-				`  ${greyDollarSign} ${color.green("ns run android")}`,
-				"",
-				"Debug the project with Chrome DevTools:",
-				"",
-				`  ${greyDollarSign} ${color.green("ns debug ios")}`,
-				`  ${greyDollarSign} ${color.green("ns debug android")}`,
+				...runDebugNotes,
 				``,
 				`For more options consult the docs or run ${color.green("ns --help")}`,
 				"",