status-im
/
metro
mirror of https://github.com/status-im/metro.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Inject imports through external babel api for babel 7 

Reviewed By: arcanis

Differential Revision: D7337424

fbshipit-source-id: 9bbaea34759475d2bbd95615e6715fcacda59c3a
This commit is contained in:
Peter van der Zee 2018-03-21 09:27:34 -07:00 committed by Facebook Github Bot
parent 5a7fa7e2dd
commit e42b126485
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
exports[`finds React components should babel7 regression 1`] = `
"import _react from \\"react\\";
import _reactTransformHmrLibIndexJs from \\"react-transform-hmr/lib/index.js\\";
"var _default = _interopRequireDefault(require(\\"react\\")).default;
var _reactTransformHmrLibIndexJs = _interopRequireDefault(require(\\"react-transform-hmr/lib/index.js\\")).default;
const _components = {
Bar: {
displayName: \\"Bar\\",
@ -14,7 +16,7 @@ const _reactTransformHmrLibIndexJs2 = _reactTransformHmrLibIndexJs({
filename: \\"unknown\\",
components: _components,
locals: [module],
imports: [_react]
imports: [_default]
});
function _wrapComponent(id) {
@ -23,6 +25,8 @@ function _wrapComponent(id) {
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Foo {
f() {
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`] = `
"import _transformLib from \\"transform-lib\\";
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = {
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 {
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 with render method 1`] = `
"import _transformLib from \\"transform-lib\\";
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = {
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 {
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`] = `
"import _transformLib from \\"transform-lib\\";
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = {
Foo: {
displayName: \\"Foo\\",
@ -203,6 +214,8 @@ function _wrapComponent(id) {
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function factory() {
return _wrapComponent(\\"Foo\\")(class Foo extends React.Component {
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 extends react component with render method 1`] = `
"import _transformLib from \\"transform-lib\\";
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = {
_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 {
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`] = `
"import _transformLib from 'transform-lib';
"var _transformLib = _interopRequireDefault(require('transform-lib')).default;
const _components = {
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({
displayName: 'Foo',
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`] = `
"import _transformLib from 'transform-lib';
"var _transformLib = _interopRequireDefault(require('transform-lib')).default;
const _components = {
'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({
displayName: 'my-component',
render: function () {}
@ -366,7 +388,8 @@ const Bar = factory({
`;
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 = {
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({
displayName: 'Foo',
render: function () {}
@ -406,7 +431,8 @@ class Bar extends CustomComponent {}"
`;
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 = {
Foo: {
displayName: \\"Foo\\"
@ -429,6 +455,8 @@ function _wrapComponent(id) {
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Foo extends BooComponent {
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 with render method 1`] = `
"import _transformTwo from \\"transform-two\\";
import _transformOne from \\"transform-one\\";
"var _transformTwo = _interopRequireDefault(require(\\"transform-two\\")).default;
var _transformOne = _interopRequireDefault(require(\\"transform-one\\")).default;
const _components = {
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 {
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 with render method 1`] = `
"import _reactDom from \\"react-dom\\";
import _react from \\"react\\";
import _transformLib from \\"transform-lib\\";
"var _default2 = _interopRequireDefault(require(\\"react-dom\\")).default;
var _default = _interopRequireDefault(require(\\"react\\")).default;
var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = {
Foo: {
displayName: \\"Foo\\"
@ -492,7 +527,7 @@ const _transformLib2 = _transformLib({
filename: \\"unknown\\",
components: _components,
locals: [],
imports: [_react, _reactDom]
imports: [_default, _default2]
});
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 {
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 with render method 1`] = `
"import _transformLib from \\"transform-lib\\";
"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
const _components = {
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 {
render() {}
}

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

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