Виджеты

LogStream

Виртуализированный вывод логов: ANSI, фильтры, follow-tail.

Поток логов: ANSI-цвета, фильтр по уровню и подстроке, подсветка совпадений и прилипание к концу. Фреймворк называется pathlogs — а вывода логов в нём не было.

Установка

terminal

npx @toimetdev/pathlogs-ui add log-stream

Пример

1inf12:04:01 info сборка запущена

2inf12:04:02 info разрешение зависимостей…

3deb12:04:05 debug кэш попал в 128 из 130 модулей

4war12:04:06 warn пакет left-pad помечен устаревшим

5inf12:04:08 info компиляция TypeScript

6err12:04:12 error TS2304: не найдено имя «ReactNode»

7err12:04:12 error в src/panel/View.tsx:182

8war12:04:13 warn сборка продолжена с ошибками типов

9inf12:04:01 info сборка запущена

10inf12:04:02 info разрешение зависимостей…

11deb12:04:05 debug кэш попал в 128 из 130 модулей

12war12:04:06 warn пакет left-pad помечен устаревшим

13inf12:04:08 info компиляция TypeScript

Пощёлкайте уровни в панели — фильтр складывается из выбранных. Поиск подсвечивает совпадения прямо в строках.

Пропсы

Проп	Тип	По умолчанию	Описание
`lines`*	`LogLine[]`	—	Строки: seq, text, level?, at?, source?.
`follow`	`boolean`	`true`	Прилипать к концу при новых строках.
`toolbar`	`boolean`	`true`	Панель поиска и уровней.
`lineNumbers`	`boolean`	`true`	Номера строк слева.
`wrap`	`boolean`	`false`	Переносить длинные строки вместо горизонтальной прокрутки.
`onSelectLine`	`(line) => void`	—	Клик по строке.
`height`	`number \| string`	`420`	Высота области прокрутки.

lines*LogLine[]

Строки: seq, text, level?, at?, source?.

followboolean

по умолчанию: true

Прилипать к концу при новых строках.

toolbarboolean

по умолчанию: true

Панель поиска и уровней.

lineNumbersboolean

по умолчанию: true

Номера строк слева.

wrapboolean

по умолчанию: false

Переносить длинные строки вместо горизонтальной прокрутки.

onSelectLine(line) => void

Клик по строке.

heightnumber | string

по умолчанию: 420

Высота области прокрутки.

Виртуализация

Разбор отдельно

tsx

import { parseAnsi, stripAnsi } from "@/components/ui/log-stream/ansi";
import {
  appendLines,   // дописать в буфер, вытесняя старое сверх предела
  filterLines,   // отбор по уровню, источнику и подстроке
  matchRanges,   // отрезки совпадений для подсветки
} from "@/components/ui/log-stream/logBuffer";