feat(react-component-annotate): Handle function body returning a ternary (#598)

Author: bcoe

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 ? '' : (<SubComponent />))`
+    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");

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 {

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 ? '' : (<SubComponent />))
+}`,
+    {
+      presets: ["@babel/preset-react"],
+      plugins: [[plugin, { "annotate-fragments": true }]],
+    }
+  );
+  expect(result?.code).toMatchSnapshot();
+});