From acb90c803f6297a1f1440f1b2d1dbdd1ab21623c Mon Sep 17 00:00:00 2001 From: Rafael Mello Campanari Date: Fri, 27 Aug 2021 17:40:35 -0300 Subject: [PATCH] adding babel-plugin-add-react-displayname --- .../__snapshots__/react-display-name.js.snap | 85 +++++++++++++------ __tests__/react-display-name.js | 78 ++++++++--------- babel.config.js | 2 +- package.json | 4 +- yarn.lock | 5 ++ 5 files changed, 104 insertions(+), 70 deletions(-) diff --git a/__tests__/__snapshots__/react-display-name.js.snap b/__tests__/__snapshots__/react-display-name.js.snap index 230284f..69a67ef 100644 --- a/__tests__/__snapshots__/react-display-name.js.snap +++ b/__tests__/__snapshots__/react-display-name.js.snap @@ -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); } } @@ -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;" `; diff --git a/__tests__/react-display-name.js b/__tests__/react-display-name.js index 6b01689..1dd9cb7 100644 --- a/__tests__/react-display-name.js +++ b/__tests__/react-display-name.js @@ -1,3 +1,4 @@ +/* eslint-disable no-eval */ /* eslint-disable no-new-func */ import { transformAsync } from '@babel/core' import babelOptions from '../babel.config' @@ -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
1
- } + import React from 'react' + + class MyClassComponent extends React.Component { + render() { + return
1
} } - ` + 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 = - 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
1
- } + import React from 'react' + + function MyFunctionComponent () { + return
1
} - ` + 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 = - 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
1
- } + import React from 'react' - return MyFunctionComponent + const MyFunctionExpressionComponent = () => { + return
1
} - ` + 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 = - expect(element.type.name).toBe('MyFunctionComponent') + expect(element.type.displayName).toBe('MyFunctionExpressionComponent') }) }) diff --git a/babel.config.js b/babel.config.js index 4cf08e0..76388dd 100644 --- a/babel.config.js +++ b/babel.config.js @@ -19,5 +19,5 @@ module.exports = { } ] ], - plugins: [require('babel-plugin-styled-components')] + plugins: [require('babel-plugin-styled-components'), require('babel-plugin-add-react-displayname')] } diff --git a/package.json b/package.json index 6e4011b..39be192 100644 --- a/package.json +++ b/package.json @@ -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", @@ -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" diff --git a/yarn.lock b/yarn.lock index f9e74e6..e3bc372 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"