Print semi before Flow variance sigil w/ no-semi (#11398)

* Print semi before Flow variance sigil w/ no-semi

Fixes #11397. Omitting semicolon before class property with a Flow
variance sigil `+` or `-` may lead to output that is syntatically
incorrect or has incorrect runtime behaviour.

* Add changelog for PR 11398

* Put semi to the end of previous line

Put the semicolon for Flow class property variance sigil to the end of
the previous line, not at the beginning of the the line where the
variance sigil is.

This approach was suggested in the comments of #11398.

* Add babel-flow to parser to Flow no-semi specs

As per discussion in PR #11398, babel-flow parser should also be tested.

* Print semi before private fields w/ variance

* Add private fields to changelog

* Use existing isClassProperty helper

Use existing helper function `isClassProperty` to simplify the conditional
a bit.
Note that this also adds new case, `type === "PropertyDefinition"`, that
would be a match. However, nextNode.type can't be "PropertyDefinition"
in practice, as it's part of estree parser output which doesn't support
Flow. There's no real downside in checking that extra case, though, and
this does simplify the code a bit.

* Add new property tests to the snapshot spec

* Change one of the variance sigils to `-` (contravariant)
* Add one computed property
* Make one of the property values be a function

These cases also require semi in the previous line.

* Add new testcases from previous patch to changelog

* Add variance sigil to computed property in spec

changelog_unreleased/flow/11398.md

@@ -0,0 +1,26 @@
+#### Print leading semi before Flow variance sigils (#11398 by @noppa)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+class A {
+  +one = function() {};
+  -two = val();
+  +#privOne = val();
+  static +#privTwo = val();
+}
+// Prettier stable
+class A {
+  +one = function() {}
+  -two = val()
+  +#privOne = val()
+  static +#privTwo = val()
+}
+// Prettier main
+class A {
+  +one = function() {};
+  -two = val();
+  +#privOne = val()
+  static +#privTwo = val()
+}
+```

src/language-js/print/statement.js

@@ -201,6 +201,17 @@ function shouldPrintSemicolonAfterClassProperty(node, nextNode) {
     }
   }
 
+  // Flow variance sigil +/- requires semi if there's no
+  // "declare" or "static" keyword before it.
+  if (
+    isClassProperty(nextNode) &&
+    nextNode.variance &&
+    !nextNode.static &&
+    !nextNode.declare
+  ) {
+    return true;
+  }
+
   switch (nextNode.type) {
     case "ClassProperty":
     case "PropertyDefinition":

tests/format/flow/no-semi/__snapshots__/jsfmt.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`comments.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["flow", "babel"]
+parsers: ["flow", "babel", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -37,7 +37,7 @@ x
 
 exports[`comments.js format 1`] = `
 ====================================options=====================================
-parsers: ["flow", "babel"]
+parsers: ["flow", "babel", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -69,9 +69,66 @@ x;
 ================================================================================
 `;
 
+exports[`flow-class-properties.js - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["flow", "babel", "babel-flow"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+class A {
+  +one = function() {};
+  -two = val();
+  static +three = val();
+  +#privOne = val();
+  static +#privTwo = val();
+  +[computed] = val();
+}
+
+=====================================output=====================================
+class A {
+  +one = function () {};
+  -two = val()
+  static +three = val();
+  +#privOne = val()
+  static +#privTwo = val();
+  +[computed] = val()
+}
+
+================================================================================
+`;
+
+exports[`flow-class-properties.js format 1`] = `
+====================================options=====================================
+parsers: ["flow", "babel", "babel-flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+class A {
+  +one = function() {};
+  -two = val();
+  static +three = val();
+  +#privOne = val();
+  static +#privTwo = val();
+  +[computed] = val();
+}
+
+=====================================output=====================================
+class A {
+  +one = function () {};
+  -two = val();
+  static +three = val();
+  +#privOne = val();
+  static +#privTwo = val();
+  +[computed] = val();
+}
+
+================================================================================
+`;
+
 exports[`flow-interfaces.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["flow", "babel"]
+parsers: ["flow", "babel", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -157,7 +214,7 @@ interface E {
 
 exports[`flow-interfaces.js format 1`] = `
 ====================================options=====================================
-parsers: ["flow", "babel"]
+parsers: ["flow", "babel", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -242,7 +299,7 @@ interface E {
 
 exports[`no-semi.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["flow", "babel"]
+parsers: ["flow", "babel", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -263,7 +320,7 @@ semi: false
 
 exports[`no-semi.js format 1`] = `
 ====================================options=====================================
-parsers: ["flow", "babel"]
+parsers: ["flow", "babel", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================

tests/format/flow/no-semi/flow-class-properties.js

@@ -0,0 +1,8 @@
+class A {
+  +one = function() {};
+  -two = val();
+  static +three = val();
+  +#privOne = val();
+  static +#privTwo = val();
+  +[computed] = val();
+}

tests/format/flow/no-semi/jsfmt.spec.js

@@ -1,2 +1,2 @@
-run_spec(__dirname, ["flow", "babel"]);
-run_spec(__dirname, ["flow", "babel"], { semi: false });
+run_spec(__dirname, ["flow", "babel", "babel-flow"]);
+run_spec(__dirname, ["flow", "babel", "babel-flow"], { semi: false });