Início / coding / Perguntas / 79492949
Accepted
AlexAngc
Asked: 2025-03-08 00:43:25 +0800 CST

Converter sintaxe de herança de componente para componente de função Svelte 5

  • 772

Estou migrando minha base de código do Svelte 4 para o Svelte 5.

Eu tinha o seguinte código:

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

Que foi usado como renderizador com o svelte-markdownpacote (substituído por @humanspeak/svelte-markdownpara compatibilidade com 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} />

Como posso converter meu createMarkdownLinkRendererpara funcionar com o Svelte 5, já que componentes não são mais classes?

svelte

1 respostas

  1. Best Answer

    Não tenho certeza se há uma solução realmente limpa para isso. Uma maneira de fazer isso seria confiar na estrutura de função interna dos componentes. Como esse é um detalhe de implementação, não há garantias de que a estrutura permanecerá assim.

    As funções de componente atualmente recebem dois argumentos, o primeiro é o nó para renderizar o componente, o segundo é uma coleção de props. Você pode unir diretamente sua propriedade de estilo a eles:

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

    Exemplo de playground

    • 1

relate perguntas