Add missing parentheses for decorator

changelog_unreleased/javascript/14393.md

@@ -0,0 +1,22 @@
+#### Add missing parentheses for decorator (#14393 by @fisker)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+class Person {
+  @(myDecoratorArray[0])
+  greet() {}
+}
+
+// Prettier stable
+class Person {
+  @myDecoratorArray[0]
+  greet() {}
+}
+
+// Prettier main
+class Person {
+  @(myDecoratorArray[0])
+  greet() {}
+}
+```

src/language-js/needs-parens.js

@@ -187,6 +187,10 @@ function needsParens(path, options) {
     }
     case "Decorator": {
       if (name === "expression") {
+        if (isMemberExpression(node) && node.computed) {
+          return true;
+        }
+
         let hasCallExpression = false;
         let hasMemberExpression = false;
         let current = node;

tests/config/format-test.js

@@ -82,6 +82,8 @@ const meriyahDisabledTests = new Set([
     __dirname,
     "../format/js/babel-plugins/decorator-auto-accessors.js"
   ),
+  // Parsing to different ASTs
+  path.join(__dirname, "../format/js/decorators/member-expression.js"),
 ]);
 
 const isUnstable = (filename, options) => {

tests/format/js/decorators/__snapshots__/jsfmt.spec.js.snap

@@ -162,6 +162,144 @@ export class Bar {}
 ================================================================================
 `;
 
+exports[`member-expression.js [acorn] format 1`] = `
+"Unexpected character '@' (3:5)
+  1 | [
+  2 |   class {
+> 3 |     @(decorators[0])
+    |     ^
+  4 |     method() {}
+  5 |   },
+  6 |   class {"
+`;
+
+exports[`member-expression.js [espree] format 1`] = `
+"Unexpected character '@' (3:5)
+  1 | [
+  2 |   class {
+> 3 |     @(decorators[0])
+    |     ^
+  4 |     method() {}
+  5 |   },
+  6 |   class {"
+`;
+
+exports[`member-expression.js format 1`] = `
+====================================options=====================================
+parsers: ["babel"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+[
+  class {
+    @(decorators[0])
+    method() {}
+  },
+  class {
+    @decorators[0]
+    method() {}
+  },
+  class {
+    @(decorators?.[0])
+    method() {}
+  },
+  class {
+    @(decorators.at(0))
+    method() {}
+  },
+  class {
+    @(decorators?.at(0))
+    method() {}
+  },
+  class {
+    @(decorators.first)
+    method() {}
+  },
+  class {
+    @(decorators?.first)
+    method() {}
+  },
+  class {
+    @(decorators[first])
+    method() {}
+  },
+  class {
+    @decorators[first]
+    method() {}
+  },
+  class {
+    @(decorators["first"])
+    method() {}
+  },
+  @(decorators[first])
+  class {
+    method() {}
+  },
+  @(decorators[0])
+  class {
+    method() {}
+  },
+]
+
+=====================================output=====================================
+[
+  class {
+    @(decorators[0])
+    method() {}
+  },
+  class {
+    @decorators [0];
+    method() {}
+  },
+  class {
+    @(decorators?.[0])
+    method() {}
+  },
+  class {
+    @decorators.at(0)
+    method() {}
+  },
+  class {
+    @(decorators?.at(0))
+    method() {}
+  },
+  class {
+    @decorators.first
+    method() {}
+  },
+  class {
+    @(decorators?.first)
+    method() {}
+  },
+  class {
+    @(decorators[first])
+    method() {}
+  },
+  class {
+    @decorators [first];
+    method() {}
+  },
+  class {
+    @(decorators["first"])
+    method() {}
+  },
+  (
+    @(decorators[first])
+    class {
+      method() {}
+    }
+  ),
+  (
+    @(decorators[0])
+    class {
+      method() {}
+    }
+  ),
+];
+
+================================================================================
+`;
+
 exports[`methods.js [acorn] format 1`] = `
 "Unexpected character '@' (3:3)
   1 |

tests/format/js/decorators/member-expression.js

@@ -0,0 +1,50 @@
+[
+  class {
+    @(decorators[0])
+    method() {}
+  },
+  class {
+    @decorators[0]
+    method() {}
+  },
+  class {
+    @(decorators?.[0])
+    method() {}
+  },
+  class {
+    @(decorators.at(0))
+    method() {}
+  },
+  class {
+    @(decorators?.at(0))
+    method() {}
+  },
+  class {
+    @(decorators.first)
+    method() {}
+  },
+  class {
+    @(decorators?.first)
+    method() {}
+  },
+  class {
+    @(decorators[first])
+    method() {}
+  },
+  class {
+    @decorators[first]
+    method() {}
+  },
+  class {
+    @(decorators["first"])
+    method() {}
+  },
+  @(decorators[first])
+  class {
+    method() {}
+  },
+  @(decorators[0])
+  class {
+    method() {}
+  },
+]