Support new Flow feature: opaque type with lower and upper bounds (#17792)

changelog_unreleased/flow/17792.md

@@ -0,0 +1,19 @@
+#### Add support for opaque type with lower and upper bound (#17792 by @SamChou19815)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+opaque type Counter super empty extends Box<T> = Container<T>;
+opaque type Counter super Box<T> = Container<T>;
+declare opaque type Counter super empty extends Box<T>;
+declare opaque type Counter super Box<T>;
+
+// Prettier stable
+SyntaxError: Unexpected identifier, expected the token `=` (1:21)
+
+// Prettier main
+opaque type Counter super empty extends Box<T> = Container<T>;
+opaque type Counter super Box<T> = Container<T>;
+declare opaque type Counter super empty extends Box<T>;
+declare opaque type Counter super Box<T>;
+```

src/language-js/print/type-annotation.js

@@ -95,6 +95,21 @@ function printOpaqueType(path, options, print) {
     parts.push(": ", print("supertype"));
   }
 
+  if (node.lowerBound || node.upperBound) {
+    const lowerAndUpperBoundParts = [];
+    if (node.lowerBound) {
+      lowerAndUpperBoundParts.push(
+        indent([line, "super ", print("lowerBound")]),
+      );
+    }
+    if (node.upperBound) {
+      lowerAndUpperBoundParts.push(
+        indent([line, "extends ", print("upperBound")]),
+      );
+    }
+    parts.push(group(lowerAndUpperBoundParts));
+  }
+
   if (node.impltype) {
     parts.push(" = ", print("impltype"));
   }

src/language-js/traverse/visitor-keys.evaluate.js

@@ -46,8 +46,7 @@ const excludeKeys = {
   PropertyDefinition: ["tsModifiers"],
   // Not supported yet.
   // https://github.com/facebook/hermes/commit/55a5f881361ef15fd4f7b558166d80e7b9086550
-  DeclareOpaqueType: ["impltype", "lowerBound", "upperBound"],
-  OpaqueType: ["lowerBound", "upperBound"],
+  DeclareOpaqueType: ["impltype"],
 
   // Legacy property
   ExportAllDeclaration: ["assertions"],

tests/format/flow/type-declarations/__snapshots__/format.test.js.snap

@@ -258,6 +258,17 @@ opaque type overloads =
   & ((x: string) => number)
   & ((x: number) => string);
 
+opaque type Counter super empty extends Box<T> = Container<T>;
+opaque type Counter super Box<T> = Container<T>;
+
+opaque type Counter super Looooooooooooooooooog extends BoxLooooooooooooooooooog<T> = Container<T>;
+opaque type Counter super BoxLooooooooooooooooooooooooooooooooog<T> = Container<T>;
+
+declare opaque type Counter super empty extends Box<T>;
+declare opaque type Counter super Box<T>;
+declare opaque type Counter super Looooooooooooooooooog extends BoxLooooooooooooooooooog<T>;
+declare opaque type Counter super BoxLooooooooooooooooooooooooooooooooooooooooooooooog<T>;
+
 =====================================output=====================================
 declare export opaque type Foo
 declare export opaque type Bar<T>
@@ -272,6 +283,23 @@ export opaque type Foo5 = number
 opaque type union = { type: "A" } | { type: "B" }
 opaque type overloads = ((x: string) => number) & ((x: number) => string)
 
+opaque type Counter super empty extends Box<T> = Container<T>
+opaque type Counter super Box<T> = Container<T>
+
+opaque type Counter
+  super Looooooooooooooooooog
+  extends BoxLooooooooooooooooooog<T> = Container<T>
+opaque type Counter
+  super BoxLooooooooooooooooooooooooooooooooog<T> = Container<T>
+
+declare opaque type Counter super empty extends Box<T>
+declare opaque type Counter super Box<T>
+declare opaque type Counter
+  super Looooooooooooooooooog
+  extends BoxLooooooooooooooooooog<T>
+declare opaque type Counter
+  super BoxLooooooooooooooooooooooooooooooooooooooooooooooog<T>
+
 ================================================================================
 `;
 
@@ -298,6 +326,17 @@ opaque type overloads =
   & ((x: string) => number)
   & ((x: number) => string);
 
+opaque type Counter super empty extends Box<T> = Container<T>;
+opaque type Counter super Box<T> = Container<T>;
+
+opaque type Counter super Looooooooooooooooooog extends BoxLooooooooooooooooooog<T> = Container<T>;
+opaque type Counter super BoxLooooooooooooooooooooooooooooooooog<T> = Container<T>;
+
+declare opaque type Counter super empty extends Box<T>;
+declare opaque type Counter super Box<T>;
+declare opaque type Counter super Looooooooooooooooooog extends BoxLooooooooooooooooooog<T>;
+declare opaque type Counter super BoxLooooooooooooooooooooooooooooooooooooooooooooooog<T>;
+
 =====================================output=====================================
 declare export opaque type Foo;
 declare export opaque type Bar<T>;
@@ -312,5 +351,22 @@ export opaque type Foo5 = number;
 opaque type union = { type: "A" } | { type: "B" };
 opaque type overloads = ((x: string) => number) & ((x: number) => string);
 
+opaque type Counter super empty extends Box<T> = Container<T>;
+opaque type Counter super Box<T> = Container<T>;
+
+opaque type Counter
+  super Looooooooooooooooooog
+  extends BoxLooooooooooooooooooog<T> = Container<T>;
+opaque type Counter
+  super BoxLooooooooooooooooooooooooooooooooog<T> = Container<T>;
+
+declare opaque type Counter super empty extends Box<T>;
+declare opaque type Counter super Box<T>;
+declare opaque type Counter
+  super Looooooooooooooooooog
+  extends BoxLooooooooooooooooooog<T>;
+declare opaque type Counter
+  super BoxLooooooooooooooooooooooooooooooooooooooooooooooog<T>;
+
 ================================================================================
 `;

tests/format/flow/type-declarations/opaque.js

@@ -14,3 +14,14 @@ opaque type union =
 opaque type overloads =
   & ((x: string) => number)
   & ((x: number) => string);
+
+opaque type Counter super empty extends Box<T> = Container<T>;
+opaque type Counter super Box<T> = Container<T>;
+
+opaque type Counter super Looooooooooooooooooog extends BoxLooooooooooooooooooog<T> = Container<T>;
+opaque type Counter super BoxLooooooooooooooooooooooooooooooooog<T> = Container<T>;
+
+declare opaque type Counter super empty extends Box<T>;
+declare opaque type Counter super Box<T>;
+declare opaque type Counter super Looooooooooooooooooog extends BoxLooooooooooooooooooog<T>;
+declare opaque type Counter super BoxLooooooooooooooooooooooooooooooooooooooooooooooog<T>;

tests/unit/__snapshots__/visitor-keys.js.snap

@@ -238,8 +238,10 @@ exports[`visitor keys estree 1`] = `
   ],
   "DeclareOpaqueType": [
     "id",
+    "lowerBound",
     "supertype",
     "typeParameters",
+    "upperBound",
   ],
   "DeclareTypeAlias": [
     "id",
@@ -702,8 +704,10 @@ exports[`visitor keys estree 1`] = `
   "OpaqueType": [
     "id",
     "impltype",
+    "lowerBound",
     "supertype",
     "typeParameters",
+    "upperBound",
   ],
   "OptionalCallExpression": [
     "arguments",