move "(" and ")" to next lines if callee is parenthesized cascade sequence

Question

move "(" and ")" to next lines if callee is parenthesized cascade sequence

skybrian opened this issue 9 years ago · 8 comments

"At this time, we do not recommend using dartfmt, as it greatly decreases the readability of components built using OverReact's fluent-style." [1]

Seems unfortunate.

[1] https://github.com/Workiva/over_react#component-formatting

Answer 1 · 2016-10-31T20:20:08.000Z

I wonder how much of this was prior to trailing comma support that made Flutter happy.

Answer 2 · 2016-11-02T01:14:35.000Z

over_react maintainer here!

Wow, I hadn't checked in in awhile, but it looks like the trailing commas make a world of difference!!

dart_style, without trailing commas:

render() {
  return (Dom.div()..className = 'brand-img-wrapper')(
      (Dom.div()
        ..className = 'brand-img brand-symbol'
        ..role = 'img'
        ..addProps(ariaProps()..hidden = true))(),
      (Dom.button()
        ..type = 'button'
        ..className = 'hitarea sidebar-toggle'
        ..onClick = _onSidebarToggle)((Dom.span()..className = 'flip-container')((Dom.span()..className = 'flipper')(
          (Dom.span()..className = 'front-side')((Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_RIGHT)()),
          (Dom.span()..className = 'back-side')((Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_LEFT)())))));
}

dart_style, with trailing commas:

render() {
  return (Dom.div()..className = 'brand-img-wrapper')(
    (Dom.div()
      ..className = 'brand-img brand-symbol'
      ..role = 'img'
      ..addProps(ariaProps()..hidden = true))(),
    (Dom.button()
      ..type = 'button'
      ..className = 'hitarea sidebar-toggle'
      ..onClick = _onSidebarToggle)(
      (Dom.span()..className = 'flip-container')(
        (Dom.span()..className = 'flipper')(
          (Dom.span()..className = 'front-side')(
            (Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_RIGHT)(),
          ),
          (Dom.span()..className = 'back-side')(
            (Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_LEFT)(),
          ),
        ),
      ),
    ),
  );
}

The only thing we'd want improved would be to wrap the first closing paren on its own line so that the prop cascading and nesting are more visually distinguished:

Ideal formatting:

render() {
  return (Dom.div()..className = 'brand-img-wrapper')(
    (Dom.div()
      ..className = 'brand-img brand-symbol'
      ..role = 'img'
      ..addProps(ariaProps()..hidden = true)
    )(),
    (Dom.button()
      ..type = 'button'
      ..className = 'hitarea sidebar-toggle'
      ..onClick = _onSidebarToggle
    )(
      (Dom.span()..className = 'flip-container')(
        (Dom.span()..className = 'flipper')(
          (Dom.span()..className = 'front-side')(
            (Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_RIGHT)(),
          ),
          (Dom.span()..className = 'back-side')(
            (Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_LEFT)(),
          ),
        ),
      ),
    ),
  );
}

That being said, this is a _fantastic_ improvement over the previous formatting; I'm very excited to share this news!

Answer 3 · 2016-11-02T20:38:42.000Z

I'm not sure if we could pull off your ideal formatting without making other code that doesn't use this idiom—a parenthesized expression followed by an argument list—for the same reason look worse.

Answer 4 · 2016-11-02T23:04:55.000Z

What about if it were only done for parenthesized cascade expressions? 😃

Answer 5 · 2016-11-02T23:12:39.000Z

No, those are actually sadly common in practice. Despite the fact that the designers deliberately chose a cascade syntax that doesn't nest well, users nest it all the time.

If we changed how those are formatted, it would impact tons of existing code.

Answer 6 · 2016-11-02T23:15:29.000Z

Mm, fair enough. Thanks for giving it some thought!

I'll have to familiarize myself with the different ways cascading are used to see if I can't come up with something.

Answer 7 · 2017-01-03T05:12:48.000Z

@munificent Just saw the updated title. To be clear, ideally we'd like to move closing paren to the next line as well.

Answer 8 · 2021-09-28T00:51:35.000Z

I think we're happy with the way parenthesized cascades are currently formatted.