Ideas for ternary formatting optimized for conditional types

[ssalbdivad]

I can see why Biome's nested ternary formatting (similar to prettier>3.0.3) can be helpful in some cases, but it makes some common patterns in type-level code much less readable.

E.g. with prettier <= 3.0.3:

With Biome (prettier > 3.0.3 is similar):

The actual logic is basically just a switch, with lines alternating between if condition and return value.

I find the nested version much harder to read, and there is no way to refactor it into another type-level construct that achieves the same thing.

I'd love if there were either a formatting config option for this, or barring that, an ability to integrate a formatter plugin to apply a flatter indentation for types like this (I know this is being considered in #1649).

Do others the original prettier formatting for conditional types as well? If there's a consensus, perhaps a dedicated formatter option or just a change to the default would be apt for types.

[colinhacks]

Big +1 to this, as another library author with many large switch-like conditional types. I would love to have this as an option in javascript.formatter.

[ematipico]

How would you name such an option?

I believe it makes sense to have an option here. Unfortunately TypeScript types have become veeeeery long, and we should acknowledge that.

However I'm not sure if the option should affect only types or not, only TypeScript files or not. We should discuss this

[Conaclos]

flatTernaries?

[colinhacks]

I'd recommend making this an enum called ternaryStyle as there are more than two ways to format ternaries. This is also of-a-piece with quoteStyle in the same category. (Whether Biome wants to implement more than two styles is a different question, but it's good to leave options open!)

  "javascript": {
    "formatter": {
      "ternaryStyle": "<value>" 
    }
  }

The simplest thing is to support "nested" and "flat" variants. Here's "nested" (current biome behavior):

const animalName = pet.canSqueak()
  ? "mouse"
  : pet.canBark()
    ? pet.isScary()
      ? "wolf"
      : "dog"
    : pet.canMeow()
      ? "cat"
      : pet.canSqueak()
        ? "mouse"
        : "probably a bunny";

But there are multiple possible implementations of a "flat" style. I assume Biome will pick one, or it could support multiple flat variants.

There's "curious" which is a flat formatting style that preferentially breaks the line after a question mark. This is currently experimental in Prettier but will shortly become the default (and seems to have been well-received). In practice this switches betwen a "curious" style (ending the line with a question) and a case-style formatter depending on the complexity of the subtrees: https://prettier.io/blog/2023/11/13/curious-ternaries#give-us-your-feedback

const animalName =
  pet.canSqueak() ? "mouse"
  : pet.canBark() ?
    pet.isScary() ?
      "wolf"
    : "dog"
  : pet.canMeow() ? "cat"
  : pet.canSqueak() ? "mouse"
  : "probably a bunny";

Another option is "flat-match" (my term) described by @pcattori, which is another flat variant that aims to start each line with the conditional predicate (like match in other languages). This also optimizes for the ability to easily comment out particular cases easily. Writeup by Pedro: https://pedrocattori.dev/blog/ternaries-could-be-beautiful

(I hand-wrote this one so Pedro can chime in if it's wrong)

const animalName =
  pet.canSqueak() ? "mouse" : 
  pet.canBark() ? 
    pet.isScary() ? "wolf" : 
    "dog"
  :
  pet.canMeow() ? "cat" : 
  pet.canSqueak() ? "mouse" : 
  "probably a bunny";

[pcattori]

That looks right to me @colinhacks ! I'd add that in practice I usually end up putting the : after "dog" on the same line ("dog" :) and am pretty ambivalent about that placement. The main point is that its easier to independently modify each case; commenting out is one such modification, but reorder cases to change priority is another case. It also reduces git noise, which the Prettier/"curious" style doesn't handle well.

I've been meaning to create a gallery of examples that we can use to compare how each of these styles shakes out. Its too often that I see contrived examples (I'm guilty of this too). Good examples of complex ternaries that are most affected by this decision are:

• the original example in this repo from arktype (which I actually used as an example in my post! coincidence? 🤔)
• Remix's jsonify utils, which I hand formatted according to my proposal
• ... (let's add to this list) ...

So maybe good time to collab on a gallery of examples if anyone is up for it