Fix parenthesis for nullish coalescing (#10269)

* ♻️ added condition to check for left and right of nullish coalescing operator and if any is a logical expression without a paren then throw an error

* 🐛 bugs fixed and test cases updated for babel parser

* ♻️ code comments added

* 🐛 spell error rectified

* ♻️ failing test updated

* 🐛 push tests after make build

* Skip nullish-coalescing flow precedence tests

They're now incorrect

* ♻️ error message updated, binop priority of other logical operators +1 from ?? and

* ♻️ increaed the binOp for in and instanceOf, added logic to print the brackets in an ?? && || expression, test cases added

* 🐛 failing test fixed and comments updated

* ♻️ new lines added between tests

* ♻️ basic tests for checking the binOp of instanceOf, in and relational operators to be equal added

* ♻️ new lines added in between tests

packages/babel-generator/src/node/index.js

@@ -97,5 +97,18 @@ export function needsParens(node, parent, printStack) {
     if (isOrHasCallExpression(node)) return true;
   }
 
+  /* this check is for NullishCoalescing being used with LogicalOperators like && and ||
+   * For example when someone creates an ast programmaticaly like this
+   * t.logicalExpression(
+   * "??",
+   *  t.logicalExpression("||", t.identifier("a"), t.identifier("b")),
+   *  t.identifier("c"),
+   *  );
+   * In the example above the AST is equivalent to writing a || b ?? c
+   * This is incorrect because NullishCoalescing when used with LogicalExpressions should have parenthesis
+   * The correct syntax is (a || b) ?? c, that is why we need parenthesis in this case
+   */
+  if (t.isLogicalExpression(node) && parent.operator === "??") return true;
+
   return find(expandedParens, node, parent, printStack);
 }

packages/babel-generator/test/fixtures/types/LogicalExpression/input.js

@@ -1,4 +1,5 @@
 foo ||bar;
 (x => x)|| bar;
 (function a(x){return x;})|| 2;
-0||(function(){return alpha;});
+0||(function(){return alpha;});
+a ?? (b || c);

packages/babel-generator/test/fixtures/types/LogicalExpression/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["nullishCoalescingOperator"]
+}

packages/babel-generator/test/fixtures/types/LogicalExpression/output.js

@@ -7,4 +7,6 @@ foo || bar;
 
 0 || function () {
   return alpha;
-};
+};
+
+a ?? (b || c);

packages/babel-generator/test/index.js

