Markstream Svelte

Visão Geral

Integre o Markstream usando runes do Svelte 5 e limites de navegador seguros do SvelteKit.

Quando Usar

Use para configuração de pacotes do Svelte 5 ou SvelteKit, streaming de estado, workers ou componentes customizados com escopo. Svelte 4 não é suportado.

Fluxo de Trabalho

Inspecione o gerenciador de pacotes existente, a versão do pacote instalado e as convenções do projeto. Uma integração com escopo solicitada já autoriza edições rotineiras de código-fonte/dependências; busque aprovação apenas para uma expansão material do escopo ou decisão não resolvida de adoção de beta/alfa.

1. Confirme o Svelte 5 e a aceitação de um pacote beta.
2. Instale apenas os peers solicitados; importe o CSS do pacote após os resets e o CSS do KaTeX apenas para matemática.
3. Comece com <MarkdownRender {content} /> e streaming suave auto.
4. Para chat ao vivo, desative o fade e opte pelo cursor; ao concluir, defina final, desative o pacing/cursor e ative o fade apenas se desejado.
5. Use nodes apenas para parsing de propriedade de worker ou estado AST compartilhado.
6. Use $props() e callbacks. Configure workers KaTeX ou Mermaid apenas quando solicitado.
7. Prefira customComponents local do renderer; use registro com escopo apenas quando o compartilhamento for intencional.
8. Mantenha workers apenas para navegador atrás dos limites do cliente do SvelteKit; valide com svelte-check, build ou e2e.

Exemplo

<script lang="ts">
  import MarkdownRender from 'markstream-svelte'
  import 'markstream-svelte/index.css'

  let { content, isDone }: { content: string; isDone: boolean } = $props()
</script>

<MarkdownRender
  {content}
  final={isDone}
  fade={isDone}
  typewriter={!isDone}
  smoothStreaming={isDone ? false : 'auto'}
  htmlPolicy="safe"
/>

Limitações

• Svelte 4 não é suportado e o pacote está em beta.
• Workers e peers pesados exigem suporte de bundler no lado do cliente.
• Esta habilidade não migra arquitetura Svelte não relacionada.

Notas de Segurança e Proteção

Mantenha HTML seguro e padrões estritos do Mermaid. Revise dependências e nunca execute peers apenas para navegador durante o SSR.

Verifique props, caminhos de exportação e intervalos de peers contra o pacote instalado, não um main upstream mutável. Teste streams parciais e completos, Markdown malformado/não confiável, links e URLs de imagem, cancelamento e redução de movimento. HTML seguro e diagramas estritos reduzem a exposição, mas não impõem sozinhos a privacidade de URL/rede ou as permissões de componentes da aplicação.