Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
louiss0 opened this issue Jun 28, 2023 · 11 comments
Open
Labels
question Further information is requested

Comments

@louiss0
Copy link

louiss0 commented Jun 28, 2023

🧐 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 louiss0 added the question Further information is requested label Jun 28, 2023
@louiss0
Copy link
Author

louiss0 commented Jul 7, 2023

@zhiyuanzmj
Copy link
Collaborator

vue-macros/vue-macros#720
vue-macros support the type hint for v-slots

@louiss0
Copy link
Author

louiss0 commented Jul 4, 2024

vue-macros/vue-macros#720 vue-macros support the type hint for v-slots

I need to write an object as the child not use a directive.

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

          }
        }
      
 </HelloWorld>

@zhiyuanzmj
Copy link
Collaborator

Because of the child maybe a variable to display string.

const foo = 'hello world'
<HelloWorld>
      { foo }
 </HelloWorld>

@louiss0
Copy link
Author

louiss0 commented Jul 4, 2024

Because of the child maybe a variable to display string.

const foo = 'hello world'
<HelloWorld>
      { foo }
 </HelloWorld>

Can the plugin be rewritten so that JSX works like React or Solid?
I should be able to use an object as a child or the template tag to define slots like in SFC.
If I specify types in the function I should be forced to type an object as a child.

@zhiyuanzmj
Copy link
Collaborator

zhiyuanzmj commented Jul 5, 2024

Vue Macros have a v-slot directive to define slot just like in vue template, also has type hint.
https://vue-macros.dev/features/jsx-directive.html#v-slot

@zhiyuanzmj
Copy link
Collaborator

Maybe I should add type hints only if the expression is written as an object.

@louiss0
Copy link
Author

louiss0 commented Jul 5, 2024

Maybe I should add type hints only if the expression is written as an object.

The plugin needs to be rewritten to support objects as child without using an expression.

@zhiyuanzmj
Copy link
Collaborator

@zhiyuanzmj
Copy link
Collaborator

zhiyuanzmj commented Jul 7, 2024

@vue-macros/volar@2.3.1 is released.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants