fix: resolve type reference in props annotation

Author: Ray-D-Song

packages/babel-plugin-resolve-type/src/index.ts

@@ -147,14 +147,20 @@ const plugin: (
         if (generics) {
           ctx!.propsTypeDecl = resolveTypeReference(generics);
         } else {
-          ctx!.propsTypeDecl = getTypeAnnotation(props.left);
+          const typeAnnotation = getTypeAnnotation(props.left);
+          ctx!.propsTypeDecl = typeAnnotation && t.isTSTypeReference(typeAnnotation)
+            ? resolveTypeReference(typeAnnotation) || typeAnnotation
+            : typeAnnotation;
         }
         ctx!.propsRuntimeDefaults = props.right;
       } else {
         if (generics) {
           ctx!.propsTypeDecl = resolveTypeReference(generics);
         } else {
-          ctx!.propsTypeDecl = getTypeAnnotation(props);
+          const typeAnnotation = getTypeAnnotation(props);
+          ctx!.propsTypeDecl = typeAnnotation && t.isTSTypeReference(typeAnnotation)
+            ? resolveTypeReference(typeAnnotation) || typeAnnotation
+            : typeAnnotation;
         }
       }
 

packages/babel-plugin-resolve-type/test/__snapshots__/resolve-type.test.tsx.snap

@@ -211,6 +211,26 @@ defineComponent<Props>((props = {
 });"
 `;
 
+exports[`resolve type > runtime props > with type reference annotation 1`] = `
+"import { defineComponent } from 'vue';
+interface MyProps {
+  list?: Array<{
+    id: number;
+    title: string;
+  }>;
+}
+defineComponent((props: MyProps) => {
+  return () => <div>{props.list?.length}</div>;
+}, {
+  props: {
+    list: {
+      type: Array,
+      required: false
+    }
+  }
+});"
+`;
+
 exports[`resolve type > w/ tsx 1`] = `
 "import { type SetupContext, defineComponent } from 'vue';
 defineComponent(() => {

packages/babel-plugin-resolve-type/test/resolve-type.test.tsx

@@ -87,6 +87,24 @@ describe('resolve type', () => {
       );
       expect(result).toMatchSnapshot();
     });
+
+    test('with type reference annotation', async () => {
+      const result = await transform(
+        `
+        import { defineComponent } from 'vue';
+        interface MyProps {
+          list?: Array<{
+            id: number
+            title: string
+          }>
+        }
+        defineComponent((props: MyProps) => {
+          return () => <div>{props.list?.length}</div>;
+        })
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
   });
 
   describe('runtime emits', () => {