Добрый день! 👋
Введение
Поделюсь очередным небольшим проектом, с которым столкнулся при разработке другого проекта. Так же, такой же терминал использовал в приложении про вайб тесты - AI инструмент для покрытия кода тестами.
Гит репозиторий с проектом - https://github.com/G28XYZ/terminal-ui
Архитектура
Приложение представляет из себя обычный терминал который доступен в операционной системе, обмен сообщениями происходит по веб-сокету.
Приложение запускается с помощью lerna, разбит на несколько пакетов (packages):
🔵 backend - серверная часть, запускается два сервиса на разных портах, основной и сервис для обмена сообщениями по сокету.
🟢 frontend - ui часть приложения, которую можно посмотреть по адресу стандартного порта vite или на локальном порту запущенного сервера, bun умеет рендерить jsx/tsx из коробки.
⚪️ constants - общие константы приложения.
Команды для настройки и запуска приложения:
git clone https://github.com/G28XYZ/terminal-ui.git
cd terminal-ui
npm i
npm start
Backend
По умолчанию, приложение стартанет на портах 5173 - фронт, 3001 - бэк, 3002 - сокет.
По адресам http://localhost:5173 и http://localhost:3001 теперь можно открыть терминал в браузере. 3001 порт оставил для демонстрации интересной фичи в Bun - из коробки выполняет внутреннюю транспиляцию каждого исполняемого файла (.ts/.tsx/.jsx)
В пакете backend в файле который bun выполняет (index.ts) импортируется index.html прям из пакета frontend, и этот HTMLBundle просто передается в маршруты по дефолту.
На втором порту (3002) backend запускается сервис который подключается к терминалу системы, и по сокету принимает/отправляет сообщения.
Frontend
На порту 5173 vite запускает dev-сервер по адресу http://localhost:5173.
useXTerm хук из библиотеки - react-xtermjs
useStartTerm кастомный хук в котором определяются основные настройки и через который в дальнейшем, можно настроить другие состояния, такие как доп вкладки, удаление/восстановление окна и тд. Сейчас этого нет, пока просто создается каждый раз при открытии страницы новый терминал.
Заключение
Такой компонент терминала редко где требуется, но вариант вполне рабочий, и можно докручивать и минимизировать при желании, например упаковать в отдельную библиотеку, которую можно импортировать через облако, или создать через electron отдельное ПО что-то по типу hyper. Кстати про приложение на electron рассказывал в этой статье - Как создать кросс-платформенное десктопное приложение
Подписывайтесь на мой телеграм-канал - БлогНот