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

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]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in 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