Convert component inheritance syntax to Svelte 5 function component

Question

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?

brunnerh · Accepted Answer · 2025-03-07 22:56:58Z

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

answered Mar 7 at 22:56

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Convert component inheritance syntax to Svelte 5 function component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related