Angular/HTML/JSX parser don't keep original line breaks for inputs/attributes/props

[bengry]

Currently Prettier does a very good job in keeping the original line breaks for JS objects for example, or even props in React/JSX components:

const x = {
  foo: 'foo',
  bab: 'bar'
}

Playground
Playground 2

This is not translated to Angular inputs/HTML attributes/JSX props (in case the printWidth allows for it).
Playground (html)
Playground (angular)
Playground (JSX)

It would be nice to have a similar behavior to how objects behave - such that if a line break is introduced between each attribute/input/prop - they would be kept.
Furthermore - ones that don't match will be aligned, the way that:

const x = {
  foo: 'foo',
  bar: 'bar',
  baz: 'baz', foobar: 'foobar'
}

Is transformed to:

const x = {
    foo: "foo",
    bar: "bar",
    baz: "baz",
    foobar: "foobar"
};

Then this:

<MyComponent foo="foo"
             bar={1}
             baz="baz" foobar="foobar" />

Would be transformed to:

<MyComponent foo="foo"
             bar={1}
             baz="baz"
             foobar="foobar" />

[michaeljota]

This works as expected, collapsing if there is enough room for all of them, and expanding otherwise.

link

[bengry]

@michaeljota Right, but with objects (in JS/TS files) Prettier keeps the original line breaks, even if there was enough space to put them all in the same line, see my first example: link. There would've easily been enough space to put all properties on the same line, yet Prettier keeps the original "style" of one property per line.

Consider the following Angular template:

<my-table [header]="header"
          [items]="items"
          (onScroll)="onScroll($event)">
</my-table>

Given the default settings in Prettier, this would be transformed into:

<my-table [header]="header" [items]="items" (onScroll)="onScroll($event)">
</my-table>

Playground link

I find it more readable (and I'm sure I'm not alone here) if the original formatting would've been kept (putting aside the closing angle bracket. That's part of #5377, or whether or not the first attribute should be moved to a newline or kept with the tag), giving every input/output its own line, even when the printWidth permits it.

[ikatyang]

Hi @bengry, this looks like the same as #3101, let's track the issue there, and you may want to move your comments there. I've renamed its title to reflect that it's not only for JSX.