@@ -298,6 +298,31 @@ describe("generation", function() {
 });
 
 describe("programmatic generation", function() {
+  it("should add parenthesis when NullishCoalescing is used along with ||", function() {
+    // https://github.com/babel/babel/issues/10260
+    const nullishCoalesc = t.logicalExpression(
+      "??",
+      t.logicalExpression("||", t.identifier("a"), t.identifier("b")),
+      t.identifier("c"),
+    );
+    const output = generate(nullishCoalesc).code;
+    expect(output).toBe(`(a || b) ?? c`);
+  });
+
+  it("should add parenthesis when NullishCoalesing is used with &&", function() {
+    const nullishCoalesc = t.logicalExpression(
+      "??",
+      t.identifier("a"),
+      t.logicalExpression(
+        "&&",
+        t.identifier("b"),
+        t.logicalExpression("&&", t.identifier("c"), t.identifier("d")),
+      ),
+    );
+    const output = generate(nullishCoalesc).code;
+    expect(output).toBe(`a ?? (b && c && d)`);
+  });
+
   it("numeric member expression", function() {
     // Should not generate `0.foo`
     const mem = t.memberExpression(

packages/babel-parser/src/parser/expression.js

@@ -380,6 +380,39 @@ export default class ExpressionParser extends LValParser {
 
         node.right = this.parseExprOpRightExpr(op, prec, noIn);
 
+        /* this check is for all ?? operators
+         * a ?? b && c for this example
+         * b && c => This is considered as a logical expression in the ast tree
+         * a => Identifier
+         * so for ?? operator we need to check in this case the right expression to have parenthesis
+         * second case a && b ?? c
+         * here a && b => This is considered as a logical expression in the ast tree
+         * c => identifer
+         * so now here for ?? operator we need to check the left expression to have parenthesis
+         * if the parenthesis is missing we raise an error and throw it
+         */
+        if (op === tt.nullishCoalescing) {
+          if (
+            left.type === "LogicalExpression" &&
+            left.operator !== "??" &&
+            !(left.extra && left.extra.parenthesized)
+          ) {
+            throw this.raise(
+              left.start,
+              `Nullish coalescing operator(??) requires parens when mixing with logical operators`,
+            );
+          } else if (
+            node.right.type === "LogicalExpression" &&
+            node.right.operator !== "??" &&
+            !(node.right.extra && node.right.extra.parenthesized)
+          ) {
+            throw this.raise(
+              node.right.start,
+              `Nullish coalescing operator(??) requires parens when mixing with logical operators`,
+            );
+          }
+        }
+
         this.finishNode(
           node,
           op === tt.logicalOR ||

packages/babel-parser/src/tokenizer/types.js

@@ -139,21 +139,21 @@ export const types: { [name: string]: TokenType } = {
   tilde: new TokenType("~", { beforeExpr, prefix, startsExpr }),
   pipeline: createBinop("|>", 0),
   nullishCoalescing: createBinop("??", 1),
-  logicalOR: createBinop("||", 1),
-  logicalAND: createBinop("&&", 2),
-  bitwiseOR: createBinop("|", 3),
-  bitwiseXOR: createBinop("^", 4),
-  bitwiseAND: createBinop("&", 5),
-  equality: createBinop("==/!=/===/!==", 6),
-  relational: createBinop("</>/<=/>=", 7),
-  bitShift: createBinop("<</>>/>>>", 8),
-  plusMin: new TokenType("+/-", { beforeExpr, binop: 9, prefix, startsExpr }),
-  modulo: createBinop("%", 10),
-  star: createBinop("*", 10),
-  slash: createBinop("/", 10),
+  logicalOR: createBinop("||", 2),
+  logicalAND: createBinop("&&", 3),
+  bitwiseOR: createBinop("|", 4),
+  bitwiseXOR: createBinop("^", 5),
+  bitwiseAND: createBinop("&", 6),
+  equality: createBinop("==/!=/===/!==", 7),
+  relational: createBinop("</>/<=/>=", 8),
+  bitShift: createBinop("<</>>/>>>", 9),
+  plusMin: new TokenType("+/-", { beforeExpr, binop: 10, prefix, startsExpr }),
+  modulo: createBinop("%", 11),
+  star: createBinop("*", 11),
+  slash: createBinop("/", 11),
   exponent: new TokenType("**", {
     beforeExpr,
-    binop: 11,
+    binop: 12,
     rightAssociative: true,
   }),
 
@@ -188,8 +188,8 @@ export const types: { [name: string]: TokenType } = {
   _null: createKeyword("null", { startsExpr }),
   _true: createKeyword("true", { startsExpr }),
   _false: createKeyword("false", { startsExpr }),
-  _in: createKeyword("in", { beforeExpr, binop: 7 }),
-  _instanceof: createKeyword("instanceof", { beforeExpr, binop: 7 }),
+  _in: createKeyword("in", { beforeExpr, binop: 8 }),
+  _instanceof: createKeyword("instanceof", { beforeExpr, binop: 8 }),
   _typeof: createKeyword("typeof", { beforeExpr, prefix, startsExpr }),
   _void: createKeyword("void", { beforeExpr, prefix, startsExpr }),
   _delete: createKeyword("delete", { beforeExpr, prefix, startsExpr }),

packages/babel-parser/test/fixtures/core/opts/tokens-true/output.json

@@ -457,7 +457,7 @@
         "isAssign": false,
         "prefix": true,
         "postfix": false,
-        "binop": 9,
+        "binop": 10,
         "updateContext": null
       },
       "value": "+",

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/and-nullish/input.js

@@ -1 +1 @@
-a && b ?? c;
+(a && b) ?? c;

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/and-nullish/output.json

@@ -1,29 +1,29 @@
 {
   "type": "File",
   "start": 0,
-  "end": 12,
+  "end": 14,
   "loc": {
     "start": {
       "line": 1,
       "column": 0
     },
     "end": {
       "line": 1,
-      "column": 12
+      "column": 14
     }
   },
   "program": {
     "type": "Program",
     "start": 0,
-    "end": 12,
+    "end": 14,
     "loc": {
       "start": {
         "line": 1,
         "column": 0
       },
       "end": {
         "line": 1,
-        "column": 12
+        "column": 14
       }
     },
     "sourceType": "script",
@@ -32,57 +32,57 @@
       {
         "type": "ExpressionStatement",
         "start": 0,
-        "end": 12,
+        "end": 14,
         "loc": {
           "start": {
             "line": 1,
             "column": 0
           },
           "end": {
             "line": 1,
-            "column": 12
+            "column": 14
           }
         },
         "expression": {
           "type": "LogicalExpression",
           "start": 0,
-          "end": 11,
+          "end": 13,
           "loc": {
             "start": {
               "line": 1,
               "column": 0
             },
             "end": {
               "line": 1,
-              "column": 11
+              "column": 13
             }
           },
           "left": {
             "type": "LogicalExpression",
-            "start": 0,
-            "end": 6,
+            "start": 1,
+            "end": 7,
             "loc": {
               "start": {
                 "line": 1,
-                "column": 0
+                "column": 1
               },
               "end": {
                 "line": 1,
-                "column": 6
+                "column": 7
               }
             },
             "left": {
               "type": "Identifier",
-              "start": 0,
-              "end": 1,
+              "start": 1,
+              "end": 2,
               "loc": {
                 "start": {
                   "line": 1,
-                  "column": 0
+                  "column": 1
                 },
                 "end": {
                   "line": 1,
-                  "column": 1
+                  "column": 2
                 },
                 "identifierName": "a"
               },
@@ -91,35 +91,39 @@
             "operator": "&&",
             "right": {
               "type": "Identifier",
-              "start": 5,
-              "end": 6,
+              "start": 6,
+              "end": 7,
               "loc": {
                 "start": {
                   "line": 1,
-                  "column": 5
+                  "column": 6
                 },
                 "end": {
                   "line": 1,
-                  "column": 6
+                  "column": 7
                 },
                 "identifierName": "b"
               },
               "name": "b"
+            },
+            "extra": {
+              "parenthesized": true,
+              "parenStart": 0
             }
           },
           "operator": "??",
           "right": {
             "type": "Identifier",
-            "start": 10,
-            "end": 11,
+            "start": 12,
+            "end": 13,
             "loc": {
               "start": {
                 "line": 1,
-                "column": 10
+                "column": 12
               },
               "end": {
                 "line": 1,
-                "column": 11
+                "column": 13
               },
               "identifierName": "c"
             },

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/no-paren-and-nullish/input.js

@@ -0,0 +1 @@
+c && d ?? e;

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/no-paren-and-nullish/options.json

@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    "nullishCoalescingOperator",
+    "estree"
+  ],
+  "throws": "Nullish coalescing operator(??) requires parens when mixing with logical operators (1:0)"
+}

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/no-paren-nullish-and/input.js

@@ -0,0 +1 @@
+a ?? b && c;

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/no-paren-nullish-and/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "nullishCoalescingOperator"
+  ],
+  "throws": "Nullish coalescing operator(??) requires parens when mixing with logical operators (1:5)"
+}

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/no-paren-nullish-or/input.js

@@ -0,0 +1 @@
+e ?? f ?? g || h;

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/no-paren-nullish-or/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "nullishCoalescingOperator"
+  ],
+  "throws": "Nullish coalescing operator(??) requires parens when mixing with logical operators (1:10)"
+}

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/no-paren-or-nullish/input.js

@@ -0,0 +1 @@
+h || i ?? j;

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/no-paren-or-nullish/options.json

@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    "nullishCoalescingOperator",
+    "estree"
+  ],
+  "throws": "Nullish coalescing operator(??) requires parens when mixing with logical operators (1:0)"
+}

packages/babel-parser/test/fixtures/experimental/nullish-coalescing-operator/nullish-and/input.js

@@ -1 +1 @@
-a ?? b && c;
+a ?? (b && c);