Repository: jlongster/prettier (js)

Issue:
Decorators for MobX put on separate lines
I understand that class decorators are usually put on their own line above the class, however the standard style with MobX annotations within a class is to put them on the same line as what they annotate. [Example](https://mobx.js.org/refguide/observable-decorator.html):

![screen shot 2017-01-19 at 15 25 22](https://cloud.githubusercontent.com/assets/61575/22110313/88ee7406-de5b-11e6-9121-ab2938885b87.png)

Currently prettier splits all the lines that have decorators, making it look very messy.

https://jlongster.github.io/prettier/#%7B%22content%22%3A%22import%20%7Bobservable%7D%20from%20%5C%22mobx%5C%22%3B%5Cn%5Cnclass%20OrderLine%20%7B%5Cn%20%20%20%20%40observable%20price%3Anumber%20%3D%200%3B%5Cn%20%20%20%20%40observable%20amount%3Anumber%20%3D%201%3B%5Cn%5Cn%20%20%20%20constructor(price)%20%7B%5Cn%20%20%20%20%20%20%20%20this.price%20%3D%20price%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20%40computed%20get%20total()%20%7B%5Cn%20%20%20%20%20%20%20%20return%20this.price%20*%20this.amount%3B%5Cn%20%20%20%20%7D%5Cn%7D%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22singleQuote%22%3Afalse%2C%22trailingComma%22%3Afalse%2C%22bracketSpacing%22%3Atrue%7D%7D

Pull request:
Put decorators on the same line
Mobx is the only popular JavaScript library that I know about which uses decorators. They put things on the same line so we should follow their conventions.

The logic implemented here is the following: if there is one decorator, it's on the same line. If there is more than one, they are each on their own line.

Fixes #325

Patch:
diff --git a/README.md b/README.md
index ffdbbddb4..422c69695 100644
--- a/README.md
+++ b/README.md
@@ -251,3 +251,4 @@ a few notes if you are interested in contributing:
 * You can run `AST_COMPARE=1 jest` for a more robust test run. That
   formats each file, re-parses it, and compares the new AST with the
   original one and makes sure they are semantically equivalent.
+ * Each test folder has a `jsfmt.spec.js` that runs the tests. Normally you can just put `run_spec(__dirname);` there but if you want to pass specific options you can add the options object as the 2nd parameter like: `run_spec(__dirname, { parser: 'babylon' });`
diff --git a/src/printer.js b/src/printer.js
index 28990dde8..b2ce78ee1 100644
--- a/src/printer.js
+++ b/src/printer.js
@@ -51,9 +51,12 @@ function genericPrint(path, options, printPath) {
       // responsible for printing node.decorators.
       !util.getParentExportDeclaration(path)
   ) {
+    const separator = node.decorators.length === 1 &&
+      node.decorators[0].expression.type === "Identifier"
+      ? " " : hardline;
     path.each(
       function(decoratorPath) {
-        parts.push(printPath(decoratorPath), line);
+        parts.push(printPath(decoratorPath), separator);
       },
       "decorators"
     );
@@ -115,6 +118,9 @@ function genericPrintNoParens(path, options, print) {
         path.each(
           function(childPath) {
             parts.push(print(childPath), ";", hardline);
+            if (util.newlineExistsAfter(options.originalText, util.locEnd(childPath.getValue()))) {
+              parts.push(hardline);
+            }
           },
           "directives"
         );
@@ -627,7 +633,7 @@ function genericPrintNoParens(path, options, print) {
                   indent(options.tabWidth, concat([softline, printedValue]))
                 ])
               ),
-              line,
+              softline,
               ifBreak(")")
             ])
           );


