TermDOM cria interfaces de terminal com HTML e CSS
O que é TermDOM
TermDOM é uma biblioteca JavaScript que renderiza HTML e CSS diretamente no terminal. Ela utiliza um DOM real, com cascade e motor de layout próprios, desenhando nós DOM na saída do terminal e redesenhando a tela automaticamente quando há mutações. Isso permite escrever interfaces de terminal (TUIs) e CLIs interativos com JavaScript vanilla ou qualquer framework web.
Como funciona
A biblioteca é instalada via npm (@b9g/termdom). Após instanciar e anexar o objeto TermDOM, o desenvolvedor recebe um documento DOM real. Folhas de estilo em elementos <style> e atributos style cascateiam e herdam como no navegador, sendo traduzidas para escapes ANSI de cor e decoração de texto. O modelo de caixa CSS, flexbox e layout de tabela são suportados, com dimensões resolvidas em células inteiras do terminal.
Cada célula do terminal corresponde a 1ch de largura e 1px de altura. Mutações no DOM disparam re-renderização automática, sem necessidade de chamadas manuais de renderização.
Recursos suportados
A biblioteca cobre um conjunto amplo de funcionalidades:
- Texto: suporte a CJK, emoji, caracteres combinantes, hebraico e árabe com ordem visual e modelagem contextual; o cursor se move por grafema.
- Rolagem: documentos maiores que o terminal rolam com
window.scrollTo()eelement.scrollIntoView(). - Eventos: teclado, mouse, foco e colagem disparam eventos em elementos, no documento e na janela, lidos de STDIN.
- Utilitários DOM:
querySelector(),MutationObserver,ResizeObserveregetBoundingClientRect()conectados ao motor de layout e ao viewport. - Formulários:
<input>,<textarea>,<select>, checkboxes e radios com comportamento padrão e aparência nativa de terminal, reestilizáveis com CSS. Navegação por Tab e estilos:focussão suportados. - Web Components:
customElements.define(),attachShadow(),<slot>,:hoste estilos com escopo funcionam como no navegador. - Seleção: arrastar para selecionar, estilizado com
::selection. - Tela cheia:
Element.requestFullscreen()renderiza um elemento na tela alternativa do terminal. - Entrada de texto real: elementos
<input>com foco, cursor real do terminal e suporte a métodos de entrada CJK (IME).
Interatividade
A interatividade é feita exclusivamente via eventos DOM. O texto demonstra um exemplo de navegador de arquivos estilo NERDTree em cerca de 200 linhas de JavaScript vanilla, usando querySelectorAll, classList, keydown e scrollIntoView().
Compatibilidade e diferenciação
A matriz de compatibilidade é gerada por uma suíte de sondas: cada API DOM, seletor e propriedade CSS é aplicada a um documento real e renderizada, registrando se a saída mudou.
O projeto se distingue explicitamente do DomTerm, de Per Bothner, que é o inverso: DomTerm coloca um terminal dentro do DOM, enquanto TermDOM coloca o DOM dentro do terminal. TermDOM é licenciado sob MIT.