Prevent fiber from leaking into RN stack renderer (#9775)

Since stripEnvVariables was used to replace __DEV__ references, I assumed it (and other plugins) we run before requires statements were processed. Obviously I was wrong 😬 and as a result, the RN Stack and Fiber builds were way too large. This is an attempt to mimic the approach taken with DOM renderer and stub out modules that we explicitly don't want to include.

The alternative to this would have been to fork findNodeHandle, NativeMethodsMixin, ReactNativeBaseComponent, etc. and essentially avoid using the feature flag. That didn't seem tenable. The previous injection approach also doesn't work here because the circular references it resulted in caused Rollup to choke when creating the modules.

scripts/rollup/build.js

@@ -289,7 +289,8 @@ function getPlugins(
   hasteName,
   isRenderer,
   manglePropertiesOnProd,
-  useFiber
+  useFiber,
+  modulesToStub
 ) {
   const plugins = [
     babel(updateBabelConfig(babelOpts, bundleType)),
@@ -298,7 +299,11 @@ function getPlugins(
     ),
   ];
 
-  const replaceModules = Modules.getDefaultReplaceModules(bundleType);
+  const replaceModules = Modules.getDefaultReplaceModules(
+    bundleType,
+    modulesToStub
+  );
+
   // We have to do this check because Rollup breaks on empty object.
   // TODO: file an issue with rollup-plugin-replace.
   if (Object.keys(replaceModules).length > 0) {
@@ -420,7 +425,8 @@ function createBundle(bundle, bundleType) {
       bundle.hasteName,
       bundle.isRenderer,
       bundle.manglePropertiesOnProd,
-      bundle.useFiber
+      bundle.useFiber,
+      bundle.modulesToStub
     ),
   })
     .then(result =>

scripts/rollup/bundles.js

@@ -317,6 +317,12 @@ const bundles = [
       'src/shared/**/*.js',
     ],
     useFiber: false,
+    modulesToStub: [
+      "'createReactNativeFiberComponentClass'",
+      "'ReactNativeFiberRenderer'",
+      "'findNumericNodeHandleFiber'",
+      "'ReactNativeFiber'",
+    ],
   },
   {
     babelOpts: babelOptsReact,
@@ -353,6 +359,11 @@ const bundles = [
       'src/shared/**/*.js',
     ],
     useFiber: true,
+    modulesToStub: [
+      "'createReactNativeComponentClass'",
+      "'findNumericNodeHandleStack'",
+      "'ReactNativeStack'",
+    ],
   },
 
   /******* React Test Renderer *******/

scripts/rollup/modules.js

@@ -265,6 +265,18 @@ function replaceLegacyModuleAliases(bundleType) {
   }
 }
 
+function replaceBundleStubModules(bundleModulesToStub) {
+  const stubbedModules = {};
+
+  if (Array.isArray(bundleModulesToStub)) {
+    bundleModulesToStub.forEach(module => {
+      stubbedModules[module] = devOnlyModuleStub;
+    });
+  }
+
+  return stubbedModules;
+}
+
 function getAliases(paths, bundleType, isRenderer, extractErrors) {
   return Object.assign(
     createModuleMap(
@@ -278,12 +290,13 @@ function getAliases(paths, bundleType, isRenderer, extractErrors) {
   );
 }
 
-function getDefaultReplaceModules(bundleType) {
+function getDefaultReplaceModules(bundleType, bundleModulesToStub) {
   return Object.assign(
     {},
     replaceFbjsModuleAliases(bundleType),
     replaceDevOnlyStubbedModules(bundleType),
-    replaceLegacyModuleAliases(bundleType)
+    replaceLegacyModuleAliases(bundleType),
+    replaceBundleStubModules(bundleModulesToStub)
   );
 }
 

scripts/rollup/results.json

@@ -17,12 +17,12 @@
       "gzip": 38682
     },
     "react-dom-server.development.js (UMD_DEV)": {
-      "size": 525896,
-      "gzip": 126687
+      "size": 525947,
+      "gzip": 126689
     },
     "react-dom-server.production.min.js (UMD_PROD)": {
-      "size": 111581,
-      "gzip": 34959
+      "size": 111505,
+      "gzip": 34936
     },
     "react-art.development.js (UMD_DEV)": {
       "size": 349191,
@@ -73,12 +73,12 @@
       "gzip": 94091
     },
     "react-dom-server.development.js (NODE_DEV)": {
-      "size": 474459,
-      "gzip": 114087
+      "size": 474510,
+      "gzip": 114092
     },
     "react-dom-server.production.min.js (NODE_PROD)": {
-      "size": 105956,
-      "gzip": 32782
+      "size": 105880,
+      "gzip": 32763
     },
     "ReactDOMServerStack-dev.js (FB_DEV)": {
       "size": 455996,
@@ -157,28 +157,28 @@
       "gzip": 2234
     },
     "ReactDOMServerStream-dev.js (FB_DEV)": {
-      "size": 472928,
-      "gzip": 113934
+      "size": 472979,
+      "gzip": 113937
     },
     "ReactDOMServerStream-prod.js (FB_PROD)": {
-      "size": 345931,
-      "gzip": 83505
+      "size": 345258,
+      "gzip": 83320
     },
     "ReactNativeStack-dev.js (RN_DEV)": {
-      "size": 351200,
-      "gzip": 63905
+      "size": 183071,
+      "gzip": 35604
     },
     "ReactNativeStack-prod.js (RN_PROD)": {
-      "size": 269602,
-      "gzip": 46634
+      "size": 131236,
+      "gzip": 24775
     },
     "ReactNativeFiber-dev.js (RN_DEV)": {
-      "size": 328134,
-      "gzip": 59569
+      "size": 271213,
+      "gzip": 49113
     },
     "ReactNativeFiber-prod.js (RN_PROD)": {
-      "size": 248866,
-      "gzip": 43107
+      "size": 207321,
+      "gzip": 35756
     }
   }
 }