fix: keep same behavior with vue in handling Unknown type on defineModel (#37)

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

Author: danielroe

src/utils/script-setup.ts

@@ -171,8 +171,21 @@ function processDefineModel(node: Expression, context: Context): string | undefi
     return
   }
 
-  const model = context.utils.inferRuntimeType(context.ctx, modelTypeDecl)
-  if (!model || model.length === 0 || model[0] === 'Unknown') {
+  let model = context.utils.inferRuntimeType(context.ctx, modelTypeDecl)
+  let skipCheck = false
+  const hasBoolean = model.includes('Boolean')
+  const hasFunction = model.includes('Function')
+  const hasUnknownType = model.includes('Unknown')
+  if (hasUnknownType) {
+    if (hasBoolean || hasFunction) {
+      skipCheck = true
+      model = model.filter(t => t !== 'Unknown')
+    }
+    else {
+      model = ['null']
+    }
+  }
+  if (!model || model.length === 0) {
     return
   }
 
@@ -206,20 +219,15 @@ function processDefineModel(node: Expression, context: Context): string | undefi
     })
   }
 
-  node.typeArguments = undefined
-  node.typeParameters = undefined
-  node.arguments = modelNameDecl
-    ? [modelNameDecl, modelCodegenDecl]
-    : [modelCodegenDecl]
-
   const codegenArgs: string[] = []
   if (modelNameDecl) {
     codegenArgs.push(`"${modelNameDecl.value}"`)
   }
 
-  const codegenType = model.length === 1 ? model[0] : `[${model.join(',')}]`
+  const codegenType = model.length === 1 ? model[0] : `[${model.join(', ')}]`
+  const codegenSkipCheck = skipCheck ? 'skipCheck: true' : ''
   const codegenExtra = modelRuntimeDecl ? `...${context.ctx.getString(modelRuntimeDecl)}` : ''
-  codegenArgs.push(`{ ${[`type: ${codegenType}`, codegenExtra].filter(s => !!s).join(', ')} }`)
+  codegenArgs.push(`{ ${[`type: ${codegenType}`, codegenSkipCheck, codegenExtra].filter(s => !!s).join(', ')} }`)
 
   return `${DEFINE_MODEL}(${codegenArgs.join(', ')})`
 }

test/setup.test.ts

@@ -209,7 +209,7 @@ describe('transform typescript script setup', () => {
       ),
     ).toMatchInlineSnapshot(`
       "<script setup>
-      defineModel("msg", { type: [String,Number,Array] })
+      defineModel("msg", { type: [String, Number, Array] })
       </script>"
     `)
     expect(
@@ -230,6 +230,33 @@ describe('transform typescript script setup', () => {
       defineModel("msg", { type: String, ...{ required: true } })
       </script>"
     `)
+    expect(
+      await fixture(
+        `<script setup lang="ts">const model = defineModel<number | undefined>()</script>`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "<script setup>
+      const model = defineModel({ type: null })
+      </script>"
+    `)
+    expect(
+      await fixture(
+        `<script setup lang="ts">const model = defineModel<boolean | undefined>()</script>`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "<script setup>
+      const model = defineModel({ type: Boolean, skipCheck: true })
+      </script>"
+    `)
+    expect(
+      await fixture(
+        `<script setup lang="ts">const model = defineModel<Function | undefined>()</script>`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "<script setup>
+      const model = defineModel({ type: Function, skipCheck: true })
+      </script>"
+    `)
 
     await expect(fixture('<script setup lang="ts">defineModel("foo", "bar")</script>')).rejects.toThrow(`[vue-sfc-transformer] defineModel()'s second argument must be an object.`)
   })