fix(plugin-vue): rewrite default after ts compiled (#3591)

Co-authored-by: Shinigami <[email protected]>

Author: underfin

packages/playground/vue/CustomBlock.vue

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

packages/plugin-vue/package.json

@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme",
   "peerDependencies": {
-    "@vue/compiler-sfc": "^3.0.6"
+    "@vue/compiler-sfc": "^3.0.8"
   },
   "devDependencies": {
     "@rollup/pluginutils": "^4.1.0",

packages/plugin-vue/src/main.ts

@@ -225,9 +225,6 @@ async function genTemplateCode(
   }
 }
 
-const exportDefaultClassRE =
-  /(?:(?:^|\n|;)\s*)export\s+default\s+class\s+([\w$]+)/
-
 async function genScriptCode(
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
@@ -247,19 +244,7 @@ async function genScriptCode(
       (!script.lang || (script.lang === 'ts' && options.devServer)) &&
       !script.src
     ) {
-      // TODO remove the class check logic after upgrading @vue/compiler-sfc
-      const classMatch = script.content.match(exportDefaultClassRE)
-      if (classMatch) {
-        scriptCode =
-          script.content.replace(exportDefaultClassRE, `\nclass $1`) +
-          `\nconst _sfc_main = ${classMatch[1]}`
-        if (/export\s+default/.test(scriptCode)) {
-          // fallback if there are still export default
-          scriptCode = rewriteDefault(script.content, `_sfc_main`)
-        }
-      } else {
-        scriptCode = rewriteDefault(script.content, `_sfc_main`)
-      }
+      scriptCode = script.content
       map = script.map
       if (script.lang === 'ts') {
         const result = await options.devServer!.transformWithEsbuild(
@@ -271,6 +256,7 @@ async function genScriptCode(
         scriptCode = result.code
         map = result.map
       }
+      scriptCode = rewriteDefault(scriptCode, `_sfc_main`)
     } else {
       if (script.src) {
         await linkSrcToDescriptor(script.src, descriptor, pluginContext)