Slots reactivity is not supported

[PurpleTape]

Related plugins

• [ ] plugin-vue

• [X] plugin-vue-jsx

Describe the bug

Sometimes there is a need to transfer a slot to the component, depending on the reactive value. In the syntax of SFC templates, this can be done as follows:

<template>
  <Comp>
    <template #slotName v-if="someReactiveVariable">
       Slot value
    </template>
  </Comp>
</template>

But when I try to do something like this in JSX, it lose the ability to reactively control the transfer of the slot to the component:

const render = () => (
  <Comp>
    {{
      slotName: someReactiveVariable.value ? () => 'Slot value' : undefined
    }}
  </Comp>
)

What to do in such a situation?

Reproduction

https://stackblitz.com/edit/vitejs-vite-t9skwh?file=src%2FApp.tsx

Steps to reproduce

Click "Toggle useSlot" button

System Info

"@vitejs/plugin-vue-jsx": "^3.0.2"

Used Package Manager

npm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.