Convert component inheritance syntax to Svelte 5 function component - Stack Overflow

admin管理员组

文章数量:1405516

I am migrating my codebase from Svelte 4 to Svelte 5.

I had the following code:

import MarkdownLinkRenderer from '$lib/MarkdownLinkRenderer.svelte';

export function createMarkdownLinkRenderer(styles: string) {
  return class extends MarkdownLinkRenderer {
    constructor(options: { target: Element; props: { href: string; text: string } }) {
      super(options);
      this.$set({ className: styles });
    }
  };
}

Which was used as renderer with the svelte-markdown package (replaced by @humanspeak/svelte-markdown for compatibility with Svelte 5):

<script lang="ts">
  const renderers = {
    link: createMarkdownLinkRenderer('text-blue-56 hover:underline')
  };
</script>

<Markdown source={notification.message} options={{ gfm: true, breaks: true }} {renderers} />

How can I convert my createMarkdownLinkRenderer to work with Svelte 5, since components are no longer classes?

I am migrating my codebase from Svelte 4 to Svelte 5.

I had the following code:

import MarkdownLinkRenderer from '$lib/MarkdownLinkRenderer.svelte';

export function createMarkdownLinkRenderer(styles: string) {
  return class extends MarkdownLinkRenderer {
    constructor(options: { target: Element; props: { href: string; text: string } }) {
      super(options);
      this.$set({ className: styles });
    }
  };
}

Which was used as renderer with the svelte-markdown package (replaced by @humanspeak/svelte-markdown for compatibility with Svelte 5):

<script lang="ts">
  const renderers = {
    link: createMarkdownLinkRenderer('text-blue-56 hover:underline')
  };
</script>

<Markdown source={notification.message} options={{ gfm: true, breaks: true }} {renderers} />

How can I convert my createMarkdownLinkRenderer to work with Svelte 5, since components are no longer classes?

• svelte
• svelte-component

Share Follow asked Mar 7 at 16:43 AlexAngcAlexAngc 37322 gold badges44 silver badges1313 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I am not sure there is a really clean solution to this. One way of doing it would be to rely on the internal function structure of components. Since this is an implementation detail, there are no guarantees that the structure will stay this way.

Component functions currently take two arguments, the first is the node to render the component to, the second is a collection of props. You could directly join your styling property into those:

export function createMarkdownLinkRenderer(styles: string) {
    return (anchor, props, ...rest) => {
        const joinedProps = { ...props, className: styles };
        return MarkdownLinkRenderer(anchor, joinedProps, ...rest);
    };
}

Playground example

本文标签： Convert component inheritance syntax to Svelte 5 function componentStack Overflow