feature(macro): support JSX macro inside conditional expressions

fixes: #1175
lingui · Feb 14, 2023 · 2555690 · 2555690
1 parent a129adf
commit 2555690
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/packages/macro/src/macroJsx.ts b/packages/macro/src/macroJsx.ts
@@ -1,5 +1,6 @@
 import * as babelTypes from "@babel/types"
 import {
+  ConditionalExpression,
   Expression,
   JSXAttribute,
   JSXElement,
@@ -283,6 +284,10 @@ export default class MacroJSX {
           ]
         })
       }
+      if (exp.isConditionalExpression()) {
+        return [this.tokenizeConditionalExpression(exp)]
+      }
+
       if (exp.isJSXElement()) {
         return this.tokenizeNode(exp)
       }
@@ -411,6 +416,25 @@ export default class MacroJSX {
     }
   }
 
+  tokenizeConditionalExpression = (
+    exp: NodePath<ConditionalExpression>
+  ): ArgToken => {
+    exp.traverse({
+      JSXElement: (el) => {
+        if (this.isI18nComponent(el) || this.isChoiceComponent(el)) {
+          this.replacePath(el)
+          el.skip()
+        }
+      },
+    })
+
+    return {
+      type: "arg",
+      name: this.expressionToArgument(exp),
+      value: exp.node,
+    }
+  }
+
   tokenizeText = (value: string): TextToken => {
     return {
       type: "text",

diff --git a/packages/macro/test/jsx-trans.ts b/packages/macro/test/jsx-trans.ts
@@ -196,6 +196,50 @@ const cases: TestCase[] = [
         }} />;
       `,
   },
+  {
+    name: "JSX Macro inside JSX conditional expressions",
+    input: `
+       import { Trans } from '@lingui/macro'
+       ;<Trans>Hello, {props.world ? <Trans>world</Trans> : <Trans>guys</Trans>}</Trans>
+      `,
+    expected: `
+        import { Trans } from '@lingui/react'
+
+        ;<Trans
+            id={"Hello, {0}"}
+            values={{
+              0: props.world ? <Trans id={'world'} /> : <Trans id={'guys'} />
+            }}
+          />
+      `,
+  },
+  {
+    name: "JSX Macro inside JSX multiple nested conditional expressions",
+    input: `
+      import { Trans } from '@lingui/macro'
+        ;<Trans>Hello, {props.world ? <Trans>world</Trans> : (
+          props.b
+            ? <Trans>nested</Trans>
+            : <Trans>guys</Trans>
+        )
+      }</Trans>
+      `,
+    expected: `
+      import { Trans } from "@lingui/react";
+      <Trans
+        id={"Hello, {0}"}
+        values={{
+          0: props.world ? (
+            <Trans id={"world"} />
+          ) : props.b ? (
+            <Trans id={"nested"} />
+          ) : (
+            <Trans id={"guys"} />
+          ),
+        }}
+      />;
+      `,
+  },
   {
     name: "Elements are replaced with placeholders",
     input: `