Fix Vue filter detection (#14542)

changelog_unreleased/vue/14542.md

@@ -0,0 +1,55 @@
+#### Fix Vue filter detection (#14542 by @fisker)
+
+<!-- prettier-ignore -->
+```vue
+<!-- Input -->
+<template>
+  <div>
+    {{
+      fn(
+        bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
+      )
+      | filter1
+      | filter2
+      | filter3
+      | filter4
+    }}
+  </div>
+</template>
+
+<!-- Prettier stable -->
+<template>
+  <div>
+    {{
+      fn(
+        bitwise
+          | or
+          | operator
+          | a_long_long_long_long_long_long_long_long_long_long_variable
+      )
+        | filter1
+        | filter2
+        | filter3
+        | filter4
+    }}
+  </div>
+</template>
+
+<!-- Prettier main -->
+<template>
+  <div>
+    {{
+      fn(
+        bitwise |
+          or |
+          operator |
+          a_long_long_long_long_long_long_long_long_long_long_variable,
+      )
+        | filter1
+        | filter2
+        | filter3
+        | filter4
+    }}
+  </div>
+</template>
+```

src/language-js/print/binaryish.js

@@ -229,7 +229,7 @@ function printBinaryishExpressions(
   const lineBeforeOperator =
     (node.operator === "|>" ||
       node.type === "NGPipeExpression" ||
-      (node.operator === "|" && options.parser === "__vue_expression")) &&
+      isVueFilterSequenceExpression(path, options)) &&
     !hasLeadingOwnLineComment(options.originalText, node.right);
 
   const operator = node.type === "NGPipeExpression" ? "|" : node.operator;
@@ -334,4 +334,17 @@ function shouldInlineLogicalExpression(node) {
   return false;
 }
 
+const isBitwiseOrExpression = (node) =>
+  node.type === "BinaryExpression" && node.operator === "|";
+
+function isVueFilterSequenceExpression(path, options) {
+  return (
+    options.parser === "__vue_expression" &&
+    isBitwiseOrExpression(path.node) &&
+    !path.hasAncestor(
+      (node) => !isBitwiseOrExpression(node) && node.type !== "JsExpressionRoot"
+    )
+  );
+}
+
 export { printBinaryishExpression, shouldInlineLogicalExpression };

tests/format/vue/interpolation/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`bitwise-or-operator.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <div>
+    {{
+      fn(
+        bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
+      )
+      | filter1
+      | filter2
+      | filter3
+      | filter4
+    }}
+  </div>
+</template>
+
+=====================================output=====================================
+<template>
+  <div>
+    {{
+      fn(
+        bitwise |
+          or |
+          operator |
+          a_long_long_long_long_long_long_long_long_long_long_variable,
+      )
+        | filter1
+        | filter2
+        | filter3
+        | filter4
+    }}
+  </div>
+</template>
+
+================================================================================
+`;
+
 exports[`parenthesized.vue format 1`] = `
 ====================================options=====================================
 parsers: ["vue"]

tests/format/vue/interpolation/bitwise-or-operator.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    {{
+      fn(
+        bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
+      )
+      | filter1
+      | filter2
+      | filter3
+      | filter4
+    }}
+  </div>
+</template>