Xterm.js: 기능 요청: React 컴포넌트 내보내기

이것은 정말 정말 흥미로운 시나리오입니다. 우리는 xterm.js가 이미 충분한 기능과 복잡성을 가지고 있기 때문에 가능한 한 독립적이고 가벼운 상태로 유지하려고 노력합니다.

xtermjs/xterm-react 리포지토리와 xterm-react npm 모듈 모자를 만드는 것이 React 구성 요소에서 xterm.js를 래핑하면 작업을 수행할 수 있다고 생각합니다. 어떻게 들리나요?

그것은 좋을 것입니다 :)

나는 정말로 그것에 대해 작업하고 싶지만 너무 패치를 만들지 않고 코드를 조정하는 데 몇 가지 문제를 발견했습니다. 문제는 xtem.js가 DOM과의 상호 작용에 크게 의존하기 때문에 뷰 로직을 분리하는 것이 매우 어렵다는 것입니다.

다른 구성 요소가 렌더링을 인계받을 수 있는 방식으로 로직과 DOM 처리를 분리하는 기능을 요청하고 싶습니다. 나는 DOM에 이벤트를 첨부하고, 요소를 생성 및 업데이트하는 등의 책임이 있는 터미널에서 Terminal.UI를 추출하는 라인에서 무언가를 제안합니다. 터미널은 Terminal.UI가 키 누르기 및 스크롤과 같은 이벤트를 트리거할 때까지 기다립니다. 렌더링에서 완전히 분리되는 방식입니다. 뷰포트를 사용하여 그 방향으로 가기 시작했다고 생각하지만 완전한 분리가 순서대로 진행되어야 한다고 생각합니다.

이에 대한 귀하의 생각을 듣고 싶습니다. 관련성이 있다고 생각되는 경우 도움이 되었으면 합니다.

저는 이 프로젝트의 코드가 복잡하기 때문에 약간의 관심 분리가 향후 개발 및 유지 관리에 실제로 도움이 될 수 있다고 믿으며 단일 책임 원칙의 열렬한 팬입니다.

@iMoses 우리는 천천히 코드를 모듈화하려고 노력해 왔으며, 기본 파일에서 모듈을 이동하는 기능이 방금 추가되었습니다. 다음은 이러한 분리를 요구하는 관련 문제입니다. https://github.com/sourcelair/xterm.js/issues/266

다양한 관리 가능한 사운드를 좋게 유지하기 위해 뷰포트부터 시작합니다 👍

더 적합하다고 생각하므로 #285부터 논의를 계속합니다.

@iMoses 핵심 모듈의 어떤 메서드가 반응 구성 요소를 구현하기 어렵게 만드는지 알 수 있습니까?

아마도 가장 좋은 것은 자체 모듈에서 이들만 분기하는 것입니다.

이 목록에 있는 모든 것이 작업하기 어려운 것은 아닙니다. 예를 들어 open 메서드를 사용하지 않으면 다른 문제가 있는 메서드가 트리거되지 않지만 여전히 다른 모듈로 분리되어야 한다고 생각합니다. 여기에 나열할 대부분의 내용은 Interface.js 파일의 pull-request에서 찾을 수 있습니다.

Viewport 및 CompositionHelper의 모든 것이지만 그건 분명합니다. :)

xterm.js 파일에서 분리해야 하는 주요 메소드는 다음과 같습니다.
흐림, 초점, 바인드*, initGlobal, prepareCopiedTextForClipboard, insertRow, 열기, loadAddon, 파괴, 새로 고침, attachCustomKeydownHandler, keyDown, 평가키EscapeSequence, keyPress, 벨, 취소.

'bell' 및 'application-mode'는 UI 로직과 상호작용하는 대신 이벤트를 트리거해야 합니다.

