diff --git a/packages/babel-plugin-component-annotate/src/index.ts b/packages/babel-plugin-component-annotate/src/index.ts index 56b0c808..d87f5f3a 100644 --- a/packages/babel-plugin-component-annotate/src/index.ts +++ b/packages/babel-plugin-component-annotate/src/index.ts @@ -84,6 +84,7 @@ export default function componentNameAnnotatePlugin({ types: t }: typeof Babel): ArrowFunctionExpression(path, state) { // We're expecting a `VariableDeclarator` like `const MyComponent =` const parent = path.parent; + if ( !parent || !("id" in parent) || @@ -189,6 +190,36 @@ function functionBodyPushAttributes( return; } + // Handle the case of a function body returning a ternary operation. + // `return (maybeTrue ? '' : ())` + if (arg.isConditionalExpression()) { + const consequent = arg.get('consequent'); + if (consequent.isJSXFragment() || consequent.isJSXElement()) { + processJSX( + annotateFragments, + t, + consequent, + componentName, + sourceFileName, + attributeNames, + ignoredComponents + ); + } + const alternate = arg.get('alternate'); + if (alternate.isJSXFragment() || alternate.isJSXElement()) { + processJSX( + annotateFragments, + t, + alternate, + componentName, + sourceFileName, + attributeNames, + ignoredComponents + ); + } + return; + } + if (!arg.isJSXFragment() && !arg.isJSXElement()) { return; } @@ -223,7 +254,6 @@ function processJSX( if (!jsxNode) { return; } - // NOTE: I don't know of a case where `openingElement` would have more than one item, // but it's safer to always iterate const paths = jsxNode.get("openingElement"); diff --git a/packages/babel-plugin-component-annotate/test/__snapshots__/test-plugin.test.ts.snap b/packages/babel-plugin-component-annotate/test/__snapshots__/test-plugin.test.ts.snap index a5c615e1..adb23ee5 100644 --- a/packages/babel-plugin-component-annotate/test/__snapshots__/test-plugin.test.ts.snap +++ b/packages/babel-plugin-component-annotate/test/__snapshots__/test-plugin.test.ts.snap @@ -223,6 +223,16 @@ class componentName extends Component { export default componentName;" `; +exports[`handles ternary operation returned by function body 1`] = ` +"const maybeTrue = Math.random() > 0.5; +export default function componentName() { + return maybeTrue ? '' : /*#__PURE__*/React.createElement(SubComponent, { + \\"data-sentry-element\\": \\"SubComponent\\", + \\"data-sentry-component\\": \\"componentName\\" + }); +}" +`; + exports[`nonJSX snapshot matches 1`] = ` "import React, { Component } from 'react'; class TestClass extends Component { diff --git a/packages/babel-plugin-component-annotate/test/test-plugin.test.ts b/packages/babel-plugin-component-annotate/test/test-plugin.test.ts index 97a632bf..296076bf 100644 --- a/packages/babel-plugin-component-annotate/test/test-plugin.test.ts +++ b/packages/babel-plugin-component-annotate/test/test-plugin.test.ts @@ -2236,3 +2236,16 @@ it("Bananas incompatible plugin @react-navigation source snapshot matches", () = }" `); }); + +it("handles ternary operation returned by function body", () => { + const result = transform(`const maybeTrue = Math.random() > 0.5; +export default function componentName() { + return (maybeTrue ? '' : ()) +}`, + { + presets: ["@babel/preset-react"], + plugins: [[plugin, { "annotate-fragments": true }]], + } + ); + expect(result?.code).toMatchSnapshot(); +});