Create a local package of babel-plugin-transform-react

Reviewed By: arcanis

Differential Revision: D7337425

fbshipit-source-id: c70c27921faacb4f39674d0fbc14a2052fe9eac3
This commit is contained in:
Peter van der Zee 2018-03-21 09:27:23 -07:00 committed by Facebook Github Bot
parent 012bb6a512
commit ad2d99512b
95 changed files with 1692 additions and 0 deletions

View File

@ -0,0 +1,11 @@
factory({
render() {}
});
factory({
render: function() {}
});
factory({
'render': function() {}
});

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,11 @@
factory({
render() {}
});
factory({
render: function () {}
});
factory({
'render': function () {}
});

View File

@ -0,0 +1,6 @@
foo(class Foo extends React.Component {
render() {}
});
foo(class extends React.Component {
render() {}
});

View File

@ -0,0 +1,27 @@
import _transformLib from "transform-lib";
const _components = {
Foo: {
displayName: "Foo"
},
_component: {}
};
const _transformLib2 = _transformLib({
filename: "%FIXTURE_PATH%",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
foo(_wrapComponent("Foo")(class Foo extends React.Component {
render() {}
}));
foo(_wrapComponent("_component")(class extends React.Component {
render() {}
}));

View File

@ -0,0 +1,2 @@
foo(class Foo extends React.Component {});
foo(class extends React.Component {});

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,2 @@
foo(class Foo extends React.Component {});
foo(class extends React.Component {});

View File

@ -0,0 +1,4 @@
import React, { Component } from 'react';
class Foo extends Component {
render() {}
}

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,25 @@
import _transformLib from 'transform-lib';
const _components = {
Foo: {
displayName: 'Foo'
}
};
const _transformLib2 = _transformLib({
filename: '%FIXTURE_PATH%',
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
import React, { Component } from 'react';
const Foo = _wrapComponent('Foo')(class Foo extends Component {
render() {}
});

View File

@ -0,0 +1,4 @@
import React, { PureComponent } from 'react';
class Foo extends PureComponent {
render() {}
}

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,25 @@
import _transformLib from 'transform-lib';
const _components = {
Foo: {
displayName: 'Foo'
}
};
const _transformLib2 = _transformLib({
filename: '%FIXTURE_PATH%',
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
import React, { PureComponent } from 'react';
const Foo = _wrapComponent('Foo')(class Foo extends PureComponent {
render() {}
});

View File

@ -0,0 +1,3 @@
class Foo extends React.Component {
render() {}
}

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,23 @@
import _transformLib from "transform-lib";
const _components = {
Foo: {
displayName: "Foo"
}
};
const _transformLib2 = _transformLib({
filename: "%FIXTURE_PATH%",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent("Foo")(class Foo extends React.Component {
render() {}
});

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,5 @@
function factory() {
return class Foo extends React.Component {
render() {}
}
}

View File

@ -0,0 +1,26 @@
import _transformLib from "transform-lib";
const _components = {
Foo: {
displayName: "Foo",
isInFunction: true
}
};
const _transformLib2 = _transformLib({
filename: "%FIXTURE_PATH%",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
function factory() {
return _wrapComponent("Foo")(class Foo extends React.Component {
render() {}
});
}

View File

@ -0,0 +1,3 @@
function factory() {
return class Foo extends React.Component {}
}

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,3 @@
function factory() {
return class Foo extends React.Component {};
}

View File

@ -0,0 +1,3 @@
const Foo = class extends React.Component {
render() {}
}

View File

@ -0,0 +1,21 @@
import _transformLib from "transform-lib";
const _components = {
_component: {}
};
const _transformLib2 = _transformLib({
filename: "%FIXTURE_PATH%",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent("_component")(class extends React.Component {
render() {}
});

View File

@ -0,0 +1 @@
const Foo = class extends React.Component {}

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1 @@
const Foo = class extends React.Component {};

View File

@ -0,0 +1,6 @@
export class Foo extends React.Component {}
export default React.createClass({});
export class Bar extends React.Component {}
export const bar = React.createClass({});
export class Baz { render() {} }
export class Boo { render() {} }

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,10 @@
export class Foo extends React.Component {}
export default React.createClass({});
export class Bar extends React.Component {}
export const bar = React.createClass({});
export class Baz {
render() {}
}
export class Boo {
render() {}
}

View File

@ -0,0 +1,17 @@
import React from 'react';
const First = React.createNotClass({
displayName: 'First'
});
class Second extends React.NotComponent {}
const myCreateClass = spec => {
return React.createClass(spec);
};
const spec = {
render: function () {}
};
React.createClass(spec);

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,17 @@
import React from 'react';
const First = React.createNotClass({
displayName: 'First'
});
class Second extends React.NotComponent {}
const myCreateClass = spec => {
return React.createClass(spec);
};
const spec = {
render: function () {}
};
React.createClass(spec);

View File

@ -0,0 +1,3 @@
const Foo = React.createClass({
displayName: Math.random()
});

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,3 @@
const Foo = React.createClass({
displayName: Math.random()
});

View File

@ -0,0 +1,12 @@
const Foo = React.createClass({
displayName: 'Foo',
render: function () {}
});
React.createClass({
render: function () {}
});
const Bar = React.createClass({
render: function () {}
});

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,34 @@
import _transformLib from 'transform-lib';
const _components = {
Foo: {
displayName: 'Foo'
},
_component: {},
_component2: {}
};
const _transformLib2 = _transformLib({
filename: '%FIXTURE_PATH%',
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent('Foo')(React.createClass({
displayName: 'Foo',
render: function () {}
}));
_wrapComponent('_component')(React.createClass({
render: function () {}
}));
const Bar = _wrapComponent('_component2')(React.createClass({
render: function () {}
}));

View File

@ -0,0 +1,4 @@
const MyComponent = React.createClass({
displayName: 'my-component',
render: function () {}
});

View File

@ -0,0 +1,24 @@
import _transformLib from 'transform-lib';
const _components = {
'my-component': {
displayName: 'my-component'
}
};
const _transformLib2 = _transformLib({
filename: '%FIXTURE_PATH%',
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const MyComponent = _wrapComponent('my-component')(React.createClass({
displayName: 'my-component',
render: function () {}
}));

View File

@ -0,0 +1,3 @@
const MyComponent = React.createClass({
displayName: 'my-component'
});

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,3 @@
const MyComponent = React.createClass({
displayName: 'my-component'
});

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,6 @@
const Foo = React.createClass({
displayName: 'Foo'
});
React.createClass({
});

View File

@ -0,0 +1,5 @@
{
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,5 @@
const Foo = React.createClass({
displayName: 'Foo'
});
React.createClass({});

View File

@ -0,0 +1,9 @@
const Foo = createClass({
displayName: 'Foo',
render: function () {}
});
const Bar = factory({
displayName: 'Bar',
render: function () {}
});

View File

@ -0,0 +1,6 @@
{
"factoryMethods": ["createClass", "factory"],
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,32 @@
import _transformLib from 'transform-lib';
const _components = {
Foo: {
displayName: 'Foo'
},
Bar: {
displayName: 'Bar'
}
};
const _transformLib2 = _transformLib({
filename: '%FIXTURE_PATH%',
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent('Foo')(createClass({
displayName: 'Foo',
render: function () {}
}));
const Bar = _wrapComponent('Bar')(factory({
displayName: 'Bar',
render: function () {}
}));

View File

@ -0,0 +1,7 @@
const Foo = createClass({
displayName: 'Foo'
});
const Bar = factory({
displayName: 'Bar'
});

View File

@ -0,0 +1,6 @@
{
"factoryMethods": ["createClass", "factory"],
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,7 @@
const Foo = createClass({
displayName: 'Foo'
});
const Bar = factory({
displayName: 'Bar'
});

View File

@ -0,0 +1,6 @@
class Foo extends BooComponent {
render() {}
}
class Bar extends CustomComponent {
render() {}
}

View File

@ -0,0 +1,6 @@
{
"superClasses": ["BooComponent", "CustomComponent"],
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,30 @@
import _transformLib from "transform-lib";
const _components = {
Foo: {
displayName: "Foo"
},
Bar: {
displayName: "Bar"
}
};
const _transformLib2 = _transformLib({
filename: "%FIXTURE_PATH%",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent("Foo")(class Foo extends BooComponent {
render() {}
});
const Bar = _wrapComponent("Bar")(class Bar extends CustomComponent {
render() {}
});

View File

@ -0,0 +1,2 @@
class Foo extends BooComponent {}
class Bar extends CustomComponent {}

View File

@ -0,0 +1,6 @@
{
"superClasses": ["BooComponent", "CustomComponent"],
"transforms": [{
"transform": "transform-lib"
}]
}

View File

@ -0,0 +1,2 @@
class Foo extends BooComponent {}
class Bar extends CustomComponent {}

View File

@ -0,0 +1,3 @@
class Foo extends React.Component {
render() {}
}

View File

@ -0,0 +1,7 @@
{
"transforms": [{
"transform": "transform-one"
}, {
"transform": "transform-two"
}]
}

View File

@ -0,0 +1,31 @@
import _transformTwo from "transform-two";
import _transformOne from "transform-one";
const _components = {
Foo: {
displayName: "Foo"
}
};
const _transformOne2 = _transformOne({
filename: "%FIXTURE_PATH%",
components: _components,
locals: [],
imports: []
});
const _transformTwo2 = _transformTwo({
filename: "%FIXTURE_PATH%",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformOne2(_transformTwo2(Component, id), id);
};
}
const Foo = _wrapComponent("Foo")(class Foo extends React.Component {
render() {}
});

View File

@ -0,0 +1 @@
class Foo extends React.Component {}

View File

@ -0,0 +1,7 @@
{
"transforms": [{
"transform": "transform-one"
}, {
"transform": "transform-two"
}]
}

View File

@ -0,0 +1 @@
class Foo extends React.Component {}

View File

@ -0,0 +1,3 @@
class Foo extends React.Component {
render() {}
}

View File

@ -0,0 +1,7 @@
{
"transforms": [{
"transform": "transform-lib",
"locals": [],
"imports": ["react", "react-dom"]
}]
}

View File

@ -0,0 +1,25 @@
import _reactDom from "react-dom";
import _react from "react";
import _transformLib from "transform-lib";
const _components = {
Foo: {
displayName: "Foo"
}
};
const _transformLib2 = _transformLib({
filename: "%FIXTURE_PATH%",
components: _components,
locals: [],
imports: [_react, _reactDom]
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent("Foo")(class Foo extends React.Component {
render() {}
});

View File

@ -0,0 +1 @@
class Foo extends React.Component {}

View File

@ -0,0 +1,7 @@
{
"transforms": [{
"transform": "transform-lib",
"locals": [],
"imports": ["react", "react-dom"]
}]
}

View File

@ -0,0 +1 @@
class Foo extends React.Component {}

View File

@ -0,0 +1,3 @@
class Foo extends React.Component {
render() {}
}

View File

@ -0,0 +1,7 @@
{
"transforms": [{
"transform": "transform-lib",
"locals": ["module", "exports"],
"imports": []
}]
}

View File

@ -0,0 +1,23 @@
import _transformLib from "transform-lib";
const _components = {
Foo: {
displayName: "Foo"
}
};
const _transformLib2 = _transformLib({
filename: "%FIXTURE_PATH%",
components: _components,
locals: [module, exports],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent("Foo")(class Foo extends React.Component {
render() {}
});

View File

@ -0,0 +1 @@
class Foo extends React.Component {}

View File

@ -0,0 +1,7 @@
{
"transforms": [{
"transform": "transform-lib",
"locals": ["module", "exports"],
"imports": []
}]
}

View File

@ -0,0 +1 @@
class Foo extends React.Component {}

View File

@ -0,0 +1,497 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`finds React components should code call expression with render method 1`] = `
"factory({
render() {}
});
factory({
render: function () {}
});
factory({
'render': function () {}
});"
`;
exports[`finds React components should code class expression 1`] = `
"foo(class Foo extends React.Component {});
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\\";
const _components = {
Foo: {
displayName: \\"Foo\\"
},
_component: {}
};
const _transformLib2 = _transformLib({
filename: \\"unknown\\",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
foo(_wrapComponent(\\"Foo\\")(class Foo extends React.Component {
render() {}
}));
foo(_wrapComponent(\\"_component\\")(class extends React.Component {
render() {}
}));"
`;
exports[`finds React components should code class extends component with render method 1`] = `
"import _transformLib from 'transform-lib';
const _components = {
Foo: {
displayName: 'Foo'
}
};
const _transformLib2 = _transformLib({
filename: 'unknown',
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
import React, { Component } from 'react';
const Foo = _wrapComponent('Foo')(class Foo extends Component {
render() {}
});"
`;
exports[`finds React components should code class extends purecomponent with render method 1`] = `
"import _transformLib from 'transform-lib';
const _components = {
Foo: {
displayName: 'Foo'
}
};
const _transformLib2 = _transformLib({
filename: 'unknown',
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
import React, { PureComponent } from 'react';
const Foo = _wrapComponent('Foo')(class Foo extends PureComponent {
render() {}
});"
`;
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\\";
const _components = {
Foo: {
displayName: \\"Foo\\"
}
};
const _transformLib2 = _transformLib({
filename: \\"unknown\\",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent(\\"Foo\\")(class Foo extends React.Component {
render() {}
});"
`;
exports[`finds React components should code class with render method 1`] = `
"class Foo {
render() {}
}"
`;
exports[`finds React components should code class within function 1`] = `
"function factory() {
return class Foo extends React.Component {};
}"
`;
exports[`finds React components should code class within function extends react component with render method 1`] = `
"import _transformLib from \\"transform-lib\\";
const _components = {
Foo: {
displayName: \\"Foo\\",
isInFunction: true
}
};
const _transformLib2 = _transformLib({
filename: \\"unknown\\",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
function factory() {
return _wrapComponent(\\"Foo\\")(class Foo extends React.Component {
render() {}
});
}"
`;
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\\";
const _components = {
_component: {}
};
const _transformLib2 = _transformLib({
filename: \\"unknown\\",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent(\\"_component\\")(class extends React.Component {
render() {}
});"
`;
exports[`finds React components should code exports 1`] = `
"export class Foo extends React.Component {}
export default React.createClass({});
export class Bar extends React.Component {}
export const bar = React.createClass({});
export class Baz {
render() {}
}
export class Boo {
render() {}
}"
`;
exports[`finds React components should code ignore 1`] = `
"import React from 'react';
const First = React.createNotClass({
displayName: 'First'
});
class Second extends React.NotComponent {}
const myCreateClass = spec => {
return React.createClass(spec);
};
const spec = {
render: function () {}
};
React.createClass(spec);"
`;
exports[`finds React components should code react create class 1`] = `
"const Foo = React.createClass({
displayName: 'Foo'
});
React.createClass({});"
`;
exports[`finds React components should code react create class with dynamic display name 1`] = `
"const Foo = React.createClass({
displayName: Math.random()
});"
`;
exports[`finds React components should code react create class with render method 1`] = `
"import _transformLib from 'transform-lib';
const _components = {
Foo: {
displayName: 'Foo'
},
_component: {},
_component2: {}
};
const _transformLib2 = _transformLib({
filename: 'unknown',
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent('Foo')(React.createClass({
displayName: 'Foo',
render: function () {}
}));
_wrapComponent('_component')(React.createClass({
render: function () {}
}));
const Bar = _wrapComponent('_component2')(React.createClass({
render: function () {}
}));"
`;
exports[`finds React components should code react create class with string literal display name 1`] = `
"const MyComponent = React.createClass({
displayName: 'my-component'
});"
`;
exports[`finds React components should code react create class with string literal display name with render method 1`] = `
"import _transformLib from 'transform-lib';
const _components = {
'my-component': {
displayName: 'my-component'
}
};
const _transformLib2 = _transformLib({
filename: 'unknown',
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const MyComponent = _wrapComponent('my-component')(React.createClass({
displayName: 'my-component',
render: function () {}
}));"
`;
exports[`finds React components should code react create class without display name 1`] = `"const Foo = React.createClass({});"`;
exports[`finds React components should options custom factories 1`] = `
"const Foo = createClass({
displayName: 'Foo'
});
const Bar = factory({
displayName: 'Bar'
});"
`;
exports[`finds React components should options custom factories with render method 1`] = `
"import _transformLib from 'transform-lib';
const _components = {
Foo: {
displayName: 'Foo'
},
Bar: {
displayName: 'Bar'
}
};
const _transformLib2 = _transformLib({
filename: 'unknown',
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent('Foo')(createClass({
displayName: 'Foo',
render: function () {}
}));
const Bar = _wrapComponent('Bar')(factory({
displayName: 'Bar',
render: function () {}
}));"
`;
exports[`finds React components should options custom super classes 1`] = `
"class Foo extends BooComponent {}
class Bar extends CustomComponent {}"
`;
exports[`finds React components should options custom super classes with render method 1`] = `
"import _transformLib from \\"transform-lib\\";
const _components = {
Foo: {
displayName: \\"Foo\\"
},
Bar: {
displayName: \\"Bar\\"
}
};
const _transformLib2 = _transformLib({
filename: \\"unknown\\",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent(\\"Foo\\")(class Foo extends BooComponent {
render() {}
});
const Bar = _wrapComponent(\\"Bar\\")(class Bar extends CustomComponent {
render() {}
});"
`;
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\\";
const _components = {
Foo: {
displayName: \\"Foo\\"
}
};
const _transformOne2 = _transformOne({
filename: \\"unknown\\",
components: _components,
locals: [],
imports: []
});
const _transformTwo2 = _transformTwo({
filename: \\"unknown\\",
components: _components,
locals: [],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformOne2(_transformTwo2(Component, id), id);
};
}
const Foo = _wrapComponent(\\"Foo\\")(class Foo extends React.Component {
render() {}
});"
`;
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\\";
const _components = {
Foo: {
displayName: \\"Foo\\"
}
};
const _transformLib2 = _transformLib({
filename: \\"unknown\\",
components: _components,
locals: [],
imports: [_react, _reactDom]
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent(\\"Foo\\")(class Foo extends React.Component {
render() {}
});"
`;
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\\";
const _components = {
Foo: {
displayName: \\"Foo\\"
}
};
const _transformLib2 = _transformLib({
filename: \\"unknown\\",
components: _components,
locals: [module, exports],
imports: []
});
function _wrapComponent(id) {
return function (Component) {
return _transformLib2(Component, id);
};
}
const Foo = _wrapComponent(\\"Foo\\")(class Foo extends React.Component {
render() {}
});"
`;

View File

@ -0,0 +1,50 @@
/**
* Copyright (c) 2004-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails oncall+javascript_foundation
* @flow
* @format
*/
// Note: these tests were updated to snapshots
'use strict';
const fs = require('fs');
const path = require('path');
/*eslint-disable import/no-extraneous-dependencies*/
const {transform: transformSync} = require('babel-core');
const reactPlugin = require('../lib/index.js').default;
describe('finds React components', () => {
const fixturesDir = path.join(__dirname, '__fixtures__');
fs.readdirSync(fixturesDir).map(caseName => {
it(`should ${caseName.split('-').join(' ')}`, () => {
const fixtureDir = path.join(fixturesDir, caseName);
const input = fs.readFileSync(
path.join(fixtureDir, 'actual.js.es6'),
'utf8',
);
const config = fs.readFileSync(
path.join(fixtureDir, 'babel.json'),
'utf8',
);
const output = transformSync(input, {
babelrc: false,
plugins: [
[
reactPlugin,
// note: these originate from the .babelrc files from the real tests
JSON.parse(config),
],
],
}).code;
expect(output).toMatchSnapshot();
});
});
});

View File

@ -0,0 +1,415 @@
/**
* Copyright (c) 2004-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* In order to speed things up, we use transform caching. However, the project
* codebase moves very fast and cache becomes invalid when some files change.
*
* CacheKey is used to generate a unique string that can be used as cache key.
* The cache key consists of various dependency cache keys that change if the
* output of the transform would change.
*
* Imported from https://github.com/gaearon/babel-plugin-react-transform
* https://github.com/gaearon/babel-plugin-react-transform/commit/d7069df5c6f36a07857fd108067dc515b3a795ee
*
* @format
* @noflow
*/
'use strict';
// temporary workaround, don't mind this package
/*eslint-disable eslint-comments/no-unlimited-disable*/
/*eslint-disable*/
const find = require('lodash/find');
module.exports = {
default: function({types: t, template}) {
function matchesPatterns(path, patterns) {
return !!find(patterns, pattern => {
return (
t.isIdentifier(path.node, {name: pattern}) ||
path.matchesPattern(pattern)
);
});
}
function isReactLikeClass(node) {
return !!find(node.body.body, classMember => {
return (
t.isClassMethod(classMember) &&
t.isIdentifier(classMember.key, {name: 'render'})
);
});
}
function isReactLikeComponentObject(node) {
return (
t.isObjectExpression(node) &&
!!find(node.properties, objectMember => {
return (
(t.isObjectProperty(objectMember) ||
t.isObjectMethod(objectMember)) &&
(t.isIdentifier(objectMember.key, {name: 'render'}) ||
t.isStringLiteral(objectMember.key, {value: 'render'}))
);
})
);
}
// `foo({ displayName: 'NAME' });` => 'NAME'
function getDisplayName(node) {
const property = find(
node.arguments[0].properties,
_node => _node.key.name === 'displayName',
);
return property && property.value.value;
}
function hasParentFunction(path) {
return !!path.findParent(parentPath => parentPath.isFunction());
}
// wrapperFunction("componentId")(node)
function wrapComponent(node, componentId, wrapperFunctionId) {
return t.callExpression(
t.callExpression(wrapperFunctionId, [t.stringLiteral(componentId)]),
[node],
);
}
// `{ name: foo }` => Node { type: "ObjectExpression", properties: [...] }
function toObjectExpression(object) {
const properties = Object.keys(object).map(key => {
return t.objectProperty(t.identifier(key), object[key]);
});
return t.objectExpression(properties);
}
const wrapperFunctionTemplate = template(`
function WRAPPER_FUNCTION_ID(ID_PARAM) {
return function(COMPONENT_PARAM) {
return EXPRESSION;
};
}
`);
const VISITED_KEY = 'react-transform-' + Date.now();
const componentVisitor = {
Class(path) {
if (
path.node[VISITED_KEY] ||
!matchesPatterns(path.get('superClass'), this.superClasses) ||
!isReactLikeClass(path.node)
) {
return;
}
path.node[VISITED_KEY] = true;
const componentName = (path.node.id && path.node.id.name) || null;
const componentId =
componentName || path.scope.generateUid('component');
const isInFunction = hasParentFunction(path);
this.components.push({
id: componentId,
name: componentName,
isInFunction: isInFunction,
});
// Can't wrap ClassDeclarations
const isStatement = t.isStatement(path.node);
const expression = t.toExpression(path.node);
// wrapperFunction("componentId")(node)
let wrapped = wrapComponent(
expression,
componentId,
this.wrapperFunctionId,
);
let constId;
if (isStatement) {
// wrapperFunction("componentId")(class Foo ...) => const Foo = wrapperFunction("componentId")(class Foo ...)
constId = t.identifier(componentName || componentId);
wrapped = t.variableDeclaration('const', [
t.variableDeclarator(constId, wrapped),
]);
}
if (t.isExportDefaultDeclaration(path.parent)) {
path.parentPath.insertBefore(wrapped);
path.parent.declaration = constId;
} else {
path.replaceWith(wrapped);
}
},
CallExpression(path) {
if (
path.node[VISITED_KEY] ||
!matchesPatterns(path.get('callee'), this.factoryMethods) ||
!isReactLikeComponentObject(path.node.arguments[0])
) {
return;
}
path.node[VISITED_KEY] = true;
// `foo({ displayName: 'NAME' });` => 'NAME'
const componentName = getDisplayName(path.node);
const componentId =
componentName || path.scope.generateUid('component');
const isInFunction = hasParentFunction(path);
this.components.push({
id: componentId,
name: componentName,
isInFunction: isInFunction,
});
path.replaceWith(
wrapComponent(path.node, componentId, this.wrapperFunctionId),
);
},
};
class ReactTransformBuilder {
constructor(file, options) {
this.file = file;
this.program = file.path;
this.options = this.normalizeOptions(options);
// @todo: clean this shit up
this.configuredTransformsIds = [];
}
static validateOptions(options) {
return typeof options === 'object' && Array.isArray(options.transforms);
}
static assertValidOptions(options) {
if (!ReactTransformBuilder.validateOptions(options)) {
throw new Error(
'babel-plugin-react-transform requires that you specify options ' +
'in .babelrc or from the Babel Node API, and that it is an object ' +
'with a transforms property which is an array.',
);
}
}
normalizeOptions(options) {
return {
factoryMethods: options.factoryMethods || ['React.createClass'],
superClasses: options.superClasses || [
'React.Component',
'React.PureComponent',
'Component',
'PureComponent',
],
transforms: options.transforms.map(opts => {
return {
transform: opts.transform,
locals: opts.locals || [],
imports: opts.imports || [],
};
}),
};
}
build() {
const componentsDeclarationId = this.file.scope.generateUidIdentifier(
'components',
);
const wrapperFunctionId = this.file.scope.generateUidIdentifier(
'wrapComponent',
);
const components = this.collectAndWrapComponents(wrapperFunctionId);
if (!components.length) {
return;
}
const componentsDeclaration = this.initComponentsDeclaration(
componentsDeclarationId,
components,
);
const configuredTransforms = this.initTransformers(
componentsDeclarationId,
);
const wrapperFunction = this.initWrapperFunction(wrapperFunctionId);
const body = this.program.node.body;
body.unshift(wrapperFunction);
configuredTransforms.reverse().forEach(node => body.unshift(node));
body.unshift(componentsDeclaration);
}
/**
* const Foo = _wrapComponent('Foo')(class Foo extends React.Component {});
* ...
* const Bar = _wrapComponent('Bar')(React.createClass({
* displayName: 'Bar'
* }));
*/
collectAndWrapComponents(wrapperFunctionId) {
const components = [];
this.file.path.traverse(componentVisitor, {
wrapperFunctionId: wrapperFunctionId,
components: components,
factoryMethods: this.options.factoryMethods,
superClasses: this.options.superClasses,
currentlyInFunction: false,
});
return components;
}
/**
* const _components = {
* Foo: {
* displayName: "Foo"
* }
* };
*/
initComponentsDeclaration(componentsDeclarationId, components) {
const props = components.map(component => {
const componentId = component.id;
const componentProps = [];
if (component.name) {
componentProps.push(
t.objectProperty(
t.identifier('displayName'),
t.stringLiteral(component.name),
),
);
}
if (component.isInFunction) {
componentProps.push(
t.objectProperty(
t.identifier('isInFunction'),
t.booleanLiteral(true),
),
);
}
let objectKey;
if (t.isValidIdentifier(componentId)) {
objectKey = t.identifier(componentId);
} else {
objectKey = t.stringLiteral(componentId);
}
return t.objectProperty(
objectKey,
t.objectExpression(componentProps),
);
});
return t.variableDeclaration('const', [
t.variableDeclarator(
componentsDeclarationId,
t.objectExpression(props),
),
]);
}
/**
* import _transformLib from "transform-lib";
* ...
* const _transformLib2 = _transformLib({
* filename: "filename",
* components: _components,
* locals: [],
* imports: []
* });
*/
initTransformers(componentsDeclarationId) {
return this.options.transforms.map(transform => {
const transformName = transform.transform;
const transformImportId = this.file.addImport(
transformName,
'default',
transformName,
);
const transformLocals = transform.locals.map(local => {
return t.identifier(local);
});
const transformImports = transform.imports.map(importName => {
return this.file.addImport(importName, 'default', importName);
});
const configuredTransformId = this.file.scope.generateUidIdentifier(
transformName,
);
const configuredTransform = t.variableDeclaration('const', [
t.variableDeclarator(
configuredTransformId,
t.callExpression(transformImportId, [
toObjectExpression({
filename: t.stringLiteral(this.file.opts.filename),
components: componentsDeclarationId,
locals: t.arrayExpression(transformLocals),
imports: t.arrayExpression(transformImports),
}),
]),
),
]);
this.configuredTransformsIds.push(configuredTransformId);
return configuredTransform;
});
}
/**
* function _wrapComponent(id) {
* return function (Component) {
* return _transformLib2(Component, id);
* };
* }
*/
initWrapperFunction(wrapperFunctionId) {
const idParam = t.identifier('id');
const componentParam = t.identifier('Component');
const expression = this.configuredTransformsIds
.reverse()
.reduce((memo, transformId) => {
return t.callExpression(transformId, [memo, idParam]);
}, componentParam);
return wrapperFunctionTemplate({
WRAPPER_FUNCTION_ID: wrapperFunctionId,
ID_PARAM: idParam,
COMPONENT_PARAM: componentParam,
EXPRESSION: expression,
});
}
}
return {
visitor: {
Program(path, {file, opts}) {
ReactTransformBuilder.assertValidOptions(opts);
const builder = new ReactTransformBuilder(file, opts);
builder.build();
},
},
};
},
};

View File

@ -0,0 +1,8 @@
{
"version": "0.30.2",
"name": "metro-babel7-plugin-react-transform",
"main": "lib/index.js",
"dependencies": {
"lodash": "^4.17.5"
}
}

View File

@ -4005,6 +4005,10 @@ lodash@^4.0.0, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lo
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
lodash@^4.17.5:
version "4.17.5"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
lolex@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.6.0.tgz#3a9a0283452a47d7439e72731b9e07d7386e49f6"