lognal
Просмотрщик логов, который выглядит и ведёт себя как терминал, для веба и для Flutter. Он рисует вывод на canvas, а не создаёт по элементу на строку, поэтому быстрый поток сообщений и история в десятки тысяч записей обходятся в один и тот же кадр, и приложению не нужно строить собственную панель консоли.
Об этом проекте
lognal — просмотрщик логов для приложений, которым нужно показывать вывод на собственном экране: панель консоли на веб-странице, отладочный экран в приложении на Flutter или окно для чтения лог-файла. Записи хранятся как простые данные, а на canvas рисуются только видимые строки, так что стоимость кадра зависит от того, что на экране, а не от длины истории. Ядро под ним — хранилище, фильтр, раскладка текста и вёрстка — написано дважды, на TypeScript и на Dart, файл в файл, поэтому строка переносится в том же месте, занимает ту же ширину и одинаково находится поиском и в браузере, и в приложении.
Он повторяет то, что среда выполнения и так печатает, — console.log, console.table и console.group в браузере, print и debugPrint во Flutter, — а исходный вывод продолжает работать. Лог-файлы он читает с определением кодировки, превращает управляющие последовательности ANSI в цвет и умеет следить за файлом, который продолжает расти. Объекты, списки, словари и ошибки захватываются в момент записи и раскрываются и сворачиваются прямо на месте. Панель инструментов следит за новыми записями, фильтрует по тексту и по уровню, а поиск подсвечивает каждое совпадение, не скрывая остальное; необязательная строка ввода передаёт команды функции-обработчику и печатает ответы. Корейские и другие широкие символы держатся сетки, слова на хангыле не разрываются при переносе, а строка ввода ждёт, пока метод ввода закончит набор. Элементы управления — настоящие кнопки с доступными именами, а скрытый список повторяет видимые записи для экранных дикторов.
У пакета npm нет зависимостей во время выполнения: React — необязательная peer-зависимость, нужная только для компонента из lognal/react, а таблица стилей подключается одним импортом. Пакет для Flutter зависит только от Flutter SDK и построен на слое виджетов без Material и Cupertino, поэтому встраивается в любое приложение, не принося с собой вторую дизайн-систему. Встроено шесть палитр, auto следует светлой или тёмной настройке системы, а собственная тема — это один блок пользовательских CSS-свойств или один вызов buildTheme. Пакет JavaScript поставляется как ESM с объявлениями типов TypeScript, и у каждого пакета своя версия и свой журнал изменений.
Возможности
Сайт документации
Типы TypeScript
Несколько языков
Проверено тестами
Кроссплатформенность
Доступность из коробки
Тёмная тема
Поддержка tree shaking
Без зависимостей