BREAKING CHANGE: UPGRADE REACT NATIVE TO BABEL 7!

Summary:
BREAKING CHANGE
This change upgrades the React Native build pipeline from Babel 6 to Babel 7

If you use a `.babelrc` then you'll need to update it to Babel 7 (note that some plugins are no longer relevant, some plugins are automatically upgraded, and some will need some manual love).

Note that you may also need to upgrade your dev env, tests etc, to make sure they work with Babel 7.

Reviewed By: mjesun

Differential Revision: D7591303

fbshipit-source-id: 29cef21f6466633a9c366d1f3c0d3cf874c714db

docs/GettingStarted.md

@@ -154,7 +154,7 @@ module.exports.transform = (file: {filename: string, src: string}) => {
 If you would like to plug-in babel, you can simply do that by passing the code to it:
 
 ```js
-const {transform} = require('@babel/core');
+const {transformSync} = require('@babel/core');
 
 module.exports.transform = file => {
   return transform(file.src, {

packages/metro-babel7-plugin-react-transform/__tests__/__snapshots__/babel-plugin-react-transform-test.js.snap

@@ -31,23 +31,24 @@ class Foo {
   f() {
     class Bar extends React.Component {
       render() {}
+
     }
 
     Bar = _wrapComponent(\\"Bar\\")(Bar);
     foo(Bar);
   }
+
 }"
 `;
 
 exports[`finds React components should code call expression with render method 1`] = `
 "factory({
   render() {}
-});
 
+});
 factory({
   render: function () {}
 });
-
 factory({
   'render': function () {}
 });"
@@ -85,22 +86,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 foo(_wrapComponent(\\"Foo\\")(class Foo extends React.Component {
   render() {}
+
 }));
 foo(_wrapComponent(\\"_component\\")(class extends React.Component {
   render() {}
+
 }));"
 `;
 
 exports[`finds React components should code class extends component with render method 1`] = `
-"import _transformLib from 'transform-lib';
+"import _transformLib from \\"transform-lib\\";
 const _components = {
   Foo: {
-    displayName: 'Foo'
+    displayName: \\"Foo\\"
   }
 };
 
 const _transformLib2 = _transformLib({
-  filename: 'unknown',
+  filename: \\"unknown\\",
   components: _components,
   locals: [],
   imports: []
@@ -113,22 +116,25 @@ function _wrapComponent(id) {
 }
 
 import React, { Component } from 'react';
+
 class Foo extends Component {
   render() {}
+
 }
-Foo = _wrapComponent('Foo')(Foo);"
+
+Foo = _wrapComponent(\\"Foo\\")(Foo);"
 `;
 
 exports[`finds React components should code class extends purecomponent with render method 1`] = `
-"import _transformLib from 'transform-lib';
+"import _transformLib from \\"transform-lib\\";
 const _components = {
   Foo: {
-    displayName: 'Foo'
+    displayName: \\"Foo\\"
   }
 };
 
 const _transformLib2 = _transformLib({
-  filename: 'unknown',
+  filename: \\"unknown\\",
   components: _components,
   locals: [],
   imports: []
@@ -141,10 +147,13 @@ function _wrapComponent(id) {
 }
 
 import React, { PureComponent } from 'react';
+
 class Foo extends PureComponent {
   render() {}
+
 }
-Foo = _wrapComponent('Foo')(Foo);"
+
+Foo = _wrapComponent(\\"Foo\\")(Foo);"
 `;
 
 exports[`finds React components should code class extends react component 1`] = `"class Foo extends React.Component {}"`;
@@ -175,13 +184,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 class Foo extends React.Component {
   render() {}
+
 }
+
 Foo = _wrapComponent(\\"Foo\\")(Foo);"
 `;
 
 exports[`finds React components should code class with render method 1`] = `
 "class Foo {
   render() {}
+
 }"
 `;
 
@@ -219,6 +231,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function factory() {
   return _wrapComponent(\\"Foo\\")(class Foo extends React.Component {
     render() {}
+
   });
 }"
 `;
@@ -249,6 +262,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const Foo = _wrapComponent(\\"_component\\")(class extends React.Component {
   render() {}
+
 });"
 `;
 
@@ -259,15 +273,16 @@ export class Bar extends React.Component {}
 export const bar = React.createClass({});
 export class Baz {
   render() {}
+
 }
 export class Boo {
   render() {}
+
 }"
 `;
 
 exports[`finds React components should code ignore 1`] = `
 "import React from 'react';
-
 const First = React.createNotClass({
   displayName: 'First'
 });
@@ -281,7 +296,6 @@ const myCreateClass = spec => {
 const spec = {
   render: function () {}
 };
-
 React.createClass(spec);"
 `;
 
