[prettierx] ternary formatting with objects & tabs needs improvement in upstream Prettier

[brodybits]

updated:

While working on PR #492 with simpler balanced ternary formatting, to resolve issue #468, I discovered that the default ternary formatting with objects & tabs coming from upstream Prettier could use some improvement. (This does not seem to be an issue with the now removed & replaced --no-align-ternary-lines option from bangkokjs/prettierx-0.4.x-fork#41 & bangkokjs/prettierx-0.4.x-fork#46.)

I made a demo in prettier/prettier#4203 (comment) - see Case 1 below ... now waiting for feedback whether or not it should be in a new issue in Prettier.

Update June 2021: adding Case 2 below with a demo that I reported in: prettier/prettier#4203 (comment)

Here are some related issues that I found on Prettier itself:

• TypeScript: nested union types + useTabs prettier/prettier#4198 - nested unions with tabs in TypeScript
• Incorrect indentation on ternary operator with object literal prettier/prettier#4203 (which I commented on) - incorrect indentation on ternary operator with object literal
• Extra indent on ternary with long expressions prettier/prettier#5811 - extra indent on ternary with long expressions, especially with the demo by @thorn0 in this comment: Extra indent on ternary with long expressions prettier/prettier#5811 (comment)
• Incorrect indentation inside inline map function prettier/prettier#5184 - incorrect indentation inside inline map function, see also: Reconfigure Prettier and use tabs for indentation stylelint/stylelint#4246
• Reconfigure Prettier and use tabs for indentation stylelint/stylelint#4246 (comment) by @alexander-akait: "Prettier has problem with ternary and literal templates when you use tabs, it is very ugly in many cases"

See also:

• Nested ternary formatting - add indents back prettier/prettier#5814: Nested ternary formatting - add indents back (to the expression after :)
• Wrong indentation on long ternary operators prettier/prettier#5681 - wrong indentation on long ternary operators (seems to be the same underlying issue as Nested ternary formatting - add indents back prettier/prettier#5814)
• https://github.com/prettier/prettier/issues?q=is%3Aissue+is%3Aopen+ternary+indent

I hope to find a decent workaround when resolving issue #468 for release 0.19.0 (#493).

---

Case 1

My demo from prettier/prettier#4203 (comment):

From playground, with 8-space tab formatting which is consistent with default formatting on vim/macOS/Linux:

Prettier 2.3.0
Playground link

--parser babel
--use-tabs
--no-semi

Input:

a = {
	on: this.readonly ? {
			"sync:PremiumStyle": this.update_readonly_tailor_cover,
			"sync:OwnershipStructure": this.update_readonly_tailor_cover,
		} : {
			"change:client_life_ownership_structure:input_value": () =>
				this.life_tpd_trauma_select_logic("client"),
			"change:client_tpd_ownership_structure:input_value": () =>
				this.life_tpd_trauma_select_logic("client"),
		}
}

Output:

a = {
	on: this.readonly
		? {
				"sync:PremiumStyle": this.update_readonly_tailor_cover,
				"sync:OwnershipStructure": this.update_readonly_tailor_cover,
		  }
		: {
				"change:client_life_ownership_structure:input_value": () =>
					this.life_tpd_trauma_select_logic("client"),
				"change:client_tpd_ownership_structure:input_value": () =>
					this.life_tpd_trauma_select_logic("client"),
		  },
}

Proposed expected output:

a = {
	on: this.readonly
		? {
			"sync:PremiumStyle": this.update_readonly_tailor_cover,
			"sync:OwnershipStructure": this.update_readonly_tailor_cover,
		  }
		: {
			"change:client_life_ownership_structure:input_value": () =>
				this.life_tpd_trauma_select_logic("client"),
			"change:client_tpd_ownership_structure:input_value": () =>
				this.life_tpd_trauma_select_logic("client"),
		  },
}

---

Adapted by replacing each tab character with 4 spaces:

Input:

a = {
    on: this.readonly ? {
            "sync:PremiumStyle": this.update_readonly_tailor_cover,
            "sync:OwnershipStructure": this.update_readonly_tailor_cover,
        } : {
            "change:client_life_ownership_structure:input_value": () =>
                this.life_tpd_trauma_select_logic("client"),
            "change:client_tpd_ownership_structure:input_value": () =>
                this.life_tpd_trauma_select_logic("client"),
        }
}

Output:

a = {
    on: this.readonly
        ? {
                "sync:PremiumStyle": this.update_readonly_tailor_cover,
                "sync:OwnershipStructure": this.update_readonly_tailor_cover,
          }
        : {
                "change:client_life_ownership_structure:input_value": () =>
                    this.life_tpd_trauma_select_logic("client"),
                "change:client_tpd_ownership_structure:input_value": () =>
                    this.life_tpd_trauma_select_logic("client"),
          },
}

Proposed expected output:

a = {
    on: this.readonly
        ? {
            "sync:PremiumStyle": this.update_readonly_tailor_cover,
            "sync:OwnershipStructure": this.update_readonly_tailor_cover,
          }
        : {
            "change:client_life_ownership_structure:input_value": () =>
                this.life_tpd_trauma_select_logic("client"),
            "change:client_tpd_ownership_structure:input_value": () =>
                this.life_tpd_trauma_select_logic("client"),
          },
}

---

Case 2

from prettier/prettier#4203 (comment) (June 2021):

Prettier 2.3.1
Playground link

--parser babel

Input:

alice
  ? {
      beth: {
          carol: 101
        }
        ? {
            debbie: 202
          }
          ? {
              ellen: 303
            }
          : 404
        : 505
    }
    ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0101
    : loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0102
  : loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0201

Output:

alice
  ? {
      beth: {
        carol: 101,
      }
        ? {
            debbie: 202,
          }
          ? {
              ellen: 303,
            }
          : 404
        : 505,
    }
    ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0101
    : loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0102
  : loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0201;

Expected formatting behavior:

I was expecting better consistency in alignment between the closing braces & conditional operators.

---

with nested ternary expressions & arrays:

Prettier 2.3.1
Playground link

--parser babel

Input:

alice
  ? [
      loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0101,
      loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0102,
      [
        loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0201,
        loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0202,
      ]
        ? [
            loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0301,
            loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0302,
          ]
        : [
            loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0401,
            loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0402,
          ],
    ]
      ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0501
      : loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0501
  : 1000

Output:

alice
  ? [
      loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0101,
      loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0102,
      [
        loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0201,
        loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0202,
      ]
        ? [
            loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0301,
            loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0302,
          ]
        : [
            loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0401,
            loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0402,
          ],
    ]
    ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0501
    : loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong0501
  : 1000;

Expected formatting behavior:

Better consistency in alignment between the closing brackets & conditional operators.

[brodybits]

I am thinking the workaround in prettierX should be keep the alignment change from the old (replaced) --no-align-ternary-lines feature in its own option.

[brodybits]

I am thinking the workaround in prettierX should be keep the alignment change from the old (replaced) --no-align-ternary-lines feature in its own option.

I found another case while working on PR #620, now suspect we may need something more flexible than a boolean option. Further discussion will likely be in issue #585.