fix(vue-jsx): replace export default defineComponent with babel (#348)

Author: OMGVecchio

packages/plugin-vue-jsx/src/index.ts

@@ -1,6 +1,6 @@
 import crypto from 'node:crypto'
 import path from 'node:path'
-import type { types } from '@babel/core'
+import { types } from '@babel/core'
 import * as babel from '@babel/core'
 import jsx from '@vue/babel-plugin-jsx'
 import { createFilter, normalizePath } from 'vite'
@@ -150,6 +150,45 @@ function vueJsxPlugin(options: Options = {}): Plugin {
                 },
               }
             })
+          } else {
+            plugins.push(() => {
+              return {
+                visitor: {
+                  ExportDefaultDeclaration: {
+                    enter(
+                      _path: babel.NodePath<types.ExportDefaultDeclaration>,
+                    ) {
+                      if (
+                        isDefineComponentCall(
+                          _path.node.declaration,
+                          defineComponentName,
+                        )
+                      ) {
+                        const declaration = _path.node
+                          .declaration as types.CallExpression
+                        const nodesPath = _path.replaceWithMultiple([
+                          // const __default__ = defineComponent(...)
+                          types.variableDeclaration('const', [
+                            types.variableDeclarator(
+                              types.identifier('__default__'),
+                              types.callExpression(
+                                declaration.callee,
+                                declaration.arguments,
+                              ),
+                            ),
+                          ]),
+                          // export default __default__
+                          types.exportDefaultDeclaration(
+                            types.identifier('__default__'),
+                          ),
+                        ])
+                        _path.scope.registerDeclaration(nodesPath[0])
+                      }
+                    },
+                  },
+                },
+              }
+            })
           }
 
           const result = babel.transformSync(code, {
@@ -178,7 +217,6 @@ function vueJsxPlugin(options: Options = {}): Plugin {
           // check for hmr injection
           const declaredComponents: string[] = []
           const hotComponents: HotComponent[] = []
-          let hasDefault = false
 
           for (const node of result.ast!.program.body) {
             if (node.type === 'VariableDeclaration') {
@@ -240,7 +278,6 @@ function vueJsxPlugin(options: Options = {}): Plugin {
               } else if (
                 isDefineComponentCall(node.declaration, defineComponentName)
               ) {
-                hasDefault = true
                 hotComponents.push({
                   local: '__default__',
                   exported: 'default',
@@ -251,14 +288,6 @@ function vueJsxPlugin(options: Options = {}): Plugin {
           }
 
           if (hotComponents.length) {
-            if (hasDefault && (needHmr || ssr)) {
-              result.code =
-                result.code!.replace(
-                  /export default defineComponent/g,
-                  `const __default__ = defineComponent`,
-                ) + `\nexport default __default__`
-            }
-
             if (needHmr && !ssr && !/\?vue&type=script/.test(id)) {
               let code = result.code
               let callbackCode = ``

playground/vue-jsx/ExportDefault.jsx

@@ -0,0 +1,7 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  render() {
+    return <span class="export-default">export default defineComponent</span>
+  },
+})

playground/vue-jsx/__tests__/vue-jsx.spec.ts

@@ -11,6 +11,9 @@ test('should render', async () => {
   expect(await page.textContent('.jsx-with-query')).toMatch('6')
   expect(await page.textContent('.other-ext')).toMatch('Other Ext')
   expect(await page.textContent('.ts-import')).toMatch('success')
+  expect(await page.textContent('.export-default')).toMatch(
+    'export default defineComponent',
+  )
 })
 
 test('should update', async () => {

playground/vue-jsx/main.jsx

@@ -8,6 +8,7 @@ import JsxSetupSyntax from './setup-syntax-jsx.vue'
 // eslint-disable-next-line
 import JsxWithQuery from './Query.jsx?query=true'
 import TsImport from './TsImport.vue'
+import ExportDefault from './ExportDefault'
 
 function App() {
   return (
@@ -22,6 +23,7 @@ function App() {
       <JsxSetupSyntax />
       <JsxWithQuery />
       <TsImport />
+      <ExportDefault />
     </>
   )
 }