Xterm.js: फ़ीचर अनुरोध: निर्यात प्रतिक्रिया घटक

यह वास्तव में एक दिलचस्प परिदृश्य है। हम xterm.js को यथासंभव स्व-निहित और हल्का रखने का प्रयास करते हैं, क्योंकि इसमें पहले से ही पर्याप्त कार्यक्षमता और जटिलता है।

मुझे लगता है कि हालांकि एक xtermjs/xterm-react रिपॉजिटरी और एक xterm-react npm मॉड्यूल हैट बनाने से केवल xterm.js को एक रिएक्ट घटक में लपेटने से काम हो सकता है। वो कैसा लगता है?

वह महान होगा :)

मैं वास्तव में उस पर काम करना चाहूंगा, लेकिन मुझे कोड को बहुत अधिक खराब किए बिना समायोजित करने के साथ कुछ समस्याएं मिलीं। समस्या यह है कि xtem.js डीओएम के साथ बातचीत पर बहुत अधिक निर्भर करता है, इसलिए दृश्य तर्क को अलग करना बेहद मुश्किल है।

मैं तर्क और डीओएम हैंडलिंग को इस तरह से अलग करने के लिए एक फीचर अनुरोध करना चाहता हूं जो विभिन्न घटकों को प्रतिपादन पर ले जाने की अनुमति देगा। मैं टर्मिनल से Terminal.UI निकालने की तर्ज पर कुछ सुझाव देता हूं, जो DOM को ईवेंट संलग्न करने, तत्वों को बनाने और अपडेट करने आदि के लिए ज़िम्मेदार होगा। टर्मिनल टर्मिनल.यूआई के लिए ईवेंट को ट्रिगर करने के लिए प्रतीक्षा करेगा, जैसे कि कीप्रेस और स्क्रॉल, कि जिस तरह से इसे पूरी तरह से प्रस्तुत करने से अलग किया जाएगा। मुझे लगता है कि आपने उस दिशा में व्यूपोर्ट के साथ जाना शुरू कर दिया है, लेकिन मेरा मानना ​​है कि एक पूर्ण अलगाव क्रम में है।

मैं इस पर आपके विचार जानना चाहता हूं, और अगर आपको लगता है कि यह प्रासंगिक है तो मैं इसमें मदद करना चाहता हूं।

मेरा मानना ​​है कि इस परियोजना में कोड की जटिलता के लिए, चिंताओं का कुछ पृथक्करण वास्तव में भविष्य के विकास और रखरखाव में मदद कर सकता है, और मैं एकल जिम्मेदारी सिद्धांत का बहुत बड़ा प्रशंसक हूं: मुस्कान:

@iMoses हम धीरे-धीरे कोड को संशोधित करने की कोशिश कर रहे हैं, मुख्य फ़ाइल से मॉड्यूल को स्थानांतरित करने की क्षमता केवल जोड़ी गई थी। यहां एक संबंधित मुद्दा है जो इस अलगाव की भी मांग करता है: https://github.com/sourcelair/xterm.js/issues/266

विभिन्न प्रबंधनीय ध्वनियों को अच्छा रखने के लिए व्यूपोर्ट से शुरुआत करना

#285 से चर्चा जारी रखना क्योंकि यह मेरे विचार से अधिक उपयुक्त है।

@iMoses क्या आप बता सकते हैं कि कोर मॉड्यूल के कौन से तरीके आपके लिए प्रतिक्रिया घटक को लागू करना मुश्किल बनाते हैं?

हो सकता है कि सबसे अच्छी बात यह होगी कि इन्हें केवल अपने मॉड्यूल में ही शाखा दें।

इस सूची में सब कुछ के साथ काम करना मुश्किल नहीं है, उदाहरण के लिए यदि मैं open विधि का उपयोग नहीं करता हूं तो अन्य समस्याग्रस्त विधि ट्रिगर नहीं होगी, लेकिन मुझे अभी भी विश्वास है कि उन्हें एक अलग मॉड्यूल में अलग किया जाना चाहिए। जो कुछ मैं यहां सूचीबद्ध करूंगा उनमें से अधिकांश मेरे पुल-अनुरोध में Interface.js फ़ाइल में पाए जा सकते हैं।

व्यूपोर्ट और कंपोजिशन हेल्पर में कुछ भी, लेकिन यह स्पष्ट है :)

xterm.js फ़ाइल से ये मुख्य विधियाँ हैं जिन्हें अलग किया जाना चाहिए:
ब्लर, फोकस, बाइंड*, इनिटग्लोबल, तैयारकॉपीड टेक्स्टफॉरक्लिपबोर्ड, इन्सर्टरो, ओपन, लोडएडऑन, नष्ट, रिफ्रेश, अटैच कस्टमकेडाउनहैंडलर, कीडाउन, कीएस्केप सीक्वेंस का मूल्यांकन, कीप्रेस, बेल, रद्द करें।

'घंटी' और 'एप्लिकेशन-मोड' को यूआई तर्क के साथ बातचीत करने के बजाय घटनाओं को ट्रिगर करना चाहिए।

