Refactor iOS native view (#149)

---------

Co-authored-by: William Candillon <wcandillon@gmail.com>

apps/example/ios/Podfile.lock

@@ -1299,28 +1299,6 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.34.0):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Codegen
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-RCTImage
-    - React-rendererdebug
-    - React-utils
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
   - SocketRocket (0.7.0)
   - Yoga (0.0.0)
 
@@ -1387,7 +1365,6 @@ DEPENDENCIES:
   - ReactTestApp-Resources (from `..`)
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
-  - RNScreens (from `../../../node_modules/react-native-screens`)
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1516,8 +1493,6 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-gesture-handler"
   RNReanimated:
     :path: "../../../node_modules/react-native-reanimated"
-  RNScreens:
-    :path: "../../../node_modules/react-native-screens"
   Yoga:
     :path: "../../../node_modules/react-native/ReactCommon/yoga"
 
@@ -1553,7 +1528,7 @@ SPEC CHECKSUMS:
   React-logger: 29fa3e048f5f67fe396bc08af7606426d9bd7b5d
   React-Mapbuffer: bf56147c9775491e53122a94c423ac201417e326
   react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
-  react-native-wgpu: c4f460bd3733e3be91943859c504e2e461994050
+  react-native-wgpu: f174e542dc510ff82b22709d8c1bec85b0f33d8f
   React-nativeconfig: 9f223cd321823afdecf59ed00861ab2d69ee0fc1
   React-NativeModulesApple: ff7efaff7098639db5631236cfd91d60abff04c0
   React-perflogger: 32ed45d9cee02cf6639acae34251590dccd30994
@@ -1582,7 +1557,6 @@ SPEC CHECKSUMS:
   ReactTestApp-Resources: 857244f3a23f2b3157b364fa06cf3e8866deff9c
   RNGestureHandler: 67e78f16895947f7e57ab91e75e914d3e9ef7239
   RNReanimated: 4c72fc2c0f4c6a9c36932e653cd68e4521b6c4ac
-  RNScreens: aa943ad421c3ced3ef5a47ede02b0cbfc43a012e
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: ae3c32c514802d30f687a04a6a35b348506d411f
 

packages/webgpu/apple/MetalView.h

@@ -7,4 +7,7 @@
 
 @property NSNumber *contextId;
 
+- (void)configure;
+- (void)update;
+
 @end

packages/webgpu/apple/MetalView.mm

@@ -1,7 +1,9 @@
 #import "MetalView.h"
-#import "SurfaceUtils.h"
 #import "webgpu_cpp.h"
+
+#ifndef RCT_NEW_ARCH_ENABLED
 #import <React/RCTViewManager.h>