Test patch:
diff --git a/tests/decorators/__snapshots__/jsfmt.spec.js.snap b/tests/decorators/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..7f0de6828
--- /dev/null
+++ b/tests/decorators/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,64 @@
+exports[`test mobx.js 1`] = `
+"import {observable} from \"mobx\";
+
+@observer class OrderLine {
+  @observable price:number = 0;
+  @observable amount:number = 1;
+
+  constructor(price) {
+    this.price = price;
+  }
+
+  @computed get total() {
+    return this.price * this.amount;
+  }
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+import { observable } from \"mobx\";
+
+@observer class OrderLine {
+  @observable price: number = 0;
+  @observable amount: number = 1;
+
+  constructor(price) {
+    this.price = price;
+  }
+
+  @computed get total() {
+    return this.price * this.amount;
+  }
+}
+"
+`;
+
+exports[`test multiple.js 1`] = `
+"const dog = {
+  @readonly
+  @nonenumerable
+  @doubledValue
+  legs: 4
+};
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+const dog = {
+  @readonly
+  @nonenumerable
+  @doubledValue
+  legs: 4
+};
+"
+`;
+
+exports[`test redux.js 1`] = `
+"@connect(mapStateToProps, mapDispatchToProps)
+export class MyApp extends React.Component {}
+
+@connect(state => ({ todos: state.todos }))
+export class Home extends React.Component {}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+@connect(mapStateToProps, mapDispatchToProps)
+export class MyApp extends React.Component {}
+
+@connect(state => ({ todos: state.todos }))
+export class Home extends React.Component {}
+"
+`;
diff --git a/tests/decorators/jsfmt.spec.js b/tests/decorators/jsfmt.spec.js
new file mode 100644
index 000000000..939578260
--- /dev/null
+++ b/tests/decorators/jsfmt.spec.js
@@ -0,0 +1,1 @@
+run_spec(__dirname, {parser: 'babylon'});
diff --git a/tests/decorators/mobx.js b/tests/decorators/mobx.js
new file mode 100644
index 000000000..adb461b0e
--- /dev/null
+++ b/tests/decorators/mobx.js
@@ -0,0 +1,14 @@
+import {observable} from "mobx";
+
+@observer class OrderLine {
+  @observable price:number = 0;
+  @observable amount:number = 1;
+
+  constructor(price) {
+    this.price = price;
+  }
+
+  @computed get total() {
+    return this.price * this.amount;
+  }
+}
diff --git a/tests/decorators/multiple.js b/tests/decorators/multiple.js
new file mode 100644
index 000000000..3a41e7b8d
--- /dev/null
+++ b/tests/decorators/multiple.js
@@ -0,0 +1,6 @@
+const dog = {
+  @readonly
+  @nonenumerable
+  @doubledValue
+  legs: 4
+};
diff --git a/tests/decorators/redux.js b/tests/decorators/redux.js
new file mode 100644
index 000000000..481658f81
--- /dev/null
+++ b/tests/decorators/redux.js
@@ -0,0 +1,5 @@
+@connect(mapStateToProps, mapDispatchToProps)
+export class MyApp extends React.Component {}
+
+@connect(state => ({ todos: state.todos }))
+export class Home extends React.Component {}
diff --git a/tests/directives/__snapshots__/jsfmt.spec.js.snap b/tests/directives/__snapshots__/jsfmt.spec.js.snap
index f680d0532..b63c61eb4 100644
--- a/tests/directives/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/directives/__snapshots__/jsfmt.spec.js.snap
@@ -1,3 +1,40 @@
+exports[`test newline.js 1`] = `
+"/* @flow */
+
+\"use strict\";
+
+import a from \"a\";
+
+a();
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+/* @flow */
+
+\"use strict\";
+
+import a from \"a\";
+
+a();
+"
+`;
+
+exports[`test newline.js 2`] = `
+"/* @flow */
+
+\"use strict\";
+
+import a from \"a\";
+
+a();
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+/* @flow */
+\"use strict\";
+
+import a from \"a\";
+
+a();
+"
+`;
+
 exports[`test test.js 1`] = `
 "\"use strict\";
 
@@ -12,3 +49,18 @@ function fn() {
 }
 "
 `;
+
+exports[`test test.js 2`] = `
+"\"use strict\";
+
+function fn() {
+  \"use strict\";
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+\"use strict\";
+
+function fn() {
+  \"use strict\";
+}
+"
+`;
diff --git a/tests/directives/jsfmt.spec.js b/tests/directives/jsfmt.spec.js
index 989047bcc..d5ec770a9 100644
--- a/tests/directives/jsfmt.spec.js
+++ b/tests/directives/jsfmt.spec.js
@@ -1,1 +1,2 @@
 run_spec(__dirname);
