fix: generate null props when type is failed to infer, close #30

Author: antfu

src/core/macros.ts

@@ -22,7 +22,7 @@ const WITH_DEFAULTS = 'withDefaults'
 
 export interface PropTypeData {
   key: string
-  type: string[]
+  type: string[] | string
   required: boolean
 }
 
@@ -211,17 +211,19 @@ export function applyMacros(nodes: Statement[]) {
 
     return t.objectExpression(
       Object.entries(props).map(([key, value]) => {
+        if (value.type === 'null')
+          return t.objectProperty(t.identifier(key), t.nullLiteral())
+
         const prop = hasStaticDefaults
           ? (propsRuntimeDefaults as ObjectExpression).properties.find((node: any) => node.key.name === key) as ObjectProperty
           : undefined
 
         if (prop)
           value.required = false
 
-        const entries = Object.entries(value).map(([key, value]) =>
-          key === 'type'
-            ? t.objectProperty(t.identifier(key), t.arrayExpression(value.map((i: any) => t.identifier(i))) as any)
-            : t.objectProperty(t.identifier(key), parseExpression(JSON.stringify(value)) as any),
+        const entries = Object.entries(value).map(([key, value]) => key === 'type'
+          ? t.objectProperty(t.identifier(key), typeof value === 'string' ? t.identifier(value) : t.arrayExpression(value.map((i: any) => t.identifier(i))) as any)
+          : t.objectProperty(t.identifier(key), parseExpression(JSON.stringify(value)) as any),
         )
 
         if (prop)
@@ -311,7 +313,7 @@ function extractRuntimeProps(
       (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature')
       && m.key.type === 'Identifier'
     ) {
-      let type
+      let type: string[] | undefined
       if (m.type === 'TSMethodSignature') {
         type = ['Function']
       }
@@ -324,7 +326,7 @@ function extractRuntimeProps(
       props[m.key.name] = {
         key: m.key.name,
         required: !m.optional,
-        type: type || ['null'],
+        type: type?.length === 1 ? type[0] : type || 'null',
       }
     }
   }

test/__snapshots__/transform.test.ts.snap

@@ -69,7 +69,7 @@ __sfc_main.props = {
   msg: {
     key: \\"msg\\",
     required: false,
-    type: [String],
+    type: String,
     default: 'Hello'
   },
   name: {
@@ -221,7 +221,7 @@ __sfc_main.props = {
   msg: {
     key: \\"msg\\",
     required: false,
-    type: [String],
+    type: String,
     default: 'Hello'
   },
   value: {
@@ -232,7 +232,7 @@ __sfc_main.props = {
   data: {
     key: \\"data\\",
     required: false,
-    type: [Object]
+    type: Object
   }
 };
 
@@ -272,7 +272,7 @@ __sfc_main.props = {
   msg: {
     key: \\"msg\\",
     required: false,
-    type: [String],
+    type: String,
     default: 'Hello'
   },
   value: {
@@ -283,18 +283,14 @@ __sfc_main.props = {
   data: {
     key: \\"data\\",
     required: false,
-    type: [Object]
+    type: Object
   },
   arr: {
     key: \\"arr\\",
     required: false,
-    type: [Array]
+    type: Array
   },
-  any: {
-    key: \\"any\\",
-    required: true,
-    type: [null]
-  }
+  any: null
 };
 
 __sfc_main.setup = (__props, __ctx) => {
@@ -311,6 +307,29 @@ export default __sfc_main;
 "
 `;
 
+exports[`transform fixtures test/fixtures/MacrosTypeAny.vue 1`] = `
+"<template>
+  <div>
+    {{ value }}
+  </div>
+</template>
+
+<script lang=\\"ts\\">
+const __sfc_main = {};
+__sfc_main.props = {
+  value: null
+};
+
+__sfc_main.setup = (__props, __ctx) => {
+  const props = __props;
+  return {};
+};
+
+export default __sfc_main;
+</script>
+"
+`;
+
 exports[`transform fixtures test/fixtures/Object1.vue 1`] = `
 "<template>
   <div>

test/fixtures/MacrosTypeAny.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    {{ value }}
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ value: any }>()
+</script>