[Bug][svelte 5]: Type 'typeof Button' is not assignable to type 'Component<any, {}, string>'.

[axel7083]

Describe the bug

Using 5.0.0-next.1 I am getting the typecheck error when I try to use our library button as component.

Steps to reproduce the behavior

<script context="module" lang="ts">
import Button from '@podman-desktop/ui-svelte/Button';
import { type Args, defineMeta, setTemplate, type StoryContext } from '@storybook/addon-svelte-csf';

const onclickFn = fn().mockName('onclick');

const { Story } = defineMeta({
  component: Button,
  title: 'Example/Button',
  tags: ['autodocs'],
  args: {
    onclick: onclickFn,
  },
});
</script>

Here is the Button.svelte.ts file details

 // ... omitted
export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {}

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots and/or logs

Running svelte-check I am getting the following error

Error: Type 'typeof Button' is not assignable to type 'Component<any, {}, string>'.
  Type 'typeof Button' provides no match for the signature '(this: void, internals: Brand<"ComponentInternals">, props: any): { $on?(type: string, callback: (e: any) => void): () => void; $set?(props: Partial<any>): void; }'. (ts)
const { Story } = defineMeta({
  component: Button,
  title: 'Example/Button',

====================================
svelte-check found 1 error and 0 warnings in 1 file

Environment

• OS: Fedora 40
• Node.js version: v20.12.2
• NPM version: 10.5.0
• svelte: 5.0.0-next.210

Additional context

The storybook works fine, the problem is only related to the typecheck.

[xeho91]

I think the problem might be this sample from Button.svelte.ts you provided:

 // ... omitted
export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {}

The next version of this Storybook addon uses the new type Component, hence the types mismatch.

To elaborate more: Svelte v5 has some breaking changes in types. Following the comment of SvelteComponent your Button class probably doesn't need to extend SvelteComponent anymore since Svelte components are no longer classes but functions, and SvelteComponent AFAIK became a type definition for legacy compatibility.

[JReinhold]

That's a funky looking Button component - defined in a TS file and not a Svelte file? I've never seen that before. Can you share the full button code? Why is this a class and not just a .svelte component? Very confused, very intrigued 😅

[axel7083]

Sorry for the misunderstanding, the component is define in a svelte file. Here it is https://github.com/containers/podman-desktop/blob/516922e2ef043c208d55e9921edda79f7798aa20/packages/ui/src/lib/button/Button.svelte

The snippet I provided above it the the file created by vite inside the dist folder. Corresponding to the type definitions.

[JReinhold]

I see. It's weird that your component is being compiled to a (legacy) class component still - would you happen to know why that is? I can't see any specific compiler flags on your side that would cause this.

I'd love to see a minimal reproduction here, makes it a bit easier to understand why this happens.

Either way, @xeho91 I wonder if we want to relax the types to still support the deprecated SvelteComponent classes? I don't know if there are use cases for this.

[xeho91]

Either way, @xeho91 I wonder if we want to relax the types to still support the deprecated SvelteComponent classes? I don't know if there are use cases for this.

I'll give it a try once I'll get to the moment of fixing types. At the moment I'm not sure if this doable/easy to solve.