status-im/metro
2
0
Fork 0
mirror of https://github.com/status-im/metro.git synced 2025-02-21 07:18:11 +00:00
Code Issues Projects Releases Wiki Activity

Revert D7257551: Fix the react transform to work in babel 7

Browse Source 
Differential Revision:
D7257551

Original commit changeset: 408104df411e

fbshipit-source-id: 5128bc475ae4d4cc02f6b6825a697bbb3ed1e6a3
This commit is contained in:
Naor Matania 2018-03-20 06:32:52 -07:00 committed by Facebook Github Bot
parent 226e59a7e2
commit 1864a83e6e
2 changed files with 28 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`finds React components should babel7 regression 1`] = ` exports[`finds React components should babel7 regression 1`] = `
"var _default = _interopRequireDefault(require(\\"react\\")).default; "import _react from \\"react\\";
import _reactTransformHmrLibIndexJs from \\"react-transform-hmr/lib/index.js\\";
var _reactTransformHmrLibIndexJs = _interopRequireDefault(require(\\"react-transform-hmr/lib/index.js\\")).default;
const _components = { const _components = {
Bar: { Bar: {
displayName: \\"Bar\\", displayName: \\"Bar\\",
@ -16,7 +14,7 @@ const _reactTransformHmrLibIndexJs2 = _reactTransformHmrLibIndexJs({
filename: \\"unknown\\", filename: \\"unknown\\",
components: _components, components: _components,
locals: [module], locals: [module],
imports: [_default] imports: [_react]
}); });
function _wrapComponent(id) { function _wrapComponent(id) {
@ -25,8 +23,6 @@ function _wrapComponent(id) {
}; };
} }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Foo { class Foo {
f() { f() {
class Bar extends React.Component { class Bar extends React.Component {
@ -59,8 +55,7 @@ foo(class extends React.Component {});"
`; `;
exports[`finds React components should code class expression extends react component with render method 1`] = ` exports[`finds React components should code class expression extends react component with render method 1`] = `
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; "import _transformLib from \\"transform-lib\\";
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -81,8 +76,6 @@ function _wrapComponent(id) {
}; };
} }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
foo(_wrapComponent(\\"Foo\\")(class Foo extends React.Component { foo(_wrapComponent(\\"Foo\\")(class Foo extends React.Component {
render() {} render() {}
})); }));
@ -150,8 +143,7 @@ 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 {}"`;
exports[`finds React components should code class extends react component with render method 1`] = ` exports[`finds React components should code class extends react component with render method 1`] = `
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; "import _transformLib from \\"transform-lib\\";
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -171,8 +163,6 @@ function _wrapComponent(id) {
}; };
} }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Foo extends React.Component { class Foo extends React.Component {
render() {} render() {}
} }
@ -192,8 +182,7 @@ exports[`finds React components should code class within function 1`] = `
`; `;
exports[`finds React components should code class within function extends react component with render method 1`] = ` exports[`finds React components should code class within function extends react component with render method 1`] = `
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; "import _transformLib from \\"transform-lib\\";
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\", displayName: \\"Foo\\",
@ -214,8 +203,6 @@ function _wrapComponent(id) {
}; };
} }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function factory() { function factory() {
return _wrapComponent(\\"Foo\\")(class Foo extends React.Component { return _wrapComponent(\\"Foo\\")(class Foo extends React.Component {
render() {} render() {}
@ -226,8 +213,7 @@ function factory() {
exports[`finds React components should code class without name 1`] = `"const Foo = class extends React.Component {};"`; exports[`finds React components should code class without name 1`] = `"const Foo = class extends React.Component {};"`;
exports[`finds React components should code class without name extends react component with render method 1`] = ` exports[`finds React components should code class without name extends react component with render method 1`] = `
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; "import _transformLib from \\"transform-lib\\";
const _components = { const _components = {
_component: {} _component: {}
}; };
@ -245,8 +231,6 @@ function _wrapComponent(id) {
}; };
} }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const Foo = _wrapComponent(\\"_component\\")(class extends React.Component { const Foo = _wrapComponent(\\"_component\\")(class extends React.Component {
render() {} render() {}
});" });"
@ -300,8 +284,7 @@ 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; "import _transformLib from 'transform-lib';
const _components = { const _components = {
Foo: { Foo: {
displayName: 'Foo' displayName: 'Foo'
@ -323,8 +306,6 @@ 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', displayName: 'Foo',
render: function () {} render: function () {}
@ -346,8 +327,7 @@ 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; "import _transformLib from 'transform-lib';
const _components = { const _components = {
'my-component': { 'my-component': {
displayName: 'my-component' displayName: 'my-component'
@ -367,8 +347,6 @@ 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', displayName: 'my-component',
render: function () {} render: function () {}
@ -388,8 +366,7 @@ const Bar = factory({
`; `;
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; "import _transformLib from 'transform-lib';
const _components = { const _components = {
Foo: { Foo: {
displayName: 'Foo' displayName: 'Foo'
@ -412,8 +389,6 @@ 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', displayName: 'Foo',
render: function () {} render: function () {}
@ -431,8 +406,7 @@ class Bar extends CustomComponent {}"
`; `;
exports[`finds React components should options custom super classes with render method 1`] = ` exports[`finds React components should options custom super classes with render method 1`] = `
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; "import _transformLib from \\"transform-lib\\";
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -455,8 +429,6 @@ function _wrapComponent(id) {
}; };
} }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Foo extends BooComponent { class Foo extends BooComponent {
render() {} render() {}
} }
@ -470,10 +442,8 @@ Bar = _wrapComponent(\\"Bar\\")(Bar);"
exports[`finds React components should options multiple transforms 1`] = `"class Foo extends React.Component {}"`; exports[`finds React components should options multiple transforms 1`] = `"class Foo extends React.Component {}"`;
exports[`finds React components should options multiple transforms with render method 1`] = ` exports[`finds React components should options multiple transforms with render method 1`] = `
"var _transformTwo = _interopRequireDefault(require(\\"transform-two\\")).default; "import _transformTwo from \\"transform-two\\";
import _transformOne from \\"transform-one\\";
var _transformOne = _interopRequireDefault(require(\\"transform-one\\")).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -500,8 +470,6 @@ function _wrapComponent(id) {
}; };
} }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Foo extends React.Component { class Foo extends React.Component {
render() {} render() {}
} }
@ -511,12 +479,9 @@ Foo = _wrapComponent(\\"Foo\\")(Foo);"
exports[`finds React components should options with imports 1`] = `"class Foo extends React.Component {}"`; exports[`finds React components should options with imports 1`] = `"class Foo extends React.Component {}"`;
exports[`finds React components should options with imports with render method 1`] = ` exports[`finds React components should options with imports with render method 1`] = `
"var _default2 = _interopRequireDefault(require(\\"react-dom\\")).default; "import _reactDom from \\"react-dom\\";
import _react from \\"react\\";
var _default = _interopRequireDefault(require(\\"react\\")).default; import _transformLib from \\"transform-lib\\";
var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -527,7 +492,7 @@ const _transformLib2 = _transformLib({
filename: \\"unknown\\", filename: \\"unknown\\",
components: _components, components: _components,
locals: [], locals: [],
imports: [_default, _default2] imports: [_react, _reactDom]
}); });
function _wrapComponent(id) { function _wrapComponent(id) {
@ -536,8 +501,6 @@ function _wrapComponent(id) {
}; };
} }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Foo extends React.Component { class Foo extends React.Component {
render() {} render() {}
} }
@ -547,8 +510,7 @@ Foo = _wrapComponent(\\"Foo\\")(Foo);"
exports[`finds React components should options with locals 1`] = `"class Foo extends React.Component {}"`; exports[`finds React components should options with locals 1`] = `"class Foo extends React.Component {}"`;
exports[`finds React components should options with locals with render method 1`] = ` exports[`finds React components should options with locals with render method 1`] = `
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; "import _transformLib from \\"transform-lib\\";
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -568,8 +530,6 @@ function _wrapComponent(id) {
}; };
} }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Foo extends React.Component { class Foo extends React.Component {
render() {} render() {}
} }

23
packages/metro-babel7-plugin-react-transform/lib/index.js
View File

@ -26,8 +26,6 @@
const find = require('lodash/find'); const find = require('lodash/find');
const {addDefault} = require('@babel/helper-module-imports');
module.exports = { module.exports = {
default: function({types: t, template}) { default: function({types: t, template}) {
function matchesPatterns(path, patterns) { function matchesPatterns(path, patterns) {
@ -248,7 +246,7 @@ module.exports = {
}; };
} }
build(path) { build() {
const componentsDeclarationId = this.file.scope.generateUidIdentifier( const componentsDeclarationId = this.file.scope.generateUidIdentifier(
'components', 'components',
); );
@ -267,7 +265,6 @@ module.exports = {
components, components,
); );
const configuredTransforms = this.initTransformers( const configuredTransforms = this.initTransformers(
path,
componentsDeclarationId, componentsDeclarationId,
); );
const wrapperFunction = this.initWrapperFunction(wrapperFunctionId); const wrapperFunction = this.initWrapperFunction(wrapperFunctionId);
@ -362,19 +359,21 @@ module.exports = {
* imports: [] * imports: []
* }); * });
*/ */
initTransformers(path, componentsDeclarationId) { initTransformers(componentsDeclarationId) {
return this.options.transforms.map(transform => { return this.options.transforms.map(transform => {
const transformName = transform.transform; const transformName = transform.transform;
const transformImportId = addDefault(path, transformName, { const transformImportId = this.file.addImport(
nameHint: transformName, transformName,
}); 'default',
transformName,
);
const transformLocals = transform.locals.map(local => { const transformLocals = transform.locals.map(local => {
return t.identifier(local); return t.identifier(local);
}); });
const transformImports = transform.imports.map(importName => { const transformImports = transform.imports.map(importName => {
return addDefault(path, importName, {hint: importName}); return this.file.addImport(importName, 'default', importName);
}); });
const configuredTransformId = this.file.scope.generateUidIdentifier( const configuredTransformId = this.file.scope.generateUidIdentifier(
@ -385,9 +384,7 @@ module.exports = {
configuredTransformId, configuredTransformId,
t.callExpression(transformImportId, [ t.callExpression(transformImportId, [
toObjectExpression({ toObjectExpression({
filename: t.stringLiteral( filename: t.stringLiteral(this.file.opts.filename),
this.file.opts.filename || 'unknown',
),
components: componentsDeclarationId, components: componentsDeclarationId,
locals: t.arrayExpression(transformLocals), locals: t.arrayExpression(transformLocals),
imports: t.arrayExpression(transformImports), imports: t.arrayExpression(transformImports),
@ -433,7 +430,7 @@ module.exports = {
Program(path, {file, opts}) { Program(path, {file, opts}) {
ReactTransformBuilder.assertValidOptions(opts); ReactTransformBuilder.assertValidOptions(opts);
const builder = new ReactTransformBuilder(file, opts); const builder = new ReactTransformBuilder(file, opts);
builder.build(path); builder.build();
}, },
}, },
}; };