Xterm.js: Solicitação de recurso: exporte o componente React

Este é realmente um cenário muito interessante. Tentamos manter o xterm.js o mais autocontido e leve possível, já que ele já possui bastante funcionalidade e complexidade.

Eu acho que criar um repositório xtermjs/xterm-react e um módulo xterm-react npm que apenas envolveria xterm.js em um componente React poderia fazer o trabalho. Como isso soa?

Isso seria bom :)

Eu realmente gostaria de trabalhar nisso, mas encontrei alguns problemas ao ajustar o código sem torná-lo muito irregular. O problema é que o xtem.js retransmite fortemente as interações com o DOM, portanto, separar a lógica de visualização é extremamente difícil.

Eu gostaria de fazer uma solicitação de recurso para separar a lógica e o manuseio do DOM de uma maneira que permita que diferentes componentes assumam a renderização. Sugiro algo nas linhas de extração de Terminal.UI do Terminal, que seria responsável por anexar eventos ao DOM, criar e atualizar elementos, etc. maneira que seria dissociado da renderização completamente. Acho que você começou a ir nessa direção com o Viewport, mas acredito que uma separação completa está em ordem.

Gostaria de saber sua opinião sobre isso e gostaria de ajudar caso você ache relevante.

Acredito que para a complexidade do código neste projeto, alguma separação de interesses poderia realmente ajudar no desenvolvimento e manutenção futuros, e sou um grande fã do princípio de responsabilidade única :smile:

@iMoses estamos tentando modularizar lentamente o código, a capacidade de mover módulos para fora do arquivo principal acabou de ser adicionada. Aqui está um problema relacionado que também exige essa separação: https://github.com/sourcelair/xterm.js/issues/266

Começando com viewport para manter os diferentes sons gerenciáveis ​​bons 👍

Continuando a discussão do nº 285, acho que é mais adequado.

@iMoses você pode dizer quais métodos do módulo principal dificultam a implementação do componente react?

Talvez a melhor coisa seja ramificar apenas estes em seus próprios módulos.

Nem tudo nesta lista é difícil de trabalhar, por exemplo, se eu não usar o método open , outro método problemático não será acionado, mas ainda acredito que eles devem ser separados em um módulo diferente. A maior parte do que vou listar aqui pode ser encontrada no meu pull-request no arquivo Interface.js.

Qualquer coisa em Viewport e CompositionHelper, mas isso é óbvio :)

Do arquivo xterm.js estes são os principais métodos que devem ser separados:
blur, focus, bind*, initGlobal, prepareCopiedTextForClipboard, insertRow, open, loadAddon, destroy, refresh, attachCustomKeydownHandler, keyDown,valuKeyEscapeSequence, keyPress, bell, cancel.

'bell' e 'application-mode' devem acionar eventos em vez de interagir com a lógica da interface do usuário.

Acredito que seja a maior parte, mas precisamos ficar atentos aos usos do elemento de interface do usuário no código (por exemplo, this.viewport e this.element nunca devem ser usados ​​diretamente pelo módulo principal.

Espero que esta ajuda.

PS
Como eu disse, atualmente estou trabalhando em um exemplo do Reach XTerm.js, para o qual reduzi a biblioteca xterm apenas ao essencial de que preciso. Terei terminado em menos de uma semana, espero, e então compartilharei meu código com você para revisão.
Atualmente, funciona muito bem na minha máquina, com as seguintes exceções: ainda não anexei eventos de mouse, tenho um pequeno problema de renderização que precisarei corrigir reescrevendo partes de refresh durante o fato de que Eu quero que o React lide com a lógica de renderização e não com a biblioteca.

Espero que isto ajude

Pode ser bom dar uma olhada em https://github.com/sourcelair/xterm.js/issues/266 antes de tentar resolver isso

Se separarmos a lógica do núcleo e a lógica da interface do usuário, o núcleo pode ser inicializado sem se preocupar com o dom e somente quando necessário a visualização pode ser inicializada, passando-se uma instância do núcleo do terminal para trabalhar.

Estou tentando testar os eventos do mouse para ver que não quebrei nada e não consigo encontrar um aplicativo de terminal com suporte completo ao mouse com inclui movimento do mouse, por exemplo. Com o que vocês estão testando esta biblioteca para verificar se os eventos do mouse estão funcionando corretamente?

Na verdade, criei um pacote npm para um componente react-xterm.
Você pode começar a partir daí.
Eu posso até transferir o projeto fonte do github se quiser
https://github.com/farfromrefug/react-xterm

Obrigado @farfromrefug! Seria ótimo se não começássemos com "tabula rasa".

Isso é algo que seria melhor feito pela comunidade imo, estou encerrando para reduzir nossa contagem de problemas, mas encorajo alguém a juntar isso.

Espero que você não se importe de comentar sobre um problema fechado, mas tenho trabalhado em um renderizador React personalizado para trabalhar com xtermjs. Ele fornece vários elementos (como <text> , <line> , <br> ) que podem ser usados ​​para gravar na saída do terminal. Para usá-lo, o pacote exporta um método render(element, HTMLElement) que renderiza um terminal para um elemento DOM fornecido. Ele também funciona com projetos React-DOM existentes, fornecendo um componente <Terminal> que pode ser descartado em qualquer componente existente no método render . Não tenho certeza se você quer fazer alguma coisa com este projeto, mas pensei em destacá-lo aqui caso alguém ainda queira uma integração de reação:
https://github.com/alex-saunders/xterm-react-renderer

(ainda é um WIP, mas funciona como uma prova de conceito no momento)

@alex-saunders obrigado por avisar, é bom ter um link nesta edição caso as pessoas estejam procurando 👌

Oi. Consegui configurar um componente react com quase nenhum código e usando o "novo" sistema de ganchos. No entanto, é bastante acoplado ao node-pty para uso em cenários de elétrons. Não posso compartilhar nenhum código agora, pois é um projeto interno fechado, mas encorajo todos a tentarem resolver o problema usando uma solução baseada em gancho - vale a pena!