Xterm.js: Permintaan fitur: ekspor komponen React

Ini benar-benar skenario yang sangat menarik. Kami mencoba untuk menjaga xterm.js sebagai mandiri dan seringan mungkin, karena sudah cukup fungsionalitas dan kompleksitas di dalamnya.

Saya pikir meskipun membuat repositori xtermjs/xterm-react dan topi modul xterm-react npm hanya akan membungkus xterm.js dalam komponen React dapat melakukan pekerjaan itu. Bagaimana itu terdengar?

Itu akan sangat bagus :)

Saya benar-benar ingin mengerjakannya tetapi saya menemukan beberapa masalah dengan menyesuaikan kode tanpa membuatnya terlalu tambal sulam. Masalahnya adalah xtem.js banyak merelai interaksi dengan DOM, jadi memisahkan logika tampilan sangat sulit.

Saya ingin membuat permintaan fitur untuk memisahkan logika dan penanganan DOM dengan cara yang memungkinkan komponen yang berbeda mengambil alih rendering. Saya menyarankan sesuatu di baris mengekstrak Terminal.UI dari Terminal, yang akan bertanggung jawab untuk melampirkan acara ke DOM, membuat dan memperbarui elemen, dll. Terminal akan menunggu Terminal.UI untuk memicu acara, seperti penekanan tombol dan gulir, yang cara itu akan dipisahkan dari rendering sepenuhnya. Saya pikir Anda mulai menuju ke arah itu dengan Viewport, tapi saya yakin pemisahan penuh sedang dilakukan.

Saya ingin mendengar pendapat Anda tentang ini, dan saya ingin membantu jika menurut Anda itu relevan.

Saya percaya bahwa untuk kompleksitas kode dalam proyek ini, beberapa pemisahan masalah dapat sangat membantu dalam pengembangan dan pemeliharaan di masa depan, dan saya penggemar berat prinsip tanggung jawab tunggal :senyum:

@iMoses kami perlahan mencoba memodulasi kode, kemampuan untuk memindahkan modul dari file utama baru saja ditambahkan. Berikut adalah masalah terkait yang juga memerlukan pemisahan ini: https://github.com/sourcelair/xterm.js/issues/266

Dimulai dengan viewport untuk menjaga agar berbagai pengelolaan suara tetap bagus 👍

Melanjutkan diskusi dari #285 karena menurut saya lebih cocok.

@iMoses dapatkah Anda memberi tahu metode modul inti mana yang menyulitkan Anda untuk mengimplementasikan komponen reaksi?

Mungkin hal terbaik adalah hanya mencabangkan ini di modul mereka sendiri.

Tidak semua dalam daftar ini sulit untuk dikerjakan, sebagai contoh jika saya tidak menggunakan metode open maka metode bermasalah lainnya tidak akan terpicu, tetapi saya masih yakin bahwa metode tersebut harus dipisahkan menjadi modul yang berbeda. Sebagian besar dari apa yang akan saya cantumkan di sini dapat ditemukan di permintaan tarik saya di file Interface.js.

Apa pun di Viewport dan CompositionHelper, tapi itu sudah jelas :)

Dari file xterm.js ini adalah metode utama yang harus dipisahkan:
kabur, fokus, ikat*, initGlobal, prepareCopiedTextForClipboard, insertRow, buka, muatAddon, hancurkan, segarkan, lampirkanCustomKeydownHandler, keyDown, evaluasiKeyEscapeSequence, keyPress, bel, batalkan.

'bel' dan 'mode aplikasi' harus memicu peristiwa alih-alih berinteraksi dengan logika UI.

Saya percaya ini adalah sebagian besar, tetapi kita perlu berhati-hati untuk penggunaan elemen UI dalam kode (misalnya this.viewport dan this.element tidak boleh digunakan secara langsung oleh modul inti.

Semoga bantuan ini.

PS
Seperti yang saya katakan, saat ini saya sedang mengerjakan contoh Reach XTerm.js, di mana saya menghapus pustaka xterm menjadi hanya hal-hal penting yang saya butuhkan. Saya akan selesai dalam waktu kurang dari seminggu, saya harap, dan kemudian saya akan membagikan kode saya kepada Anda untuk ditinjau.
Saat ini berfungsi dengan baik di mesin saya, dengan pengecualian berikut: Saya belum melampirkan acara mouse, saya memiliki masalah rendering kecil yang harus saya perbaiki dengan menulis ulang bagian dari refresh selama fakta bahwa Saya ingin React menangani logika rendering dan bukan perpustakaan.

Semoga ini membantu

Mungkin ada baiknya untuk melihat ke https://github.com/sourcelair/xterm.js/issues/266 sebelum mencoba mengatasi ini

Jika kita memisahkan antara logika inti dan logika UI, inti dapat diinisialisasi tanpa mengkhawatirkan dom dan hanya jika diperlukan tampilan dapat diinisialisasi, meneruskannya ke instance inti terminal untuk digunakan.

Saya mencoba menguji peristiwa mouse untuk melihat bahwa saya tidak merusak apa pun, dan saya tidak dapat menemukan aplikasi terminal dengan dukungan mouse penuh dengan menyertakan gerakan mouse, misalnya. Apa yang kalian uji perpustakaan ini terhadap untuk memverifikasi bahwa acara mouse bekerja dengan benar?

Saya sebenarnya membuat paket npm untuk komponen react-xterm.
Anda bisa mulai dari sana.
Saya bahkan dapat mentransfer proyek sumber github jika diinginkan
https://github.com/farfromrefug/react-xterm

Terima kasih @farfromrefug! Alangkah baiknya jika kita tidak memulainya dengan "tabula rasa".

Ini adalah sesuatu yang akan lebih baik dilakukan oleh komunitas, saya menutup untuk mengurangi jumlah masalah kami, tetapi saya mendorong seseorang untuk menyatukan ini.

Harap Anda tidak keberatan saya mengomentari masalah tertutup tapi saya telah bekerja pada renderer React kustom untuk bekerja dengan xtermjs. Ini menyediakan sejumlah elemen (seperti <text> , <line> , <br> ) yang dapat digunakan untuk menulis ke keluaran terminal. Untuk menggunakannya, paket mengekspor metode render(element, HTMLElement) yang merender terminal ke elemen DOM yang disediakan. Ia juga bekerja dengan proyek-proyek React-DOM yang ada dengan menyediakan komponen <Terminal> yang dapat di-drop dalam metode render #$ komponen yang ada. Tidak yakin apakah Anda ingin melakukan sesuatu dengan proyek ini tetapi hanya berpikir saya akan menyorotinya di sini jika ada yang masih menginginkan integrasi reaksi:
https://github.com/alex-saunders/xterm-react-renderer

(masih sangat WIP tetapi berfungsi sebagai bukti konsep saat ini)

@alex-saunders terima kasih telah memanggilnya, senang memiliki tautan dalam masalah ini jika orang mencari

Hai. Saya dapat mengatur komponen reaksi dengan hampir tanpa kode dan menggunakan sistem kait "baru". Namun, ini agak erat digabungkan dengan node-pty untuk penggunaan dalam skenario elektron. Saya tidak dapat membagikan kode apa pun sekarang, karena ini adalah proyek internal yang tertutup, tetapi saya mendorong semua orang untuk mengambil langkah baru pada masalah menggunakan solusi berbasis kait - itu sepadan!