+#endif //RCT_NEW_ARCH_ENABLED
 
 @implementation MetalView {
   BOOL _isConfigured;
@@ -11,30 +13,46 @@ + (Class)layerClass {
   return [CAMetalLayer class];
 }
 
+- (void)configure
+{
+  auto size = self.frame.size;
+  std::shared_ptr<rnwgpu::RNWebGPUManager> manager = [WebGPUModule getManager];
+  void *nativeSurface = (__bridge void *)self.layer;
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto gpu = manager->_gpu;
+  auto surface = manager->_platformContext->makeSurface(
+      gpu, nativeSurface, size.width, size.height);
+  registry.getSurfaceInfoOrCreate([_contextId intValue], gpu, size.width, size.height)
+      ->switchToOnscreen(nativeSurface, surface);
+}
+
+- (void)update
+{
+  auto size = self.frame.size;
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  registry.getSurfaceInfo([_contextId intValue])->resize(size.width, size.height);
+}
+
+- (void)dealloc
+{
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  // Remove the surface info from the registry
+  registry.removeSurfaceInfo([_contextId intValue]);
+}
+
+#ifndef RCT_NEW_ARCH_ENABLED
 // Paper only method
 // TODO: this method is wrong, it appears to call configureSurface instead of
 // updateSurface sometimes
 - (void)reactSetFrame:(CGRect)frame {
   [super reactSetFrame:frame];
   if (!_isConfigured) {
-    [SurfaceUtils configureSurface:self.layer
-                              size:self.frame.size
-                         contextId:[_contextId intValue]];
+    [self configure];
     _isConfigured = YES;
   } else {
-    [SurfaceUtils updateSurface:[_contextId intValue] size:self.frame.size];
-  }
-}
-
-- (void)willMoveToSuperview:(UIView *)newSuperview {
-  [super willMoveToSuperview:newSuperview];
-
-  if (newSuperview == nil) {
-    // The view is being removed from its superview
-    // Add your cleanup code here
-    [SurfaceUtils cleanupSurface:[_contextId intValue]];
-    _isConfigured = NO;
+    [self update];
   }
 }
+#endif //RCT_NEW_ARCH_ENABLED
 
 @end

packages/webgpu/apple/WebGPUView.h

@@ -8,9 +8,6 @@
 NS_ASSUME_NONNULL_BEGIN
 
 @interface WebGPUView : RCTViewComponentView
-+ (void)registerMetalView:(MetalView *)metalView
-            withContextId:(NSNumber *)contextId;
-+ (bool)isContextRegisterd:(NSNumber *)contextId;
 @end
 
 NS_ASSUME_NONNULL_END

packages/webgpu/apple/WebGPUView.mm

@@ -4,80 +4,63 @@
 #import <react/renderer/components/RNWgpuViewSpec/EventEmitters.h>
 #import <react/renderer/components/RNWgpuViewSpec/Props.h>
 #import <react/renderer/components/RNWgpuViewSpec/RCTComponentViewHelpers.h>
+#import <react/renderer/components/RNWgpuViewSpec/ComponentDescriptors.h>
 
 #import "MetalView.h"
 #import "RCTFabricComponentsPlugins.h"
 #import "Utils.h"
-#import "WebGPUModule.h"
-#import "WebGPUViewComponentDescriptor.h"
 
 using namespace facebook::react;
 
-@interface WebGPUView () <RCTWebGPUViewViewProtocol>
-
-@end
-
-@implementation WebGPUView {
-  NSNumber *_contextId;
-}
-
-static NSMutableDictionary<NSNumber *, MetalView *> *metalViewRegistry =
-    [NSMutableDictionary new];
+@implementation WebGPUView
 
 + (ComponentDescriptorProvider)componentDescriptorProvider {
   return concreteComponentDescriptorProvider<WebGPUViewComponentDescriptor>();
 }
 
-+ (void)registerMetalView:(MetalView *)metalView
-            withContextId:(NSNumber *)contextId {
-  metalViewRegistry[contextId] = metalView;
-}
-
-+ (bool)isContextRegisterd:(NSNumber *)contextId {
-  return metalViewRegistry[contextId] != nil;
-}
-
-- (instancetype)initWithFrame:(CGRect)frame {
-  if (self = [super initWithFrame:frame]) {
-    static const auto defaultProps = std::make_shared<const WebGPUViewProps>();
-    _props = defaultProps;
-  }
-
-  return self;
-}
-
 - (void)prepareForRecycle {
   [super prepareForRecycle];
+  /*
+    It's important to destroy the Metal Layer before releasing a view
+    to the recycled pool to prevent displaying outdated content from
+    the last usage in the new context.
+  */
   self.contentView = nil;
-  if ([metalViewRegistry objectForKey:_contextId] != nil) {
-    [metalViewRegistry removeObjectForKey:_contextId];
+}
+
+- (MetalView *)getContentView
+{
+  if (!self.contentView) {
+    self.contentView = [MetalView new];
   }
+  return (MetalView *)self.contentView;
 }
 
-- (void)updateProps:(const facebook::react::Props::Shared &)props
-           oldProps:(const facebook::react::Props::Shared &)oldProps {
+- (void)updateProps:(const Props::Shared &)props
+           oldProps:(const Props::Shared &)oldProps {
   const auto &oldViewProps =
       *std::static_pointer_cast<const WebGPUViewProps>(_props);
   const auto &newViewProps =
       *std::static_pointer_cast<const WebGPUViewProps>(props);
 
   if (newViewProps.contextId != oldViewProps.contextId) {
-    _contextId = [[NSNumber alloc] initWithInt:newViewProps.contextId];
+    /*
+      The context is set only once during mounting the component
+      and never changes because it isn't available for users to modify.
+    */
+    MetalView *metalView = [MetalView new];
+    self.contentView = metalView;
+    [metalView setContextId:@(newViewProps.contextId)];
+    [metalView configure];
   }
 
   [super updateProps:props oldProps:oldProps];
 }
 
-- (void)updateLayoutMetrics:
-            (const facebook::react::LayoutMetrics &)layoutMetrics
-           oldLayoutMetrics:
-               (const facebook::react::LayoutMetrics &)oldLayoutMetrics {
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics {
   [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
-  if (!self.contentView) {
-    const auto &props =
-        *std::static_pointer_cast<WebGPUViewProps const>(_props);
-    self.contentView = metalViewRegistry[@(props.contextId)];
-  }
+  [(MetalView *)self.contentView update];
 }
 
 Class<RCTComponentViewProtocol> WebGPUViewCls(void) { return WebGPUView.class; }

packages/webgpu/apple/WebGPUViewManager.mm

@@ -1,8 +1,8 @@
+#import <React/RCTUIManager.h>
+#import <React/RCTViewManager.h>
 #import "MetalView.h"
 #import "RCTBridge.h"
 #import "WebGPUModule.h"
-#import <React/RCTUIManager.h>
-#import <React/RCTViewManager.h>
 
 @interface WebGPUViewManager : RCTViewManager
 @end