Create custom resolver and utils package for out-of-tree platforms (#32)

* rename react-native package to @callstack/react-native-visionos

* wip: metro setup for other platform

* fix(flow): add .ios.visionos as support platform

* fix some flow errors

* fix flow

* revert Platform.select change

* revert KeyboardAvoidingView change

* fix type

* change kBundlePath to ios.visionos

* fix: remove redundant isVisionOS

* use custom resolver options to read platform for OOT

* fix types

* remove formatting

* add/remove platform checks

* document variant behavior

* use visionOS Keyboard mock

* use visionOS KeyboardAvoidingView mock

* use visionOS InputAccessoryView mock

* test: add test for metroPlatformResolver

* move implementation to user space

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

* revert flow changes

* revert sourceExts changes

* update links

* add comments

* fix visionos typo

* adjust lockfile

* revert loadMetroConfig change

* remove podfile lock

* revert scripts changes

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,46 @@
+/**
+ * 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},
+};
+
+/**
+ * Creates a custom Metro resolver that maps platform extensions to package names.
+ * To be used in app's `metro.config.js` as `resolver.resolveRequest`.
+ */
+const getPlatformResolver = (config: ResolverConfig): CustomResolver => {
+  return (context, moduleName, platform) => {
+    // `customResolverOptions` is populated through `?resolver.platformExtension` query params
+    // in the jsBundleURLForBundleRoot method of the react-native/React/Base/RCTBundleURLProvider.mm
+    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/callstack/react-native-visionos.git",
+    "directory": "packages/out-of-tree-platforms"
+  },
+  "homepage": "https://github.com/callstack/react-native-visionos/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/rn-tester/metro.config.js

@@ -9,6 +9,7 @@
 
 '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');
@@ -36,6 +37,9 @@ const config = {
     extraNodeModules: {
       'react-native': path.resolve(__dirname, '../react-native'),
     },
+    resolveRequest: getPlatformResolver({
+      platformNameMap: [{visionos: '@callstack/react-native-visionos'}],
+    }),
   },
 };