Another destructuring oddity (assigning from computed properties on Objects)

[taylorham]

Prettier 1.11.1
Playground link

# Options (if any):
# none

Input:

// Array destructuring, computed property
const [oneFairlyLongProp, secondLongProp, thirdReallyLongProp] = some.nested[prop];

// Object destructuring, string access
const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } = some.nested["prop"];

// Object destructuring, closing bracket BEFORE max-print-width
const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } = some[prop].nested;

// Object destructuring, opening bracket AFTER max-print-width (working fine!)
const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } = some.deeplyNested[prop];

Output:

// Array destructuring, computed property
const [oneFairlyLongProp, secondLongProp, thirdReallyLongProp] = some.nested[
  prop
];

// Object destructuring, string access
const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } = some.nested[
  "prop"
];

// Object destructuring, closing bracket BEFORE max-print-width
const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } = some[
  prop
].nested;

// Object destructuring, opening bracket AFTER max-print-width (working fine!)
const {
  oneFairlyLongProp,
  secondLongProp,
  thirdReallyLongProp
} = some.deeplyNested[prop];

Expected behavior:
I expect the LHS of the assignment to be broken out rather than the RHS, as it does when accessing an Array item by index:

Input:

// Array indices are not broken out: expected behavior
const [oneFairlyLongProp, secondLongProp, thirdReallyLongProp] = some.index[1234];

const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } = some.nested[1234];

const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } = some[1234].nested;

const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } = some.deeplyNested[1234];

Output:

// Array indices are not broken out: expected behavior
const [
  oneFairlyLongProp,
  secondLongProp,
  thirdReallyLongProp
] = some.index[1234];

const {
  oneFairlyLongProp,
  secondLongProp,
  thirdReallyLongProp
} = some.nested[1234];

const {
  oneFairlyLongProp,
  secondLongProp,
  thirdReallyLongProp
} = some[1234].nested;

const {
  oneFairlyLongProp,
  secondLongProp,
  thirdReallyLongProp
} = some.deeplyNested[1234];

This happens with both Array and Object destructuring, but only when accessing an object property with bracket notation and the print-width is exceeded after an opening bracket.

I imagine the assigned reference should never be broken out unless the last line (} = some.thing) exceeds the print-width itself.

[ericanderson]

Hmm, there are some edge cases we would need to tease out, specifically what happens when the RHS is also too long. It seems to be flat out broken right now:

Prettier 1.11.0
Playground link

--print-width 76

Input:

const {
  oneFairlyLongProp,
  secondLongProp,
  thirdReallyLongProp
} = some.deeplyNested[1234].baz.bar.bar.bar.nbar.bar.asdfa.sdf.asdf.ad.sfa.sdf.asdf.asdf;

const fo = some.deeplyNested[1234].baz.bar.bar.bar.nbar.bar.asdfa.sdf.asdf.ad.sfa.sdf.asdf.asdf;

Output:

const {
  oneFairlyLongProp,
  secondLongProp,
  thirdReallyLongProp
} = some.deeplyNested[1234].baz.bar.bar.bar.nbar.bar.asdfa.sdf.asdf.ad.sfa.sdf.asdf.asdf;

const fo =
  some.deeplyNested[1234].baz.bar.bar.bar.nbar.bar.asdfa.sdf.asdf.ad.sfa.sdf
    .asdf.asdf;

[seiyab]

I feel v3.0.0 works reasonably well, though it is not same as suggested one.

// Input

// Array destructuring, computed property
const [oneFairlyLongProp, secondLongProp, thirdReallyLongProp] = some.nested[prop];

// Object destructuring, string access
const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } = some.nested["prop"];

// Output

// Array destructuring, computed property
const [oneFairlyLongProp, secondLongProp, thirdReallyLongProp] =
  some.nested[prop];

// Object destructuring, string access
const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } =
  some.nested["prop"];

For #4092 (comment),

// Input
const {
  oneFairlyLongProp,
  secondLongProp,
  thirdReallyLongProp
} = some.deeplyNested[1234].baz.bar.bar.bar.nbar.bar.asdfa.sdf.asdf.ad.sfa.sdf.asdf.asdf;

const fo = some.deeplyNested[1234].baz.bar.bar.bar.nbar.bar.asdfa.sdf.asdf.ad.sfa.sdf.asdf.asdf;

// Output
const { oneFairlyLongProp, secondLongProp, thirdReallyLongProp } =
  some.deeplyNested[1234].baz.bar.bar.bar.nbar.bar.asdfa.sdf.asdf.ad.sfa.sdf
    .asdf.asdf;

const fo =
  some.deeplyNested[1234].baz.bar.bar.bar.nbar.bar.asdfa.sdf.asdf.ad.sfa.sdf
    .asdf.asdf;