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
This commit is contained in:
Peter van der Zee 2018-04-11 16:29:36 -07:00 committed by Facebook Github Bot
parent 2a2b54555e
commit 0349db8654
6 changed files with 71 additions and 49 deletions

View File

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

View File

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

View File

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

View File

@ -13,7 +13,7 @@
// This is a temporary migration bridge to switch between babel 6 and 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 // ## Babel 6 stuff

View File

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

View File

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