Format TypeScript expressions in Vue template attributes

changelog_unreleased/vue/14506.md

@@ -0,0 +1,22 @@
+#### Format TypeScript expression in attribute bindings (#14506 by @seiyab)
+
+<!-- prettier-ignore -->
+```vue
+<!-- Input -->
+<script lang="ts"></script>
+<template>
+  <comp :foo="   (a:string)=>1"/>
+</template>
+
+<!-- Prettier stable -->
+<script lang="ts"></script>
+<template>
+  <comp :foo="   (a:string)=>1" />
+</template>
+
+<!-- Prettier main -->
+<script lang="ts"></script>
+<template>
+  <comp :foo="(a: string) => 1" />
+</template>
+```

src/language-html/embed.js

@@ -57,7 +57,8 @@ async function printEmbeddedAttributeValue(node, htmlTextToDoc, options) {
       rootNode &&
       (rootNode.type === "ObjectExpression" ||
         rootNode.type === "ArrayExpression" ||
-        (options.parser === "__vue_expression" &&
+        ((options.parser === "__vue_expression" ||
+          options.parser === "__vue_ts_expression") &&
           (rootNode.type === "TemplateLiteral" ||
             rootNode.type === "StringLiteral")))
     ) {
@@ -132,7 +133,9 @@ async function printEmbeddedAttributeValue(node, htmlTextToDoc, options) {
     if (isKeyMatched(vueEventBindingPatterns)) {
       const value = getValue();
       const parser = isVueEventBindingExpression(value)
-        ? "__js_expression"
+        ? options.__should_parse_vue_template_with_ts
+          ? "__ts_expression"
+          : "__js_expression"
         : options.__should_parse_vue_template_with_ts
         ? "__vue_ts_event_binding"
         : "__vue_event_binding";
@@ -141,13 +144,21 @@ async function printEmbeddedAttributeValue(node, htmlTextToDoc, options) {
 
     if (isKeyMatched(vueExpressionBindingPatterns)) {
       return printMaybeHug(
-        await attributeTextToDoc(getValue(), { parser: "__vue_expression" })
+        await attributeTextToDoc(getValue(), {
+          parser: options.__should_parse_vue_template_with_ts
+            ? "__vue_ts_expression"
+            : "__vue_expression",
+        })
       );
     }
 
     if (isKeyMatched(jsExpressionBindingPatterns)) {
       return printMaybeHug(
-        await attributeTextToDoc(getValue(), { parser: "__js_expression" })
+        await attributeTextToDoc(getValue(), {
+          parser: options.__should_parse_vue_template_with_ts
+            ? "__ts_expression"
+            : "__js_expression",
+        })
       );
     }
   }

src/language-js/parse/babel.js

@@ -256,6 +256,7 @@ export const parsers = {
   ...jsonParsers,
   /** @internal */
   __js_expression: babelExpression,
+  __ts_expression: babelTSExpression,
   /** for vue filter */
   __vue_expression: babelExpression,
   /** for vue filter written in TS */

src/language-js/parse/parsers.js

@@ -9,6 +9,7 @@ const parsers = [
       "json5",
       "json-stringify",
       "__js_expression",
+      "__ts_expression",
       "__vue_expression",
       "__vue_ts_expression",
       "__vue_event_binding",

src/language-js/print/binaryish.js

@@ -339,7 +339,8 @@ const isBitwiseOrExpression = (node) =>
 
 function isVueFilterSequenceExpression(path, options) {
   return (
-    options.parser === "__vue_expression" &&
+    (options.parser === "__vue_expression" ||
+      options.parser === "__vue_ts_expression") &&
     isBitwiseOrExpression(path.node) &&
     !path.hasAncestor(
       (node) => !isBitwiseOrExpression(node) && node.type !== "JsExpressionRoot"

src/main/comments/attach.js

@@ -180,6 +180,7 @@ function attachComments(ast, options) {
       options.parser === "json" ||
       options.parser === "json5" ||
       options.parser === "__js_expression" ||
+      options.parser === "__ts_expression" ||
       options.parser === "__vue_expression" ||
       options.parser === "__vue_ts_expression"
     ) {

tests/format/vue/ts-event-binding/__snapshots__/jsfmt.spec.js.snap

@@ -41,3 +41,39 @@ function log(...args) {
 
 ================================================================================
 `;
+
+exports[`function-expression.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script setup lang="ts"></script>
+
+<template>
+  <div @click=" (  x :   never) =>      null">arrow</div>
+  <div @click=" function(  a    :   unknown[])      {
+      console.log(    'abcdefg');
+      return;
+  }">anonymous function</div>
+</template>
+
+=====================================output=====================================
+<script setup lang="ts"></script>
+
+<template>
+  <div @click="(x: never) => null">arrow</div>
+  <div
+    @click="
+      function (a: unknown[]) {
+        console.log('abcdefg');
+        return;
+      }
+    "
+  >
+    anonymous function
+  </div>
+</template>
+
+================================================================================
+`;

tests/format/vue/ts-event-binding/function-expression.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div @click=" (  x :   never) =>      null">arrow</div>
+  <div @click=" function(  a    :   unknown[])      {
+      console.log(    'abcdefg');
+      return;
+  }">anonymous function</div>
+</template>