storyblok / storyblok-svelte

Svelte SDK for Storyblok CMS
MIT License
83 stars 12 forks source link

Incorrect SvelteComponent type for Svelte 4? #595

Closed jenseo closed 1 year ago

jenseo commented 1 year ago

Describe the issue you're facing

Hello, we are right now migrating our project to Svelte 4, but have a typing issue that seems to be coming from @storyblok/svelte.

According to the migration guide section here:

https://svelte.dev/docs/v4-migration-guide#sveltecomponenttyped-is-deprecated

...the typeof SvelteComponent instance now need to be typed like this: typeof SvelteComponent<any>

I believe the type here has to be changed from typeof SvelteComponent to typeof SvelteComponent<any>:

https://github.com/storyblok/storyblok-svelte/blob/main/lib/pkg/types.ts#L4C1-L6C2

Without this change, when we initialize our components in storyblokInit like this:

import Article from '$lib/components/Article.svelte';

storyblokInit(
    {
    ...
        components: {
            Article,
        }
    ...
    }
)

...we get the following type error:

Type 'typeof Article__SvelteComponent_' is not assignable to type 'typeof SvelteComponent'.
  Types of construct signatures are incompatible.
    Type 'new (options: ComponentConstructorOptions<{ blok: ArticleStoryblok; }>) => Article__SvelteComponent_' is not assignable to type 'new <Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>(options: ComponentConstructorOptions<Props>) => SvelteComponent<...>'.
      Types of parameters 'options' and 'options' are incompatible.
        Type 'ComponentConstructorOptions<Props>' is not assignable to type 'ComponentConstructorOptions<{ blok: ArticleStoryblok; }>'.
          Type 'Props' is not assignable to type '{ blok: ArticleStoryblok; }'.
            Property 'blok' is missing in type 'Record<string, any>' but required in type '{ blok: ArticleStoryblok; }'

Reproduction

https://stackblitz.com/edit/vitejs-vite-tm3h2e?file=src%2FApp.svelte

Steps to reproduce

End the terminal session (ctrl + c) in the StackBlitz project and then run npm run check in the same terminal.

System Info

Svelte 4, latest Sveltekit, latest @storyblok/svelte

Used Package Manager

npm

Error logs (Optional)

No response

Validations

roberto-butti commented 1 year ago

Thank you @jenseo for the feedback. I 'm going to look into that.

roberto-butti commented 1 year ago

i opened a PR #599 . if you want to provide any feedback or test it (cloning locally the branch and trying to use it), please let me know.

roberto-butti commented 1 year ago

closed with #599

perjo927 commented 1 year ago

Thanks!