// There are two ways to print ConditionalExpressions: "normal mode" and // "JSX mode". This is normal mode (when breaking): // // test // ? consequent // : alternate; // // And this is JSX mode (when breaking): // // test ? ( // consequent // ) : ( // alternate // ); // // When non-breaking, they look the same: // // test ? consequent : alternate; // // We print a conditional expression in JSX mode if any of the following are // true: // * Its parent is a JSXExpressionContainer // * Its test, consequent, or alternate are JSXElements // * It is in a chain with other ConditionalExpressions, and the outermost // one's parent is a JSXExpressionContainer // * It is in a chain with other ConditionalExpressions, and any of the // tests, consequents, or alternates of any of the ConditionalExpressions in // the chain are JSXElements. // Otherwise, we print in normal mode. // This ConditionalExpression does not meet any of the other criteria for // printing in JSX mode, so it prints in normal mode. The line does not break. normalModeNonBreaking ? "a" : "b"; // This ConditionalExpression does not meet any of the criteria to print in JSX // mode, so it prints in normal mode. Its consequent is very long, so it breaks // out to multiple lines. normalModeBreaking ? johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa : "c"; // This ConditionalExpression prints in JSX mode because its parent is a // JSXExpressionContainer. The line does not break, so it does not contain // parens.
{a ? "b" : "c"}
; // This ConditionalExpression prints in JSX mode because its parent is a // JSXExpressionContainer. Because the consequent is long enough to break the // line, both its consequent and alternate break out and are wrapped in parens.
{a ? ( johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa ) : ( "c" )}
; // This ConditionalExpression prints in JSX mode because its parent is a // JSXExpressionContainer. The consequent is long enough to break the line, but // because the alternate is null, only the consequent is wrapped in parens.
{a ? ( johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa ) : null}
; // This ConditionalExpression prints in JSX mode because its parent is a // JSXExpressionContainer. Because the alternate is long enough to break the // line, both its consequent and alternate break out and are wrapped in parens.
{a ? ( "b" ) : ( johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa )}
; // This ConditionalExpression prints in JSX mode because its parent is a // JSXExpressionContainer. The alternate is long enough to break the line, but // because the consequent is null, only the alternate is wrapped in parens.
{a ? null : ( johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa )}
; // This ConditionalExpression prints in JSX mode because its parent is a // JSXExpressionContainer. Because the test is long enough to break the // line, both its consequent and alternate break out and are wrapped in parens.
{johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa ? ( "b" ) : ( "c" )}
; // This ConditionalExpression prints in JSX mode because its test is a // JSXElement. It is non-breaking. // Note: I have never, ever seen someone use a JSXElement as the test in a // ConditionalExpression. But this test is included for completeness.
? jsxModeFromElementNonBreaking : "a"; // This ConditionalExpression prints in JSX mode because its consequent is a // JSXElement. It is non-breaking. jsxModeFromElementNonBreaking ?
: "a"; // This ConditionalExpression prints in JSX mode because its alternate is a // JSXElement. It is non-breaking. jsxModeFromElementNonBreaking ? "a" :
; // This ConditionalExpression prints in JSX mode because its test is a // JSXElement. It is breaking. // Note: I have never, ever seen someone use a JSXElement as the test in a // ConditionalExpression. But this test is included for completeness.
thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
? ( "jsx mode from element breaking" ) : ( "a" ); // This ConditionalExpression prints in JSX mode because its consequent is a // JSXElement. It is breaking. jsxModeFromElementBreaking ? (
thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
) : ( "a" ); // This ConditionalExpression prints in JSX mode because its alternate is a // JSXElement. It is breaking. jsxModeFromElementBreaking ? ( "a" ) : (
thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
); // This chain of ConditionalExpressions prints in JSX mode because the parent of // the outermost ConditionalExpression is a JSXExpressionContainer. It is // non-breaking.
{a ? "a" : b ? "b" : "c"}
; // This chain of ConditionalExpressions prints in JSX mode because the parent of // the outermost ConditionalExpression is a JSXExpressionContainer. It is // breaking.
{a ? ( "a" ) : b ? ( "b" ) : ( thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo )}
; // This chain of ConditionalExpressions prints in JSX mode because there is a // JSX element somewhere in the chain. It is non-breaking. cable ? "satellite" : public ? "affairs" : network ? : "dunno"; // This chain of ConditionalExpressions prints in JSX mode because there is a // JSX element somewhere in the chain (in this case, at the end). It is // breaking; notice the consequents and alternates in the entire chain get // wrapped in parens. cable ? ( "satellite" ) : public ? ( "affairs" ) : network ? (
thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
) : "dunno"; // This chain of ConditionalExpressions prints in JSX mode because there is a // JSX element somewhere in the chain (in this case, at the beginning). It is // breaking; notice the consequents and alternates in the entire chain get // wrapped in parens. cable ? (
thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
) : sateline ? ( "public" ) : affairs ? ( "network" ) : "dunno";