Skip to content

Commit

Permalink
adding babel-plugin-add-react-displayname
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloc01
melloc01 committed Aug 27, 2021
1 parent 896f8f1 commit acb90c8
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 70 deletions.
85 changes: 58 additions & 27 deletions __tests__/__snapshots__/react-display-name.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,15 @@ exports[`react-display-name test suite Transforms class components 1`] = `
function _typeof(obj) { \\"@babel/helpers - typeof\\"; if (typeof Symbol === \\"function\\" && typeof Symbol.iterator === \\"symbol\\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \\"function\\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \\"symbol\\" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require(\\"react\\"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
Expand All @@ -25,48 +34,70 @@ function _isNativeReflectConstruct() { if (typeof Reflect === \\"undefined\\" ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function factory(React) {
return /*#__PURE__*/function (_React$Component) {
_inherits(MyClassComponent, _React$Component);
var MyClassComponent = /*#__PURE__*/function (_React$Component) {
_inherits(MyClassComponent, _React$Component);
var _super = _createSuper(MyClassComponent);
var _super = _createSuper(MyClassComponent);
function MyClassComponent() {
_classCallCheck(this, MyClassComponent);
function MyClassComponent() {
_classCallCheck(this, MyClassComponent);
return _super.apply(this, arguments);
return _super.apply(this, arguments);
}
_createClass(MyClassComponent, [{
key: \\"render\\",
value: function render() {
return /*#__PURE__*/_react.default.createElement(\\"div\\", null, \\"1\\");
}
}]);
_createClass(MyClassComponent, [{
key: \\"render\\",
value: function render() {
return /*#__PURE__*/React.createElement(\\"div\\", null, \\"1\\");
}
}]);
return MyClassComponent;
}(_react.default.Component);
return MyClassComponent;
}(React.Component);
}"
MyClassComponent.displayName = \\"MyClassComponent\\";
var _default = MyClassComponent;
exports.default = _default;"
`;

exports[`react-display-name test suite Transforms function components 1`] = `
"\\"use strict\\";
function factory(React) {
return function MyFunctionComponent() {
return /*#__PURE__*/React.createElement(\\"div\\", null, \\"1\\");
};
}"
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require(\\"react\\"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function MyFunctionComponent() {
return /*#__PURE__*/_react.default.createElement(\\"div\\", null, \\"1\\");
}
MyFunctionComponent.displayName = \\"MyFunctionComponent\\";
var _default = MyFunctionComponent;
exports.default = _default;"
`;

exports[`react-display-name test suite Transforms function expression components 1`] = `
"\\"use strict\\";
function factory(React) {
var MyFunctionComponent = function MyFunctionComponent() {
return /*#__PURE__*/React.createElement(\\"div\\", null, \\"1\\");
};
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require(\\"react\\"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var MyFunctionExpressionComponent = function MyFunctionExpressionComponent() {
return /*#__PURE__*/_react.default.createElement(\\"div\\", null, \\"1\\");
};
return MyFunctionComponent;
}"
MyFunctionExpressionComponent.displayName = \\"MyFunctionExpressionComponent\\";
var _default = MyFunctionExpressionComponent;
exports.default = _default;"
`;
78 changes: 37 additions & 41 deletions __tests__/react-display-name.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable no-eval */
/* eslint-disable no-new-func */
import { transformAsync } from '@babel/core'
import babelOptions from '../babel.config'
Expand All @@ -10,74 +11,69 @@ const options = {
describe('react-display-name test suite', () => {
it('Transforms class components', async () => {
const classComponentInput = `
function factory (React) {
return class MyClassComponent extends React.Component {
render() {
return <div>1</div>
}
import React from 'react'
class MyClassComponent extends React.Component {
render() {
return <div>1</div>
}
}
`
export default MyClassComponent
`

const { code: classComponentOutput } = await transformAsync(classComponentInput, options)
const { code: classComponentOutput } = await transformAsync(classComponentInput, {
...options,
sourceType: 'module'
})

expect(classComponentOutput).toMatchSnapshot()

const MyComponentFactory = new Function(`
${classComponentOutput}
return factory;
`)()
const MyComponent = MyComponentFactory(React)
const MyComponent = eval(classComponentOutput)
const element = <MyComponent />

expect(element.type.name).toBe('MyClassComponent')
expect(element.type.displayName).toBe('MyClassComponent')
})

it('Transforms function components', async () => {
const classComponentInput = `
function factory (React) {
return function MyFunctionComponent () {
return <div>1</div>
}
import React from 'react'
function MyFunctionComponent () {
return <div>1</div>
}
`
export default MyFunctionComponent
`

const { code: classComponentOutput } = await transformAsync(classComponentInput, options)
const { code: classComponentOutput } = await transformAsync(classComponentInput, {
...options,
sourceType: 'module'
})

expect(classComponentOutput).toMatchSnapshot()

const MyComponentFactory = new Function(`
${classComponentOutput}
return factory;
`)()
const MyComponent = MyComponentFactory(React)
const MyComponent = eval(classComponentOutput)
const element = <MyComponent />

expect(element.type.name).toBe('MyFunctionComponent')
expect(element.type.displayName).toBe('MyFunctionComponent')
})

it('Transforms function expression components', async () => {
const classComponentInput = `
function factory (React) {
const MyFunctionComponent = () => {
return <div>1</div>
}
import React from 'react'
return MyFunctionComponent
const MyFunctionExpressionComponent = () => {
return <div>1</div>
}
`
export default MyFunctionExpressionComponent
`

const { code: classComponentOutput } = await transformAsync(classComponentInput, options)
const { code: classComponentOutput } = await transformAsync(classComponentInput, {
...options,
sourceType: 'module'
})

expect(classComponentOutput).toMatchSnapshot()

const MyComponentFactory = new Function(`
${classComponentOutput}
return factory;
`)()
const MyComponent = MyComponentFactory(React)
const MyComponent = eval(classComponentOutput)
const element = <MyComponent />

expect(element.type.name).toBe('MyFunctionComponent')
expect(element.type.displayName).toBe('MyFunctionExpressionComponent')
})
})
2 changes: 1 addition & 1 deletion babel.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,5 @@ module.exports = {
}
]
],
plugins: [require('babel-plugin-styled-components')]
plugins: [require('babel-plugin-styled-components'), require('babel-plugin-add-react-displayname')]
}
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"scripts": {
"build": "cp ./babel.config.js ./lib && babel src --out-dir lib",
"prepublishOnly": "yarn run build",
"test": "jest"
"test": "jest",
"release": "npx np"
},
"dependencies": {
"@babel/cli": "7.14.3",
Expand All @@ -24,6 +25,7 @@
"@babel/preset-flow": "7.13.13",
"@babel/preset-react": "7.13.13",
"@babel/preset-typescript": "7.13.0",
"babel-plugin-add-react-displayname": "^0.0.5",
"babel-plugin-const-enum": "1.0.1",
"babel-plugin-styled-components": "1.12.0",
"babel-preset-const-enum": "1.0.0"
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2024,6 +2024,11 @@ babel-jest@26.3.0, babel-jest@^26.3.0:
graceful-fs "^4.2.4"
slash "^3.0.0"

babel-plugin-add-react-displayname@^0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
integrity sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=

babel-plugin-const-enum@1.0.1, babel-plugin-const-enum@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/babel-plugin-const-enum/-/babel-plugin-const-enum-1.0.1.tgz#0d742faf9731be4f213c4d01d61fc4e93c44d159"
Expand Down

0 comments on commit acb90c8

Please sign in to comment.