迁移Svelte 4到5：如何转换createMarkdownLinkRenderer为函数组件？

背景 #

你基于Svelte 4类组件实现的createMarkdownLinkRenderer函数，在Svelte 5中无法直接使用——因为Svelte 5彻底移除了类组件和$set API，且你已切换至@humanspeak/svelte-markdown包，需要调整代码适配新的组件模型。

解决步骤 #

1. 改造基础组件MarkdownLinkRenderer.svelte

将原类组件改为Svelte 5的脚本组件，明确定义需要接收的props：

<script lang="ts">
  export let href: string;
  export let text: string;
  export let className = '';
</script>

<a {href} {className}>
  {text}
</a>

2. 重写createMarkdownLinkRenderer函数

不再通过继承类修改props，而是返回一个包装组件，将指定样式作为className传递给基础组件：

import MarkdownLinkRenderer from '$lib/MarkdownLinkRenderer.svelte';
import type { Component } from 'svelte';

export function createMarkdownLinkRenderer(styles: string): Component<{ href: string; text: string }> {
  // 返回接收href、text的组件，自动注入预设样式
  return function StyledMarkdownLink(props) {
    return MarkdownLinkRenderer({ ...props, className: styles });
  };
}

3. 保持原有使用方式不变

你的renderers配置和<Markdown>组件调用无需修改，依然可以按原来的方式使用：

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

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

原理说明 #

Svelte 5的组件本质是可调用的函数，@humanspeak/svelte-markdown的渲染器机制会向组件传递href、text等props。我们的工厂函数通过返回包装组件，将预设样式作为className合并到props中，最终传递给基础链接组件，实现和原代码一致的样式定制效果。

内容的提问来源于stack exchange，提问作者AlexAngc