storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.65k stars 9.32k forks source link

[Bug]: type error while importing `svelte 5` component due to recent change in `svelte-check` #29308

Open bhvngt opened 1 month ago

bhvngt commented 1 month ago

Describe the bug

Due to recent change in svelte-check v4.0.3, following type error occurs while importing Svelte 5 component in svelte storybook file. This also ends up causing multiple type errors in the story args definition.

Error: Type 'Component<Props, {}, "">' is not assignable to type 'ComponentType<Component<Props, {}, "">, any>'.
  Type 'Component<Props, {}, "">' provides no match for the signature 'new (options: ComponentConstructorOptions<Component<Props, {}, "">>): { [x: string]: any; $destroy: () => void; $on: <K extends string>(type: K, callback: (e: any) => void) => () => void; $set: (props: Partial<...>) => void; }'. 

As per PR, In svelte 5, components are functions. Hence with this PR only function type is exported in runes mode.

I tried to supply svelte 5 component to Meta as Meta<ReturnType<typeof Button>>. However, it throws following error after that change.

Error: Type '{ $on?(type: string, callback: (e: any) => void): () => void; $set?(props: Partial<Props>): void; }' is not assignable to type 'ComponentType<{ $on?(type: string, callback: (e: any) => void): () => void; $set?(props: Partial<Props>): void; }, any>'.
  Type '{ $on?(type: string, callback: (e: any) => void): () => void; $set?(props: Partial<Props>): void; }' provides no match for the signature 'new (options: ComponentConstructorOptions<{ $on?(type: string, callback: (e: any) => void): () => void; $set?(props: Partial<Props>): void; }>): { ...; }'. 
  title: "Example/Button",
  component: Button as ReturnType<typeof Button>,
  tags: ["autodocs"],

Reproduction link

https://codesandbox.io/p/devbox/8p9rrz

Reproduction steps

  1. Run pnpm install
  2. Run pnpm check
  3. Type error will be thrown
  4. If svelte-check is reverted to 4.0.2, svelte-check passes with no errors.

System

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 AMD EPYC
    Shell: Unknown
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn <----- active
    npm: 9.8.1 - /usr/local/bin/npm
    pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.3.5 => 8.3.5 
    @storybook/addon-interactions: ^8.3.5 => 8.3.5 
    @storybook/addon-links: ^8.3.5 => 8.3.5 
    @storybook/addon-svelte-csf: ^4.1.7 => 4.1.7 
    @storybook/blocks: ^8.3.5 => 8.3.5 
    @storybook/svelte: ^8.3.5 => 8.3.5 
    @storybook/sveltekit: ^8.3.5 => 8.3.5 
    @storybook/test: ^8.3.5 => 8.3.5 
    storybook: ^8.3.5 => 8.3.5 

Additional context

No response

ThorFjelldalen commented 2 weeks ago

Also getting this

doolijb commented 2 weeks ago

Getting this as well.

KieranP commented 1 week ago

Am experiencing this as well. My 40+ storybook files are failing type checking, though they continue to display fine in the UI.