Widgets

LogStream

Virtualised log output: ANSI colours, filters, follow-tail.

A stream of logs: ANSI colours, filtering by level and substring, match highlighting and follow-tail. The framework is called pathlogs — and had no log output in it.

Installation

terminal

npx @toimetdev/pathlogs-ui add log-stream

Example

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

Click the levels in the toolbar — the filter is built from whichever are selected. Search highlights matches right inside the lines.

Props

Prop	Type	Default	Description
`lines`*	`LogLine[]`	—	The lines: seq, text, level?, at?, source?.
`follow`	`boolean`	`true`	Stick to the end as lines arrive.
`toolbar`	`boolean`	`true`	The search and level toolbar.
`lineNumbers`	`boolean`	`true`	Line numbers on the left.
`wrap`	`boolean`	`false`	Wrap long lines instead of scrolling horizontally.
`onSelectLine`	`(line) => void`	—	A click on a line.
`height`	`number \| string`	`420`	The height of the scroll area.

lines*LogLine[]

The lines: seq, text, level?, at?, source?.

followboolean

defaults to: true

Stick to the end as lines arrive.

toolbarboolean

defaults to: true

The search and level toolbar.

lineNumbersboolean

defaults to: true

Line numbers on the left.

wrapboolean

defaults to: false

Wrap long lines instead of scrolling horizontally.

onSelectLine(line) => void

A click on a line.

heightnumber | string

defaults to: 420

The height of the scroll area.

Virtualisation

The parsing, separately

tsx

import { parseAnsi, stripAnsi } from "@/components/ui/log-stream/ansi";
import {
  appendLines,   // append to the buffer, evicting anything over the limit
  filterLines,   // filter by level, source and substring
  matchRanges,   // match ranges for highlighting
} from "@/components/ui/log-stream/logBuffer";