diff --git a/packages/macro/src/macroJsx.ts b/packages/macro/src/macroJsx.ts index 491cb11df..bcd9846e2 100644 --- 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) } @@ -410,6 +415,25 @@ export default class MacroJSX { } } + tokenizeConditionalExpression = ( + exp: NodePath + ): 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 index 000b39408..358c39c71 100644 --- 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' + ;Hello, {props.world ? world : guys} + `, + expected: ` + import { Trans } from '@lingui/react' + + ; : + }} + /> + `, + }, + { + name: "JSX Macro inside JSX multiple nested conditional expressions", + input: ` + import { Trans } from '@lingui/macro' + ;Hello, {props.world ? world : ( + props.b + ? nested + : guys + ) + } + `, + expected: ` + import { Trans } from "@lingui/react"; + + ) : props.b ? ( + + ) : ( + + ), + }} + />; + `, + }, { name: "Elements are replaced with placeholders", input: `