From 1bf47c1e95d261517cd0dab82d0a64bbff4e820d Mon Sep 17 00:00:00 2001
From: Seiya <20365512+seiyab@users.noreply.github.com>
Date: Mon, 27 Mar 2023 11:47:54 +0900
Subject: [PATCH] Format TS expressions when any script tag has `lang="ts"`
 (#14587)

Co-authored-by: fisker <lionkay@gmail.com>
---
 changelog_unreleased/vue/14587.md             | 25 +++++++++
 src/language-html/print-preprocess.js         | 17 +++---
 .../__snapshots__/jsfmt.spec.js.snap          | 54 +++++++++++++++++++
 .../lang-ts-multiple-script-tags.vue          | 21 ++++++++
 4 files changed, 106 insertions(+), 11 deletions(-)
 create mode 100644 changelog_unreleased/vue/14587.md
 create mode 100644 tests/format/vue/multiparser/lang-ts-multiple-script-tags.vue

diff --git a/changelog_unreleased/vue/14587.md b/changelog_unreleased/vue/14587.md
new file mode 100644
index 000000000..707e519f2
--- /dev/null
+++ b/changelog_unreleased/vue/14587.md
@@ -0,0 +1,25 @@
+#### Format TS expressions when any script tag has `lang="ts"` (#14587 by @seiyab)
+
+<!-- prettier-ignore -->
+```vue
+<!-- Input -->
+<script></script>
+<script setup lang="ts"></script>
+<template>
+  {{ (x      as      number).toFixed(2) }}
+</template>
+
+<!-- Prettier stable -->
+<script></script>
+<script setup lang="ts"></script>
+<template>
+  {{ (x      as      number).toFixed(2) }}
+</template>
+
+<!-- Prettier main -->
+<script></script>
+<script setup lang="ts"></script>
+<template>
+  {{ (x as number).toFixed(2) }}
+</template>
+```
diff --git a/src/language-html/print-preprocess.js b/src/language-html/print-preprocess.js
index 789ab7e56..43533907b 100644
--- a/src/language-html/print-preprocess.js
+++ b/src/language-html/print-preprocess.js
@@ -411,18 +411,13 @@ function addIsSpaceSensitive(ast, options) {
 }
 
 function markTsScript(ast, options) {
-  if (options.parser === "vue") {
-    const vueScriptTag = ast.children.find((child) =>
-      isVueScriptTag(child, options)
+  options.__should_parse_vue_template_with_ts =
+    options.parser === "vue" &&
+    ast.children.some(
+      (child) =>
+        isVueScriptTag(child, options) &&
+        ["ts", "typescript"].includes(child.attrMap.lang)
     );
-    if (!vueScriptTag) {
-      return;
-    }
-    const { lang } = vueScriptTag.attrMap;
-    if (lang === "ts" || lang === "typescript") {
-      options.__should_parse_vue_template_with_ts = true;
-    }
-  }
 }
 
 module.exports = preprocess;
diff --git a/tests/format/vue/multiparser/__snapshots__/jsfmt.spec.js.snap b/tests/format/vue/multiparser/__snapshots__/jsfmt.spec.js.snap
index a921d3a0d..54599abe5 100644
--- a/tests/format/vue/multiparser/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/vue/multiparser/__snapshots__/jsfmt.spec.js.snap
@@ -70,6 +70,60 @@ export default {
 ================================================================================
 `;
 
+exports[`lang-ts-multiple-script-tags.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script setup lang="ts">
+let x:      string |         number = 1
+</script>
+<script></script>
+<script></script>
+<script></script>
+<template>
+  <span
+  v-if=" (x    as string).length  >     0"
+  v-for="a in [1,2,  3,4,5].map(   (x  :    number) => x *   x)"
+  :foo="  (x    as number).toFixed(   2) "
+  >
+  {{ (x      as      number).toFixed(2) }}
+  </span>
+</template>
+
+=====================================output=====================================
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script setup lang="ts">
+let x: string | number = 1;
+</script>
+<script></script>
+<script></script>
+<script></script>
+<template>
+  <span
+    v-if=" (x    as string).length  >     0"
+    v-for="a in [1,2,  3,4,5].map(   (x  :    number) => x *   x)"
+    :foo="  (x    as number).toFixed(   2) "
+  >
+    {{ (x as number).toFixed(2) }}
+  </span>
+</template>
+
+================================================================================
+`;
+
 exports[`lang-tsx.vue format 1`] = `
 ====================================options=====================================
 parsers: ["vue"]
diff --git a/tests/format/vue/multiparser/lang-ts-multiple-script-tags.vue b/tests/format/vue/multiparser/lang-ts-multiple-script-tags.vue
new file mode 100644
index 000000000..d60027bb2
--- /dev/null
+++ b/tests/format/vue/multiparser/lang-ts-multiple-script-tags.vue
@@ -0,0 +1,21 @@
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script setup lang="ts">
+let x:      string |         number = 1
+</script>
+<script></script>
+<script></script>
+<script></script>
+<template>
+  <span
+  v-if=" (x    as string).length  >     0"
+  v-for="a in [1,2,  3,4,5].map(   (x  :    number) => x *   x)"
+  :foo="  (x    as number).toFixed(   2) "
+  >
+  {{ (x      as      number).toFixed(2) }}
+  </span>
+</template>