Update iOS Fabric-related files to compile on OSS (#29810)

Summary:
Original PR contents:

This pull request updates the Podspecs and associated build scripts, and some source files so they build on OSS. RNTester now compiles with `fabric_enabled` again.

The following changes have been made:

 * Various spots that were pointing to the old `ReactCommon/fabric` location have now been updated to `ReactCommon/react/renderer`
 * Files that were attempting to use internal FB header `FBRCTFabricComponentsPlugins.h` were changed to use `RCTFabricComponentsPlugins.h`
 * `RCTFabricComponentsPlugins` in OSS was updated to include the `Image` fabric component (thanks tsapeta)
 * Replaced old `generate-rncore.sh` build script with new `generate-rncore.js` script which does not require `flow-node` and uses the `react-native-codegen` API directly, so there is no longer any need for an interim `schema-rncore.json` file.
 * Updated Yoga podspec which wasn't fully synced with changes from the main Yoga repo
 * Updated Fabric podspec with additional needed subspecs

Additions to PR by hramos:
* Replaced use of generate-rncore scripts with the original generate-native-modules-specs.sh script, which is now generate-specs.sh and supports both codegen for Native Modules and Components now (TurboModules/Fabric).
* Codegen now runs at build time as part of the Xcode build pipeline instead of as part of `pod install`. The build script is injected by the FBReactNativeSpec pod, as the pod is part of both Fabric and non-Fabric builds.

[General] [Fixed] - RNTester compiles with `fabric_enabled` again

Pull Request resolved: #29810

Test Plan:
RNTester now compiles and runs in the simulator again when `fabric_enabled` is set to `true`.

```
cd xplat/js/react-native-github/packages/rn-tester
USE_FABRIC=1 pod install
open RNTesterPods.xcworkspace
```

Reviewed By: fkgozali

Differential Revision: D24058507

Pulled By: hramos

fbshipit-source-id: 8b2ea3694e6cb9aa23f83f087e2995fd4320e2bb

Author: empyrical

.gitignore

@@ -102,8 +102,7 @@ package-lock.json
 # react-native-codegen
 /Libraries/FBReactNativeSpec/FBReactNativeSpec
 /packages/react-native-codegen/lib
-/ReactCommon/fabric/components/rncore/
-/schema-rncore.json
+/ReactCommon/react/renderer/components/rncore/
 
 # Visual studio
 .vscode

Libraries/FBReactNativeSpec/FBReactNativeSpec.podspec

@@ -20,11 +20,27 @@ end
 
 react_native_path = File.join(__dir__, "..", "..")
 srcs_dir = File.join(__dir__, "..")
-codegen_script_path = File.join(react_native_path, "scripts", "generate-native-modules-specs.sh")
+codegen_script_path = File.join(react_native_path, "scripts", "generate-specs.sh")
 codegen_path = File.join(react_native_path, codegen_path_prefix, "react-native-codegen")
-output_dir = File.join(__dir__, "FBReactNativeSpec")
-generated_files = [File.join(output_dir, "FBReactNativeSpec.h"), File.join(output_dir, "FBReactNativeSpec-generated.mm")]
 codegen_command = "CODEGEN_PATH=#{codegen_path} sh '#{codegen_script_path}' | tee \"${SCRIPT_OUTPUT_FILE_0}\""
+modules_output_dir = File.join(__dir__, "FBReactNativeSpec")
+components_output_dir = File.join(react_native_path, "ReactCommon", "react", "renderer", "components", "rncore")
+generated_filenames = [ "FBReactNativeSpec.h", "FBReactNativeSpec-generated.mm" ]
+generated_files = generated_filenames.map { |filename| File.join(modules_output_dir, filename) }
+
+if ENV['USE_FABRIC'] == '1'
+  components_generated_filenames = [
+    "ComponentDescriptors.h",
+    "EventEmitters.cpp",
+    "EventEmitters.h",
+    "Props.cpp",
+    "Props.h",
+    "RCTComponentViewHelpers.h",
+    "ShadowNodes.cpp",
+    "ShadowNodes.h"
+  ]
+  generated_files = generated_files.concat(components_generated_filenames.map { |filename| File.join(components_output_dir, filename) })
+end
 
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 folly_version = '2020.01.13.00'
@@ -40,6 +56,7 @@ Pod::Spec.new do |s|
   s.compiler_flags         = folly_compiler_flags + ' -Wno-nullability-completeness'
   s.source                 = source
   s.source_files           = "**/*.{c,h,m,mm,cpp}"
+  s.exclude_files          = "jni"
   s.header_dir             = "FBReactNativeSpec"
 
   s.pod_target_xcconfig    = {
@@ -55,11 +72,11 @@ Pod::Spec.new do |s|
   s.dependency "React-jsi", version
   s.dependency "ReactCommon/turbomodule/core", version
 
-  s.prepare_command = "mkdir -p #{output_dir} && touch #{generated_files.reduce() { |str, file| str + " " + file }}"
+  s.prepare_command = "mkdir -p #{modules_output_dir} #{components_output_dir} && touch #{generated_files.reduce() { |str, file| str + " " + file }}"
   s.script_phase = {
-    :name => 'Generate Native Modules Code',
+    :name => 'Generate Specs',
     :input_files => [srcs_dir],
-    :output_files => ["$(DERIVED_FILE_DIR)/FBReactNativeSpec-codegen.log"],
+    :output_files => ["$(DERIVED_FILE_DIR)/codegen.log"],
     :script => codegen_command,
     :execution_position => :before_compile
   }

React/Fabric/Mounting/ComponentViews/ActivityIndicator/RCTActivityIndicatorViewComponentView.mm

@@ -13,7 +13,7 @@
 #import <react/renderer/components/rncore/EventEmitters.h>
 #import <react/renderer/components/rncore/Props.h>
 
-#import "FBRCTFabricComponentsPlugins.h"
+#import "RCTFabricComponentsPlugins.h"
 
 using namespace facebook::react;
 

React/Fabric/Mounting/ComponentViews/Picker/RCTPickerComponentView.mm

@@ -15,8 +15,8 @@
 #import <react/renderer/components/iospicker/PickerProps.h>
 #import <react/renderer/textlayoutmanager/RCTAttributedTextUtils.h>
 
-#import "FBRCTFabricComponentsPlugins.h"
 #import "RCTConversions.h"
+#import "RCTFabricComponentsPlugins.h"
 
 using namespace facebook::react;
 

React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h

@@ -41,6 +41,7 @@ Class<RCTComponentViewProtocol> RCTParagraphCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTTextInputCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTInputAccessoryCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTViewCls(void) __attribute__((used));
+Class<RCTComponentViewProtocol> RCTImageCls(void) __attribute__((used));
 
 #ifdef __cplusplus
 }

React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm

@@ -30,6 +30,7 @@
     {"TextInput", RCTTextInputCls},
     {"InputAccessoryView", RCTInputAccessoryCls},
     {"View", RCTViewCls},
+    {"Image", RCTImageCls},
   };
 
   auto p = sFabricComponentsClassMap.find(name);

