5/n Allow CKComponents to embed Fabric surfaces

Summary:
Changelog: [Fabric][iOS] Allow CKComponents to embed Fabric surfaces too.

Previously RCTSurfaceHostingComponent, a CKComponent, could only initialize the legacy RCTSurface. Now it can initialize RCTFabricSurface too, when a RCTSurfacePresenter is passed in.

Reviewed By: RSNara

Differential Revision: D35163595

fbshipit-source-id: e11a9334b0282e0728a38cc1c96de48a694e9e3d

BUCK

@@ -1362,6 +1362,7 @@ rn_xplat_cxx_library2(
     visibility = ["PUBLIC"],
     deps = [
         "//fbobjc/Libraries/MobileUI/ComponentKit:ComponentKit",
+        "//xplat/js/react-native-github:RCTFabric",
         "//xplat/js/react-native-github:RCTLinking",
         "//xplat/js/react-native-github:RCTPushNotification",
         "//xplat/js/react-native-github:ReactInternal",
@@ -1397,6 +1398,7 @@ rn_xplat_cxx_library2(
     deps = [
         ":RCTSurfaceHostingComponent",
         "//fbobjc/Libraries/MobileUI/ComponentKit:ComponentKit",
+        "//xplat/js/react-native-github:RCTFabric",
         "//xplat/js/react-native-github:RCTLinking",
         "//xplat/js/react-native-github:RCTPushNotification",
         "//xplat/js/react-native-github:ReactInternal",

Libraries/SurfaceBackedComponent/RCTSurfaceBackedComponent.h

@@ -8,6 +8,7 @@
 #import <ComponentKit/CKComponent.h>
 #import <ComponentKit/CKCompositeComponent.h>
 #import <RCTSurfaceHostingComponent/RCTSurfaceHostingComponentOptions.h>
+#import <React/RCTSurfacePresenter.h>
 
 @class RCTBridge;
 
@@ -19,6 +20,7 @@
 @interface RCTSurfaceBackedComponent : CKCompositeComponent
 
 + (instancetype)newWithBridge:(RCTBridge *)bridge
+             surfacePresenter:(RCTSurfacePresenter *)surfacePresenter
                    moduleName:(NSString *)moduleName
                    properties:(NSDictionary *)properties
                       options:(RCTSurfaceHostingComponentOptions)options;

Libraries/SurfaceBackedComponent/RCTSurfaceBackedComponent.mm

@@ -13,6 +13,7 @@
 #import <ComponentKit/CKOverlayLayoutComponent.h>
 #import <RCTSurfaceHostingComponent/RCTSurfaceHostingComponent.h>
 #import <React/RCTSurface.h>
+#import <React/RCTFabricSurface.h>
 
 #import "RCTSurfaceBackedComponentState.h"
 
@@ -24,6 +25,7 @@
 }
 
 + (instancetype)newWithBridge:(RCTBridge *)bridge
+             surfacePresenter:(RCTSurfacePresenter *)surfacePresenter
                    moduleName:(NSString *)moduleName
                    properties:(NSDictionary *)properties
                       options:(RCTSurfaceHostingComponentOptions)options
@@ -32,11 +34,21 @@
 
   RCTSurfaceBackedComponentState *state = scope.state();
 
+  // JavaScript entrypoints expects "fabric" key for Fabric surfaces
+  NSMutableDictionary *adjustedProperties = [[NSMutableDictionary alloc] initWithDictionary:properties];
+  adjustedProperties[@"fabric"] = surfacePresenter ? @YES : nil;
+
   if (state.surface == nil || ![state.surface.moduleName isEqualToString:moduleName]) {
-    id<RCTSurfaceProtocol> surface = [[RCTSurface alloc] initWithBridge:bridge
+    id<RCTSurfaceProtocol> surface;
+    if (surfacePresenter) {
+      surface = [[RCTFabricSurface alloc] initWithSurfacePresenter:surfacePresenter
+                                              moduleName:moduleName
+                                              initialProperties:adjustedProperties];
+    } else {
+      surface = [[RCTSurface alloc] initWithBridge:bridge
                                 moduleName:moduleName
-                         initialProperties:properties];
-    
+                         initialProperties:adjustedProperties];
+    }
     [surface start];
 
     state = [RCTSurfaceBackedComponentState newWithSurface:surface];
@@ -44,8 +56,8 @@
     CKComponentScope::replaceState(scope, state);
   }
   else {
-    if (![state.surface.properties isEqualToDictionary:properties]) {
-      state.surface.properties = properties;
+    if (![state.surface.properties isEqualToDictionary:adjustedProperties]) {
+      state.surface.properties = adjustedProperties;
     }
   }
 

Libraries/SurfaceHostingComponent/RCTSurfaceHostingComponent.mm

@@ -11,6 +11,7 @@
 #import <UIKit/UIKit.h>
 
 #import <ComponentKit/CKComponentSubclass.h>
+#import <React/RCTFabricSurface.h>
 #import <React/RCTSurface.h>
 #import <React/RCTSurfaceView.h>
 
@@ -77,10 +78,20 @@
   // Just in case of the very first building pass, we give React Native a chance
   // to prepare its internals for coming synchronous measuring.
   if ([_surface isKindOfClass:[RCTSurface class]]) {
+    // Legacy Pre-Fabric Surface
     [(RCTSurface *)_surface synchronouslyWaitForStage:RCTSurfaceStageSurfaceDidInitialLayout
-                              timeout:_options.synchronousLayoutingTimeout];
+                                      timeout:_options.synchronousLayoutingTimeout];
+  } else if ([_surface isKindOfClass:[RCTFabricSurface class]]) {
+    // Fabric Surface
+    // Hack: Increase timeout because RCTFabricSurface stage will be RCTSurfaceStageSurfaceDidInitialLayout
+    // before mounting has finished, which can cause sizeThatFitsMinimumSize to return the wrong value.
+    // Safe hack because timeout length can be increased without making the component seem slower.
+    // However if timeout length is less than the time to mount a surface, the size may be incorrect.
+    // TODO (T115399546) Allow RCTFabricSurface synchronouslyWaitFor to wait for mounting completion stage
+    NSTimeInterval timeout = 20;
+    [(RCTFabricSurface *)_surface synchronouslyWaitFor:timeout];
   }
-  
+
   CGSize fittingSize = CGSizeZero;
   if (_surface.stage & RCTSurfaceStageSurfaceDidInitialLayout) {
     fittingSize = [_surface sizeThatFitsMinimumSize:constrainedSize.min