@decorators on class are still being placed on separate line

[desbrowne]

Prettier 1.15.1
Playground link

--parser typescript

Input:

import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { RouteComponentProps } from 'react-router';

interface CountHandlerProps extends RouteComponentProps<{}> { }
@observer export class CountHandler extends React.Component<CountHandlerProps> {
	@observable count = 0;
	render() {
      const { data } = this;
      return (
        <div>
          Count: {this.count}
          <button onClick={this.handleIncreaseClick}>Increase</button>
          <button onClick={handleResetClick}>Reset</button>
      	</div>
      );
	}
	@action handleIncreaseClick = () => this.count++;
	@action handleResetClick = () => {
      this.count = 0;
    }
}

Output:

import { action, observable } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { RouteComponentProps } from "react-router";

interface CountHandlerProps extends RouteComponentProps<{}> {}
@observer
export class CountHandler extends React.Component<CountHandlerProps> {
  @observable count = 0;
  render() {
    const { data } = this;
    return (
      <div>
        Count: {this.count}
        <button onClick={this.handleIncreaseClick}>Increase</button>
        <button onClick={handleResetClick}>Reset</button>
      </div>
    );
  }
  @action handleIncreaseClick = () => this.count++;
  @action
  handleResetClick = () => {
    this.count = 0;
  };
}

Expected behavior:
I would expect the @observer decorator and the second @action decorator(fixed in 1.15.2) to stay inline as discussed in #4924.

[desbrowne]

Prettier 1.15.1
Playground link

--parser babylon

Input:

import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import { RouteComponentProps } from 'react-router';

export @observer class CountHandler extends React.Component {
	@observable count = 0;
	render() {
      const { data } = this;
      return (
        <div>
          Count: {this.count}
          <button onClick={this.handleIncreaseClick}>Increase</button>
          <button onClick={handleResetClick}>Reset</button>
      	</div>
      );
	}
	@action handleIncreaseClick = () => this.count++;
	@action handleResetClick = () => {
      this.count = 0;
    }
}

Output:

import { action, observable } from "mobx";
import { observer } from "mobx-react";
import React from "react";
import { RouteComponentProps } from "react-router";

export
@observer
class CountHandler extends React.Component {
  @observable count = 0;
  render() {
    const { data } = this;
    return (
      <div>
        Count: {this.count}
        <button onClick={this.handleIncreaseClick}>Increase</button>
        <button onClick={handleResetClick}>Reset</button>
      </div>
    );
  }
  @action handleIncreaseClick = () => this.count++;
  @action
  handleResetClick = () => {
    this.count = 0;
  };
}

Expected behavior:
Tried this with babylon parser to double check, seeing the same result.

[ikatyang]

cc @lydell @duailibe @action looks like a bug to me(fixed in #5364) but I'm not sure where should @observer go.

[desbrowne]

Thanks @ikatyang, placing @observer inline is pretty standard in the mobx community, for example the official docs: https://mobx.js.org/refguide/observer-component.html

[suchipi]

According to the rationale doc, we decided to always multiline decorators on classes, so that'd be why @observer is where it is.

[desbrowne]

Thanks, @suchipi, at over 3000 components in our web app that would be a problem for us as it's inconsistent. This is also not consistent with the mobx community.

I see the statement "We don't think it ever makes sense to inline the decorators" but no explanation on why it doesn't make sense. Given the large mobx community (> 17k stars) this statement seem at odds?

[desbrowne]

After speaking with the rest of my team I think we'd be happy to migrate to the multi-line decorator for classes as it seems that there is no real consensus with mobx users (even the official docs have cases of multi-line @observer).

Keen to get the second @action issue fixed so we can enable prettier for our team. Not sure where to start or if @duailibe you may be more familiar with the code?

[desbrowne]

Have added a couple of extra cases

It seems that when a line is long the @decorator on line 25 in linked example is wrapped to the next line, not the expression body

Actually line 26 of this example shows this better

[lydell]

Thanks, it's unfortunate we didn't know about it being common to inline decorators for classes in mobx. Coming from Python, that looked foreign to me. I guess we can simply remove that special case in a patch release.

[desbrowne]

Obviously the other cases should work but I'd suggest it's left as is for classes unless others chime in to say they would like it changed.

Our backend is .NET Core so like Python attributes are on a different line. We simply assumed this was the ES way as we only started using decorators when we picked up mobx (~3 years ago). Much of the mobx docs and examples I've seen are inline but again I may be wrong in making that inference that this is common with others who have a broader exposure to decorators.

[thorn0]

MobX before version 6 encouraged the use of ES.next decorators to mark things as observable, computed and action. However, [...] In the interest of compatibility we have chosen to move away from them in MobX 6

-- MobX docs

Also, I found some docs for an older version, and it has class decorators on separate lines.

So things have changed, and what used to be common in the MobX community, isn't common anymore, which means that moving forward, even fewer users will want this formatting. I'm closing the issue.