From 018a5b08037b21953b0269f59baee65b760528f9 Mon Sep 17 00:00:00 2001
From: Georgii Dolzhykov <thorn.mailbox@gmail.com>
Date: Fri, 8 May 2020 13:40:16 +0300
Subject: [PATCH] Workaround optional chaining parser bug in Angular
 expressions (#8253)

* Workaround optional chaining parser bug in Angular expressions

* add changelog entry

* fix changelog entry
---
 changelog_unreleased/angular/pr-8253.md            | 13 +++++++++++++
 src/language-js/needs-parens.js                    |  6 +++++-
 .../interpolation/__snapshots__/jsfmt.spec.js.snap | 14 ++++++++++++++
 tests/angular/interpolation/optional-chaining.ng   |  1 +
 4 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 changelog_unreleased/angular/pr-8253.md
 create mode 100644 tests/angular/interpolation/optional-chaining.ng

diff --git a/changelog_unreleased/angular/pr-8253.md b/changelog_unreleased/angular/pr-8253.md
new file mode 100644
index 000000000..5bc0e8193
--- /dev/null
+++ b/changelog_unreleased/angular/pr-8253.md
@@ -0,0 +1,13 @@
+#### Workaround optional chaining parser bug ([#8253](https://github.com/prettier/prettier/pull/8253) by [@thorn0](https://github.com/thorn0))
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+{{ a?.b[c] }}
+
+<!-- Prettier stable -->
+{{ (a?.b)[c] }}
+
+<!-- Prettier master -->
+{{ a?.b[c] }}
+```
diff --git a/src/language-js/needs-parens.js b/src/language-js/needs-parens.js
index 151f51d28..81763c7f8 100644
--- a/src/language-js/needs-parens.js
+++ b/src/language-js/needs-parens.js
@@ -622,7 +622,11 @@ function needsParens(path, options) {
     case "OptionalMemberExpression":
     case "OptionalCallExpression":
       if (
-        (parent.type === "MemberExpression" && name === "object") ||
+        (parent.type === "MemberExpression" &&
+          name === "object" &&
+          // https://github.com/prettier/prettier/issues/8252
+          (!options.parser.startsWith("__ng_") ||
+            (node.extra && node.extra.parenthesized))) ||
         ((parent.type === "CallExpression" ||
           parent.type === "NewExpression") &&
           name === "callee")
diff --git a/tests/angular/interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular/interpolation/__snapshots__/jsfmt.spec.js.snap
index 2a4179667..4d277fa9b 100644
--- a/tests/angular/interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular/interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -21,6 +21,20 @@ trailingComma: "none"
 ================================================================================
 `;
 
+exports[`optional-chaining.ng - {"trailingComma":"none"} format 1`] = `
+====================================options=====================================
+parsers: ["__ng_interpolation"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+[  a?.b[c], (a?.b)[c]  ]
+
+=====================================output=====================================
+[a?.b[c], (a?.b)[c]]
+================================================================================
+`;
+
 exports[`pipe-expression.ng - {"trailingComma":"none"} format 1`] = `
 ====================================options=====================================
 parsers: ["__ng_interpolation"]
diff --git a/tests/angular/interpolation/optional-chaining.ng b/tests/angular/interpolation/optional-chaining.ng
new file mode 100644
index 000000000..cc94363d9
--- /dev/null
+++ b/tests/angular/interpolation/optional-chaining.ng
@@ -0,0 +1 @@
+[  a?.b[c], (a?.b)[c]  ]