मेरा मानना ​​​​है कि यह इसका अधिकांश हिस्सा है, लेकिन हमें कोड में UI तत्व के उपयोग के लिए देखने की जरूरत है (उदाहरण के लिए this.viewport और this.element को सीधे कोर मॉड्यूल द्वारा उपयोग नहीं किया जाना चाहिए।

उममीद है कि इससे मदद मिलेगी।

पी.एस.
जैसा कि मैंने कहा, मैं वर्तमान में एक रीच एक्सटर्म.जेएस उदाहरण पर काम कर रहा हूं, जिसके लिए मैंने एक्सटर्म लाइब्रेरी को केवल आवश्यक चीजों तक ही सीमित कर दिया है। मैं एक सप्ताह से भी कम समय में समाप्त कर दूंगा, मुझे आशा है, और फिर मैं समीक्षा करने के लिए आपके साथ अपना कोड साझा करूंगा।
यह वर्तमान में मेरी मशीन पर निम्नलिखित अपवादों के साथ बहुत अच्छा काम करता है: मैंने अभी तक माउस ईवेंट संलग्न नहीं किया है, मेरे पास एक मामूली प्रतिपादन समस्या है जिसे मुझे refresh ड्यूर के कुछ हिस्सों को फिर से लिखकर ठीक करने की आवश्यकता होगी कि तथ्य यह है कि मैं चाहता हूं कि रिएक्ट रेंडरिंग लॉजिक को हैंडल करे न कि लाइब्रेरी को।

उम्मीद है की यह मदद करेगा

इससे निपटने का प्रयास करने से पहले https://github.com/sourcelair/xterm.js/issues/266 पर गौर करना अच्छा हो सकता है

यदि हम कोर लॉजिक और UI लॉजिक के बीच अंतर करते हैं, तो कोर को डोम के बारे में चिंता किए बिना इनिशियलाइज़ किया जा सकता है और केवल जब आवश्यक हो तो व्यू को इनिशियलाइज़ किया जा सकता है, इसके साथ काम करने के लिए इसे टर्मिनल कोर इंस्टेंस पास किया जा सकता है।

मैं यह देखने के लिए माउस ईवेंट का परीक्षण करने की कोशिश कर रहा हूं कि मैंने कुछ भी नहीं तोड़ा है, और मुझे माउस मूव के साथ पूर्ण माउस समर्थन वाला टर्मिनल एप्लिकेशन नहीं मिल रहा है, उदाहरण के लिए। माउस इवेंट ठीक से काम कर रहे हैं, यह सत्यापित करने के लिए आप लोग इस लाइब्रेरी का परीक्षण किसके खिलाफ कर रहे हैं?

मैं वास्तव में एक प्रतिक्रिया-xterm घटक के लिए एक npm पैकेज बनाया।
आप वहां से शुरू कर सकते हैं।
अगर मैं चाहूं तो मैं जीथब सोर्स प्रोजेक्ट को ट्रांसफर भी कर सकता हूं
https://github.com/farfromrefug/react-xterm

धन्यवाद @farfromrefug! यह बहुत अच्छा होगा यदि हम "तबुला रस" से शुरू न करें।

यह कुछ ऐसा है जो समुदाय इमो द्वारा बेहतर किया जाएगा, मैं अपनी समस्या की संख्या को कम करने के लिए बंद कर रहा हूं लेकिन मैं किसी को इसे एक साथ रखने के लिए प्रोत्साहित करता हूं।

आशा है कि आप मुझे एक बंद मुद्दे पर टिप्पणी करने से गुरेज नहीं करेंगे, लेकिन मैं xtermjs के साथ काम करने के लिए एक कस्टम रिएक्ट रेंडरर पर काम कर रहा हूं। यह कई तत्व प्रदान करता है (जैसे <text> , <line> , <br> ) जिनका उपयोग टर्मिनल आउटपुट को लिखने के लिए किया जा सकता है। इसका उपयोग करने के लिए, पैकेज एक render(element, HTMLElement) विधि का निर्यात करता है जो एक प्रदान किए गए DOM तत्व के लिए एक टर्मिनल प्रदान करता है। यह <Terminal> घटक प्रदान करके मौजूदा रिएक्ट-डोम परियोजनाओं के साथ भी काम करता है जिसे किसी भी मौजूदा घटक render पद्धति में छोड़ा जा सकता है। सुनिश्चित नहीं है कि आप इस परियोजना के साथ कुछ भी करना चाहते हैं, लेकिन मैंने सोचा कि मैं इसे यहां हाइलाइट करूंगा, अगर कोई अभी भी प्रतिक्रिया एकीकरण चाहता है:
https://github.com/alex-saunders/xterm-react-renderer

(अभी भी बहुत अधिक WIP है लेकिन यह इस समय अवधारणा के प्रमाण के रूप में काम करता है)

@ एलेक्स-सॉन्डर्स इसे कॉल करने के लिए धन्यवाद, अगर लोग देख रहे हैं तो इस मुद्दे में एक लिंक होना अच्छा है

नमस्ते। मैं लगभग बिना किसी कोड के और "नए" हुक सिस्टम का उपयोग करके एक प्रतिक्रिया घटक स्थापित करने में सक्षम था। हालांकि, यह इलेक्ट्रॉन परिदृश्यों में उपयोग के लिए नोड-पीटीआई के साथ कसकर युग्मित है। मैं अभी कोई कोड साझा नहीं कर सकता, क्योंकि यह एक बंद, आंतरिक प्रोजेक्ट है, लेकिन मैं सभी को हुक-आधारित समाधान का उपयोग करके समस्या पर एक नया शॉट लेने के लिए प्रोत्साहित करता हूं - यह इसके लायक है!