Skip to content
New issue

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

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

Already on GitHub? # to your account

feat: Improve Typed Slots Support #2547

Merged
merged 9 commits into from
Mar 26, 2023
Merged

Conversation

johnsoncodehk
Copy link
Member

@johnsoncodehk johnsoncodehk commented Mar 26, 2023

This was linked to issues Mar 26, 2023
@johnsoncodehk johnsoncodehk marked this pull request as ready for review March 26, 2023 07:34
@johnsoncodehk johnsoncodehk merged commit d211628 into master Mar 26, 2023
@johnsoncodehk johnsoncodehk deleted the typed-slots-improves branch March 26, 2023 07:46
: T extends { children?: infer S } ? { [K in keyof S]-?: S[K] extends ((obj: infer O) => any) | undefined ? O : any }
: T extends { ${slots}?: infer S } ? S
: T extends { children?: infer S } ? S
: T extends { [K in keyof PickNotAny<JSX.ElementChildrenAttribute, {}>]?: infer S } ? S
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Shouldn't this be first? DefineComponent always has $slots but the default value is essentially any, so ElementChildrenAttribute will never be checked.
  • ElementChildrenAttribute is a property on the elements' props. In vue that's $props, so JSX.ElementAttributesProperty also needs to be used. The slots will be on T[keyof JSX.ElementAttributesProperty][keyof JSX.ElementChildrenAttribute]

@KaelWD
Copy link

KaelWD commented Mar 27, 2023

This doesn't seem to solve my other problem either, slots from .vue files are still not accessible from tsx:

// Comp.vue
<script setup lang="ts"></script>

<template>
  <slot name="activator" :isActive="false" />
</template>
// test.tsx
import Comp from './Comp.vue'

const el = (
  <Comp>
    {{ activator: props => props.isActive }}
  </Comp>
)

Same cause though, volar is defining T['$slots'] instead of T['$props']['$slots'] or T[keyof JSX.ElementAttributesProperty][keyof JSX.ElementChildrenAttribute]

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

support slot required checking JSX compatible slots
2 participants