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

[skybrian]

"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

[matanlurey]

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

[greglittlefield-wf]

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!

[munificent]

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.

[greglittlefield-wf]

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

[munificent]

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.

[greglittlefield-wf]

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.

[greglittlefield-wf]

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

[munificent]

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