fix(plugin-vue): properly handle in-template TS syntax + tests

Author: yyx990803

packages/playground/ssr-vue/src/components/ImportType.vue

@@ -3,7 +3,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Foo } from 'dep-import-type/deep'
-
+import { Foo } from 'dep-import-type/deep'
 const msg: Foo = {}
 </script>

packages/playground/vue/CustomBlock.vue

@@ -3,12 +3,12 @@
   <p class="custom-block">{{ t('hello') }}</p>
 </template>
 
-<script lang="ts">
+<script>
 import { getCurrentInstance } from 'vue'
 
 function useI18n(locale = 'en') {
   const instance = getCurrentInstance()
-  const resources = (instance.type as any).i18n || { en: {} }
+  const resources = instance.type.i18n || { en: {} }
   function t(key) {
     const res = resources[locale] || {}
     return res[key]

packages/playground/vue/CustomElement.ce.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { defineProps, reactive, onBeforeMount } from 'vue'
+import { reactive, onBeforeMount } from 'vue'
 
 defineProps({
   label: String

packages/playground/vue/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="comments"><!--hello--></div>
   <h1>Vue SFCs</h1>
-  <pre>{{ time }}</pre>
+  <pre>{{ time as string }}</pre>
   <div class="hmr-block">
     <Hmr />
   </div>

packages/plugin-vue/src/main.ts

@@ -14,6 +14,7 @@ import { transformTemplateInMain } from './template'
 import { isOnlyTemplateChanged, isEqualBlock } from './handleHotUpdate'
 import { RawSourceMap, SourceMapConsumer, SourceMapGenerator } from 'source-map'
 import { createRollupError } from './utils/error'
+import { transformWithEsbuild } from 'vite'
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export async function transformMain(
@@ -191,8 +192,24 @@ export async function transformMain(
 
   output.push(`export default _sfc_main`)
 
+  // handle TS transpilation
+  let resolvedCode = output.join('\n')
+  if (
+    descriptor.script?.lang === 'ts' ||
+    descriptor.scriptSetup?.lang === 'ts'
+  ) {
+    const { code, map } = await transformWithEsbuild(
+      resolvedCode,
+      filename,
+      { loader: 'ts' },
+      resolvedMap
+    )
+    resolvedCode = code
+    resolvedMap = resolvedMap ? (map as any) : resolvedMap
+  }
+
   return {
-    code: output.join('\n'),
+    code: resolvedCode,
     map: resolvedMap || {
       mappings: ''
     }
@@ -255,19 +272,8 @@ async function genScriptCode(
       (!script.lang || (script.lang === 'ts' && options.devServer)) &&
       !script.src
     ) {
-      scriptCode = script.content
+      scriptCode = rewriteDefault(script.content, '_sfc_main')
       map = script.map
-      if (script.lang === 'ts') {
-        const result = await options.devServer!.transformWithEsbuild(
-          scriptCode,
-          descriptor.filename,
-          { loader: 'ts' },
-          map
-        )
-        scriptCode = result.code
-        map = result.map
-      }
-      scriptCode = rewriteDefault(scriptCode, `_sfc_main`)
     } else {
       if (script.src) {
         await linkSrcToDescriptor(script.src, descriptor, pluginContext)

packages/plugin-vue/src/template.ts

@@ -13,7 +13,7 @@ import { getResolvedScript } from './script'
 import { createRollupError } from './utils/error'
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function transformTemplateAsModule(
+export async function transformTemplateAsModule(
   code: string,
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
@@ -36,7 +36,7 @@ export function transformTemplateAsModule(
 
   return {
     code: returnCode,
-    map: result.map as any
+    map: result.map
   }
 }