Fix: Correctly break class prperties initializer. (#4442)

src/language-js/printer-estree.js

@@ -2047,9 +2047,9 @@ function printPathNoParens(path, options, print, args) {
         parts.push(
           " =",
           printAssignmentRight(
+            n.key,
             n.value,
             path.call(print, "value"),
-            false, // canBreak
             options
           )
         );
@@ -2057,7 +2057,7 @@ function printPathNoParens(path, options, print, args) {
 
       parts.push(semi);
 
-      return concat(parts);
+      return group(concat(parts));
     }
     case "ClassDeclaration":
     case "ClassExpression":
@@ -2664,12 +2664,10 @@ function printPathNoParens(path, options, print, args) {
         parts.push("declare ");
       }
 
-      const canBreak = n.right.type === "StringLiteralTypeAnnotation";
-
       const printed = printAssignmentRight(
+        n.id,
         n.right,
         path.call(print, "right"),
-        canBreak,
         options
       );
 
@@ -5059,11 +5057,22 @@ function printBinaryishExpressions(
   return parts;
 }
 
-function printAssignmentRight(rightNode, printedRight, canBreak, options) {
+function printAssignmentRight(leftNode, rightNode, printedRight, options) {
   if (hasLeadingOwnLineComment(options.originalText, rightNode, options)) {
     return indent(concat([hardline, printedRight]));
   }
 
+  const canBreak =
+    (isBinaryish(rightNode) && !shouldInlineLogicalExpression(rightNode)) ||
+    (rightNode.type === "ConditionalExpression" &&
+      isBinaryish(rightNode.test) &&
+      !shouldInlineLogicalExpression(rightNode.test)) ||
+    rightNode.type === "StringLiteralTypeAnnotation" ||
+    ((leftNode.type === "Identifier" ||
+      isStringLiteral(leftNode) ||
+      leftNode.type === "MemberExpression") &&
+      (isStringLiteral(rightNode) || isMemberExpressionChain(rightNode)));
+
   if (canBreak) {
     return indent(concat([line, printedRight]));
   }
@@ -5083,20 +5092,10 @@ function printAssignment(
     return printedLeft;
   }
 
-  const canBreak =
-    (isBinaryish(rightNode) && !shouldInlineLogicalExpression(rightNode)) ||
-    (rightNode.type === "ConditionalExpression" &&
-      isBinaryish(rightNode.test) &&
-      !shouldInlineLogicalExpression(rightNode.test)) ||
-    ((leftNode.type === "Identifier" ||
-      isStringLiteral(leftNode) ||
-      leftNode.type === "MemberExpression") &&
-      (isStringLiteral(rightNode) || isMemberExpressionChain(rightNode)));
-
   const printed = printAssignmentRight(
+    leftNode,
     rightNode,
     printedRight,
-    canBreak,
     options
   );
 

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

@@ -169,6 +169,17 @@ class A {
     // comment to break again
     2;
 }
+
+class B {
+  someInstanceProperty = this.props.foofoofoofoofoofoo &&
+    this.props.barbarbarbar;
+  
+  someInstanceProperty2 = { foo: this.props.foofoofoofoofoofoo &&
+    this.props.barbarbarbar };
+  
+    someInstanceProperty3 =
+  "foo";
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 class A {
   foobar =
@@ -178,6 +189,17 @@ class A {
     2;
 }
 
+class B {
+  someInstanceProperty =
+    this.props.foofoofoofoofoofoo && this.props.barbarbarbar;
+
+  someInstanceProperty2 = {
+    foo: this.props.foofoofoofoofoofoo && this.props.barbarbarbar
+  };
+
+  someInstanceProperty3 = "foo";
+}
+
 `;
 
 exports[`ternary.js 1`] = `

tests/classes/property.js

@@ -5,3 +5,14 @@ class A {
     // comment to break again
     2;
 }
+
+class B {
+  someInstanceProperty = this.props.foofoofoofoofoofoo &&
+    this.props.barbarbarbar;
+  
+  someInstanceProperty2 = { foo: this.props.foofoofoofoofoofoo &&
+    this.props.barbarbarbar };
+  
+    someInstanceProperty3 =
+  "foo";
+}