Subscribe on changes!

Generic component not inferring slot props defined through defineSlots

avatar
May 18th 2023

Vue version

3.3.2

Link to minimal reproduction

https://play.vuejs.org/#eNp9U22P2jAM/itWNgmQSqvtvnUF3aR92aZJ07Zv9KTrtYbLrk2iJLAh1P8+O325DhAgaB3bz2M/dk7iozHxYY8iFZnHxtSFx3WuALJvx1/FU42QVoUvVrngRy6Cj7xDLLyR1bLEuqaIE0g6hnaMApBVCqfuPJYVtG2fnky4LhBV0eANTHa/orJ1HZfNvgmyzij5m7nSSuPBod8bqAu1I0LvApVsjLYeBhG2Vjcwiwc8Vmz2gTFKrZwH1gZWsGFSqouafhf1dc6+6Gc1gzbK1QNlZElHShQiEh3LsilM/NtpRUM4MUTeO6gUarRrLRfEyXYunr03Lk2SvTIvu7jUTXJPvsTulZekXKWb+7v4Ln6fVNL56XGMrlk+Wf3HoSXCXFBRI3ZChwe0S4uqQov2JtdZ7JTvzHXByZQ0rpban6h5sX80vUoexqF3JhyWW21pSmEp9DYIP1mNPtLV2sP/Z/wZkueHot5jBC94XIBUYY9ycSUh5RFSwuPbE8VC4eAT8X2m8K94bMOKPl5PZMi+zIuAZNoUaTY0ObyfLXH3u7GtsEOFVpZkTsoD/OtpBA6ct1LtorH00fEDS22rbJITQaGO66BnTtPbSoXfrTYu63eQ1U5HoA3vc7ueL8JF8EeD8JOEd3QR+vgNq0YCk36Xwj2kMDeMTiseRvCKDO0CVmsuhhlC9101AT8L/wPv5EIBiPYfB5+NuQ==

Steps to reproduce

Volar is enabled Editor: VSCode

In the App.vue you can see the problem.

What is expected?

In App.vue i expect the following:

  • IDE recognises MyTable as component (highlight it).
  • IDE provides autocompletion for MyTable slots.
  • IDE correctly infer scoped slots props types from MyTable.vue definition.

What is actually happening?

  • VSCode does not recognises MyTable as component at all (it does not highlight it).
  • There is no autocompletion for MyTable slots.
  • All scoped slot props marked as any type.

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 5.56 GB / 15.95 GB
  Binaries:
    Node: 18.16.0 - C:\nodejs\node.EXE
    npm: 9.5.1 - C:\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.42)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.3.2 => 3.3.2

Any additional comments?

Reproduction was made in SFC Playground, but you can't reproduce bug there. Reproduction is very simple (only 2 components) so you can bring it to newly created project (npm init vue@latest).

avatar
May 19th 2023

There's a couple issues on the typescript

Here's running on the latest version of vue (3.3.4)

image

Some changes to the files:

<template>
  <div>
    <div v-for="item of data">
      <slot
        v-for="(_, key) in item"
        :name="`${String(key)}-cell`"
        :item="item"
      />
    </div>
  </div>
</template>

<script setup lang="ts" generic=" DataItem extends Record<string, any>">
defineProps<{
  data: DataItem[];
}>();

defineSlots<{
  [K in keyof DataItem as `${K & string}-cell`]: (props: {
    item: DataItem;
  }) => any;
}>();
</script>
avatar
May 19th 2023
avatar
May 19th 2023

@jd-solanki https://github.com/vuejs/core/pull/8374 fixes the issue