fix(vue-jsx): handle type asserted export default defineComponent (#615)

Author: sapphi-red

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

@@ -158,14 +158,17 @@ function vueJsxPlugin(options: Options = {}): Plugin {
                     enter(
                       _path: babel.NodePath<types.ExportDefaultDeclaration>,
                     ) {
+                      const unwrappedDeclaration = unwrapTypeAssertion(
+                        _path.node.declaration,
+                      )
                       if (
                         isDefineComponentCall(
-                          _path.node.declaration,
+                          unwrappedDeclaration,
                           defineComponentName,
                         )
                       ) {
-                        const declaration = _path.node
-                          .declaration as types.CallExpression
+                        const declaration =
+                          unwrappedDeclaration as types.CallExpression
                         const nodesPath = _path.replaceWithMultiple([
                           // const __default__ = defineComponent(...)
                           types.variableDeclaration('const', [
@@ -276,7 +279,10 @@ function vueJsxPlugin(options: Options = {}): Plugin {
                   })
                 }
               } else if (
-                isDefineComponentCall(node.declaration, defineComponentName)
+                isDefineComponentCall(
+                  unwrapTypeAssertion(node.declaration),
+                  defineComponentName,
+                )
               ) {
                 hotComponents.push({
                   local: '__default__',
@@ -337,7 +343,7 @@ function parseComponentDecls(
   for (const decl of node.declarations) {
     if (
       decl.id.type === 'Identifier' &&
-      isDefineComponentCall(decl.init, fnNames)
+      isDefineComponentCall(unwrapTypeAssertion(decl.init), fnNames)
     ) {
       names.push(decl.id.name)
     }
@@ -357,6 +363,25 @@ function isDefineComponentCall(
   )
 }
 
+function unwrapTypeAssertion(node: types.Node): types.Node
+function unwrapTypeAssertion(
+  node: types.Node | null | undefined,
+): types.Node | null | undefined
+function unwrapTypeAssertion(
+  node: types.Node | null | undefined,
+): types.Node | null | undefined {
+  if (!node) return node
+  let current = node
+  while (
+    current.type === 'TSAsExpression' ||
+    current.type === 'TSSatisfiesExpression' ||
+    current.type === 'TSTypeAssertion'
+  ) {
+    current = current.expression
+  }
+  return current
+}
+
 function getHash(text: string) {
   return crypto.hash('sha256', text, 'hex').substring(0, 8)
 }

playground/vue-jsx/ExportDefaultAs.tsx

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

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

@@ -14,6 +14,9 @@ test('should render', async () => {
   expect(await page.textContent('.export-default')).toMatch(
     'export default defineComponent',
   )
+  expect(await page.textContent('.export-default-as')).toMatch(
+    'export default defineComponent as',
+  )
 })
 
 test('should update', async () => {

playground/vue-jsx/main.jsx

@@ -9,6 +9,7 @@ import JsxSetupSyntax from './setup-syntax-jsx.vue'
 import JsxWithQuery from './Query.jsx?query=true'
 import TsImport from './TsImport.vue'
 import ExportDefault from './ExportDefault'
+import ExportDefaultAs from './ExportDefaultAs'
 
 function App() {
   return (
@@ -24,6 +25,7 @@ function App() {
       <JsxWithQuery />
       <TsImport />
       <ExportDefault />
+      <ExportDefaultAs />
     </>
   )
 }