From 3987a5f83212fbf2567d46afabe35eb817ececf5 Mon Sep 17 00:00:00 2001
From: Riccardo Cipolleschi <cipolleschi@meta.com>
Date: Tue, 12 Nov 2024 03:20:10 -0800
Subject: [PATCH] Let lib maintainer be explicit with component2Class mapping
 (#47520)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47520

Right now, when a 3p library needs to register a component in the component system, we have to crawl the library to try and get the mappng, best effort.

With this approach, we are enriching the `codegenConfig` property to allow library developers to define the mapping themselves.

For example:
```json
//...
"codegenConfig": {
    //..
    "ios": {
      "component2ClassMapping": {
        "RNTMyNativeView": "RNTMyNativeViewComponentView"
      }
    }
  },
```
means that the JS component `RNTMyNativeView` will be mapped to the `RNTMyNativeViewComponentView` class.

This also work for local apps, and it warns the users about what libraries are using the deprecated approach, so they can open an issue or a PR to those libraries.

## Changelog:
[iOS][Added] - Allow 3p developers to specify the association between components and classes in Fabric

Reviewed By: dmytrorykun

Differential Revision: D65666061
---
 .../react-native-test-library/package.json    |  5 ++++
 .../codegen/generate-artifacts-executor.js    | 23 ++++++++++++++++++-
 packages/rn-tester/package.json               |  5 ++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-test-library/package.json b/packages/react-native-test-library/package.json
index 054eb559809e88..c378871432ff36 100644
--- a/packages/react-native-test-library/package.json
+++ b/packages/react-native-test-library/package.json
@@ -44,6 +44,11 @@
     "includesGeneratedCode": true,
     "android": {
       "javaPackageName": "com.reactnative.osslibraryexample"
+    },
+    "ios": {
+      "componentProvider": {
+        "SampleNativeComponent": "RCTSampleNativeComponentComponentView"
+      }
     }
   }
 }
diff --git a/packages/react-native/scripts/codegen/generate-artifacts-executor.js b/packages/react-native/scripts/codegen/generate-artifacts-executor.js
index bd2f24b5c41559..3e79c45ad685c2 100644
--- a/packages/react-native/scripts/codegen/generate-artifacts-executor.js
+++ b/packages/react-native/scripts/codegen/generate-artifacts-executor.js
@@ -646,16 +646,37 @@ function generateRCTThirdPartyComponents(libraries, outputDir) {
     if (isReactNativeCoreLibrary(config.name) || config.type === 'modules') {
       return;
     }
+
     const libraryName = JSON.parse(
       fs.readFileSync(path.join(libraryPath, 'package.json')),
     ).name;
+    if (config.ios?.componentProvider) {
+      componentsInLibraries[libraryName] = Object.keys(
+        config.ios?.componentProvider,
+      ).map(componentName => {
+        return {
+          componentName,
+          className: config.ios?.componentProvider[componentName],
+        };
+      });
+      return;
+    }
     codegenLog(`Crawling ${libraryName} library for components`);
     // crawl all files and subdirectories for file with the ".mm" extension
     const files = findFilesWithExtension(libraryPath, '.mm');
 
-    componentsInLibraries[libraryName] = files
+    const componentsMapping = files
       .flatMap(file => findRCTComponentViewProtocolClass(file))
       .filter(Boolean);
+
+    if (componentsMapping.length !== 0) {
+      codegenLog(
+        `[DEPRECATED] ${libraryName} should add the 'ios.componentProvider' property in their codegenConfig`,
+        true,
+      );
+    }
+
+    componentsInLibraries[libraryName] = componentsMapping;
   });
 
   const thirdPartyComponentsMapping = Object.keys(componentsInLibraries)
diff --git a/packages/rn-tester/package.json b/packages/rn-tester/package.json
index 51ff079c14ab0e..48fa5f0de263b9 100644
--- a/packages/rn-tester/package.json
+++ b/packages/rn-tester/package.json
@@ -43,6 +43,11 @@
     "jsSrcsDir": ".",
     "android": {
       "javaPackageName": "com.facebook.fbreact.specs"
+    },
+    "ios": {
+      "componentProvider": {
+        "RNTMyNativeView": "RNTMyNativeViewComponentView"
+      }
     }
   },
   "devDependencies": {