Markstream Vue 2 Vite

Visão Geral

Use o empacotamento de workers nativo do Vite, mantendo a compatibilidade com Vue 2 e a segurança de renderização.

Quando Usar

Use quando o host for Vue 2 com Vite e precisar de workers Mermaid ou KaTeX empacotados. Use a habilidade genérica do Vue 2 quando o comportamento do worker/empacotador for irrelevante.

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 de rotina de código-fonte/dependências; busque aprovação apenas para uma expansão de escopo material ou decisão não resolvida de adoção beta/alfa.

1. Confirme Vue 2 com Vite e instale apenas os peers solicitados.
2. Importe markstream-vue2/index.css após as camadas de reset, Tailwind ou UnoCSS.
3. Use os pontos de entrada de worker do pacote com importações Vite ?worker ou ?worker&inline apenas quando necessário.
4. Adicione @vue/composition-api apenas para código Vue 2.6 que o exija.
5. Mantenha content com streaming suave para chat; defina final e desabilite o pacing/cursor para histórico.
6. Use nodes apenas para análise de propriedade externa. Mantenha o HTML seguro e o Mermaid estrito.
7. Valide a compilação do Vite e o caminho de carregamento do worker.

Exemplo

<script>
import MarkdownRender from 'markstream-vue2'
import 'markstream-vue2/index.css'

export default {
  components: { MarkdownRender },
  props: { content: String, done: Boolean },
}
</script>

<template>
  <MarkdownRender
    :content="content"
    :final="done"
    :fade="done"
  />
</template>

Limitações

• A sintaxe de worker do Vite não é portátil para Vue CLI/Webpack 4.
• Workers em linha podem aumentar o tamanho do pacote.
• Peers opcionais podem impor requisitos adicionais de navegador.

Notas de Segurança e Proteção

Revise o código-fonte do worker, CSP, alterações de dependência e impacto do pacote. Não relaxe os padrões de renderização segura.

Verifique props, caminhos de exportação e intervalos de peers em relação ao pacote instalado, não a um main upstream mutável. Teste fluxos 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 por si só a privacidade de URL/rede ou as permissões de componentes de aplicação.

Vue 2 está no fim de vida; preserve uma integração legada solicitada e documente sua decisão de manutenção/suporte em vez de atualizar silenciosamente toda a aplicação. Prefira workers empacotados localmente e revisados em vez de código CDN mutável onde for viável.