fix(javascript): inline property decorator should stay inline (#5364)

Fixes the `@action` part in #5360

src/language-js/printer-estree.js

@@ -98,6 +98,7 @@ function genericPrint(path, options, printPath, args) {
 
   const parentExportDecl = getParentExportDeclaration(path);
   const decorators = [];
+  let shouldBreakDecorators = false;
   if (
     node.decorators &&
     node.decorators.length > 0 &&
@@ -110,19 +111,20 @@ function genericPrint(path, options, printPath, args) {
         options.locStart(node.decorators[0])
     )
   ) {
-    const shouldBreak =
+    if (
+      node.type === "ClassExpression" ||
       node.type === "ClassDeclaration" ||
       hasNewlineInRange(
         options.originalText,
         options.locStart(node.decorators[0]),
         options.locEnd(getLast(node.decorators))
       ) ||
-      hasNewline(
-        options.originalText,
-        options.locEnd(getLast(node.decorators))
-      );
+      hasNewline(options.originalText, options.locEnd(getLast(node.decorators)))
+    ) {
+      shouldBreakDecorators = true;
+    }
 
-    const separator = shouldBreak ? hardline : line;
+    const separator = shouldBreakDecorators ? hardline : line;
 
     path.each(decoratorPath => {
       let decorator = decoratorPath.getValue();
@@ -185,7 +187,9 @@ function genericPrint(path, options, printPath, args) {
   }
 
   if (decorators.length > 0) {
-    return group(concat(decorators.concat(parts)));
+    return !shouldBreakDecorators && willBreak(concat(parts))
+      ? group(concat([group(concat(decorators)), concat(parts)]))
+      : group(concat(decorators.concat(parts)));
   }
   return concat(parts);
 }

tests/decorators/__snapshots__/jsfmt.spec.js.snap

@@ -147,6 +147,20 @@ import {observable} from "mobx";
   @action.bound setPrice(price) {
     this.price = price;
   }
+
+  @computed
+  get total() {
+    return this.price * this.amount;
+  }
+
+  @action.bound
+  setPrice(price) {
+    this.price = price;
+  }
+  
+  @computed @computed @computed @computed @computed @computed @computed get total() {
+    return this.price * this.amount;
+  }
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 import { observable } from "mobx";
@@ -160,6 +174,14 @@ class OrderLine {
     this.price = price;
   }
 
+  @computed get total() {
+    return this.price * this.amount;
+  }
+
+  @action.bound setPrice(price) {
+    this.price = price;
+  }
+
   @computed
   get total() {
     return this.price * this.amount;
@@ -169,6 +191,17 @@ class OrderLine {
   setPrice(price) {
     this.price = price;
   }
+
+  @computed
+  @computed
+  @computed
+  @computed
+  @computed
+  @computed
+  @computed
+  get total() {
+    return this.price * this.amount;
+  }
 }
 
 `;

tests/decorators/mobx.js

@@ -1,18 +1,32 @@
-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;
-  }
-
-  @action.bound setPrice(price) {
-    this.price = price;
-  }
-}
+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;
+  }
+
+  @action.bound setPrice(price) {
+    this.price = price;
+  }
+
+  @computed
+  get total() {
+    return this.price * this.amount;
+  }
+
+  @action.bound
+  setPrice(price) {
+    this.price = price;
+  }
+
+  @computed @computed @computed @computed @computed @computed @computed get total() {
+    return this.price * this.amount;
+  }
+}