Xterm.js: طلب الميزة: تصدير مكون React

هذا حقا سيناريو مثير للاهتمام. نحاول أن نجعل xterm.js مكتفيًا ذاتيًا وخفيف الوزن قدر الإمكان ، لأنه يحتوي بالفعل على ما يكفي من الوظائف والتعقيد فيه.

أعتقد أنه على الرغم من ذلك ، فإن إنشاء مستودع xtermjs / xterm-reaction وقبعة الوحدة النمطية xterm-reaction npm من شأنه أن يلف xterm.js في مكون React. كيف يبدو هذا؟

هذا سيكون رائع :)

أرغب حقًا في العمل على ذلك ، لكنني وجدت بعض المشكلات في تعديل الكود دون جعله غير مكتمل للغاية. تكمن المشكلة في أن xtem.js يعتمد بشكل كبير على التفاعلات مع DOM ، لذلك من الصعب للغاية فصل منطق العرض.

أرغب في تقديم طلب ميزة لفصل المنطق عن معالجة DOM بطريقة تسمح للمكونات المختلفة بتولي العرض. أقترح شيئًا ما في سطور استخراج Terminal.UI من Terminal ، والذي سيكون مسؤولاً عن إرفاق الأحداث بـ DOM ، وإنشاء العناصر وتحديثها ، وما إلى ذلك. ستنتظر Terminal حتى تقوم Terminal.UI بتشغيل الأحداث ، مثل الضغط على المفتاح والتمرير ، والتي الطريقة التي سيتم فصلها عن التقديم تمامًا. أعتقد أنك بدأت في السير في هذا الاتجاه مع منفذ العرض ، لكنني أعتقد أن الفصل الكامل في محله.

أرغب في سماع أفكارك حول هذا الأمر ، وأود المساعدة في حلها إذا كنت تعتقد أنها ذات صلة.

أعتقد أنه بالنسبة لتعقيد الكود في هذا المشروع ، فإن بعض فصل الاهتمامات يمكن أن يساعد حقًا في التطوير والصيانة في المستقبل ، وأنا من أشد المعجبين بمبدأ المسؤولية الفردية: ابتسم:

iMoses لقد كنا نحاول ببطء تشكيل الكود ، تمت إضافة القدرة على نقل الوحدات من الملف الرئيسي فقط. إليك مشكلة ذات صلة تستدعي أيضًا هذا الفصل: https://github.com/sourcelair/xterm.js/issues/266

البدء بإطار العرض للحفاظ على جودة الأصوات المختلفة التي يمكن التحكم فيها 👍

استمرار المناقشة من 285 لأنه أكثر ملاءمة على ما أعتقد.

iMoses هل يمكنك تحديد طرق الوحدة الأساسية التي تجعل من الصعب عليك تنفيذ مكون التفاعل؟

ربما يكون أفضل شيء هو تفريع هذه فقط في الوحدة (الوحدات) الخاصة بهم.

ليس من الصعب التعامل مع كل شيء في هذه القائمة ، على سبيل المثال إذا لم أستخدم طريقة open ، فلن يتم تشغيل طريقة إشكالية أخرى ، لكنني ما زلت أعتقد أنه يجب فصلها إلى وحدة نمطية مختلفة. يمكن العثور على معظم ما سأدرجه هنا في طلب السحب الخاص بي في ملف Interface.js.

أي شيء في Viewport و CompositionHelper ، لكن هذا واضح :)

من ملف xterm.js هذه هي الطرق الرئيسية التي يجب فصلها:
طمس ، تركيز ، ربط * ، initGlobal ، PreparCopiedTextForClipboard ، insertRow ، open ، loadAddon ، تدمير ، تحديث ، attachCustomKeydownHandler ، keyDown ، EvaluationKeyEscapeSequence ، keyPress ، بيل ، إلغاء.

يجب أن يطلق "الجرس" و "وضع التطبيق" الأحداث بدلاً من التفاعل مع منطق واجهة المستخدم.

