status-im/metro
2
0
Fork 0
mirror of https://github.com/status-im/metro.git synced 2025-01-19 15:41:26 +00:00
Code Issues Projects Releases Wiki Activity

Fix the react transform to work in babel 7

Browse Source 
Reviewed By: jeanlauliac

Differential Revision: D7257551

fbshipit-source-id: 408104df411e6f7011c148d0f5146341d7e90125
This commit is contained in:
Peter van der Zee 2018-03-20 04:49:19 -07:00 committed by Facebook Github Bot
parent df5b71ec39
commit 226e59a7e2
2 changed files with 71 additions and 28 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,8 +1,10 @@
// 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`] = `
"import _react from \\"react\\"; "var _default = _interopRequireDefault(require(\\"react\\")).default;
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\\",
@ -14,7 +16,7 @@ const _reactTransformHmrLibIndexJs2 = _reactTransformHmrLibIndexJs({
filename: \\"unknown\\", filename: \\"unknown\\",
components: _components, components: _components,
locals: [module], locals: [module],
imports: [_react] imports: [_default]
}); });
function _wrapComponent(id) { function _wrapComponent(id) {
@ -23,6 +25,8 @@ 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 {
@ -55,7 +59,8 @@ 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`] = `
"import _transformLib from \\"transform-lib\\"; "var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -76,6 +81,8 @@ 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() {}
})); }));
@ -143,7 +150,8 @@ 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`] = `
"import _transformLib from \\"transform-lib\\"; "var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -163,6 +171,8 @@ 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() {}
} }
@ -182,7 +192,8 @@ 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`] = `
"import _transformLib from \\"transform-lib\\"; "var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\", displayName: \\"Foo\\",
@ -203,6 +214,8 @@ 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() {}
@ -213,7 +226,8 @@ 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`] = `
"import _transformLib from \\"transform-lib\\"; "var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = { const _components = {
_component: {} _component: {}
}; };
@ -231,6 +245,8 @@ 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() {}
});" });"
@ -284,7 +300,8 @@ 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`] = `
"import _transformLib from 'transform-lib'; "var _transformLib = _interopRequireDefault(require('transform-lib')).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: 'Foo' displayName: 'Foo'
@ -306,6 +323,8 @@ 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 () {}
@ -327,7 +346,8 @@ 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`] = `
"import _transformLib from 'transform-lib'; "var _transformLib = _interopRequireDefault(require('transform-lib')).default;
const _components = { const _components = {
'my-component': { 'my-component': {
displayName: 'my-component' displayName: 'my-component'
@ -347,6 +367,8 @@ 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 () {}
@ -366,7 +388,8 @@ 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`] = `
"import _transformLib from 'transform-lib'; "var _transformLib = _interopRequireDefault(require('transform-lib')).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: 'Foo' displayName: 'Foo'
@ -389,6 +412,8 @@ 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 () {}
@ -406,7 +431,8 @@ 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`] = `
"import _transformLib from \\"transform-lib\\"; "var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -429,6 +455,8 @@ function _wrapComponent(id) {
}; };
} }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Foo extends BooComponent { class Foo extends BooComponent {
render() {} render() {}
} }
@ -442,8 +470,10 @@ 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`] = `
"import _transformTwo from \\"transform-two\\"; "var _transformTwo = _interopRequireDefault(require(\\"transform-two\\")).default;
import _transformOne from \\"transform-one\\";
var _transformOne = _interopRequireDefault(require(\\"transform-one\\")).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -470,6 +500,8 @@ 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() {}
} }
@ -479,9 +511,12 @@ 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`] = `
"import _reactDom from \\"react-dom\\"; "var _default2 = _interopRequireDefault(require(\\"react-dom\\")).default;
import _react from \\"react\\";
import _transformLib from \\"transform-lib\\"; var _default = _interopRequireDefault(require(\\"react\\")).default;
var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -492,7 +527,7 @@ const _transformLib2 = _transformLib({
filename: \\"unknown\\", filename: \\"unknown\\",
components: _components, components: _components,
locals: [], locals: [],
imports: [_react, _reactDom] imports: [_default, _default2]
}); });
function _wrapComponent(id) { function _wrapComponent(id) {
@ -501,6 +536,8 @@ 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() {}
} }
@ -510,7 +547,8 @@ 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`] = `
"import _transformLib from \\"transform-lib\\"; "var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = { const _components = {
Foo: { Foo: {
displayName: \\"Foo\\" displayName: \\"Foo\\"
@ -530,6 +568,8 @@ 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,6 +26,8 @@
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) {
@ -246,7 +248,7 @@ module.exports = {
}; };
} }
build() { build(path) {
const componentsDeclarationId = this.file.scope.generateUidIdentifier( const componentsDeclarationId = this.file.scope.generateUidIdentifier(
'components', 'components',
); );
@ -265,6 +267,7 @@ 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);
@ -359,21 +362,19 @@ module.exports = {
* imports: [] * imports: []
* }); * });
*/ */
initTransformers(componentsDeclarationId) { initTransformers(path, componentsDeclarationId) {
return this.options.transforms.map(transform => { return this.options.transforms.map(transform => {
const transformName = transform.transform; const transformName = transform.transform;
const transformImportId = this.file.addImport( const transformImportId = addDefault(path, transformName, {
transformName, nameHint: 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 this.file.addImport(importName, 'default', importName); return addDefault(path, importName, {hint: importName});
}); });
const configuredTransformId = this.file.scope.generateUidIdentifier( const configuredTransformId = this.file.scope.generateUidIdentifier(
@ -384,7 +385,9 @@ module.exports = {
configuredTransformId, configuredTransformId,
t.callExpression(transformImportId, [ t.callExpression(transformImportId, [
toObjectExpression({ toObjectExpression({
filename: t.stringLiteral(this.file.opts.filename), filename: t.stringLiteral(
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),
@ -430,7 +433,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(); builder.build(path);
}, },
}, },
}; };