+run_spec(__dirname, {parser: 'babylon'});
diff --git a/tests/directives/newline.js b/tests/directives/newline.js
new file mode 100644
index 000000000..8da10321b
--- /dev/null
+++ b/tests/directives/newline.js
@@ -0,0 +1,7 @@
+/* @flow */
+
+"use strict";
+
+import a from "a";
+
+a();
diff --git a/tests/flow/logical/__snapshots__/jsfmt.spec.js.snap b/tests/flow/logical/__snapshots__/jsfmt.spec.js.snap
index f3cab28a7..2ff1eac92 100644
--- a/tests/flow/logical/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/flow/logical/__snapshots__/jsfmt.spec.js.snap
@@ -901,14 +901,14 @@ function logical12b(y: number): number {
  */
 function logical13(x: number): Array<{ x: string }> {
   return [
-    { x: x && \"bar\"  },
-    { x: true && \"bar\"  },
-    { x: true && false  },
-    { x: false && false  },
-    { x: 1 && \"bar\"  },
-    { x: \"foo\" && \"bar\"  },
-    { x: \"foo\" && \"bar\"  },
-    { x: \"foo\" && \"bar\"  }
+    { x: x && \"bar\" },
+    { x: true && \"bar\" },
+    { x: true && false },
+    { x: false && false },
+    { x: 1 && \"bar\" },
+    { x: \"foo\" && \"bar\" },
+    { x: \"foo\" && \"bar\" },
+    { x: \"foo\" && \"bar\" }
   ];
 }
 
@@ -917,14 +917,14 @@ function logical13(x: number): Array<{ x: string }> {
  */
 function logical14(x: number): Array<{ x: string }> {
   return [
-    { x: x || \"bar\"  },
-    { x: false || \"bar\"  },
-    { x: false || true  },
-    { x: true || false  },
-    { x: 0 || \"bar\"  },
-    { x: \"foo\" || \"bar\"  },
-    { x: \"foo\" || \"bar\"  },
-    { x: \"foo\" || \"bar\"  }
+    { x: x || \"bar\" },
+    { x: false || \"bar\" },
+    { x: false || true },
+    { x: true || false },
+    { x: 0 || \"bar\" },
+    { x: \"foo\" || \"bar\" },
+    { x: \"foo\" || \"bar\" },
+    { x: \"foo\" || \"bar\" }
   ];
 }
 
diff --git a/tests/trailing_comma/__snapshots__/jsfmt.spec.js.snap b/tests/trailing_comma/__snapshots__/jsfmt.spec.js.snap
index d6a325b0a..b03422f52 100644
--- a/tests/trailing_comma/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/trailing_comma/__snapshots__/jsfmt.spec.js.snap
@@ -77,6 +77,11 @@ const aLong = {
   },
   dHasALongName: \'a-long-value-too\'
 };
+
+const aLong = {
+  dHasALongName: \'a-long-value-too\',
+  eHasABooleanExpression: a === a,
+};
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 const a = { b: true, c: { c1: \"hello\" }, d: false };
 
@@ -88,6 +93,11 @@ const aLong = {
   },
   dHasALongName: \"a-long-value-too\"
 };
+
+const aLong = {
+  dHasALongName: \"a-long-value-too\",
+  eHasABooleanExpression: a === a
+};
 "
 `;
 
@@ -108,6 +118,11 @@ const aLong = {
   },
   dHasALongName: \'a-long-value-too\'
 };
+
+const aLong = {
+  dHasALongName: \'a-long-value-too\',
+  eHasABooleanExpression: a === a,
+};
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 const a = { b: true, c: { c1: \"hello\" }, d: false };
 
@@ -119,5 +134,10 @@ const aLong = {
   },
   dHasALongName: \"a-long-value-too\",
 };
+
+const aLong = {
+  dHasALongName: \"a-long-value-too\",
+  eHasABooleanExpression: a === a,
+};
 "
 `;
diff --git a/tests/trailing_comma/object.js b/tests/trailing_comma/object.js
index 9bdc3b1f2..10c074ca9 100644
--- a/tests/trailing_comma/object.js
+++ b/tests/trailing_comma/object.js
@@ -14,3 +14,8 @@ const aLong = {
   },
   dHasALongName: 'a-long-value-too'
 };
+
+const aLong = {
+  dHasALongName: 'a-long-value-too',
+  eHasABooleanExpression: a === a,
+};