[FEAT] Add doc to simplify podspecs for Native Modules and Native Com…

…ponents (facebook#3321) * [FEAT] Add doc to simplify podspecs for Native Modules and Native Components * fix: apply suggested changes I Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes II Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes III Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes IV Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes V Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes VI Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com>
reactnativecn · Sep 14, 2022 · 791d9d1 · 791d9d1
1 parent 0468011
commit 791d9d1
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 94 deletions.
diff --git a/docs/new-architecture-library-ios.md b/docs/new-architecture-library-ios.md
@@ -16,32 +16,20 @@ The New Architecture makes use of CocoaPods.
 
 ### Add Folly and Other Dependencies
 
-We'll need to ensure Folly is configured properly in any projects that consume your library. With CocoaPods, we can use the `compiler_flags` and `dependency` properties to set it up.
-
-Add these to your `Pod::Spec.new` block:
-
-```ruby
-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+The New Architecture requires some specific dependencies to work properly. You can set up your podspec to automatically install the required dependencies by modifying the `.podspec` file. In your `Pod::Spec.new` block, add the following line:
 
+```diff
 Pod::Spec.new do |s|
   # ...
-  s.compiler_flags  = folly_compiler_flags
-
-  s.pod_target_xcconfig    = {
-    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\""
-  }
-
-  s.dependency "React-Core"
-  s.dependency "React-RCTFabric" # This is for Fabric Native Component
-  s.dependency "React-Codegen"
-  s.dependency "RCT-Folly"
-  s.dependency "RCTRequired"
-  s.dependency "RCTTypeSafety"
-  s.dependency "ReactCommon/turbomodule/core"
++  install_modules_dependencies(s)
   # ...
 end
 ```
 
+At this [link](/~https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L139-L144), you can find the documentation of the `install_modules_dependencies` function.
+
+If you need to explicitly know which `folly_flags` React Native is using, you can query them using the [`folly_flag`](/~https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L135) function.
+
 ## 2. Extend or Implement the Code-generated Native Interfaces
 
 The JavaScript spec for your native module or component will be used to generate native interface code for each supported platform (i.e., Android and iOS). These native interface files will be generated when a React Native application that depends on your library is built.

diff --git a/docs/the-new-architecture/backward-compatibility-fabric-components.md b/docs/the-new-architecture/backward-compatibility-fabric-components.md
@@ -40,7 +40,9 @@ While the last step is the same for all the platforms, the first two steps are d
 
 The Apple platform installs Fabric Native Components using [Cocoapods](https://cocoapods.org) as a dependency manager.
 
-Every Fabric Native Component defines a `podspec` that looks like this:
+If you are already using the [`install_module_dependencies`](/~https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoiding them when it is not enabled.
+
+Otherwise, your Fabric Native Component's `podspec` should look like this:
 
 ```ruby
 require "json"
@@ -83,32 +85,50 @@ Pod::Spec.new do |s|
 end
 ```
 
-The **goal** is to avoid installing the dependencies when the app is prepared for the Old Architecture.
+You should install the extra dependencies when the New Architecture is enabled, and avoid installing them when it's not.
+To achieve this, you can use the [`install_modules_dependencies`](/~https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145). Update the `.podspec` file as it follows:
 
-When we want to install the dependencies, we use the following commands depending on the architecture:
+```diff
+require "json"
 
-```sh
-# For the Old Architecture, we use:
-pod install
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
-# For the New Architecture, we use:
-RCT_NEW_ARCH_ENABLED=1 pod install
-```
+- folly_version = '2021.07.22.00'
+- folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
-Therefore, we can leverage this environment variable in the `podspec` to exclude the settings and the dependencies that are related to the New Architecture:
+Pod::Spec.new do |s|
+  # Default fields for a valid podspec
+  s.name            = "<FC Name>"
+  s.version         = package["version"]
+  s.summary         = package["description"]
+  s.description     = package["description"]
+  s.homepage        = package["homepage"]
+  s.license         = package["license"]
+  s.platforms       = { :ios => "11.0" }
+  s.author          = package["author"]
+  s.source          = { :git => package["repository"], :tag => "#{s.version}" }
 
-```diff
-+ if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
-    # The following lines are required by the New Architecture.
-    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-    # ... other dependencies ...
-    s.dependency "ReactCommon/turbomodule/core"
-+ end
+  s.source_files    = "ios/**/*.{h,m,mm,swift}"
+  # React Native Core dependency
++  install_modules_dependencies(s)
+-  s.dependency "React-Core"
+-  # The following lines are required by the New Architecture.
+-  s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+-  s.pod_target_xcconfig    = {
+-      "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+-      "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+-      "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+-  }
+-
+-  s.dependency "React-RCTFabric"
+-  s.dependency "React-Codegen"
+-  s.dependency "RCT-Folly", folly_version
+-  s.dependency "RCTRequired"
+-  s.dependency "RCTTypeSafety"
+-  s.dependency "ReactCommon/turbomodule/core"
 end
 ```
 
-This `if` guard prevents the dependencies from being installed when the environment variable is not set.
-
 ### Android
 
 To create a Native Component that can work with both architectures, you need to configure Gradle to choose which files need to be compiled depending on the chosen architecture. This can be achieved by using **different source sets** in the Gradle configuration.

diff --git a/docs/the-new-architecture/backward-compatibility-turbomodules.md b/docs/the-new-architecture/backward-compatibility-turbomodules.md
@@ -40,7 +40,9 @@ While the last step is the same for all the platforms, the first two steps are d
 
 The Apple platform installs Turbo Native Modules using [Cocoapods](https://cocoapods.org) as a dependency manager.
 
-Every Turbo Native Module defines a `podspec` that looks like this:
+If you are already using the [`install_module_dependencies`](/~https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoids them when it is not enabled.
+
+Otherwise, your Turbo Native Module's `podspec` should look like this:
 
 ```ruby
 require "json"
@@ -82,32 +84,49 @@ Pod::Spec.new do |s|
 end
 ```
 
-The **goal** is to avoid installing the dependencies when the app is prepared for the Old Architecture.
+You should install the extra dependencies when the New Architecture is enabled, and avoid installing them when it's not.
+To achieve this, you can use the [`install_modules_dependencies`](/~https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145). Update the `.podspec` file as it follows:
 
-When we want to install the dependencies we use the following commands, depending on the architecture:
+```diff
+require "json"
 
-```sh
-# For the Old Architecture, we use:
-pod install
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
-# For the New Architecture, we use:
-RCT_NEW_ARCH_ENABLED=1 pod install
-```
+-folly_version = '2021.07.22.00'
+-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
-Therefore, we can leverage this environment variable in the `podspec` to exclude the settings and the dependencies, that are related to the New Architecture:
+Pod::Spec.new do |s|
+  # Default fields for a valid podspec
+  s.name            = "<TM Name>"
+  s.version         = package["version"]
+  s.summary         = package["description"]
+  s.description     = package["description"]
+  s.homepage        = package["homepage"]
+  s.license         = package["license"]
+  s.platforms       = { :ios => "11.0" }
+  s.author          = package["author"]
+  s.source          = { :git => package["repository"], :tag => "#{s.version}" }
 
-```diff
-+ if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
-    # The following lines are required by the New Architecture.
-    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-    # ... other dependencies ...
-    s.dependency "ReactCommon/turbomodule/core"
-+ end
+  s.source_files    = "ios/**/*.{h,m,mm,swift}"
+  # React Native Core dependency
++  install_modules_dependencies(s)
+-  s.dependency "React-Core"
+-
+-  # The following lines are required by the New Architecture.
+-  s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+-  s.pod_target_xcconfig    = {
+-      "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+-      "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+-  }
+-
+-  s.dependency "React-Codegen"
+-  s.dependency "RCT-Folly", folly_version
+-  s.dependency "RCTRequired"
+-  s.dependency "RCTTypeSafety"
+-  s.dependency "ReactCommon/turbomodule/core"
 end
 ```
 
-This `if` guard prevents the dependencies from being installed when the environment variable is not set.
-
 ### Android
 
 To create a module that can work with both architectures, you need to configure Gradle to choose which files need to be compiled depending on the chosen architecture. This can be achieved by using **different source sets** in the Gradle configuration.

diff --git a/docs/the-new-architecture/pillars-fabric-components.md b/docs/the-new-architecture/pillars-fabric-components.md
@@ -192,9 +192,6 @@ require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
-folly_version = '2021.07.22.00'
-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
-
 Pod::Spec.new do |s|
   s.name            = "rtn-centered-text"
   s.version         = package["version"]
@@ -208,27 +205,15 @@ Pod::Spec.new do |s|
 
   s.source_files    = "ios/**/*.{h,m,mm,swift}"
 
-  s.dependency "React-Core"
-
-  s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-  s.pod_target_xcconfig    = {
-    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-    "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
-    "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-  }
-
-  s.dependency "React-RCTFabric"
-  s.dependency "React-Codegen"
-  s.dependency "RCT-Folly", folly_version
-  s.dependency "RCTRequired"
-  s.dependency "RCTTypeSafety"
-  s.dependency "ReactCommon/turbomodule/core"
+  install_modules_dependencies(s)
 end
 ```
 
 The `.podspec` file has to be a sibling of the `package.json` file, and its name is the one we set in the `package.json`'s `name` property: `rtn-centered-text`.
 
-The first part of the file prepares some variables we will use throughout the rest of it. Then, there is a section that contains some information used to configure the pod, like its name, version, and description. Finally, we have a set of dependencies that the New Architecture requires.
+The first part of the file prepares some variables that we use throughout the file. Then, there is a section that contains some information used to configure the pod, like its name, version, and description.
+
+All the requirements for the New Architecture have been encapsulated in the [`install_modules_dependencies`](/~https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145). It takes care of installing the proper dependencies based on which architecture is currently enabled. It also automatically installs the `React-Core` dependency in the old architecture.
 
 ### Android: `build.gradle`, `AndroidManifest.xml`, a `ReactPackage` class
 

diff --git a/docs/the-new-architecture/pillars-turbomodule.md b/docs/the-new-architecture/pillars-turbomodule.md
@@ -182,9 +182,6 @@ require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
-folly_version = '2021.07.22.00'
-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
-
 Pod::Spec.new do |s|
   s.name            = "rtn-calculator"
   s.version         = package["version"]
@@ -198,26 +195,15 @@ Pod::Spec.new do |s|
 
   s.source_files    = "ios/**/*.{h,m,mm,swift}"
 
-  s.dependency "React-Core"
-
-  s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-  s.pod_target_xcconfig    = {
-    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-    "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
-    "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-  }
-
-  s.dependency "React-Codegen"
-  s.dependency "RCT-Folly", folly_version
-  s.dependency "RCTRequired"
-  s.dependency "RCTTypeSafety"
-  s.dependency "ReactCommon/turbomodule/core"
+  install_modules_dependencies(s)
 end
 ```
 
 The `.podspec` file has to be a sibling of the `package.json` file, and its name is the one we set in the `package.json`'s `name` property: `rtn-calculator`.
 
-The first part of the file prepares some variables we will use throughout the rest of it. Then, there is a section that contains some information used to configure the pod, like its name, version, and description. Finally, we have a set of dependencies that are required by the New Architecture.
+The first part of the file prepares some variables that we use throughout the file. Then, there is a section that contains some information used to configure the pod, like its name, version, and description.
+
+All the requirements for the New Architecture have been encapsulated in the [`install_modules_dependencies`](/~https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145). It takes care of installing the proper dependencies based on which architecture is currently enabled. It also automatically installs the `React-Core` dependency in the old architecture.
 
 ### Android: `build.gradle`, `AndroidManifest.xml`, a `ReactPackage` class