Markstream React

Visão Geral

Integre o renderizador beta do React ao React 18+ ou Next.js sem cruzar limites cliente/servidor ou recorrer ao controle de AST desnecessariamente.

Quando Usar

Use para configuração React/Next, pontos de entrada root/next/server, streaming, substituições de componentes ou suporte à migração. Combine com markstream-migration para substituição do renderizador.

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 de escopo material ou decisão de adoção de beta/alfa não resolvida.

1. Confirme React 18+ e a aceitação de um pacote beta.
2. Instale apenas os peers solicitados e importe markstream-react/index.css.
3. Use o ponto de entrada root para renderização do cliente, /next para componentes específicos do Next e /server para renderização do servidor sem hooks do cliente.
4. Comece com content e smoothStreaming="auto"; use nodes mais final apenas quando outra camada for responsável pelo parsing.
5. Para chat ao vivo, desative o fade e ative o cursor. Ao concluir, defina final, desative o pacing/cursor e ative o fade apenas se desejado.
6. Mantenha os peers exclusivos do navegador dentro de 'use client', ssr: false dinâmico ou outro limite mínimo.
7. Prefira streamingComponents para tags com parser e htmlComponents para props sanitizadas. Use substituições de registro com escopo para nós embutidos.
8. Mantenha htmlPolicy="safe" e Mermaid estritos; valide os caminhos do cliente, servidor e incrementais.

Exemplo

'use client' // Required when this example is used in a Next.js App Router client boundary

import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'

export function StreamingAnswer({
  content,
  isDone,
}: {
  content: string
  isDone: boolean
}) {
  return (
    <MarkdownRender
      content={content}
      final={isDone}
      fade={isDone}
      typewriter={!isDone}
      smoothStreaming={isDone ? false : 'auto'}
      htmlPolicy="safe"
    />
  )
}

Limitações

• O pacote está em beta e requer React 18+.
• Peers exclusivos do navegador exigem limites do cliente sob SSR.
• Paridade complexa de parser requer revisão de migração separada.

Notas de Segurança e Proteção

Revise as dependências e nunca opte pela saída de modelos não confiáveis em HTML confiável ou renderização de diagramas solta.

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 concluídos, Markdown malformado/não confiável, links e URLs de imagem, cancelamento e movimento reduzido. HTML seguro e diagramas estritos reduzem a exposição, mas não garantem por si só a privacidade de URL/rede ou as permissões de componentes da aplicação.