babel-plugin-jsx icon indicating copy to clipboard operation
babel-plugin-jsx copied to clipboard

[Question] In the future and Object slot typing be supported by this plugin

Open louiss0 opened this issue 1 year ago • 2 comments

🧐 Problem Description

In Vue you are able to inject slots by using this syntax

<HelloWorld>
      { {
          default(props:Record<string, unknown>) {
          
            return props? props.value : "No props"

          }
        }
      }
 </HelloWorld>

But when I give types for slots I get no error regarding whether or not I'm typing the wrong one or not.


type Slots = SlotsType< { default(props: Record<string, unknown>): JSX.Element }>
export default defineComponent((props: { msg: string, value: number, }, ctx: SetupContext<null, Slots>) => {

 return <> {ctx.slots.default() } </>

}

🚑 Other information

Here is a repo You can use to get what I mean. Vue JSX Example

louiss0 avatar Jun 28 '23 02:06 louiss0

@louiss0, it is much easier to use v-slots directive, if you want strong typing.

Examples: https://github.com/funny-family/vue3-ts-playground/blob/master/src/app/components/not-found/not-found.component.tsx#L210 https://github.com/funny-family/vue3-ts-playground/blob/master/src/app/shared/components/text-field/text-field.render.tsx

funny-family avatar Jul 07 '23 04:07 funny-family

@louiss0, it is much easier to use v-slots directive, if you want strong typing.

Examples: https://github.com/funny-family/vue3-ts-playground/blob/master/src/app/components/not-found/not-found.component.tsx#L210 https://github.com/funny-family/vue3-ts-playground/blob/master/src/app/shared/components/text-field/text-field.render.tsx

You can use this Stackblits example repo to show me what you mean. Stack Blits Setup for you

louiss0 avatar Jul 07 '23 16:07 louiss0