Revert D7097279: BREAKING CHANGE: UPGRADE REACT NATIVE TO BABEL 7!

Differential Revision:
D7097279

Original commit changeset: 9fb204cae733

fbshipit-source-id: bbbb20b5dbed5dc01ae5557686a07d987b9a6cc6

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 {transformSync} = require('@babel/core');
+const {transform} = 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,24 +31,23 @@ 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 () {}
 });"
@@ -86,24 +85,22 @@ 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: []
@@ -116,25 +113,22 @@ 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: []
@@ -147,13 +141,10 @@ 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 {}"`;
@@ -184,16 +175,13 @@ 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() {}
-
 }"
 `;
 
@@ -231,7 +219,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function factory() {
   return _wrapComponent(\\"Foo\\")(class Foo extends React.Component {
     render() {}
-
   });
 }"
 `;
@@ -262,7 +249,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const Foo = _wrapComponent(\\"_component\\")(class extends React.Component {
   render() {}
-
 });"
 `;
 
@@ -273,16 +259,15 @@ 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'
 });
@@ -296,6 +281,7 @@ const myCreateClass = spec => {
 const spec = {
   render: function () {}
 };
+
 React.createClass(spec);"
 `;
 
@@ -303,6 +289,7 @@ exports[`finds React components should code react create class 1`] = `
 "const Foo = React.createClass({
   displayName: 'Foo'
 });
+
 React.createClass({});"
 `;
 
@@ -313,18 +300,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: []
@@ -338,16 +325,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 () {}
 }));"
 `;
@@ -359,16 +346,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: []
@@ -382,7 +369,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 () {}
 }));"
@@ -394,25 +381,26 @@ 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: []
@@ -426,12 +414,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 () {}
 }));"
@@ -439,7 +427,6 @@ const Bar = _wrapComponent(\\"Bar\\")(factory({
 
 exports[`finds React components should options custom super classes 1`] = `
 "class Foo extends BooComponent {}
-
 class Bar extends CustomComponent {}"
 `;
 
@@ -472,16 +459,11 @@ 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);"
 `;
 
@@ -522,9 +504,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 class Foo extends React.Component {
   render() {}
-
 }
-
 Foo = _wrapComponent(\\"Foo\\")(Foo);"
 `;
 
@@ -560,9 +540,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 class Foo extends React.Component {
   render() {}
-
 }
-
 Foo = _wrapComponent(\\"Foo\\")(Foo);"
 `;
 
@@ -594,8 +572,6 @@ 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 {transformSync} = require('@babel/core');
+const {transform: 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 = true; // process.env.BABEL_VERSION === '7';
+const IS_BABEL7 = process.env.BABEL_VERSION === '7';
 
 // ## Babel 6 stuff
 

packages/metro/src/babelRegisterOnly.js

@@ -13,28 +13,31 @@ require('./setupNodePolyfills');
 var _only = [];
 
 const PLUGINS = [
-  require('@babel/plugin-transform-flow-strip-types'),
-  require('@babel/plugin-proposal-object-rest-spread'),
-  require('@babel/plugin-proposal-class-properties'),
+  'transform-flow-strip-types',
+  'transform-object-rest-spread',
+  'transform-class-properties',
 ];
 
 if (/^v[0-7]\./.test(process.version)) {
-  PLUGINS.push(require('@babel/plugin-transform-async-to-generator'));
+  PLUGINS.push(
+    'transform-async-to-generator',
+    'syntax-trailing-function-commas',
+  );
 }
 
 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: [],
-    plugins: PLUGINS,
+    presets: [require('babel-preset-es2015-node')],
+    plugins: PLUGINS.map(pluginName => require(`babel-plugin-${pluginName}`)),
     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;
+      var returnValue = void 0;
 
       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;
+      var returnValue = void 0;
 
       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 = {