Build Log
Steps with their own output and timing bars. Failed steps open by default and successful ones stay closed — nobody opens a build log to read the steps that worked.
src/components/ui/build-log.tsxAbout
From the component's own source, where it was written.
A build's steps, each with its own output and duration.
Failed steps open by default and successful ones stay closed. A build log is opened for exactly one reason and it is not to read the successful steps; a fully-expanded log means scrolling past 4,000 lines of dependency installation to find the error.
Durations get a bar relative to the slowest step, so the step that is making the build slow is visible without reading every number. That is the second reason anyone opens a build log.
A running step shows a spinner and no duration rather than a duration that ticks; a number that changes while you read it is harder to compare than one that is simply absent until final.
Install
npx astralyx-ui add build-log
Usage
import { BuildLog } from '@/components/ui/build-log'
<BuildLog steps={steps} />Composer
Change the props and the source below follows.
- ✗ src/lib/money.test.ts > rounds half to evenAssertionError: expected 2.5 to be 2at money.test.ts:41:71 failed, 418 passed
<BuildLog steps={steps} />Examples
A build in progress
<BuildLog steps={steps} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
BuildLog
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | BuildStep[] | required | { id, name, status, duration?, output?, defaultOpen? }. |
| totalLabel | ReactNode | 'Total' | — |
| runningLabel | string | 'Running' | Accessible name for the in-progress spinner. |
| open | failures only | — | Expanding everything means scrolling past 4,000 lines of dependency installation to find the error. |
Functions
| Function | Signature | Description |
|---|---|---|
| formatBuildDuration | (ms: number) => string | — |
Types
BuildStep
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | ReactNode | — |
| status | BuildStepStatus | — |
| duration? | number | The step making the build slow is visible without reading every number — the second reason anyone opens a build log. |
| output? | string | — |
| defaultOpen? | boolean | Overrides the default open/closed rule. |
| Type | Definition | Description |
|---|---|---|
BuildStepStatus | 'success' | 'failed' | 'running' | 'skipped' | 'pending' | A build's steps, each with its own output and duration. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| running | spinner, no duration | A number that ticks while you read it is harder to compare than one that is absent until final. |