From 0a2a5e1c8b9d2765faecfb5e4641b1c5a94575e1 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 18 Sep 2021 14:29:36 -0400
Subject: [PATCH] fix(plugin-vue): properly handle in-template TS syntax +
 tests

---
 .../ssr-vue/src/components/ImportType.vue     |  3 +-
 packages/playground/vue/CustomBlock.vue       |  4 +--
 packages/playground/vue/CustomElement.ce.vue  |  2 +-
 packages/playground/vue/Main.vue              |  2 +-
 packages/plugin-vue/src/main.ts               | 32 +++++++++++--------
 packages/plugin-vue/src/template.ts           |  4 +--
 6 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/packages/playground/ssr-vue/src/components/ImportType.vue b/packages/playground/ssr-vue/src/components/ImportType.vue
index 7fa77170ff7d61..144d36bc34e7ec 100644
--- a/packages/playground/ssr-vue/src/components/ImportType.vue
+++ b/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>
diff --git a/packages/playground/vue/CustomBlock.vue b/packages/playground/vue/CustomBlock.vue
index aedf7f09b4bbc0..0a7b3901693154 100644
--- a/packages/playground/vue/CustomBlock.vue
+++ b/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]
diff --git a/packages/playground/vue/CustomElement.ce.vue b/packages/playground/vue/CustomElement.ce.vue
index c8c33c02f74d1f..58d94650d1a74a 100644
--- a/packages/playground/vue/CustomElement.ce.vue
+++ b/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
diff --git a/packages/playground/vue/Main.vue b/packages/playground/vue/Main.vue
index 1fe26933c9234f..bf491f9a71e9af 100644
--- a/packages/playground/vue/Main.vue
+++ b/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>
diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index b4893b8950e52e..d0b3d063a10ead 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/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)
diff --git a/packages/plugin-vue/src/template.ts b/packages/plugin-vue/src/template.ts
index 0fa50b36e5366c..e56a135e22256d 100644
--- a/packages/plugin-vue/src/template.ts
+++ b/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
   }
 }