Use babel runtime instead of relying on global babelHelpers and regen…

…erator (facebook#198)

Summary:
**Summary**

The RN transformer currently relies on the enviroment providing babelHelpers and regeneratorRuntime as globals by using 'babel-external-helpers'. This wasn't really a problem before since helpers were stable and we could maintain our copy easily but it seems like there are more now with babel 7 and it makes sense to include only those used by the app.

This is exactly what babel/transform-runtime does. It will alias all helpers and calls to regeneratorRuntime to files in the babel/runtime package.

This will solve issues like this facebook/react-native#20150 caused by missing babelHelpers. This solution also avoids bloating babelHelpers to fix OSS issues like the one linked before.

**Test plan**

- Updated tests so they all pass.
- Tested that it actually works by applying the changes locally in an RN app.
- Added a test for async functions, to make sure regenerator is aliased properly and doesn't depend on the global.
- Made sure require-test.js still fails if the require implementation contains babel helpers (by adding an empty class in the file).
Pull Request resolved: facebook#198

Reviewed By: mjesun

Differential Revision: D8833903

Pulled By: rafeca

fbshipit-source-id: 7081f769f288ab358ba89ae8ee72a513bb12e225

packages/metro-react-native-babel-preset/package.json

@@ -41,6 +41,7 @@
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/plugin-transform-react-jsx-source": "^7.0.0",
     "@babel/plugin-transform-regenerator": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/plugin-transform-shorthand-properties": "^7.0.0",
     "@babel/plugin-transform-spread": "^7.0.0",
     "@babel/plugin-transform-sticky-regex": "^7.0.0",

packages/metro-react-native-babel-preset/src/configs/main.js

@@ -74,6 +74,14 @@ const reactDisplayName = [
 const reactJsxSource = [require('@babel/plugin-transform-react-jsx-source')];
 const symbolMember = [require('../transforms/transform-symbol-member')];
 
+const babelRuntime = [
+  require('@babel/plugin-transform-runtime'),
+  {
+    helpers: true,
+    regenerator: true,
+  },
+];
+
 const getPreset = (src, options) => {
   const isNull = src == null;
   const hasClass = isNull || src.indexOf('class') !== -1;
@@ -129,6 +137,10 @@ const getPreset = (src, options) => {
     extraPlugins.push(reactJsxSource);
   }
 
+  if (!options || !options.disableBabelRuntime) {
+    extraPlugins.push(babelRuntime);
+  }
+
   return {
     comments: false,
     compact: true,

packages/metro/src/reactNativeTransformer.js

@@ -12,7 +12,6 @@
 'use strict';
 
 const crypto = require('crypto');
-const externalHelpersPlugin = require('@babel/plugin-external-helpers');
 const fs = require('fs');
 const inlineRequiresPlugin = require('babel-preset-fbjs/plugins/inline-requires');
 const json5 = require('json5');
@@ -28,7 +27,6 @@ type ModuleES6 = {__esModule?: boolean, default?: {}};
 
 const cacheKeyParts = [
   fs.readFileSync(__filename),
-  require('@babel/plugin-external-helpers/package.json').version,
   require('babel-preset-fbjs/package.json').version,
 ];
 
@@ -127,7 +125,7 @@ function buildBabelConfig(filename, options, plugins?: BabelPlugins = []) {
   let config = Object.assign({}, babelRC, extraConfig);
 
   // Add extra plugins
-  const extraPlugins = [externalHelpersPlugin];
+  const extraPlugins = [];
 
   if (options.inlineRequires) {
     extraPlugins.push(inlineRequiresPlugin);