diff --git a/packages/babel-plugin-component-annotate/src/index.ts b/packages/babel-plugin-component-annotate/src/index.ts
index 56b0c808..5a3e4e5e 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..edb581e0 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,17 @@ 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();
+});