When using defineRender / TSX, how are values received from v-slot?

[matthew-dean]

In Vue, we would use:

<template>
  <PanelActivator v-slot="{ show, visible }">
    <Button @click="show">Button</Button>
  </PanelActivator>
</template>

With defineRender, how is the v-slot written?

[dosubot[bot]]

Hey there, @matthew-dean! 🎉 I'm Dosu, your friendly neighborhood bot here to assist with bugs, answer your burning questions, and guide you towards becoming an awesome contributor! While we wait for a human maintainer to chime in, know that I'm here to lend a hand. Now, let me dive into your issue about defineRender and v-slot in TSX and I'll get back to you with a full answer shortly. Hang tight!

[matthew-dean]

Note, I did find this guide on the Vue site; however, I don't think defineRender works like that, or, if it does, I'm not sure why I'm not seeing a strongly-typed default function callback even though it's strongly typed in my component.

For instance, I have:

const slotProps = {
  panelRef: component,
  visible,
  show: handleShow,
  hide: handleHide,
  toggle: handleToggle
}

defineSlots<{
  default(props: typeof slotProps): void
}>()

Yet, I'm seeing this TypeScript error in the TSX:

[dosubot]

In Vue with TypeScript, when using defineRender and JSX, the v-slot directive is not directly supported as it would be in a template. Instead, you pass slot content as children in JSX. This is why you might not be seeing a strongly-typed default function callback, as JSX does not use the v-slot directive syntax directly. In JSX, slots are passed as children, and you would typically type these through the component's props or context, not through a directive syntax.

Here's a conceptual adjustment for using slots in a strongly-typed manner with JSX:

// Assuming Child.vue is adjusted to accept slots in a props or context manner
<Child>
  {{
    default: () => <div>default: begin</div>,
    bottom: (scope: { foo: string }) => (
      <div>
        bottom: {scope.foo}
        {/* Conditional rendering and passing of scoped slots should be handled within Child component logic */}
      </div>
    ),
  }}
</Child>

This example assumes that Child is a component that can accept slots through props or a context object, which is a common pattern when working with JSX in Vue 3. The actual implementation in Child.vue would need to be adjusted to support this pattern, typically by accepting a slots object and rendering it appropriately.

To fully resolve your issue, ensure that both your parent and child components are correctly set up to handle slots in a JSX context, and adjust your typing accordingly. Without seeing the implementation of Child.vue and how it's intended to handle slots, it's challenging to provide a precise solution.

As for how the v-slot directive is handled in the vue-macros codebase when used with defineRender and TypeScript, it is handled through a transformation process that integrates TypeScript type definitions with Vue's slot mechanism. This process is facilitated by the transform function, which modifies the content of an embedded file to include TypeScript type annotations for slots.

The key steps in handling the v-slot directive are as follows:

1. Identification of defineSlots Usage: The getTypeArg function is responsible for scanning the scriptSetup section of a Vue Single File Component (SFC) to find any usage of the defineSlots macro. It does this by looking for call expressions that match the DEFINE_SLOTS identifier and have a single type argument. This type argument is crucial as it specifies the types of the slots.

2. Transformation: Once the type argument is identified, the transform function is invoked. This function performs a series of replacements in the embedded file's content to integrate TypeScript type definitions for slots. Specifically, it:

   • Inserts a placeholder (__VLS_DefineSlots<) before the position of the type argument.
   • Inserts a closing angle bracket (>) after the end of the type argument.
   • Adds a TypeScript type definition for __VLS_DefineSlots, which maps slot names to their respective types. This type definition ensures that slots are typed correctly, allowing for function slots or slots that accept specific types of arguments.

3. Vue Version Compatibility: The code also checks the Vue version (vueVersion) to conditionally declare the defineSlots function for Vue versions less than 3. This ensures compatibility with different versions of Vue.

4. Integration with Vue Language Plugin: The functionality is encapsulated within a Vue language plugin (plugin), which is exported from the module. This plugin integrates with the Vue tooling ecosystem, specifically with Volar, to provide enhanced type checking and IntelliSense features for slots in Vue components when using TypeScript.

You can find more details in the vue-macros codebase.

Sources

• playground/vue3/src/examples/jsx-directive/v-slot/index.vue
• packages/volar/src/define-slots.ts

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.