move implementation to user space

Author: thymikee

packages/community-cli-plugin/src/utils/__tests__/metroPlatformResolver-test.js

@@ -29,15 +29,7 @@ export type ConfigLoadingContext = $ReadOnly<{
 /**
  * Get the config options to override based on RN CLI inputs.
  */
-function getOverrideConfig(
-  ctx: ConfigLoadingContext,
-  projectConfig: {
-    filepath: string,
-    isEmpty: boolean,
-    config: (ConfigT => Promise<ConfigT>) | (ConfigT => ConfigT) | InputConfigT,
-    ...
-  },
-): InputConfigT {
+function getOverrideConfig(ctx: ConfigLoadingContext): InputConfigT {
   const outOfTreePlatforms = Object.keys(ctx.platforms).filter(
     platform => ctx.platforms[platform].npmPackageName,
   );
@@ -55,16 +47,6 @@ function getOverrideConfig(
         {},
       ),
     );
-
-    outOfTreePlatforms.forEach(platform => {
-      if (typeof projectConfig.config !== 'function') {
-        resolver.sourceExts =
-          projectConfig.config.resolver?.sourceExts?.flatMap(ext => [
-            `${platform}.${ext}`,
-            ext,
-          ]);
-      }
-    });
   }
 
   return {
@@ -97,9 +79,10 @@ export default async function loadMetroConfig(
   ctx: ConfigLoadingContext,
   options: YargArguments = {},
 ): Promise<ConfigT> {
+  const overrideConfig = getOverrideConfig(ctx);
+
   const cwd = ctx.root;
   const projectConfig = await resolveConfig(options.config, cwd);
-  const overrideConfig = getOverrideConfig(ctx, projectConfig);
 
   if (projectConfig.isEmpty) {
     throw new CLIError(`No Metro config found in ${cwd}`);

packages/community-cli-plugin/src/utils/loadMetroConfig.js

@@ -13,16 +13,9 @@ import type {CustomResolver} from 'metro-resolver';
 
 /**
  * This is an implementation of a metro resolveRequest option which will remap react-native imports
- * to different npm packages based on the platform requested. This allows a single metro instance/config
+ * to different npm packages based on the platform requested.  This allows a single metro instance/config
  * to produce bundles for multiple out of tree platforms at a time.
  *
- * This resolver also supports custom `variant` option, which is intended to be used for resolving
- * different variants of the same platform, like visionOS or tvOS based on iOS.
- *
- * Ex:
- * - `?resolve.variant=visionos`
- * - `?resolve.variant=tvos`
- *
  * @param platformImplementations
  * A map of platform to npm package that implements that platform
  *
@@ -36,19 +29,13 @@ export function reactNativePlatformResolver(platformImplementations: {
   [platform: string]: string,
 }): CustomResolver {
   return (context, moduleName, platform) => {
-    let platformOrVariant: string | null =
-      // $FlowFixMe
-      context.customResolverOptions.variant || platform;
     let modifiedModuleName = moduleName;
-    if (
-      platformOrVariant != null &&
-      platformImplementations[platformOrVariant]
-    ) {
+    if (platform != null && platformImplementations[platform]) {
       if (moduleName === 'react-native') {
-        modifiedModuleName = platformImplementations[platformOrVariant];
+        modifiedModuleName = platformImplementations[platform];
       } else if (moduleName.startsWith('react-native/')) {
         modifiedModuleName = `${
-          platformImplementations[platformOrVariant]
+          platformImplementations[platform]
         }/${modifiedModuleName.slice('react-native/'.length)}`;
       }
     }

packages/community-cli-plugin/src/utils/metroPlatformResolver.js

@@ -308,9 +308,6 @@ + (NSURL *)jsBundleURLForBundleRoot:(NSString *)bundleRoot
   BOOL lazy = enableDev;
   NSArray<NSURLQueryItem *> *queryItems = @[
     [[NSURLQueryItem alloc] initWithName:@"platform" value:RCTPlatformName],
-#if TARGET_OS_VISION
-    [[NSURLQueryItem alloc] initWithName:@"resolver.variant" value:RCTPlatformVariant],
-#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/RCTBundleURLProvider.mm

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

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

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

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

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

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

@@ -13,6 +13,28 @@ const {getDefaultConfig} = require('@react-native/metro-config');
 const {mergeConfig} = require('metro-config');
 const path = require('path');
 
+// todo: extract to package
+const PlatformResolver = (config = {}) => {
+  const platformExtension = config.platformExtension ?? 'visionos';
+  const platformName =
+    config.platformName ?? '@callstack/react-native-visionos';
+
+  return (context, moduleName, platform) => {
+    let modifiedModuleName = moduleName;
+    if (platformExtension != null && platformName) {
+      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.
@@ -36,6 +58,10 @@ const config = {
     extraNodeModules: {
       'react-native': path.resolve(__dirname, '../react-native'),
     },
+    resolveRequest: PlatformResolver(),
+    sourceExts: getDefaultConfig(__dirname).resolver.sourceExts?.flatMap(
+      ext => [`visionos.${ext}`, ext],
+    ),
   },
 };