Xterm.js: 機能リクエスト：Reactコンポーネントのエクスポート

これは本当に興味深いシナリオです。 xterm.jsにはすでに十分な機能と複雑さが備わっているため、xterm.jsは可能な限り自己完結型で軽量に保つようにしています。

xtermjs / xterm-reactリポジトリとxterm-reactnpmモジュールハットを作成すると、xterm.jsをReactコンポーネントでラップするだけでうまくいくと思います。 それはどのように聞こえますか？

それは素晴らしいでしょう:)

私は本当にそれに取り組みたいのですが、パッチを適用しすぎずにコードを調整する際にいくつかの問題が見つかりました。 問題は、xtem.jsがDOMとの相互作用を大きく中継するため、ビューロジックを分離することが非常に難しいことです。

さまざまなコンポーネントがレンダリングを引き継ぐことができるように、ロジックとDOMの処理を分離する機能リクエストを作成したいと思います。 Terminal.UIをTerminalから抽出する行で、DOMへのイベントのアタッチ、要素の作成と更新などを担当するものを提案します。Terminalは、Terminal.UIがKeypressやScrollなどのイベントをトリガーするのを待ちます。レンダリングから完全に切り離される方法。 あなたはビューポートでその方向に進み始めたと思いますが、完全な分離が必要だと思います。

これについてのご意見をお聞かせください。関連性があると思われる場合に備えて、サポートさせていただきます。

このプロジェクトのコードは複雑であるため、関心の分離が将来の開発と保守に本当に役立つと信じています。私は単一責任の原則の大ファンです：smile：

@iMosesコードのモジュール化をゆっくりと試みてきましたが、モジュールをメインファイルから移動する機能が追加されたばかりです。 これもこの分離を必要とする関連する問題です： https ：//github.com/sourcelair/xterm.js/issues/266

ビューポートから始めて、さまざまな管理しやすいサウンドを維持します👍

＃285の方が適していると思いますので、議論を続けます。

@iMosesは、コアモジュールのどのメソッドがreactコンポーネントの実装を困難にしているのかわかりますか？

おそらく最良のことは、これらだけを独自のモジュールに分岐させることです。

このリストのすべてを操作するのが難しいわけではありません。たとえば、 openメソッドを使用しない場合、他の問題のあるメソッドはトリガーされませんが、それらを別のモジュールに分離する必要があると思います。 ここにリストする内容のほとんどは、Interface.jsファイルのpull-requestにあります。

ViewportとCompositionHelperには何でもありますが、それは明らかです:)

xterm.jsファイルから、これらは分離する必要がある主なメソッドです。
ぼかし、フォーカス、バインド*、initGlobal、prepareCopiedTextForClipboard、insertRow、open、loadAddon、destroy、refresh、attachCustomKeydownHandler、keyDown、evaluateKeyEscapeSequence、keyPress、bell、cancel。

'bell'および 'application-mode'は、UIロジックと対話する代わりに、イベントをトリガーする必要があります。

これがほとんどだと思いますが、コードでのUI要素の使用に注意する必要があります（たとえば、this.viewportとthis.elementをコアモジュールで直接使用しないでください。

この助けを願っています。

PS
私が言ったように、私は現在、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！ 「タブラ・ラーサ」から始めなかったらいいのにと思います。

これは、コミュニティimoによってより適切に行われるものです。問題の数を減らすために締め切りますが、誰かにこれをまとめることをお勧めします。

クローズされた問題についてコメントしてもかまいませんが、xtermjsで動作するカスタムReactレンダラーに取り組んでいます。 これは、端末出力への書き込みに使用できるいくつかの要素（ <text> 、 <line> 、 <br>など）を提供します。 これを使用するために、パッケージは、ターミナルを提供されたDOM要素にレンダリングするrender(element, HTMLElement)メソッドをエクスポートします。 また、既存のコンポーネントrenderメソッドにドロップできる<Terminal>コンポーネントを提供することにより、既存のReact-DOMプロジェクトと連携します。 このプロジェクトで何かをしたいかどうかはわかりませんが、誰かがまだ反応統合を望んでいる場合に備えて、ここでそれを強調したいと思いました：
https://github.com/alex-saunders/xterm-react-renderer

（まだ非常にWIPですが、現時点では概念実証として機能します）

@ alex-saunders声をかけてくれてありがとう、人々が探している場合に備えて、この問題にリンクを張っておくといいでしょう👌

やあ。 私はほとんどコードなしで「新しい」フックシステムを使用してreactコンポーネントをセットアップすることができました。 ただし、電子シナリオで使用する場合は、node-ptyとかなり緊密に結合されています。 クローズドな内部プロジェクトであるため、現在コードを共有することはできませんが、フックベースのソリューションを使用して問題を新たに検討することをお勧めします。それだけの価値があります。