@@ -289,7 +303,6 @@ exports[`finds React components should code react create class 1`] = `
 "const Foo = React.createClass({
   displayName: 'Foo'
 });
-
 React.createClass({});"
 `;
 
@@ -300,18 +313,18 @@ exports[`finds React components should code react create class with dynamic disp
 `;
 
 exports[`finds React components should code react create class with render method 1`] = `
-"var _transformLib = _interopRequireDefault(require('transform-lib')).default;
+"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
 
 const _components = {
   Foo: {
-    displayName: 'Foo'
+    displayName: \\"Foo\\"
   },
   _component: {},
   _component2: {}
 };
 
 const _transformLib2 = _transformLib({
-  filename: 'unknown',
+  filename: \\"unknown\\",
   components: _components,
   locals: [],
   imports: []
@@ -325,16 +338,16 @@ function _wrapComponent(id) {
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Foo = _wrapComponent('Foo')(React.createClass({
+const Foo = _wrapComponent(\\"Foo\\")(React.createClass({
   displayName: 'Foo',
   render: function () {}
 }));
 
-_wrapComponent('_component')(React.createClass({
+_wrapComponent(\\"_component\\")(React.createClass({
   render: function () {}
 }));
 
-const Bar = _wrapComponent('_component2')(React.createClass({
+const Bar = _wrapComponent(\\"_component2\\")(React.createClass({
   render: function () {}
 }));"
 `;
@@ -346,16 +359,16 @@ exports[`finds React components should code react create class with string liter
 `;
 
 exports[`finds React components should code react create class with string literal display name with render method 1`] = `
-"var _transformLib = _interopRequireDefault(require('transform-lib')).default;
+"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
 
 const _components = {
-  'my-component': {
-    displayName: 'my-component'
+  \\"my-component\\": {
+    displayName: \\"my-component\\"
   }
 };
 
 const _transformLib2 = _transformLib({
-  filename: 'unknown',
+  filename: \\"unknown\\",
   components: _components,
   locals: [],
   imports: []
@@ -369,7 +382,7 @@ function _wrapComponent(id) {
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const MyComponent = _wrapComponent('my-component')(React.createClass({
+const MyComponent = _wrapComponent(\\"my-component\\")(React.createClass({
   displayName: 'my-component',
   render: function () {}
 }));"
@@ -381,26 +394,25 @@ exports[`finds React components should options custom factories 1`] = `
 "const Foo = createClass({
   displayName: 'Foo'
 });
-
 const Bar = factory({
   displayName: 'Bar'
 });"
 `;
 
 exports[`finds React components should options custom factories with render method 1`] = `
