[Bug]: 7.0.18 Vue typescript regression on slot typing

[Sidnioulz]

Describe the bug

Before 7.0.18, specifically this PR https://github.com/storybookjs/storybook/pull/22814/files, I was able to define properties for slots in my StoryObj args:

export const SimpleSlotTest: StoryObj<typeof meta> = {
  args: {
    label: 'Storybook Day',
    header: () => h('h1', 'Header Text Slot'),
    default: () => 'Default Text Slot',
    footer: h('p', 'Footer VNode Slot'),
  }
}

Now, those properties are no longer visible in args's computed type. We get the following TS error:

Object literal may only specify known properties, and 'header' does not exist in type 'Partial<{ readonly label?: string | undefined; key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ref_for?: boolean | undefined; ref_key?: string | undefined;...

This happens regardless of whether defineSlots is used to type slots on the Vue SFC file.

To Reproduce

Use https://github.com/chakAs3/vue3-storybook-slots-examples for a MWE. Open src/stories/ReactiveSlots.stories.ts and notice args doesn't accept any of the slots keys any more.

System

14:11 $ npx storybook@latest info
Need to install the following packages:
  storybook@7.0.18
Ok to proceed? (y) 

Environment Info:

  System:
    OS: Linux 6.2 Arch Linux
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Binaries:
    Node: 16.20.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Firefox: 111.0.1
  npmPackages:
    @storybook/addon-essentials: ^7.0.18 => 7.0.18 
    @storybook/addon-interactions: ^7.0.18 => 7.0.18 
    @storybook/addon-links: ^7.0.18 => 7.0.18 
    @storybook/blocks: ^7.0.18 => 7.0.18 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2 
    @storybook/vue3: ^7.0.18 => 7.0.18 
    @storybook/vue3-vite: ^7.0.18 => 7.0.18

Additional context

No response

[Sidnioulz]

I get these errors in VSCode with Volar 1.7.8, but not with vue-tsc 1.6.5 when linting my code locally.

I wonder against which version of Vue and the Vue type helpers this was tested, and what's missing on my end.

[Sidnioulz]

I found a determining factor with some help from Kasper: the IDE fails to build when the vue-tsc NPM package is on the @latest dist-tag, version 1.6.5. But manually updating to the @next dist-tag, 1.7.8, and restarting the IDE fixes the issue.

So, this seems to be linked to vue-tsc not being updated correctly on NPM. It's possible the Vue devs pushed under the wrong dist-tag, I'll follow up with them. I'm leaving this issue open to let you decide if the Vue fix should be reverted until the right version of vue-tsc is available on NPM or not.

Workaround for this issue:

yarn add -D vue-tsc@next vue-component-type-helpers@next

[kasperpeulen]

Thanks for the investigation @Sidnioulz!
Maybe @johnsoncodehk knows what we can do best here?

We test our Vue type definitions with vue-tsc@1.7.8 in the monorepo.
It just automatically bumped when regenerating the lock file.

[Sidnioulz]

The Volar devs confirmed, if I understood what they said properly, that 1.7.8 is indeed pre-prod and not yet intended to be released.

[kasperpeulen]

Thanks for confirming @Sidnioulz!

Okay, great, so I will just use:

  "dependencies": {
    "@storybook/core-client": "7.1.0-alpha.30",
    "@storybook/docs-tools": "7.1.0-alpha.30",
    "@storybook/global": "^5.0.0",
    "@storybook/preview-api": "7.1.0-alpha.30",
    "@storybook/types": "7.1.0-alpha.30",
    "ts-dedent": "^2.0.0",
    "type-fest": "^3.11.0",
    "vue-component-type-helpers": "latest"
  },

Or maybe I really should make it a peer dep right? So that the user can choose themself what version to use?

[Sidnioulz]

@kasperpeulen, https://www.npmjs.com/package/vue-component-type-helpers?activeTab=versions shows that latest is 1.6.5, whereas next is 1.7.11 as of today.

When we had 1.6.5, we had issues. With 1.7.8, it was fine, and we had a report that 1.6.4 worked too from our of our users (which I did not verify).

So if you want to set the dependency to a working version, I would say latest is not that, since it was the version that caused type issues for us.

[kasperpeulen]

@Sidnioulz
What version are you using for vue-tsc and volar in your IDE?

I think they should all point to 1.6.5.

[Sidnioulz]

In my IDE, I am not sure. I'm not on the official VSCode but a FOSS version that appears to have differently packaged / versioned extensions sometimes. Mine is 0.34.x and likely irrelevant.

I had a colleague with 1.6.5 in their IDE who did experience a TS bug related to the types of parameters for some event listeners defined with defineEmits. I had another report the bug I showed above where slots aren't in the arg types.

Locally with vue-tsc, my colleagues found that 1.6.4 works, 1.6.5 doesn't, and 1.7.x work. I will now reopen the MWE above and re-run vue-tsc with all three versions to confirm.

[Sidnioulz]

I can't repro either on the MWE repo I shared above. All combinations of 1.6.4, 1.6.5 and 1.7.8 of vue-tsc work without generating issues whether or not I defineSlots.

In my IDE, I get a type error if using the Volar Typescript plugin (unknown exact version, see above), regardless of the vue-tsc package installed locally (which makes sense now, I don't know what was going on when I wrote the initial report and why this had an impact).

Using Volar takeover mode in my IDE with no Typescript extension also worked great with either of the 3 tested vue-tsc versions.

I'm not seeing any further clues in my org's Slack channel, so I guess this can just be closed. If anyone ends up with the same odd IDE setup I seem to have, they can use the workaround shared on this page by Kasper or switch to Volar takeover mode with no TS (which is apparently the setup recommended by the TS Volar extension).