From af5f395dd11c6329b4d63ecfc316d354c9c977ab Mon Sep 17 00:00:00 2001 From: Justin Bennett Date: Wed, 31 Aug 2022 12:30:52 -0400 Subject: [PATCH 1/2] Ensure transforms are only applied to top level components --- .../index.js | 10 ++++++-- .../index.spec.tsx | 23 +++++++++++++++++++ 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/libs/babel-transform-react-display-name/index.js b/libs/babel-transform-react-display-name/index.js index 274d02a6ea..9058291dce 100644 --- a/libs/babel-transform-react-display-name/index.js +++ b/libs/babel-transform-react-display-name/index.js @@ -54,6 +54,12 @@ module.exports = function ({ types: t }) { if (!isExpressionFn) return + // Should only apply to top level components + const parentStatement = componentFn.getStatementParent() + if (!t.isProgram(parentStatement.parent)) { + return + } + const declarator = componentFn.findParent((path) => t.isVariableDeclarator(path)) if (declarator) { const parentStatement = componentFn.getStatementParent() @@ -69,8 +75,8 @@ module.exports = function ({ types: t }) { const parentStatement = componentFn.getStatementParent() const leftHandSide = assignmentExpression.node.left - // Only want to do this step for top level components - if (!t.isProgram(parentStatement.parent) || !t.isMemberExpression(leftHandSide)) { + // Don't add display names to nested member expressions + if (!t.isMemberExpression(leftHandSide)) { return } diff --git a/libs/babel-transform-react-display-name/index.spec.tsx b/libs/babel-transform-react-display-name/index.spec.tsx index 6798abf1a8..d6db45e473 100644 --- a/libs/babel-transform-react-display-name/index.spec.tsx +++ b/libs/babel-transform-react-display-name/index.spec.tsx @@ -185,6 +185,29 @@ describe('classed template tag literals', () => { }) }) +describe('cases that should not be transformed', () => { + it('should not transform a non-top level JSX function', () => { + const result = transform` + export function f() { + const nestedComponent = () =>
+ } + ` + + expect(result).toMatchInlineSnapshot(` + "\\"use strict\\"; + + Object.defineProperty(exports, \\"__esModule\\", { + value: true + }); + exports.f = f; + + function f() { + const nestedComponent = () => /*#__PURE__*/React.createElement(\\"div\\", null); + }" + `) + }) +}) + /** * Helper to streamline babel transforms */ From d748c0a54f6f77516713cfd7b9b3a28631f64892 Mon Sep 17 00:00:00 2001 From: Justin Bennett Date: Wed, 31 Aug 2022 12:37:13 -0400 Subject: [PATCH 2/2] Remove unneeded declarations --- libs/babel-transform-react-display-name/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/libs/babel-transform-react-display-name/index.js b/libs/babel-transform-react-display-name/index.js index 9058291dce..b9a70dddc9 100644 --- a/libs/babel-transform-react-display-name/index.js +++ b/libs/babel-transform-react-display-name/index.js @@ -62,7 +62,6 @@ module.exports = function ({ types: t }) { const declarator = componentFn.findParent((path) => t.isVariableDeclarator(path)) if (declarator) { - const parentStatement = componentFn.getStatementParent() const name = declarator.node.id.name parentStatement.insertAfter(genDisplayName(path, name)) return @@ -72,7 +71,6 @@ module.exports = function ({ types: t }) { t.isAssignmentExpression(path) ) if (assignmentExpression) { - const parentStatement = componentFn.getStatementParent() const leftHandSide = assignmentExpression.node.left // Don't add display names to nested member expressions