feat(react-component-annotate): Handle function body returning a tern…

…ary (#598)
getsentry · Aug 29, 2024 · 687a9f5 · 687a9f5
1 parent 71e80d9
commit 687a9f5
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git 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 ? '' : (<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");

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
@@ -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
@@ -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();
+});