Xterm.js: Solicitud de función: exportar componente React

Este es realmente un escenario muy interesante. Tratamos de mantener xterm.js lo más autónomo y liviano posible, ya que ya tiene suficiente funcionalidad y complejidad.

Sin embargo, creo que crear un repositorio xtermjs/xterm-react y un módulo xterm-react npm simplemente envolvería xterm.js en un componente React podría hacer el trabajo. ¿Como suena eso?

Eso seria genial :)

Realmente me gustaría trabajar en eso, pero encontré algunos problemas al ajustar el código sin hacerlo demasiado irregular. El problema es que xtem.js depende en gran medida de las interacciones con el DOM, por lo que separar la lógica de vista es extremadamente difícil.

Me gustaría hacer una solicitud de función para separar la lógica y el manejo de DOM de una manera que permita que diferentes componentes se hagan cargo de la representación. Sugiero algo en las líneas de extraer Terminal.UI de Terminal, que sería responsable de adjuntar eventos al DOM, crear y actualizar elementos, etc. Terminal esperaría a que Terminal.UI active eventos, como presionar teclas y desplazarse, que forma en que se desvincularía completamente del renderizado. Creo que empezaste a ir en esa dirección con Viewport, pero creo que se necesita una separación completa.

Me gustaría escuchar su opinión sobre esto y me gustaría ayudarlo en caso de que crea que es relevante.

Creo que debido a la complejidad del código en este proyecto, alguna separación de preocupaciones realmente podría ayudar en el desarrollo y mantenimiento futuros, y soy un gran admirador del principio de responsabilidad única :smile:

@iMoses , hemos estado tratando lentamente de modularizar el código, la capacidad de mover módulos fuera del archivo principal se acaba de agregar. Aquí hay un problema relacionado que también requiere esta separación: https://github.com/sourcelair/xterm.js/issues/266

Comenzando con viewport para mantener bien los diferentes sonidos manejables 👍

Continuando la discusión desde el n. ° 285, ya que creo que es más adecuado.

@iMoses , ¿puede decir qué métodos del módulo central le dificultan implementar el componente de reacción?

Tal vez lo mejor sería ramificar solo estos en sus propios módulos.

No es difícil trabajar con todo en esta lista, por ejemplo, si no uso el método open , entonces no se activará otro método problemático, pero sigo creyendo que deberían separarse en un módulo diferente. La mayor parte de lo que enumeraré aquí se puede encontrar en mi solicitud de extracción en el archivo Interface.js.

Cualquier cosa en Viewport y CompositionHelper, pero eso es obvio :)

Del archivo xterm.js, estos son los métodos principales que deben separarse:
difuminar, enfocar, enlazar*, initGlobal, prepararCopiedTextForClipboard, insertar fila, abrir, cargar complemento, destruir, actualizar, adjuntar CustomKeydownHandler, tecla abajo, evaluar KeyEscapeSequence, presionar tecla, campana, cancelar.

'bell' y 'application-mode' deberían desencadenar eventos en lugar de interactuar con la lógica de la interfaz de usuario.

Creo que esto es la mayor parte, pero debemos tener cuidado con los usos del elemento UI en el código (por ejemplo, this.viewport y this.element nunca deben usarse directamente por el módulo principal).

Espero que esto ayude.

PD
Como dije, actualmente estoy trabajando en un ejemplo de Reach XTerm.js, para el cual reduje la biblioteca xterm a solo lo esencial que necesito. Terminaré en menos de una semana, espero, y luego compartiré mi código con ustedes para que lo revisen.
Actualmente funciona muy bien en mi máquina, con las siguientes excepciones: aún no adjunté eventos del mouse, tengo un problema menor de representación que tendré que solucionar reescribiendo partes de refresh debido al hecho de que Quiero que React maneje la lógica de renderizado y no la biblioteca.

Espero que esto ayude

Podría ser bueno consultar https://github.com/sourcelair/xterm.js/issues/266 antes de intentar abordar esto

Si separamos entre la lógica del núcleo y la lógica de la interfaz de usuario, el núcleo se puede inicializar sin preocuparse por el dom y solo cuando sea necesario se puede inicializar la vista, pasándole una instancia de núcleo de terminal para trabajar.

Estoy intentando probar los eventos del mouse para ver que no rompí nada, y no puedo encontrar una aplicación de terminal con soporte completo del mouse que incluya el movimiento del mouse, por ejemplo. ¿Con qué están probando esta biblioteca para verificar que los eventos del mouse funcionen correctamente?

De hecho, creé un paquete npm para un componente react-xterm.
Puedes empezar desde allí.
Incluso puedo transferir el proyecto fuente de github si lo deseo
https://github.com/farfromrefug/react-xterm

Gracias @farfromrefug! Sería genial si no empezáramos con "tabula rasa".

Esto es algo que sería mejor que hiciera la comunidad en mi opinión, estoy cerrando para reducir nuestro número de problemas, pero animo a alguien a que lo organice.

Espero que no le moleste que comente un problema cerrado, pero he estado trabajando en un renderizador React personalizado para trabajar con xtermjs. Proporciona una serie de elementos (como <text> , <line> , <br> ) que se pueden usar para escribir en la salida del terminal. Para usarlo, el paquete exporta un método render(element, HTMLElement) que representa un terminal en un elemento DOM proporcionado. También funciona con proyectos React-DOM existentes al proporcionar un componente <Terminal> que se puede colocar en cualquier método de componentes existentes render . No estoy seguro si desea hacer algo con este proyecto, pero pensé en resaltarlo aquí en caso de que alguien todavía quiera una integración de reacción:
https://github.com/alex-saunders/xterm-react-renderer

(todavía es un WIP pero funciona como una prueba de concepto en este momento)

@alex-saunders gracias por mencionarlo, es bueno tener un enlace en este número en caso de que la gente esté buscando 👌

Hola. Pude configurar un componente de reacción casi sin código y usando el "nuevo" sistema de ganchos. Sin embargo, está estrechamente acoplado con node-pty para su uso en escenarios de electrones. No puedo compartir ningún código en este momento, ya que es un proyecto interno cerrado, pero animo a todos a que tomen una nueva oportunidad del problema usando una solución basada en ganchos. ¡Vale la pena!