fix: ts expression should work well in the pug template

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,
   }
 }
 

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'
 

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>

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')
+  })
+})