React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.mm

@@ -10,7 +10,6 @@
 #import <React/RCTUtils.h>
 #import <react/renderer/components/safeareaview/SafeAreaViewComponentDescriptor.h>
 #import <react/renderer/components/safeareaview/SafeAreaViewState.h>
-#import "FBRCTFabricComponentsPlugins.h"
 #import "RCTConversions.h"
 #import "RCTFabricComponentsPlugins.h"
 

React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm

@@ -16,7 +16,7 @@
 #import <React/RCTRefreshableProtocol.h>
 #import <React/RCTScrollViewComponentView.h>
 
-#import "FBRCTFabricComponentsPlugins.h"
+#import "RCTFabricComponentsPlugins.h"
 
 using namespace facebook::react;
 

React/Fabric/Mounting/ComponentViews/Slider/RCTSliderComponentView.mm

@@ -15,7 +15,7 @@
 #import <react/renderer/components/rncore/Props.h>
 #import <react/renderer/components/slider/SliderComponentDescriptor.h>
 
-#import "FBRCTFabricComponentsPlugins.h"
+#import "RCTFabricComponentsPlugins.h"
 
 using namespace facebook::react;
 

React/Fabric/Mounting/ComponentViews/Switch/RCTSwitchComponentView.mm

@@ -14,7 +14,7 @@
 #import <react/renderer/components/rncore/Props.h>
 #import <react/renderer/components/rncore/RCTComponentViewHelpers.h>
 
