Prettier extends and implements when not fitting in same line (#3689)

* Added prettier layout for class extends and implements

* Added prettier layout for class extends and implements, fix with keeping it in online if it fits

* Added prettier layout for class extends and implements, fixed tests as a side change

* Extends implements comments in same line fix

* Extends implements comments in same line without ugly workaround

* added empty line to test typescript_class/extends_implements.ts

* If only one extends keep old behaviour

* Removed console logs

src/language-js/printer-estree.js

@@ -3636,24 +3636,41 @@ function printClass(path, options, print) {
 
   const partsGroup = [];
   if (n.superClass) {
-    if (hasLeadingOwnLineComment(options.originalText, n.superClass)) {
-      parts.push(hardline);
-    } else {
-      parts.push(" ");
-    }
-
     const printed = concat([
       "extends ",
       path.call(print, "superClass"),
       path.call(print, "superTypeParameters")
     ]);
-    parts.push(
-      path.call(
-        superClass =>
-          comments.printComments(superClass, () => printed, options),
-        "superClass"
-      )
-    );
+    // Keep old behaviour of extends in same line
+    // If there is only on extends and there are not comments
+    if (
+      (!n.implements || n.implements.length === 0) &&
+      (!n.superClass.comments || n.superClass.comments.length === 0)
+    ) {
+      parts.push(
+        concat([
+          " ",
+          path.call(
+            superClass =>
+              comments.printComments(superClass, () => printed, options),
+            "superClass"
+          )
+        ])
+      );
+    } else {
+      partsGroup.push(
+        group(
+          concat([
+            line,
+            path.call(
+              superClass =>
+                comments.printComments(superClass, () => printed, options),
+              "superClass"
+            )
+          ])
+        )
+      );
+    }
   } else if (n.extends && n.extends.length > 0) {
     parts.push(" extends ", join(", ", path.map(print, "extends")));
   }
@@ -3661,8 +3678,15 @@ function printClass(path, options, print) {
   if (n["implements"] && n["implements"].length > 0) {
     partsGroup.push(
       line,
-      "implements ",
-      group(indent(join(concat([",", line]), path.map(print, "implements"))))
+      "implements",
+      group(
+        indent(
+          concat([
+            line,
+            join(concat([",", line]), path.map(print, "implements"))
+          ])
+        )
+      )
     );
   }
 

src/main/comments.js

@@ -976,6 +976,17 @@ function printTrailingComment(commentPath, print, options) {
   }
   const isBlock = util.isBlockComment(comment);
 
+  // We don't want the line to break
+  // when the parentParentNode is a ClassDeclaration/-Expression
+  // And the parentNode is in the superClass property
+  const parentNode = commentPath.getNode(1);
+  const parentParentNode = commentPath.getNode(2);
+  const isParentSuperClass =
+    parentParentNode &&
+    (parentParentNode.type === "ClassDeclaration" ||
+      parentParentNode.type === "ClassExpression") &&
+    parentParentNode.superClass === parentNode;
+
   if (
     util.hasNewline(options.originalText, locStart(comment), {
       backwards: true
@@ -1001,7 +1012,7 @@ function printTrailingComment(commentPath, print, options) {
     return lineSuffix(
       concat([hardline, isLineBeforeEmpty ? hardline : "", contents])
     );
-  } else if (isBlock) {
+  } else if (isBlock || isParentSuperClass) {
     // Trailing block comments never need a newline
     return concat([" ", contents]);
   }

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

@@ -51,8 +51,8 @@ export class SnapshotLogger {
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 class A // comment 1
-// comment 2
-extends B {}
+  // comment 2
+  extends B {}
 
 class A extends B // comment1
 // comment2
@@ -66,8 +66,8 @@ class A extends B /* a */ {
 class A /* a */ extends B {}
 
 (class A // comment 1
-// comment 2
-extends B {});
+  // comment 2
+  extends B {});
 
 (class A extends B // comment1
 // comment2

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

@@ -50,11 +50,9 @@ export class VisTimelineComponent2
 	implements AfterViewInit, OnChanges, OnDestroy, AndSomethingReallyReallyLong {
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-class MyContractSelectionWidget extends React.Component<
-  void,
-  MyContractSelectionWidgetPropsType,
-  void
-> implements SomethingLarge {
+class MyContractSelectionWidget
+  extends React.Component<void, MyContractSelectionWidgetPropsType, void>
+  implements SomethingLarge {
   method() {}
 }
 
@@ -65,7 +63,8 @@ class DisplayObject extends utils.EventEmitter
   implements interaction_InteractiveTarget {}
 
 class DisplayObject extends utils.EventEmitter
-  implements interaction_InteractiveTarget,
+  implements
+    interaction_InteractiveTarget,
     somethingElse_SomeOtherThing,
     somethingElseAgain_RunningOutOfNames {}
 
@@ -84,7 +83,8 @@ class Foo extends Immutable.Record({
 export class VisTimelineComponent
   implements AfterViewInit, OnChanges, OnDestroy {}
 export class VisTimelineComponent2
-  implements AfterViewInit,
+  implements
+    AfterViewInit,
     OnChanges,
     OnDestroy,
     AndSomethingReallyReallyLong {}

tests/flow/union/__snapshots__/jsfmt.spec.js.snap

@@ -29,19 +29,19 @@ export class PlusOp extends BinaryExpression<ArithmeticExpression, ArithmeticExp
 
 }
 
-export class MinusOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression> {
+export class MinusOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression, ArithmeticExpression, ArithmeticExpression> {
 
 }
 
-export class MulOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression> {
+export class MulOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression, ArithmeticExpression, ArithmeticExpression> {
 
 }
 
-export class DivOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression> {
+export class DivOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression, ArithmeticExpression, ArithmeticExpression> {
 
 }
 
-export class ModOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression> {
+export class ModOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression, ArithmeticExpression, ArithmeticExpression> {
 
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -77,21 +77,29 @@ export class PlusOp extends BinaryExpression<
 > {}
 
 export class MinusOp extends BinaryExpression<
+  ArithmeticExpression,
+  ArithmeticExpression,
   ArithmeticExpression,
   ArithmeticExpression
 > {}
 
 export class MulOp extends BinaryExpression<
+  ArithmeticExpression,
+  ArithmeticExpression,
   ArithmeticExpression,
   ArithmeticExpression
 > {}
 
 export class DivOp extends BinaryExpression<
+  ArithmeticExpression,
+  ArithmeticExpression,
   ArithmeticExpression,
   ArithmeticExpression
 > {}
 
 export class ModOp extends BinaryExpression<
+  ArithmeticExpression,
+  ArithmeticExpression,
   ArithmeticExpression,
   ArithmeticExpression
 > {}

tests/flow/union/blowup.js

@@ -26,18 +26,18 @@ export class PlusOp extends BinaryExpression<ArithmeticExpression, ArithmeticExp
 
 }
 
-export class MinusOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression> {
+export class MinusOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression, ArithmeticExpression, ArithmeticExpression> {
 
 }
 
-export class MulOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression> {
+export class MulOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression, ArithmeticExpression, ArithmeticExpression> {
 
 }
 
-export class DivOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression> {
+export class DivOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression, ArithmeticExpression, ArithmeticExpression> {
 
 }
 
-export class ModOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression> {
+export class ModOp extends BinaryExpression<ArithmeticExpression, ArithmeticExpression, ArithmeticExpression, ArithmeticExpression> {
 
 }

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

@@ -12,6 +12,10 @@ export class Environment2 extends GenericEnvironment<
   SomeType,
   AnotherType,
   YetAnotherType,
+  DifferentType1,
+  DifferentType2,
+  DifferentType3,
+  DifferentType4,
 > {
   m() {};
 };
@@ -23,7 +27,11 @@ export interface Environment1
 export class Environment2 extends GenericEnvironment<
   SomeType,
   AnotherType,
-  YetAnotherType
+  YetAnotherType,
+  DifferentType1,
+  DifferentType2,
+  DifferentType3,
+  DifferentType4
 > {
   m() {}
 }

tests/interface/break.js

@@ -9,6 +9,10 @@ export class Environment2 extends GenericEnvironment<
   SomeType,
   AnotherType,
   YetAnotherType,
+  DifferentType1,
+  DifferentType2,
+  DifferentType3,
+  DifferentType4,
 > {
   m() {};
 };

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

@@ -7,7 +7,7 @@ this.isTabActionBar((e.target || e.srcElement) as HTMLElement);
 'current' in (props.pagination as Object)
 start + (yearSelectTotal as number)
 scrollTop > (visibilityHeight as number)
-export default class Column<T> extends (RcTable.Column as React.ComponentClass<ColumnProps<T>>) {}
+export default class Column<T> extends (RcTable.Column as React.ComponentClass<ColumnProps<T>,ColumnProps<T>,ColumnProps<T>,ColumnProps<T>>) {}
 export abstract class MobxTypedForm extends (Form as { new (): any }) {}
 ({}) as {};
 function*g() {
@@ -38,6 +38,9 @@ this.isTabActionBar((e.target || e.srcElement) as HTMLElement);
 start + (yearSelectTotal as number);
 scrollTop > (visibilityHeight as number);
 export default class Column<T> extends (RcTable.Column as React.ComponentClass<
+  ColumnProps<T>,
+  ColumnProps<T>,
+  ColumnProps<T>,
   ColumnProps<T>
 >) {}
 export abstract class MobxTypedForm extends (Form as { new (): any }) {}

tests/typescript_as/as.js

@@ -4,7 +4,7 @@ this.isTabActionBar((e.target || e.srcElement) as HTMLElement);
 'current' in (props.pagination as Object)
 start + (yearSelectTotal as number)
 scrollTop > (visibilityHeight as number)
-export default class Column<T> extends (RcTable.Column as React.ComponentClass<ColumnProps<T>>) {}
+export default class Column<T> extends (RcTable.Column as React.ComponentClass<ColumnProps<T>,ColumnProps<T>,ColumnProps<T>,ColumnProps<T>>) {}
 export abstract class MobxTypedForm extends (Form as { new (): any }) {}
 ({}) as {};
 function*g() {

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

@@ -28,6 +28,97 @@ class F<__T> {}
 
 `;
 
+exports[`extends_implements.ts 1`] = `
+class Class extends AbstractClass implements Interface1, Interface2, Interface3, Interface4 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces extends AbstractClass
+  implements Interface1, Interface2, Interface3, Interface4 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass
+  implements Interface1, Interface2, Interface3, Interface4 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass
+  implements
+    Interface1,
+    Interface2,
+    Interface3,
+    Interface4,
+    Interface5,
+    Interface6,
+    Interface7,
+    Interface8 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass<Type1, Type2, Type3, Type4, Type5, Type6, Type7> {} 
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass<Type1, Type2, Type3, Type4, Type5, Type6, Type7>
+  implements
+    Interface1,
+    Interface2,
+    Interface3,
+    Interface4,
+    Interface5,
+    Interface6,
+    Interface7,
+    Interface8 {}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+class Class extends AbstractClass
+  implements Interface1, Interface2, Interface3, Interface4 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces extends AbstractClass
+  implements Interface1, Interface2, Interface3, Interface4 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass
+  implements Interface1, Interface2, Interface3, Interface4 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass
+  implements
+    Interface1,
+    Interface2,
+    Interface3,
+    Interface4,
+    Interface5,
+    Interface6,
+    Interface7,
+    Interface8 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces extends AAAAAAAAAAAAAAbstractClass<
+  Type1,
+  Type2,
+  Type3,
+  Type4,
+  Type5,
+  Type6,
+  Type7
+> {}
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass<
+    Type1,
+    Type2,
+    Type3,
+    Type4,
+    Type5,
+    Type6,
+    Type7
+  >
+  implements
+    Interface1,
+    Interface2,
+    Interface3,
+    Interface4,
+    Interface5,
+    Interface6,
+    Interface7,
+    Interface8 {}
+
+`;
+
 exports[`generics.ts 1`] = `
 class<T> implements Map<T> {}
 

tests/typescript_class/extends_implements.ts

@@ -0,0 +1,35 @@
+class Class extends AbstractClass implements Interface1, Interface2, Interface3, Interface4 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces extends AbstractClass
+  implements Interface1, Interface2, Interface3, Interface4 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass
+  implements Interface1, Interface2, Interface3, Interface4 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass
+  implements
+    Interface1,
+    Interface2,
+    Interface3,
+    Interface4,
+    Interface5,
+    Interface6,
+    Interface7,
+    Interface8 {}
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass<Type1, Type2, Type3, Type4, Type5, Type6, Type7> {} 
+
+class ExtendsAbstractClassAndImplementsInterfaces
+  extends AAAAAAAAAAAAAAbstractClass<Type1, Type2, Type3, Type4, Type5, Type6, Type7>
+  implements
+    Interface1,
+    Interface2,
+    Interface3,
+    Interface4,
+    Interface5,
+    Interface6,
+    Interface7,
+    Interface8 {}