feat(macros): improve handling of required props in defineComponent

Author: zhiyuanzmj

packages/macros/src/core/define-component/index.ts

@@ -1,6 +1,7 @@
 import {
   HELPER_PREFIX,
   importHelperFn,
+  walkAST,
   walkIdentifiers,
   type MagicStringAST,
 } from '@vue-macros/common'
@@ -65,7 +66,15 @@ export function transformDefineComponent(
           continue
         }
         const defaultValue = getDefaultValue(prop.value.right)
-        const isRequired = prop.value.right.type === 'TSNonNullExpression'
+        let isRequired = false
+        walkAST(prop.value.right, {
+          enter(node) {
+            if (node.type === 'TSNonNullExpression') {
+              isRequired = true
+              this.skip()
+            }
+          },
+        })
 
         const propOptions = []
         if (isRequired) {

packages/macros/src/volar/transform.ts

@@ -67,15 +67,22 @@ export function transformJsxMacros(
             ? root.parameters[0].name.elements
             : []
         for (const element of elements) {
-          if (ts.isIdentifier(element.name))
+          if (ts.isIdentifier(element.name)) {
+            const isRequired = ts.forEachChild(
+              element,
+              function isNonNullExpression(node): boolean {
+                return (
+                  ts.isNonNullExpression(node) ||
+                  !!ts.forEachChild(node, isNonNullExpression)
+                )
+              },
+            )
             props.push(
               `${element.name.escapedText}${
-                element.initializer &&
-                ts.isNonNullExpression(element.initializer)
-                  ? ':'
-                  : '?:'
+                isRequired ? ':' : '?:'
               } typeof ${element.name.escapedText}`,
             )
+          }
         }
 
         const shouldWrapByCall =

packages/macros/tests/fixtures/define-component.tsx

@@ -3,7 +3,7 @@ import { defineComponent, nextTick, unref } from 'vue'
 const $ = unref
 
 const Comp = defineComponent(
-  ({ bar = 'bar'!, Comp, ...attrs }: { bar: 'bar'; baz: 'baz', Comp: any }) => {
+  ({ bar = 'bar'! as string, Comp, ...attrs }: { bar: string; baz: 'baz', Comp: any }) => {
     defineModel()
     const foo = $(
       defineModel('foo', {