-#import "FBRCTFabricComponentsPlugins.h"
+#import "RCTFabricComponentsPlugins.h"
 
 using namespace facebook::react;
 

React/Fabric/Mounting/ComponentViews/UnimplementedView/RCTUnimplementedViewComponentView.mm

@@ -16,7 +16,7 @@
 
 #import <React/RCTConversions.h>
 
-#import "FBRCTFabricComponentsPlugins.h"
+#import "RCTFabricComponentsPlugins.h"
 
 using namespace facebook::react;
 

React/React-RCTFabric.podspec

@@ -30,8 +30,7 @@ Pod::Spec.new do |s|
   s.author                 = "Facebook, Inc. and its affiliates"
   s.platforms              = { :ios => "10.0" }
   s.source                 = source
-  s.source_files           = "Fabric/**/*.{c,h,m,mm,S,cpp}",
-                             "Tests/**/*.{mm}"
+  s.source_files           = "Fabric/**/*.{c,h,m,mm,S,cpp}"
   s.exclude_files          = "**/tests/*",
                              "**/android/*",
   s.compiler_flags         = folly_compiler_flags + ' ' + boost_compiler_flags
@@ -45,5 +44,10 @@ Pod::Spec.new do |s|
   s.dependency "React-Core", version
   s.dependency "React-Fabric", version
   s.dependency "React-RCTImage", version
-  s.dependency "Folly/Fabric", folly_version
+  s.dependency "RCT-Folly/Fabric", folly_version
+
+  s.test_spec 'Tests' do |test_spec|
+    test_spec.source_files = "Tests/**/*.{mm}"
+    test_spec.framework = "XCTest"
+  end
 end

ReactCommon/React-Fabric.podspec

@@ -5,7 +5,7 @@
 
 require "json"
 
-package = JSON.parse(File.read(File.join(__dir__, "..", "..", "..", "package.json")))
+package = JSON.parse(File.read(File.join(__dir__, "..", "..", "..", "..", "package.json")))
 version = package['version']
 
 source = { :git => 'https://github.com/facebook/react-native.git' }
@@ -32,11 +32,11 @@ Pod::Spec.new do |s|
   s.library                = "stdc++"
   s.compiler_flags         = folly_compiler_flags + ' ' + boost_compiler_flags
   s.source_files           = "**/*.{m,mm,cpp,h}"
-  s.exclude_files          = "**/tests/*",
-                             "**/android/*",
-                             "**/cxx/*"
-  s.header_dir             = "react/graphics"
-  s.pod_target_xcconfig  = { "USE_HEADERMAP" => "NO", "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_TARGET_SRCROOT)/ReactCommon\" \"$(PODS_ROOT)/RCT-Folly\"" }
+  s.exclude_files          = "tests",
+                             "platform/android",
+                             "platform/cxx"
+  s.header_dir             = "react/renderer/graphics"
+  s.pod_target_xcconfig  = { "USE_HEADERMAP" => "NO", "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_TARGET_SRCROOT)/../../../\" \"$(PODS_ROOT)/RCT-Folly\"" }
 
-  s.dependency "Folly/Fabric", folly_version
+  s.dependency "RCT-Folly/Fabric", folly_version
 end

ReactCommon/react/renderer/graphics/React-graphics.podspec

@@ -51,7 +51,7 @@ Pod::Spec.new do |spec|
   source_files = File.join('ReactCommon/yoga', source_files) if ENV['INSTALL_YOGA_WITHOUT_PATH_OPTION']
   spec.source_files = source_files
 
-  header_files = 'yoga/{Yoga,YGEnums,YGMacros,YGValue}.h'
+  header_files = 'yoga/{Yoga,YGEnums,YGMacros,YGNode,YGStyle,YGValue}.h'
   header_files = File.join('ReactCommon/yoga', header_files) if ENV['INSTALL_YOGA_WITHOUT_PATH_OPTION']
   spec.public_header_files = header_files
 end

ReactCommon/yoga/Yoga.podspec

@@ -37,8 +37,8 @@
     "README.md",
     "rn-get-polyfills.js",
     "scripts/compose-source-maps.js",
-    "scripts/generate-native-modules-specs.sh",
-    "scripts/generate-native-modules-specs-cli.js",
+    "scripts/generate-specs.sh",
+    "scripts/generate-specs-cli.js",
     "scripts/ios-configure-glog.sh",
     "scripts/launchPackager.bat",
     "scripts/launchPackager.command",

