Xterm.js: Запрос функции: экспорт компонента React

Это действительно очень интересный сценарий. Мы стараемся, чтобы xterm.js был как можно более автономным и легким, поскольку в нем уже достаточно функциональности и сложности.

Однако я думаю, что создание репозитория xtermjs/xterm-react и шляпы модуля xterm-react npm просто обернет xterm.js в компонент React, и это может сработать. Как это звучит?

Это было бы прекрасно :)

Я бы очень хотел поработать над этим, но я обнаружил несколько проблем с корректировкой кода, не делая его слишком неоднородным. Проблема в том, что xtem.js сильно зависит от взаимодействия с DOM, поэтому отделить логику представления чрезвычайно сложно.

Я хотел бы сделать запрос функции, чтобы разделить логику и обработку DOM таким образом, чтобы позволить различным компонентам выполнять рендеринг. Я предлагаю что-то в строках извлечения Terminal.UI из Terminal, который будет отвечать за привязку событий к DOM, создание и обновление элементов и т. д. Terminal будет ждать, пока Terminal.UI вызовет события, такие как нажатие клавиши и прокрутка, которые таким образом, он будет полностью отделен от рендеринга. Я думаю, что вы начали двигаться в этом направлении с Viewport, но я считаю, что полное разделение в порядке.

Я хотел бы услышать ваши мысли по этому поводу, и я хотел бы помочь с этим, если вы считаете, что это актуально.

Я считаю, что из-за сложности кода в этом проекте некоторое разделение ответственности могло бы действительно помочь в будущей разработке и обслуживании, и я большой поклонник принципа единой ответственности :smile:

@iMoses мы медленно пытаемся разбить код на модули, возможность перемещать модули из основного файла была только что добавлена. Вот связанная проблема, которая также требует этого разделения: https://github.com/sourcelair/xterm.js/issues/266 .

Начнем с области просмотра, чтобы сохранить различные управляемые звуки в хорошем состоянии 👍

Продолжаю дискуссию с #285, так как он мне кажется более подходящим.

@iMoses , можете ли вы сказать, какие методы основного модуля затрудняют вам реализацию компонента реакции?

Возможно, лучше всего было бы разветвлять только их в своих собственных модулях.

Не со всем в этом списке сложно работать, например, если я не использую метод open , то другие проблемные методы не будут запущены, но я все же считаю, что их следует выделить в другой модуль. Большую часть того, что я здесь перечислю, можно найти в моем запросе на включение в файле Interface.js.

Что угодно в Viewport и CompositionHelper, но это очевидно :)

Из файла xterm.js следует выделить следующие основные методы:
размытие, фокус, привязка *, initGlobal, prepareCopiedTextForClipboard, insertRow, открытие, loadAddon, уничтожение, обновление, присоединениеCustomKeydownHandler, keyDown, оценкаKeyEscapeSequence, нажатие клавиши, звонок, отмена.

«звонок» и «режим приложения» должны инициировать события, а не взаимодействовать с логикой пользовательского интерфейса.

Я считаю, что это большая часть, но нам нужно следить за использованием элемента пользовательского интерфейса в коде (например, this.viewport и this.element никогда не должны использоваться непосредственно основным модулем.

Надеюсь, это поможет.

PS
Как я уже сказал, в настоящее время я работаю над примером Reach XTerm.js, для которого я сократил библиотеку xterm до самого необходимого. Надеюсь, я закончу менее чем за неделю, а затем поделюсь с вами своим кодом для ознакомления.
В настоящее время он отлично работает на моей машине, за следующими исключениями: я еще не привязывал события мыши, у меня есть небольшая проблема с рендерингом, которую мне нужно исправить, переписав части refresh dur на тот факт, что Я хочу, чтобы React обрабатывал логику рендеринга, а не библиотеку.

Надеюсь это поможет

Возможно, было бы неплохо заглянуть в https://github.com/sourcelair/xterm.js/issues/266 , прежде чем пытаться решить эту проблему.

Если мы разделим основную логику и логику пользовательского интерфейса, ядро ​​можно будет инициализировать, не беспокоясь о dom, и только при необходимости представление можно будет инициализировать, передав ему терминальный экземпляр ядра для работы.

Я пытаюсь проверить события мыши, чтобы убедиться, что я ничего не сломал, и я не могу найти терминальное приложение с полной поддержкой мыши, например, с включенным движением мыши. С чем вы, ребята, тестируете эту библиотеку, чтобы убедиться, что события мыши работают правильно?

На самом деле я создал пакет npm для компонента react-xterm.
Вы можете начать оттуда.
Я даже могу передать исходный проект github, если хотите
https://github.com/farfromrefug/реагировать-xterm

Спасибо @farfromrefug! Было бы здорово, если бы мы не начали с "tabula rasa".

Это то, что лучше сделать сообществу imo, я закрываю, чтобы уменьшить количество наших проблем, но я призываю кого-то собрать это вместе.

Надеюсь, вы не возражаете, если я прокомментирую закрытую проблему, но я работаю над пользовательским средством визуализации React для работы с xtermjs. Он предоставляет ряд элементов (таких как <text> , <line> , <br> ), которые можно использовать для записи в вывод терминала. Чтобы использовать его, пакет экспортирует метод render(element, HTMLElement) , который отображает терминал в предоставленный элемент DOM. Он также работает с существующими проектами React-DOM, предоставляя компонент <Terminal> , который можно добавить в любой существующий компонент методом render . Не уверен, что вы хотите что-то делать с этим проектом, но просто решил выделить его здесь, если кому-то все еще нужна интеграция с реакцией:
https://github.com/алекс-саундерс/xterm-реагировать-рендерер

(все еще в значительной степени WIP, но на данный момент он работает как доказательство концепции)

@alex-saunders, спасибо, что рассказали об этом, хорошо, что в этом выпуске есть ссылка на случай, если люди ищут 👌

Привет. Мне удалось настроить реагирующий компонент практически без кода и с использованием «новой» системы хуков. Однако он довольно тесно связан с node-pty для использования в электронных сценариях. Я не могу поделиться каким-либо кодом прямо сейчас, так как это закрытый внутренний проект, но я призываю всех по-новому взглянуть на проблему, используя решение на основе ловушек — оно того стоит!