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

vitejs · Sep 18, 2021 · e950c6e · e950c6e
1 parent 05a69f4
commit e950c6e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git 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
@@ -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
   }
 }