package.json

@@ -34,7 +34,7 @@ public File codegenGenerateSchemaCLI() {
   }
 
   public File codegenGenerateNativeModuleSpecsCLI() {
-    return new File(this.reactNativeRootDir, "scripts/generate-native-modules-specs-cli.js");
+    return new File(this.reactNativeRootDir, "scripts/generate-specs-cli.js");
   }
 
   private String projectPathToLibraryName(final String projectPath) {

packages/react-native-codegen/android/gradlePlugin-build/gradlePlugin/src/main/java/com/facebook/react/codegen/plugin/CodegenPluginExtension.java

@@ -15,18 +15,26 @@ end
 def pods()
   project 'RNTesterPods.xcodeproj'
 
-  # Enable TurboModule
+  fabric_enabled = false
+
+  # To use fabric: set the environment variable `USE_FABRIC` to 1, like below
+  #   $ USE_FABRIC=1 bundle exec pod install
+  # or
+  #   $ export USE_FABRIC=1
+  #   $ bundle exec pod install
+  if ENV['USE_FABRIC'] == '1'
+    puts "Building RNTester with Fabric enabled."
+    fabric_enabled = true
+  end
+
   prefix_path = "../.."
-  use_react_native!(path: prefix_path, hermes_enabled: ENV['USE_HERMES'] == '1')
+  use_react_native!(path: prefix_path, fabric_enabled: fabric_enabled, hermes_enabled: ENV['USE_HERMES'] == '1')
   pod 'ReactCommon/turbomodule/samples', :path => "#{prefix_path}/ReactCommon"
 
   # Additional Pods which aren't included in the default Podfile
   pod 'React-RCTPushNotification', :path => "#{prefix_path}/Libraries/PushNotificationIOS"
   pod 'Yoga', :path => "#{prefix_path}/ReactCommon/yoga", :modular_headers => true
   # Additional Pods which are classed as unstable
-  #
-  # To use fabric: add `fabric_enabled` option to the use_react_native method above, like below
-  # use_react_native!(path: "..", fabric_enabled: true)
 end
 
 target 'RNTester' do

packages/rn-tester/Podfile

@@ -490,7 +490,7 @@ SPEC CHECKSUMS:
   CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
   DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: fe973c09b2299b5e8154186ecf1f6554b4f70987
-  FBReactNativeSpec: 77f376d6af8c6348f0cc6de9a96c7a288f4e03ab
+  FBReactNativeSpec: 8e8b4f540947580f2a9ef54a443453c562d439cd
   Flipper: be611d4b742d8c87fbae2ca5f44603a02539e365
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: e4493b013c02d9347d5e0cb4d128680239f6c78a
@@ -525,9 +525,9 @@ SPEC CHECKSUMS:
   React-RCTVibration: a1cce36dd452eb88296d99d80d66f2c5bd50aad4
   React-runtimeexecutor: 53867815d0a01e53a2c901cb7f01076216c5c799
   ReactCommon: d101410fc55088c91dc24595715c7b26ec760adf
-  Yoga: 69ef0b2bba5387523f793957a9f80dbd61e89631
+  Yoga: e37ade282f73232191786671781d052c84d0faa8
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 3adfe268d800503789170d1862bde422ee204fe8
+PODFILE CHECKSUM: 486f12ff39a0c690fe414d7ffbbdaa371d51590b
 
 COCOAPODS: 1.10.0

packages/rn-tester/Podfile.lock

@@ -25,7 +25,7 @@ const path = require('path');
 
 const GENERATORS = {
   android: ['modulesAndroid'],
-  ios: ['modulesIOS'],
+  ios: ['componentsIOS', 'modulesIOS'],
 };
 
 function generateSpec(

scripts/generate-rncore.sh

@@ -5,18 +5,18 @@
 # LICENSE file in the root directory of this source tree.
 
 # This script collects the JavaScript spec definitions for core
-# native modules, then uses react-native-codegen to generate
-# native code.
+# native modules and components, then uses react-native-codegen
+# to generate native code.
 # The script will use the local react-native-codegen package by
 # default. Optionally, set the CODEGEN_PATH to point to the
 # desired codegen library (e.g. when using react-native-codegen
 # from npm).
 #
 # Usage:
-#   ./scripts/generate-native-modules-specs.sh
+#   ./scripts/generate-specs.sh
 #
-# Example:
-#  CODEGEN_PATH=.. ./scripts/generate-native-modules-specs.sh
+# Examples:
+#  CODEGEN_PATH=.. ./scripts/generate-specs.sh
 
 # shellcheck disable=SC2038
 
@@ -27,6 +27,7 @@ TEMP_DIR=$(mktemp -d /tmp/react-native-codegen-XXXXXXXX)
 RN_DIR=$(cd "$THIS_DIR/.." && pwd)
 CODEGEN_PATH="${CODEGEN_PATH:-$(cd "$RN_DIR/packages/react-native-codegen" && pwd)}"
 YARN_BINARY="${YARN_BINARY:-$(command -v yarn)}"
+USE_FABRIC="${USE_FABRIC:-0}"
 
 cleanup () {
   set +e
@@ -38,12 +39,14 @@ describe () {
   printf "\\n\\n>>>>> %s\\n\\n\\n" "$1"
 }
 
-run_codegen () {
-  SRCS_DIR=$1
-  LIBRARY_NAME=$2
-  OUTPUT_DIR=$3
+main() {
+  SRCS_DIR=$(cd "$RN_DIR/Libraries" && pwd)
+
+  OUTPUT_DIR="$TEMP_DIR/out"
+  COMPONENTS_DIR="$RN_DIR/ReactCommon/react/renderer/components/rncore"
+  MODULES_DIR="$RN_DIR/Libraries/FBReactNativeSpec/FBReactNativeSpec"
 
-  SCHEMA_FILE="$TEMP_DIR/schema-$LIBRARY_NAME.json"
+  SCHEMA_FILE="$TEMP_DIR/schema.json"
 
   if [ ! -d "$CODEGEN_PATH/lib" ]; then
     describe "Building react-native-codegen package"
@@ -58,21 +61,13 @@ run_codegen () {
 
   describe "Generating native code from schema (iOS)"
   pushd "$RN_DIR" >/dev/null || exit
-    "$YARN_BINARY" --silent node scripts/generate-native-modules-specs-cli.js ios "$SCHEMA_FILE" "$OUTPUT_DIR"
+    USE_FABRIC="$USE_FABRIC" "$YARN_BINARY" --silent node scripts/generate-specs-cli.js ios "$SCHEMA_FILE" "$OUTPUT_DIR"
   popd >/dev/null || exit
-}
 
-# Handle Core Modules
-run_codegen_core_modules () {
-  LIBRARY_NAME="FBReactNativeSpec"
-  SRCS_DIR=$(cd "$RN_DIR/Libraries" && pwd)
-  OUTPUT_DIR="$SRCS_DIR/$LIBRARY_NAME/$LIBRARY_NAME"
-
-  run_codegen "$SRCS_DIR" "$LIBRARY_NAME" "$OUTPUT_DIR"
-}
-
-main() {
-  run_codegen_core_modules
+  mkdir -p "$COMPONENTS_DIR" "$MODULES_DIR"
+  mv "$OUTPUT_DIR/FBReactNativeSpec.h" "$OUTPUT_DIR/FBReactNativeSpec-generated.mm" "$MODULES_DIR"
+  find "$OUTPUT_DIR" -type f | xargs sed -i '' 's/FBReactNativeSpec/rncore/g'
+  cp -R "$OUTPUT_DIR/." "$COMPONENTS_DIR"
 }
 
 trap cleanup EXIT

scripts/generate-native-modules-specs-cli.js scripts/generate-specs-cli.js

@@ -55,7 +55,7 @@ def use_react_native! (options={})
 
   if fabric_enabled
     pod 'React-Fabric', :path => "#{prefix}/ReactCommon"
-    pod 'React-graphics', :path => "#{prefix}/ReactCommon/fabric/graphics"
+    pod 'React-graphics', :path => "#{prefix}/ReactCommon/react/renderer/graphics"
     pod 'React-jsi/Fabric', :path => "#{prefix}/ReactCommon/jsi"
     pod 'React-RCTFabric', :path => "#{prefix}/React"
     pod 'RCT-Folly/Fabric', :podspec => "#{prefix}/third-party-podspecs/RCT-Folly.podspec"