이것이 대부분이라고 생각하지만 코드에서 UI 요소의 사용을 주의해야 합니다(예: this.viewport 및 this.element는 코어 모듈에서 직접 사용해서는 안 됩니다.

도움이 되기를 바랍니다.

추신
제가 말했듯이 저는 현재 Reach XTerm.js 예제를 작업 중이며 xterm 라이브러리를 필요한 필수 요소로만 제거했습니다. 1주일 이내에 완료하고 검토할 수 있도록 내 코드를 공유하겠습니다.
현재 내 컴퓨터에서 훌륭하게 작동하지만 다음과 같은 예외가 있습니다. 아직 마우스 이벤트를 첨부하지 않았습니다. 사소한 렌더링 문제가 있습니다 refresh React가 라이브러리가 아닌 렌더링 로직을 처리하기를 바랍니다.

도움이 되었기를 바랍니다

이 문제를 해결하기 전에 https://github.com/sourcelair/xterm.js/issues/266 을 살펴보는 것이 좋습니다.

코어 로직과 UI 로직을 분리하면 dom에 대한 걱정 없이 코어를 초기화할 수 있고 필요할 때만 뷰를 초기화하여 작업할 터미널 코어 인스턴스를 전달할 수 있습니다.

나는 아무 것도 깨뜨리지 않았는지 확인하기 위해 마우스 이벤트를 테스트하려고 시도하고 있으며 예를 들어 마우스 이동을 포함하는 완전한 마우스 지원이 있는 터미널 응용 프로그램을 찾을 수 없습니다. 마우스 이벤트가 제대로 작동하는지 확인하기 위해 이 라이브러리를 무엇에 대해 테스트하고 있습니까?

실제로 react-xterm 구성 요소에 대한 npm 패키지를 만들었습니다.
거기에서 시작할 수 있습니다.
원한다면 github 소스 프로젝트를 전송할 수도 있습니다.
https://github.com/farfromrefug/react-xterm

@farfromrefug 감사합니다! "tabula rasa"로 시작하지 않았다면 좋았을 것입니다.

이것은 커뮤니티에서 더 잘 수행할 수 있는 것입니다. 문제 수를 줄이기 위해 닫고 있지만 누군가가 이것을 함께 구성할 것을 권장합니다.

내가 닫힌 문제에 대해 논평하는 것에 신경 쓰지 않기를 바랍니다. 하지만 저는 xtermjs와 함께 작동하는 사용자 정의 React 렌더러를 작업하고 있습니다. 터미널 출력에 쓰는 데 사용할 수 있는 여러 요소(예: <text> , <line> , <br> )를 제공합니다. 이를 사용하기 위해 패키지는 제공된 DOM 요소에 터미널을 렌더링하는 render(element, HTMLElement) 메서드를 내보냅니다. 또한 기존 구성 요소 render 메서드에 삭제할 수 있는 <Terminal> 구성 요소를 제공하여 기존 React-DOM 프로젝트와 함께 작동합니다. 이 프로젝트로 무엇을 하고 싶은지 확실하지 않지만 누군가가 여전히 반응 통합을 원하는 경우를 대비하여 여기에서 강조 표시할 것이라고 생각했습니다.
https://github.com/alex-saunders/xterm-react-renderer

(여전히 WIP이지만 현재로서는 개념 증명으로 작동합니다.)

@alex-saunders 불러주셔서 감사합니다. 사람들이 찾고 있는 경우를 대비하여 이 문제에 대한 링크가 있으면 좋습니다. 👌

안녕. 코드가 거의 없고 "새로운" 후크 시스템을 사용하여 반응 구성 요소를 설정할 수 있었습니다. 그러나 전자 시나리오에서 사용하기 위해 node-pty와 다소 밀접하게 결합되어 있습니다. 폐쇄된 내부 프로젝트이기 때문에 지금은 코드를 공유할 수 없지만 후크 기반 솔루션을 사용하여 문제에 대해 새로운 시각을 갖도록 모든 사람을 권장합니다. 그만한 가치가 있습니다!