-"var _transformLib = _interopRequireDefault(require('transform-lib')).default;
+"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
 
 const _components = {
   Foo: {
-    displayName: 'Foo'
+    displayName: \\"Foo\\"
   },
   Bar: {
-    displayName: 'Bar'
+    displayName: \\"Bar\\"
   }
 };
 
 const _transformLib2 = _transformLib({
-  filename: 'unknown',
+  filename: \\"unknown\\",
   components: _components,
   locals: [],
   imports: []
@@ -414,12 +426,12 @@ function _wrapComponent(id) {
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Foo = _wrapComponent('Foo')(createClass({
+const Foo = _wrapComponent(\\"Foo\\")(createClass({
   displayName: 'Foo',
   render: function () {}
 }));
 
-const Bar = _wrapComponent('Bar')(factory({
+const Bar = _wrapComponent(\\"Bar\\")(factory({
   displayName: 'Bar',
   render: function () {}
 }));"
@@ -427,6 +439,7 @@ const Bar = _wrapComponent('Bar')(factory({
 
 exports[`finds React components should options custom super classes 1`] = `
 "class Foo extends BooComponent {}
+
 class Bar extends CustomComponent {}"
 `;
 
@@ -459,11 +472,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 class Foo extends BooComponent {
   render() {}
+
 }
+
 Foo = _wrapComponent(\\"Foo\\")(Foo);
+
 class Bar extends CustomComponent {
   render() {}
+
 }
+
 Bar = _wrapComponent(\\"Bar\\")(Bar);"
 `;
 
@@ -504,7 +522,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 class Foo extends React.Component {
   render() {}
+
 }
+
 Foo = _wrapComponent(\\"Foo\\")(Foo);"
 `;
 
@@ -540,7 +560,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 class Foo extends React.Component {
   render() {}
+
 }
+
 Foo = _wrapComponent(\\"Foo\\")(Foo);"
 `;
 
@@ -572,6 +594,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 class Foo extends React.Component {
   render() {}
+
 }
+
 Foo = _wrapComponent(\\"Foo\\")(Foo);"
 `;

packages/metro-babel7-plugin-react-transform/__tests__/babel-plugin-react-transform-test.js

@@ -17,7 +17,7 @@ const fs = require('fs');
 const path = require('path');
 
 /*eslint-disable import/no-extraneous-dependencies*/
-const {transform: transformSync} = require('babel-core');
+const {transformSync} = require('@babel/core');
 const reactPlugin = require('../lib/index.js').default;
 
 describe('finds React components', () => {

packages/metro/src/babel-bridge.js

@@ -13,7 +13,7 @@
 
 // This is a temporary migration bridge to switch between babel 6 and 7
 
-const IS_BABEL7 = process.env.BABEL_VERSION === '7';
+const IS_BABEL7 = true; // process.env.BABEL_VERSION === '7';
 
 // ## Babel 6 stuff
 

packages/metro/src/babelRegisterOnly.js

@@ -13,31 +13,29 @@ require('./setupNodePolyfills');
 var _only = [];
 
 const PLUGINS = [
-  'transform-flow-strip-types',
-  'transform-object-rest-spread',
-  'transform-class-properties',
+  require('@babel/plugin-transform-flow-strip-types'),
+  require('@babel/plugin-proposal-object-rest-spread'),
+  require('@babel/plugin-proposal-class-properties'),
+  require('@babel/plugin-transform-modules-commonjs'),
 ];
 
 if (/^v[0-7]\./.test(process.version)) {
-  PLUGINS.push(
-    'transform-async-to-generator',
-    'syntax-trailing-function-commas',
-  );
+  PLUGINS.push(require('@babel/plugin-transform-async-to-generator'));
 }
 
 function registerOnly(onlyList) {
   // This prevents `babel-register` from transforming the code of the
   // plugins/presets that we are require-ing themselves before setting up the
   // actual config.
-  require('babel-register')({only: [], babelrc: false});
-  require('babel-register')(config(onlyList));
+  require('@babel/register')({only: [], babelrc: false});
+  require('@babel/register')(config(onlyList));
 }
 
 function config(onlyList) {
   _only = _only.concat(onlyList);
   return {
-    presets: [require('babel-preset-es2015-node')],
-    plugins: PLUGINS.map(pluginName => require(`babel-plugin-${pluginName}`)),
+    presets: [],
+    plugins: PLUGINS,
     only: _only,
     retainLines: true,
     sourceMaps: 'inline',

packages/metro/src/integration_tests/__tests__/__snapshots__/basic_bundle-test.js.snap

@@ -45,7 +45,7 @@ exports[`basic_bundle bundles package with polyfills 1`] = `
   function guardedLoadModule(moduleId, module) {
     if (!inGuard && global.ErrorUtils) {
       inGuard = true;
-      var returnValue = void 0;
+      var returnValue;
 
       try {
         returnValue = loadModuleImplementation(moduleId, module);
@@ -108,7 +108,7 @@ exports[`basic_bundle bundles package with polyfills 1`] = `
 
     try {
       if (PRINT_REQUIRE_PATHS) {
-        console.log(\\"require file path \\" + (module.path || 'unknown'));
+        console.log(\`require file path \${module.path || 'unknown'}\`);
       }
 
       var _moduleObject = {
@@ -248,7 +248,7 @@ exports[`basic_bundle bundles package without polyfills 1`] = `
   function guardedLoadModule(moduleId, module) {
     if (!inGuard && global.ErrorUtils) {
       inGuard = true;
-      var returnValue = void 0;
+      var returnValue;
 
       try {
         returnValue = loadModuleImplementation(moduleId, module);
@@ -311,7 +311,7 @@ exports[`basic_bundle bundles package without polyfills 1`] = `
 
     try {
       if (PRINT_REQUIRE_PATHS) {
-        console.log(\\"require file path \\" + (module.path || 'unknown'));
+        console.log(\`require file path \${module.path || 'unknown'}\`);
       }
 
       var _moduleObject = {