Description

This PR provides five macros for functional component.

1. defineComponent

   • Auto collects usage props to the props option.

     defineComponent((props: { 
       foo: string,
       bar: string        
     // ^ Unused prop as a fallthrough attribute will be automatically added to the root element's attributes. 
     }) => {
       return () => (
         <div>
           <span>{props.foo}</span>
         </div>
       )
     })

     Will be covert to

     defineComponent((props) => {
       return () => (
         <div>
           <span>{props.foo}</span>
         </div>
       )
     }, { props: { foo: null } })

   • The destructuring-props will be auto restructure and collects to the props option.

   • The rest prop will be convert to attrs, And the inheritAttrs option will defaults to false.
     By the way you can define the attrs type.

     defineComponent(({
       foo,
       ...attrs
     }: { foo: string, bar: string }) => {
       return () => (
         <div>
           <span {...attrs}>{foo}</span>
         </div>
       )
     })

     Will be covert to

     defineComponent((_props) => {
       const attrs = useAttrs()
       return () => (
         <div>
           <span {...attrs}>{_props.foo}</span>
         </div>
       )
     }, { inheritAttrs: false, props: { foo: null } })

   • Support await expression and getCurrentInstance() co-usage.

   • Support return JSX.

   • If the prop's default-value ends with !, The prop will be inferred as required.

   Usage

   defineComponent(<T,>({
     foo = undefined as T,
     barRequired = ''! 
     //              ^ specified the prop as required for Volar plugin.
   }) => {
     const modelValue = defineModel({ 
       validator: (value) => value === 'model',
       required: true 
     })
     return (
       <div class={props.class}>
         {[foo, modelValue.value]}
       </div>
     )
   })

   Will be convert to:

   defineComponent(<T,>(_props) => {
     const _default_props = createPropsDefaultProxy(_props, { 'barRequired': '' });
     const modelValue = useModel(_props, 'modelValue')
     return () => (
       <div>
         {[_props.foo, modelValue.value]}
       </div>
     )
   }, { 
     props: {
       foo: null, 
       barRequired: {
         required: true
       },
       modelValue: {
         validator: (value) => value === 'model',
         required: true
       }, 
       'onUpdate:modelValue': null, 
     }
   })

2. defineModel

   • Don't support hyphenated modelName.
   • Modified model's value can be read synchronously, needn't await nextTick().
     Related issue: A defineModel property's value cannot be read correctly after modification until nextTick vuejs/core#11080
   • Will be inferred as required prop when the expression ends with !.

   Usage

   function Comp(){
     const modelValue = defineModel<string>()!
     return <div />
   }
   // will be convert to 
   function Comp(props: { modelValue: string, 'onUpdate:modelValue': (e: string) => any  }){
     const modelValue = useModel<string>(props, 'modelValue', { required: true })
     return <div />
   }

3. defineExpose just like in vue-setup.

   • Also support react & preact

   Setup

   // vue-macros.config.ts
   import { defineConfig } from 'unplugin-vue-macros'
   export default defineConfig({
     jsxMacros: {
        lib: 'react' // Or 'preact'
     },
     scriptSFC: true,
   })

   Usage

   const Comp = () => {
    const [foo] = useState()
    defineExpose({
      foo
    })
    return <div>{foo}</div>
   }
   // will be convert to:
   const Comp = forwardRef((props, _ref)=>{
    const [foo] = useState()
    useImperativeHandle(_ref, () => ({
      foo
    }),['foo'])
    return <div>{foo}</div>
   }

4. defineSlots

   • If you use generic to define slots, all slots will be optional.

   const slots = defineSlots<{
     default: () => any
   }>()
   slots.default?.()
   //           ^ optional

   • Support default slots (Recommended).

   function Comp(){
     const slots = defineSlots({
       default: (props: {foo: number}) => <div>default slot: {props.foo}</div>
       title: (props: {foo: number}) => <div>title slot: {props.foo}</div>
     })
   
     return (
       <>
         <slots.default foo={1} />
         <slots.title foo={1} />
       </>
     )
   }

5. defineStyle

   • Support defining multiple style macros in a file.

   • Supported css pre-processors: css | scss|sass|less|stylus|postcss.

     // default pre-processor is `css`.
     defineStyle(`
       .foo {
         color: red;
       }
     `)
     
     // use `scss` pre-processor.
     defineStyle.scss(``)

   • Support css modules, If the macro is an assignment expression.

     const { foo, bar } = defineStyle.scss(`
       .foo {
         color: blue;
         .bar {
           background: red;
         }
       }
     `)

   • Support scoped mode.

     • If defined at the top level of the file, The scoped option is false.
     • If defined within a function, The scoped option defaults to true.

     Usage

     defineStyle(`
       .foo {
          color: red;
        }
     `)  // The scoped option is false.
     
     function Comp(){
       defineStyle(`` {
         scoped: false // default is true, you can manually set to false.
       })
     }

   • Support CSS-variable and JS-variable binding.

     const Comp = () => {
       const color = ref('red')
       defineStyle.scss(`
         .foo {
           color: ${color.value};
         }
       `)
        return <div class="foo" />
     }