create out-of-tree-platforms package and bring back resolver options

Author: thymikee

packages/out-of-tree-platforms/README.md

@@ -0,0 +1,19 @@
+# @callstack/out-of-tree-platforms
+
+[![Version][version-badge]][package]
+
+Utilities for Out of Tree (OOT) platforms.
+
+## `getPlatformResolver`
+
+```js
+getPlatformResolver(options: ResolverConfig): CustomResolver
+```
+
+### options
+
+```js
+type ResolverConfig = {
+  platformImplementations: {[platform: string]: string},
+};
+```

packages/out-of-tree-platforms/index.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import type {CustomResolver} from 'metro-resolver';
+
+type ResolverConfig = {
+  platformNameMap: {[platform: string]: string},
+};
+
+const getPlatformResolver = (config: ResolverConfig): CustomResolver => {
+  return (context, moduleName, platform) => {
+    const platformExtension = context.customResolverOptions?.platformExtension;
+    let modifiedModuleName = moduleName;
+
+    if (
+      typeof platformExtension === 'string' &&
+      config.platformNameMap?.[platformExtension]
+    ) {
+      const packageName = config.platformNameMap[platformExtension];
+      if (moduleName === 'react-native') {
+        modifiedModuleName = packageName;
+      } else if (moduleName.startsWith('react-native/')) {
+        modifiedModuleName = `${packageName}/${modifiedModuleName.slice(
+          'react-native/'.length,
+        )}`;
+      }
+    }
+
+    return context.resolveRequest(context, modifiedModuleName, platform);
+  };
+};
+
+module.exports = {getPlatformResolver};

packages/out-of-tree-platforms/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@callstack/out-of-tree-platforms",
+  "version": "0.74.0",
+  "description": "Utils for React Native out of tree platforms.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react-native.git",
+    "directory": "packages/out-of-tree-platforms"
+  },
+  "homepage": "https://github.com/facebook/react-native/tree/HEAD/packages/out-of-tree-platforms#readme",
+  "keywords": [
+    "out-of-tree",
+    "react-native"
+  ],
+  "bugs": "https://github.com/facebook/react-native/issues",
+  "engines": {
+    "node": ">=18"
+  },
+  "exports": "./index.js",
+  "devDependencies": {
+    "metro-resolver": "^0.80.0"
+  }
+}

packages/react-native/React/Base/RCTBundleURLProvider.mm

@@ -308,6 +308,9 @@ + (NSURL *)jsBundleURLForBundleRoot:(NSString *)bundleRoot
   BOOL lazy = enableDev;
   NSArray<NSURLQueryItem *> *queryItems = @[
     [[NSURLQueryItem alloc] initWithName:@"platform" value:RCTPlatformName],
+#if TARGET_OS_VISION    
+    [[NSURLQueryItem alloc] initWithName:@"resolver.platformExtension" value:RCTPlatformExtension],
+#endif
     [[NSURLQueryItem alloc] initWithName:@"dev" value:enableDev ? @"true" : @"false"],
     [[NSURLQueryItem alloc] initWithName:@"lazy" value:lazy ? @"true" : @"false"],
     [[NSURLQueryItem alloc] initWithName:@"minify" value:enableMinification ? @"true" : @"false"],

packages/react-native/React/Base/RCTConstants.h

@@ -8,6 +8,9 @@
 #import <React/RCTDefines.h>
 
 RCT_EXTERN NSString *const RCTPlatformName;
+#if TARGET_OS_VISION
+RCT_EXTERN NSString *const RCTPlatformExtension;
+#endif
 
 RCT_EXTERN NSString *const RCTUserInterfaceStyleDidChangeNotification;
 RCT_EXTERN NSString *const RCTUserInterfaceStyleDidChangeNotificationTraitCollectionKey;

packages/react-native/React/Base/RCTConstants.m

@@ -8,6 +8,9 @@
 #import "RCTConstants.h"
 
 NSString *const RCTPlatformName = @"ios";
+#if TARGET_OS_VISION
+NSString *const RCTPlatformExtension = @"visionos";
+#endif
 
 NSString *const RCTUserInterfaceStyleDidChangeNotification = @"RCTUserInterfaceStyleDidChangeNotification";
 NSString *const RCTUserInterfaceStyleDidChangeNotificationTraitCollectionKey = @"traitCollection";

packages/react-native/react-native.config.js

@@ -26,6 +26,11 @@ module.exports = {
     startCommand,
   ],
   platforms: {
+    visionos: {
+      npmPackageName: '@callstack/react-native-visionos',
+      projectConfig: ios.projectConfig,
+      dependencyConfig: ios.dependencyConfig,
+    },
     ios: {
       projectConfig: ios.projectConfig,
       dependencyConfig: ios.dependencyConfig,

packages/rn-tester/metro.config.js

@@ -9,29 +9,11 @@
 
 'use strict';
 
+const {getPlatformResolver} = require('@callstack/out-of-tree-platforms');
 const {getDefaultConfig} = require('@react-native/metro-config');
 const {mergeConfig} = require('metro-config');
 const path = require('path');
 
-// todo: extract to package
-const PlatformResolver = (config = {}) => {
-  const platformName =
-    config.platformName ?? '@callstack/react-native-visionos';
-
-  return (context, moduleName, platform) => {
-    let modifiedModuleName = moduleName;
-    if (moduleName === 'react-native') {
-      modifiedModuleName = platformName;
-    } else if (moduleName.startsWith('react-native/')) {
-      modifiedModuleName = `${platformName}/${modifiedModuleName.slice(
-        'react-native/'.length,
-      )}`;
-    }
-
-    return context.resolveRequest(context, modifiedModuleName, platform);
-  };
-};
-
 /**
  * This cli config is needed for development purposes, e.g. for running
  * integration tests during local development or on CI services.
@@ -55,7 +37,9 @@ const config = {
     extraNodeModules: {
       'react-native': path.resolve(__dirname, '../react-native'),
     },
-    resolveRequest: PlatformResolver(),
+    resolveRequest: getPlatformResolver({
+      platformNameMap: [{visionos: '@callstack/react-native-vision'}],
+    }),
     sourceExts: getDefaultConfig(__dirname).resolver.sourceExts?.flatMap(
       ext => [`visionos.${ext}`, ext],
     ),