From 57b0fc37ea83fe3b5d25abdafe8a062da4404133 Mon Sep 17 00:00:00 2001 From: Benjamin Coe Date: Wed, 28 Aug 2024 21:06:18 -0400 Subject: [PATCH 1/2] feat: handle function body returning a ternary --- .../src/index.ts | 32 ++++++++++++++++++- .../__snapshots__/test-plugin.test.ts.snap | 10 ++++++ .../test/test-plugin.test.ts | 13 ++++++++ 3 files changed, 54 insertions(+), 1 deletion(-) 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(); +}); From f2fc0917b4dd27f939d83a7561391d9d1eb7d241 Mon Sep 17 00:00:00 2001 From: Benjamin Coe Date: Wed, 28 Aug 2024 21:16:35 -0400 Subject: [PATCH 2/2] chore: address formatting --- packages/babel-plugin-component-annotate/src/index.ts | 4 ++-- .../babel-plugin-component-annotate/test/test-plugin.test.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/babel-plugin-component-annotate/src/index.ts b/packages/babel-plugin-component-annotate/src/index.ts index d87f5f3a..5a3e4e5e 100644 --- a/packages/babel-plugin-component-annotate/src/index.ts +++ b/packages/babel-plugin-component-annotate/src/index.ts @@ -193,7 +193,7 @@ function functionBodyPushAttributes( // Handle the case of a function body returning a ternary operation. // `return (maybeTrue ? '' : ())` if (arg.isConditionalExpression()) { - const consequent = arg.get('consequent'); + const consequent = arg.get("consequent"); if (consequent.isJSXFragment() || consequent.isJSXElement()) { processJSX( annotateFragments, @@ -205,7 +205,7 @@ function functionBodyPushAttributes( ignoredComponents ); } - const alternate = arg.get('alternate'); + const alternate = arg.get("alternate"); if (alternate.isJSXFragment() || alternate.isJSXElement()) { processJSX( annotateFragments, 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 296076bf..edb581e0 100644 --- a/packages/babel-plugin-component-annotate/test/test-plugin.test.ts +++ b/packages/babel-plugin-component-annotate/test/test-plugin.test.ts @@ -2238,7 +2238,8 @@ 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; + const result = transform( + `const maybeTrue = Math.random() > 0.5; export default function componentName() { return (maybeTrue ? '' : ()) }`,