أعتقد أن هذا هو معظمها ، لكننا نحتاج إلى الانتباه إلى استخدامات عنصر واجهة المستخدم في الكود (على سبيل المثال ، لا يجب استخدام منفذ العرض وهذا العنصر بشكل مباشر بواسطة الوحدة الأساسية.

نأمل أن تكون هذه المساعدة.

ملاحظة
كما قلت ، أنا أعمل حاليًا على مثال Reach XTerm.js ، حيث قمت بتجريد مكتبة xterm إلى الأساسيات التي أحتاجها فقط. سأنتهي في غضون أقل من أسبوع ، على ما آمل ، وبعد ذلك سأشارك الكود الخاص بي معك لمراجعته.
إنه يعمل حاليًا بشكل رائع على جهازي ، مع الاستثناءات التالية: لم أقم بإرفاق أحداث الماوس حتى الآن ، لدي مشكلة عرض بسيطة سأحتاج إلى إصلاحها عن طريق إعادة كتابة أجزاء من refresh dur لحقيقة ذلك أريد أن يتعامل React مع منطق العرض وليس المكتبة.

أتمنى أن يساعدك هذا

قد يكون من الجيد النظر إلى https://github.com/sourcelair/xterm.js/issues/266 قبل محاولة معالجة هذا

إذا فصلنا بين المنطق الأساسي ومنطق واجهة المستخدم ، فيمكن تهيئة النواة دون القلق بشأن dom وفقط عند الحاجة يمكن تهيئة العرض ، وتمريره كمثيل أساسي طرفي للعمل معه.

أحاول اختبار أحداث الماوس لأرى أنني لم أكسر أي شيء ، ولا يمكنني العثور على تطبيق طرفي مع دعم كامل للماوس يتضمن تحريك الماوس ، على سبيل المثال. ما الذي تختبرونه يا رفاق هذه المكتبة للتحقق من أن أحداث الماوس تعمل بشكل صحيح؟

لقد قمت بالفعل بإنشاء حزمة npm لمكون رد الفعل xterm.
يمكنك أن تبدأ من هناك.
يمكنني حتى نقل مشروع مصدر جيثب إذا أردت
https://github.com/farfromrefug/react-xterm

شكراfarfromrefug! سيكون رائعًا إذا لم نبدأ بـ "tabula rasa".

هذا شيء من الأفضل أن يقوم به المنتدى imo للمجتمع ، أنا أغلق لتقليل عدد المشكلات لدينا ولكني أشجع شخصًا ما على تجميع هذا معًا.

آمل ألا تمانع في التعليق على مشكلة مغلقة ولكني كنت أعمل على عارض React مخصص للعمل مع xtermjs. يوفر عددًا من العناصر (مثل <text> ، <line> ، <br> ) التي يمكن استخدامها للكتابة إلى الإخراج الطرفي. لاستخدامها ، تصدر الحزمة طريقة render(element, HTMLElement) التي تعرض محطة طرفية لعنصر DOM متوفر. كما أنه يعمل مع مشاريع React-DOM الحالية من خلال توفير مكون <Terminal> يمكن إسقاطه في أي مكونات موجودة بطريقة render . لست متأكدًا مما إذا كنت تريد فعل أي شيء مع هذا المشروع ، لكنني فكرت فقط في تسليط الضوء عليه هنا في حالة ما إذا كان أي شخص لا يزال يريد تكاملًا للتفاعل:
https://github.com/alex-saunders/xterm-react-renderer

(لا تزال قيد التقدم للعمل ولكنها تعمل كدليل على المفهوم في الوقت الحالي)

@ alex-saunders شكرًا لاستدعاء ذلك ، من الجيد أن يكون لديك رابط في هذه المشكلة في حال كان الأشخاص يبحثون 👌

مرحبا. تمكنت من إعداد مكون تفاعل بدون رمز تقريبًا واستخدام نظام الخطافات "الجديد". ومع ذلك ، فهو مقترن بإحكام مع node-pty للاستخدام في سيناريوهات الإلكترون. لا يمكنني مشاركة أي رمز في الوقت الحالي ، لأنه مشروع داخلي مغلق ، لكنني أشجع الجميع على أخذ لقطة جديدة للمشكلة باستخدام حل يعتمد على الخطاف - إنه يستحق ذلك!