Break long object literal members over two lines

[MichaReiser]

Rome doesn't break object literal members over multiple lines even if they exceed the print width but Prettier breaks the initializer onto the new line Playground

Input

let a = {
  "this-is-a-very-long-key-and-the-assignment-should-be-put-on-the-next-line": orMaybeIAmMisunderstandingAndIHaveSetSomethingWrongInMyConfig(),
   "can-someone-explain": that(),
 };
 
 // Doesn't apply for types :O
 type A = {
  "this-is-a-very-long-key-and-the-assignment-should-be-put-on-the-next-line": OrMaybeIAmMisunderstandingAndIHaveSetSomethingWrongInMyConfig,
 };

Prettier

let a = {
  "this-is-a-very-long-key-and-the-assignment-should-be-put-on-the-next-line":
    orMaybeIAmMisunderstandingAndIHaveSetSomethingWrongInMyConfig(),
  "can-someone-explain": that(),
};

// Doesn't apply for types :O
type A = {
  "this-is-a-very-long-key-and-the-assignment-should-be-put-on-the-next-line": OrMaybeIAmMisunderstandingAndIHaveSetSomethingWrongInMyConfig;
};

Rome

let a = {
  "this-is-a-very-long-key-and-the-assignment-should-be-put-on-the-next-line": orMaybeIAmMisunderstandingAndIHaveSetSomethingWrongInMyConfig(),
  "can-someone-explain": that(),
};

// Doesn't apply for types :O
type A = {
  "this-is-a-very-long-key-and-the-assignment-should-be-put-on-the-next-line": OrMaybeIAmMisunderstandingAndIHaveSetSomethingWrongInMyConfig;
};

Expected

Rome's output to match Prettier's.

[denbezrukov]

Hi,
I'd like to try to fix this issue. 🙏🏽

[denbezrukov]

Hm,
My first guess was to try group_elements and soft_line_indent_or_space for FormatNodeRule<JsPropertyObjectMember> in property_object_member.rs file.

Ok(group_elements(formatted![
    formatter,
    [
        name.format(),
        colon_token.format(),
        soft_line_indent_or_space(formatted![formatter, [value.format()]]?),
    ]
]?))

Unfortunately, it changes formatting for any member value.
Prettier doesn't break all object literal member over two lines. Rome playground and Prettier playground.

It seems that prettier uses the same logic for object member and assignment (other cases?). I'm going to check all variants from JsAnyExpression. But I'm not sure that is the best options to solve the problem.

1. Add soft_line_indent_or_space only for expressions which prettier breaks over two line in property_object_member.rs.
2. Wrap individual expression in soft_block_indent from expressions directory.

[denbezrukov]

It seems that we need to implement something like prettier does for property. It uses assignment which chooses layout for object member.

Am I on the right way?😬
Does Rome have this layout function/enum?
What solution is better for this issue? Implement layout function only for object member or for assignment too?

[ematipico]

It uses assignment which chooses layout for object member.

Assignment layout is just an internal signal that they use to print arrow functions, it's not used inside their printer.

• this is it's used for the arrow functions: https://github.com/prettier/prettier/blob/5b113e71b1808d6916f446c3aa49c3c53e3bdb98/src/language-js/print/function.js#L252
• this is where it's used inside the assignment: https://github.com/prettier/prettier/blob/5b113e71b1808d6916f446c3aa49c3c53e3bdb98/src/language-js/print/assignment.js#L37-L75

As you can see, each option create a different IR.

Am I on the right way?😬

I haven't looked my at their code unfortunately, so I am not sure. Even if the examples shows an assignment, the issue is about the members of the objects. Check this example, where I used the object inside a function. The formatting is the same.

What solution is better for this issue? Implement layout function only for object member or for assignment too?

I would focus, for now, on the object literal part and ignore the assignment. I believe we have another issue to track it. Do you think the issues are somehow related? If so, we can think about creating a function that will be used by both nodes. But for now let's stick to the object literal.

If you check Prettier's IR, they use group IDs to add the breaking logic to a group:

  group(indent(line), { id: Symbol.for("assignment #1") }),
  lineSuffixBoundary,
  indentIfBreak( ... )

We can achieve something similar using our internal function called if_group_with_id_fits_on_line and if_group_with_id_breaks