feat(visionos): Vision Pro support (#10392)

packages/webpack5/src/configuration/base.ts

@@ -391,7 +391,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 
 	config.plugin('PlatformSuffixPlugin').use(PlatformSuffixPlugin, [
 		{
-			platform,
+			extensions: platform === 'visionos' ? [platform, 'ios'] : [platform],
 		},
 	]);
 
@@ -442,8 +442,11 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 			__UI_USE_EXTERNAL_RENDERER__: false,
 			__ANDROID__: platform === 'android',
 			__IOS__: platform === 'ios',
+			__VISIONOS__: platform === 'visionos',
 			/* for compat only */ 'global.isAndroid': platform === 'android',
-			/* for compat only */ 'global.isIOS': platform === 'ios',
+			/* for compat only */ 'global.isIOS':
+				platform === 'ios' || platform === 'visionos',
+			/* for compat only */ 'global.isVisionOS': platform === 'visionos',
 			process: 'global.process',
 
 			// enable testID when using --env.e2e

packages/webpack5/src/helpers/platform.ts

@@ -7,6 +7,7 @@ import { env } from '../';
 
 import AndroidPlatform from '../platforms/android';
 import iOSPlatform from '../platforms/ios';
+import visionOSPlatform from '../platforms/visionos';
 
 export interface INativeScriptPlatform {
 	getEntryPath?(): string;
@@ -21,6 +22,7 @@ const platforms: {
 } = {
 	android: AndroidPlatform,
 	ios: iOSPlatform,
+	visionos: visionOSPlatform,
 };
 
 /**
@@ -60,6 +62,10 @@ export function getPlatformName(): Platform {
 		return 'ios';
 	}
 
+	if (env?.visionos) {
+		return 'visionos';
+	}
+
 	// support custom platforms
 	if (env?.platform) {
 		if (platforms[env.platform]) {
@@ -80,7 +86,7 @@ export function getPlatformName(): Platform {
 
 		Available platforms: ${Object.keys(platforms).join(', ')}
 
-		Use --env.platform=<platform> or --env.android, --env.ios to specify the target platform.
+		Use --env.platform=<platform> or --env.android, --env.ios, --env.visionos to specify the target platform.
 
 		Defaulting to "ios".
 	`

packages/webpack5/src/platforms/visionos.ts

@@ -0,0 +1,20 @@
+import { basename } from "path";
+
+import { INativeScriptPlatform } from "../helpers/platform";
+import { getProjectRootPath } from "../helpers/project";
+
+function sanitizeName(appName: string): string {
+	return appName.split("").filter((c) =>
+		/[a-zA-Z0-9]/.test(c)
+	).join("");
+}
+function getDistPath() {
+	const appName = sanitizeName(basename(getProjectRootPath()));
+	return `platforms/visionos/${appName}/app`;
+}
+
+const visionOSPlatform: INativeScriptPlatform = {
+	getDistPath,
+}
+
+export default visionOSPlatform;

packages/webpack5/src/plugins/PlatformSuffixPlugin.ts

@@ -4,8 +4,7 @@ import { existsSync } from 'fs';
 const id = 'PlatformSuffixPlugin';
 
 interface PlatformSuffixPluginOptions {
-	platform: string;
-	// extensions: string[] | (() => string[])
+	extensions: Array<string>;
 }
 
 /**
@@ -20,11 +19,10 @@ interface PlatformSuffixPluginOptions {
  *
  */
 export class PlatformSuffixPlugin {
-	private readonly platform: string;
-	// private readonly extensions: string[]
+	private readonly extensions: string[];
 
 	constructor(options: PlatformSuffixPluginOptions) {
-		this.platform = options.platform;
+		this.extensions = options.extensions;
 
 		// if (typeof options.extensions === "function") {
 		// 	this.extensions = options.extensions()
@@ -34,7 +32,7 @@ export class PlatformSuffixPlugin {
 	}
 
 	apply(compiler: any) {
-		const platformRE = new RegExp(`\\.${this.platform}\\.`);
+		const platformRE = new RegExp(`\\.${this.extensions.join('|')}\\.`);
 
 		// require.context
 		compiler.hooks.contextModuleFactory.tap(id, (cmf) => {
@@ -78,47 +76,49 @@ export class PlatformSuffixPlugin {
 				resolver.hooks.normalResolve.tapAsync(
 					id,
 					(request_, resolveContext, callback) => {
-						const { path, request } = request_;
-						const ext = request && extname(request);
-						const platformExt = ext ? `.${this.platform}${ext}` : '';
+						for (const platform of this.extensions) {
+							const { path, request } = request_;
+							const ext = request && extname(request);
+							const platformExt = ext ? `.${platform}${ext}` : '';
 
-						if (path && request && ext && !request.includes(platformExt)) {
-							const platformRequest = request.replace(ext, platformExt);
-							const extPath = resolve(path, platformRequest);
+							if (path && request && ext && !request.includes(platformExt)) {
+								const platformRequest = request.replace(ext, platformExt);
+								const extPath = resolve(path, platformRequest);
 
-							// console.log({
-							// 	path,
-							// 	request,
-							// 	ext,
-							// 	extPath
-							// })
+								// console.log({
+								// 	path,
+								// 	request,
+								// 	ext,
+								// 	extPath
+								// })
 
-							// if a file with the same + a platform suffix exists
-							// we want to resolve that file instead
-							if (existsSync(extPath)) {
-								const message = `resolving "${request}" to "${platformRequest}"`;
-								const hook = resolver.ensureHook('normalResolve');
-								console.log(message);
+								// if a file with the same + a platform suffix exists
+								// we want to resolve that file instead
+								if (existsSync(extPath)) {
+									const message = `resolving "${request}" to "${platformRequest}"`;
+									const hook = resolver.ensureHook('normalResolve');
+									console.log(message);
 
-								// here we are creating a new resolve object and replacing the path
-								// with the .<platform>.<ext> suffix
-								const obj = {
-									...request_,
-									path: resolver.join(path, platformRequest),
-									relativePath:
-										request_.relativePath &&
-										resolver.join(request_.relativePath, platformRequest),
-									request: undefined,
-								};
+									// here we are creating a new resolve object and replacing the path
+									// with the .<platform>.<ext> suffix
+									const obj = {
+										...request_,
+										path: resolver.join(path, platformRequest),
+										relativePath:
+											request_.relativePath &&
+											resolver.join(request_.relativePath, platformRequest),
+										request: undefined,
+									};
 
-								// we call to the actual resolver to do the resolving of this new file
-								return resolver.doResolve(
-									hook,
-									obj,
-									message,
-									resolveContext,
-									callback
-								);
+									// we call to the actual resolver to do the resolving of this new file
+									return resolver.doResolve(
+										hook,
+										obj,
+										message,
+										resolveContext,
+										callback
+									);
+								}
 							}
 						}
 						callback();