From 9776e3230532d6e51d191451ad86a624b33099f2 Mon Sep 17 00:00:00 2001
From: Mr-ccyou <1787176370@qq.com>
Date: Mon, 6 Mar 2023 18:14:47 +0800
Subject: [PATCH] fix: ts expression in the pug template should work

---
 packages/plugin-vue/src/template.ts          | 33 ++++++++++++++++++--
 playground/vue/Main.vue                      |  3 ++
 playground/vue/TsExpressionInPugTemplate.vue | 11 +++++++
 playground/vue/__tests__/vue.spec.ts         |  8 +++++
 4 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 playground/vue/TsExpressionInPugTemplate.vue

diff --git a/packages/plugin-vue/src/template.ts b/packages/plugin-vue/src/template.ts
index 35ab085a..75c5f25b 100644
--- a/packages/plugin-vue/src/template.ts
+++ b/packages/plugin-vue/src/template.ts
@@ -7,6 +7,7 @@ import type {
   SFCTemplateCompileResults,
 } from 'vue/compiler-sfc'
 import type { PluginContext, TransformPluginContext } from 'rollup'
+import { transformWithEsbuild } from 'vite'
 import { getResolvedScript } from './script'
 import { createRollupError } from './utils/error'
 import type { ResolvedOptions } from '.'
@@ -19,9 +20,14 @@ export async function transformTemplateAsModule(
   pluginContext: TransformPluginContext,
   ssr: boolean,
 ) {
-  const result = compile(code, descriptor, options, pluginContext, ssr)
+  let { code: returnCode, map: returnMap } = compile(
+    code,
+    descriptor,
+    options,
+    pluginContext,
+    ssr,
+  )
 
-  let returnCode = result.code
   if (
     options.devServer &&
     options.devServer.config.server.hmr !== false &&
@@ -33,9 +39,30 @@ export async function transformTemplateAsModule(
     })`
   }
 
+  const lang = descriptor.scriptSetup?.lang || descriptor.script?.lang
+
+  if (
+    lang &&
+    /tsx?$/.test(lang) &&
+    !descriptor.script?.src // only normal script can have src
+  ) {
+    const { code, map } = await transformWithEsbuild(
+      returnCode,
+      descriptor.filename,
+      {
+        loader: 'ts',
+        target: 'esnext',
+        sourcemap: options.sourceMap,
+      },
+      returnMap,
+    )
+    returnCode = code
+    returnMap = returnMap ? (map as any) : returnMap
+  }
+
   return {
     code: returnCode,
-    map: result.map,
+    map: returnMap,
   }
 }
 
diff --git a/playground/vue/Main.vue b/playground/vue/Main.vue
index b91d50f9..dd6fc48a 100644
--- a/playground/vue/Main.vue
+++ b/playground/vue/Main.vue
@@ -26,6 +26,7 @@
   <SetupImportTemplate />
   <WorkerTest />
   <Url />
+  <TsExpressionInTemplate />
 </template>
 
 <script setup lang="ts">
@@ -44,6 +45,8 @@ import AsyncComponent from './AsyncComponent.vue'
 import ReactivityTransform from './ReactivityTransform.vue'
 import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'
 import WorkerTest from './worker.vue'
+import TsExpressionInTemplate from './TsExpressionInPugTemplate.vue'
+
 import { ref } from 'vue'
 import Url from './Url.vue'
 
diff --git a/playground/vue/TsExpressionInPugTemplate.vue b/playground/vue/TsExpressionInPugTemplate.vue
new file mode 100644
index 00000000..89574379
--- /dev/null
+++ b/playground/vue/TsExpressionInPugTemplate.vue
@@ -0,0 +1,11 @@
+<template lang="pug">
+h2.ts-expression-title Ts expression in template
+button.ts-expression(@click="(foo as number)++")
+  | {{ foo }}
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const foo = ref(0)
+</script>
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index f0d15c7b..c79ec112 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -279,3 +279,11 @@ describe('import with ?url', () => {
     )
   })
 })
+
+describe('ts expression in the pug template', () => {
+  test('should work', async () => {
+    expect(await page.textContent('.ts-expression')).toMatch('0')
+    await page.click('.ts-expression')
+    expect(await page.textContent('.ts-expression')).toMatch('1')
+  })
+})