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 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);
};
}