status-im/metro
2
0
Fork 0
mirror of https://github.com/status-im/metro.git synced 2025-02-09 01:33:45 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Differential Revision:
D7097279

Original commit changeset: 9fb204cae733

fbshipit-source-id: bbbb20b5dbed5dc01ae5557686a07d987b9a6cc6
This commit is contained in:
Matt Mahoney 2018-04-11 08:12:44 -07:00 committed by Facebook Github Bot
parent 1c3adf5d21
commit 76a9a21369
6 changed files with 49 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/GettingStarted.md
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 {transformSync} = require('@babel/core'); const {transform} = require('@babel/core');
module.exports.transform = file => { module.exports.transform = file => {
return transform(file.src, { return transform(file.src, {

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

@ -31,24 +31,23 @@ 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 () {}
});" });"
@ -86,24 +85,22 @@ 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: []
@ -116,25 +113,22 @@ 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: []
@ -147,13 +141,10 @@ 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 {}"`;
@ -184,16 +175,13 @@ 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() {}
}" }"
`; `;
@ -231,7 +219,6 @@ 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() {}
}); });
}" }"
`; `;
@ -262,7 +249,6 @@ 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() {}
});" });"
`; `;
@ -273,16 +259,15 @@ 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'
}); });
@ -296,6 +281,7 @@ const myCreateClass = spec => {
const spec = { const spec = {
render: function () {} render: function () {}
}; };
React.createClass(spec);" React.createClass(spec);"
`; `;
@ -303,6 +289,7 @@ 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({});"
`; `;
@ -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`] = ` 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: []
@ -338,16 +325,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 () {}
}));" }));"
`; `;
@ -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`] = ` 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: []
@ -382,7 +369,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 () {}
}));" }));"
@ -394,25 +381,26 @@ 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: []
@ -426,12 +414,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 () {}
}));" }));"
@ -439,7 +427,6 @@ 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 {}"
`; `;
@ -472,16 +459,11 @@ 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);"
`; `;
@ -522,9 +504,7 @@ 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);"
`; `;
@ -560,9 +540,7 @@ 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);"
`; `;
@ -594,8 +572,6 @@ 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);"
`; `;

2
packages/metro-babel7-plugin-react-transform/__tests__/babel-plugin-react-transform-test.js
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 {transformSync} = require('@babel/core'); const {transform: 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', () => {

2
packages/metro/src/babel-bridge.js
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 = true; // process.env.BABEL_VERSION === '7'; const IS_BABEL7 = process.env.BABEL_VERSION === '7';
// ## Babel 6 stuff // ## Babel 6 stuff

19
packages/metro/src/babelRegisterOnly.js
View File

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

8
packages/metro/src/integration_tests/__tests__/__snapshots__/basic_bundle-test.js.snap
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; var returnValue = void 0;
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; var returnValue = void 0;
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 = {