add support for svelte 5

[itssumitrai]

add support for svelte 5 by updating peer dependencies

[RonB]

To really support svelte 5 a refactor of the code should be done I think. I think that svelte 5 components now are classes and not functions. So if for instance rendering special parts of the markdown to SvelteComponents (which I think is brilliant) using tokenizers and renderers, we will need svelte 3 or 4 components, otherwise it will not work.

[itssumitrai]

To really support svelte 5 a refactor of the code should be done I think. I think that svelte 5 components now are classes and not functions. So if for instance rendering special parts of the markdown to SvelteComponents (which I think is brilliant) using tokenizers and renderers, we will need svelte 3 or 4 components, otherwise it will not work.

Thanks @RonB I will try it out

[memark]

I think you can still use the old class syntax though, right? Just being able to try out Svelte 5 without removing this component would have great value.

[itssumitrai]

Hi @RonB @memark I got back to finally trying this out on Svelte 5 app, and I can confirm even with Svelte 5, this pkg works. So, this change is enough to make it work with Svelte 5 projects.

If we wanted a completely svelte 5 project, then there are some changes which need to be done, explicitly old deps need to be updated, and usage of createEventDispatcher need to be removed with a callback prop.

But for now, merging this change to be svelte 5 compatible should be good ?

[itssumitrai]

cc @pablo-abc I would like to try out svelte 5 for my app, but this dependency is currently blocking. It would be great if we can get this merged. Thanks.

[itssumitrai]

Sorry for bugging again @pablo-abc but this is a blocker for us to try out svelte 5 for our app, would you be able to take a look ? Thanks

[memark]

Easiest way to Svelte 5 is adding this to your lock file:

  "overrides": {
    "svelte-markdown": {
      "svelte": "^5.0.0"
    }
  }

[RonB]

Thanks for the tip. Svelte 5.0.0 is released so we can use that for now. A refractor still is needed i think. How do you feel about that?

[memark]

I'm only upgrading an existing application for a client. I don't know much about this component to be honest.

But as far as I've understood it there are very few breaking changes in Svelte 5. There are some deprecations, but they won't be removed until Svelte 6 (at the earliest).

If you want to upgrade preemptively, here is a guide https://svelte.dev/docs/svelte/v5-migration-guide

[jycouet]

Yep, you be nice to have a release with svelte 5 as valid peer. Then, in a second effort, embracing runes.

[amosjyng]

Type checking doesn't work for me on Svelte 5:

Error: Type 'Component<Props, {}, "">' is not assignable to type 'InstantiableSvelteComponentTyped<Partial<Omit<Tokens.Code, "type">>, any, any>'.
  Type 'Component<Props, {}, "">' provides no match for the signature 'new (...args: any[]): SvelteComponentTyped<Partial<Omit<Tokens.Code, "type">>, any, any>'. (ts)
  <div class="markdown">
    <SvelteMarkdown source={message.text} renderers={{ code: CodeRender }} />
  </div>

My code:

<SvelteMarkdown source={message.text} renderers={{ code: CodeRender }} />

where CodeRender is another component I have.

Any ideas?

[memark]

@amosjyng Did this not have any effect for you? https://github.com/pablo-abc/svelte-markdown/pull/93#issuecomment-2431603988

[amosjyng]

@memark I'm using yarn, so I didn't get any conflicts with peer dependencies that required overrides in the first place. My yarn.lock file already only has one version of svelte listed:

svelte@^5.0.0:
  version "5.1.13"
  resolved "https://registry.yarnpkg.com/svelte/-/svelte-5.1.13.tgz#34b5e511d0e2eb36a0f0da77d8d21f3fc143ffe6"
  ...

[jstjoe]

Hey @pablo-abc would you be willing to add someone else as a maintainer? Really appreciate the work you put into this package but it looks like you no longer have time for it - given the last contribution & release in December 2023 and all of the unanswered Issues. Totally understand, life and all. I'm sure there are several of us who would be happy to help keep it going though, as it seems like a lot of us value it and depend on it.

Otherwise unfortunately I think we need to fork this repo to keep it moving forward, folks.

[memark]

Type checking doesn't work for me on Svelte 5:

Error: Type 'Component<Props, {}, "">' is not assignable to type 'InstantiableSvelteComponentTyped<Partial<Omit<Tokens.Code, "type">>, any, any>'.
  Type 'Component<Props, {}, "">' provides no match for the signature 'new (...args: any[]): SvelteComponentTyped<Partial<Omit<Tokens.Code, "type">>, any, any>'. (ts)
  <div class="markdown">
    <SvelteMarkdown source={message.text} renderers={{ code: CodeRender }} />
  </div>

My code:

<SvelteMarkdown source={message.text} renderers={{ code: CodeRender }} />

where CodeRender is another component I have.

Any ideas?

@amosjyng Creating a new project with npx sv create (with yarn) and then using your code line together with the ImageComponent from the docs gives no error. I'm assuming your CodeRenderer is somehow different. What does your CodeRenderer look like? Could you provide an MRE?