ReactNative flat renderer bundles

scripts/rollup/build.js

@@ -18,6 +18,7 @@ const Bundles = require('./bundles');
 const propertyMangleWhitelist = require('./mangle').propertyMangleWhitelist;
 const sizes = require('./plugins/sizes-plugin');
 const Stats = require('./stats');
+const syncReactNative = require('./sync').syncReactNative;
 const Packaging = require('./packaging');
 const Header = require('./header');
 
@@ -37,6 +38,7 @@ const requestedBundleTypes = (argv.type || '')
 const requestedBundleNames = (argv._[0] || '')
   .split(',')
   .map(type => type.toLowerCase());
+const syncFbsource = argv['sync-fbsource'];
 
 // used for when we property mangle with uglify/gcc
 const mangleRegex = new RegExp(
@@ -46,6 +48,32 @@ const mangleRegex = new RegExp(
   'g'
 );
 
+function getHeaderSanityCheck(bundleType, hasteName) {
+  switch (bundleType) {
+    case FB_DEV:
+    case FB_PROD:
+    case RN_DEV:
+    case RN_PROD:
+      let hasteFinalName = hasteName;
+      switch (bundleType) {
+        case FB_DEV:
+        case RN_DEV:
+          hasteFinalName += '-dev';
+          break;
+        case FB_PROD:
+        case RN_PROD:
+          hasteFinalName += '-prod';
+          break;
+      }
+      return hasteFinalName;
+    case UMD_DEV:
+    case UMD_PROD:
+      return reactVersion;
+    default:
+      return null;
+  }
+}
+
 function getBanner(bundleType, hasteName, filename) {
   switch (bundleType) {
     case FB_DEV:
@@ -55,9 +83,11 @@ function getBanner(bundleType, hasteName, filename) {
       let hasteFinalName = hasteName;
       switch (bundleType) {
         case FB_DEV:
+        case RN_DEV:
           hasteFinalName += '-dev';
           break;
         case FB_PROD:
+        case RN_PROD:
           hasteFinalName += '-prod';
           break;
       }
@@ -122,6 +152,12 @@ function updateBundleConfig(config, filename, format, bundleType, hasteName) {
   });
 }
 
+function setReactNativeUseFiberEnvVariable(useFiber) {
+  return {
+    'process.env.REACT_NATIVE_USE_FIBER': useFiber,
+  };
+}
+
 function stripEnvVariables(production) {
   return {
     __DEV__: production ? 'false' : 'true',
@@ -165,7 +201,13 @@ function getFilename(name, hasteName, bundleType) {
   }
 }
 
-function uglifyConfig(mangle, manglePropertiesOnProd, preserveVersionHeader) {
+function uglifyConfig({
+  mangle,
+  manglePropertiesOnProd,
+  preserveVersionHeader,
+  removeComments,
+  headerSanityCheck,
+}) {
   return {
     warnings: false,
     compress: {
@@ -186,7 +228,10 @@ function uglifyConfig(mangle, manglePropertiesOnProd, preserveVersionHeader) {
       comments(node, comment) {
         if (preserveVersionHeader && comment.pos === 0 && comment.col === 0) {
           // Keep the very first comment (the bundle header) in prod bundles.
-          if (comment.value.indexOf(reactVersion) === -1) {
+          if (
+            headerSanityCheck &&
+            comment.value.indexOf(headerSanityCheck) === -1
+          ) {
             // Sanity check: this doesn't look like the bundle header!
             throw new Error(
               'Expected the first comment to be the file header but got: ' +
@@ -195,8 +240,7 @@ function uglifyConfig(mangle, manglePropertiesOnProd, preserveVersionHeader) {
           }
           return true;
         }
-        // Keep all comments in FB bundles.
-        return !mangle;
+        return !removeComments;
       },
     },
     mangleProperties: mangle && manglePropertiesOnProd
@@ -242,8 +286,10 @@ function getPlugins(
   paths,
   filename,
   bundleType,
+  hasteName,
   isRenderer,
-  manglePropertiesOnProd
+  manglePropertiesOnProd,
+  useFiber
 ) {
   const plugins = [
     babel(updateBabelConfig(babelOpts, bundleType)),
@@ -259,11 +305,12 @@ function getPlugins(
     plugins.unshift(replace(replaceModules));
   }
 
+  const headerSanityCheck = getHeaderSanityCheck(bundleType, hasteName);
+
   switch (bundleType) {
     case UMD_DEV:
     case NODE_DEV:
     case FB_DEV:
-    case RN_DEV:
       plugins.push(
         replace(stripEnvVariables(false)),
         // needs to happen after strip env
@@ -273,17 +320,36 @@ function getPlugins(
     case UMD_PROD:
     case NODE_PROD:
     case FB_PROD:
-    case RN_PROD:
       plugins.push(
         replace(stripEnvVariables(true)),
         // needs to happen after strip env
         commonjs(getCommonJsConfig(bundleType)),
         uglify(
-          uglifyConfig(
-            bundleType !== FB_PROD,
+          uglifyConfig({
+            mangle: bundleType !== FB_PROD,
             manglePropertiesOnProd,
-            bundleType === UMD_PROD
-          )
+            preserveVersionHeader: bundleType === UMD_PROD,
+            removeComments: bundleType === FB_PROD,
+            headerSanityCheck,
+          })
+        )
+      );
+      break;
+    case RN_DEV:
+    case RN_PROD:
+      plugins.push(
+        replace(stripEnvVariables(bundleType === RN_PROD)),
+        replace(setReactNativeUseFiberEnvVariable(useFiber)),
+        // needs to happen after strip env
+        commonjs(getCommonJsConfig(bundleType)),
+        uglify(
+          uglifyConfig({
+            mangle: false,
+            manglePropertiesOnProd,
+            preserveVersionHeader: true,
+            removeComments: true,
+            headerSanityCheck,
+          })
         )
       );
       break;
@@ -349,8 +415,10 @@ function createBundle(bundle, bundleType) {
       bundle.paths,
       filename,
       bundleType,
+      bundle.hasteName,
       bundle.isRenderer,
-      bundle.manglePropertiesOnProd
+      bundle.manglePropertiesOnProd,
+      bundle.useFiber
     ),
   })
     .then(result =>
@@ -406,6 +474,11 @@ rimraf('build', () => {
       () => createBundle(bundle, RN_PROD)
     );
   }
+  if (syncFbsource) {
+    tasks.push(() =>
+      syncReactNative(join('build', 'react-native'), syncFbsource)
+    );
+  }
   // rather than run concurently, opt to run them serially
   // this helps improve console/warning/error output
   // and fixes a bunch of IO failures that sometimes occured

scripts/rollup/bundles.js

@@ -19,8 +19,8 @@ const NODE_DEV = bundleTypes.NODE_DEV;
 const NODE_PROD = bundleTypes.NODE_PROD;
 const FB_DEV = bundleTypes.FB_DEV;
 const FB_PROD = bundleTypes.FB_PROD;
-// const RN_DEV = bundleTypes.RN_DEV;
-// const RN_PROD = bundleTypes.RN_PROD;
+const RN_DEV = bundleTypes.RN_DEV;
+const RN_PROD = bundleTypes.RN_PROD;
 
 const babelOptsReact = {
   exclude: 'node_modules/**',
@@ -284,9 +284,7 @@ const bundles = [
   /******* React Native *******/
   {
     babelOpts: babelOptsReact,
-    bundleTypes: [
-      /* RN_DEV, RN_PROD */
-    ],
+    bundleTypes: [RN_DEV, RN_PROD],
     config: {
       destDir: 'build/',
       moduleName: 'ReactNativeStack',
@@ -304,6 +302,7 @@ const bundles = [
       'deepDiffer',
       'deepFreezeAndThrowOnMutationInDev',
       'flattenStyle',
+      'prop-types/checkPropTypes',
     ],
     hasteName: 'ReactNativeStack',
     isRenderer: true,
@@ -317,12 +316,11 @@ const bundles = [
       'src/ReactVersion.js',
       'src/shared/**/*.js',
     ],
+    useFiber: false,
   },
   {
     babelOpts: babelOptsReact,
-    bundleTypes: [
-      /* RN_DEV, RN_PROD */
-    ],
+    bundleTypes: [RN_DEV, RN_PROD],
     config: {
       destDir: 'build/',
       moduleName: 'ReactNativeFiber',
@@ -340,6 +338,7 @@ const bundles = [
       'deepDiffer',
       'deepFreezeAndThrowOnMutationInDev',
       'flattenStyle',
+      'prop-types/checkPropTypes',
     ],
     hasteName: 'ReactNativeFiber',
     isRenderer: true,
@@ -353,6 +352,7 @@ const bundles = [
       'src/ReactVersion.js',
       'src/shared/**/*.js',
     ],
+    useFiber: true,
   },
 
   /******* React Test Renderer *******/

scripts/rollup/header.js

@@ -11,6 +11,7 @@ function getProvidesHeader(hasteFinalName, bundleType, fbDevCode) {
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  *
+ * @noflow
  * @providesModule ${hasteFinalName}
  */${bundleType === FB_DEV ? fbDevCode : ''}
 `;

scripts/rollup/packaging.js

@@ -1,11 +1,11 @@
 'use strict';
 
 const basename = require('path').basename;
-const ncp = require('ncp').ncp;
 const fs = require('fs');
 const join = require('path').join;
 const resolve = require('path').resolve;
 const Bundles = require('./bundles');
+const asyncCopyTo = require('./utils').asyncCopyTo;
 
 const UMD_DEV = Bundles.bundleTypes.UMD_DEV;
 const UMD_PROD = Bundles.bundleTypes.UMD_PROD;
@@ -23,17 +23,12 @@ const facebookWWWSrcDependencies = [
   'src/renderers/dom/shared/eventPlugins/TapEventPlugin.js',
 ];
 
-function asyncCopyTo(from, to) {
-  return new Promise(_resolve => {
-    ncp(from, to, error => {
-      if (error) {
-        console.error(error);
-        process.exit(1);
-      }
-      _resolve();
-    });
-  });
-}
+// these files need to be copied to the react-native build
+const reactNativeSrcDependencies = [
+  'src/shared/utils/PooledClass.js',
+  'src/renderers/shared/fiber/isomorphic/ReactTypes.js',
+  'src/renderers/native/ReactNativeTypes.js',
+];
 
 function getPackageName(name) {
   if (name.indexOf('/') !== -1) {
@@ -51,7 +46,17 @@ function createReactNativeBuild() {
   const from = join('scripts', 'rollup', 'shims', 'react-native');
   const to = join('build', 'react-native', 'shims');
 
-  return asyncCopyTo(from, to);
+  return asyncCopyTo(from, to).then(() => {
+    let promises = [];
+    // we also need to copy over some specific files from src
+    // defined in reactNativeSrcDependencies
+    for (const srcDependency of reactNativeSrcDependencies) {
+      promises.push(
+        asyncCopyTo(resolve(srcDependency), join(to, basename(srcDependency)))
+      );
+    }
+    return Promise.all(promises);
+  });
 }
 
 function createFacebookWWWBuild() {

scripts/rollup/results.json

@@ -163,6 +163,22 @@
     "ReactDOMServerStream-prod.js (FB_PROD)": {
       "size": 345920,
       "gzip": 83497
+    },
+    "ReactNativeStack-dev.js (RN_DEV)": {
+      "size": 350743,
+      "gzip": 63769
+    },
+    "ReactNativeStack-prod.js (RN_PROD)": {
+      "size": 269602,
+      "gzip": 46634
+    },
+    "ReactNativeFiber-dev.js (RN_DEV)": {
+      "size": 327677,
+      "gzip": 59441
+    },
+    "ReactNativeFiber-prod.js (RN_PROD)": {
+      "size": 248866,
+      "gzip": 43107
     }
   }
 }

scripts/rollup/shims/react-native/NativeMethodsMixin.js

@@ -16,5 +16,8 @@ const {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
 } = require('ReactNative');
 
-module.exports =
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.NativeMethodsMixin;
+import type {NativeMethodsMixinType} from 'ReactNativeTypes';
+
+const {NativeMethodsMixin} = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+module.exports = ((NativeMethodsMixin: any): $Exact<NativeMethodsMixinType>);

scripts/rollup/shims/react-native/PooledClass.js → scripts/rollup/shims/react-native/ReactGlobalSharedState.js

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  *
- * @providesModule PooledClass
+ * @providesModule ReactGlobalSharedState
  */
 
 'use strict';
@@ -15,4 +15,5 @@ const {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
 } = require('ReactNative');
 
-module.exports = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.PooledClass;
+module.exports =
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactGlobalSharedState;