TimeToFirstDraw

TimeToFirstDrawRenderable captures and displays a performance.now() reading the first time it draws. Use it only as a rendering diagnostic.

Despite its name and default label, the displayed value is the first-draw timestamp from the runtime’s performance time origin. The implementation does not subtract renderer creation time or application start time, so it is not an elapsed startup duration.

Availability#

Core API#

import { TimeToFirstDrawRenderable } from "@aicippytui/core"

const firstDraw = new TimeToFirstDrawRenderable(renderer, {
  label: "First draw timestamp",
  precision: 1,
  fg: "#94a3b8",
})

renderer.root.add(firstDraw)

On its first renderSelf() call, the renderable stores performance.now() in runtimeMs. Later draws continue to display that same value. reset() clears it and requests another render. The next draw captures a new timestamp.

console.log(firstDraw.runtimeMs) // null before the first draw

firstDraw.reset()

React#

import { TimeToFirstDraw } from "@aicippytui/react"

function App() {
  return <TimeToFirstDraw label="First draw timestamp" precision={1} fg="#94a3b8" />
}

The React binding exports TimeToFirstDraw and TimeToFirstDrawProps. It also registers the time-to-first-draw intrinsic element automatically. The exported component is the direct public wrapper.

Solid#

import { TimeToFirstDraw } from "@aicippytui/solid"

const App = () => <TimeToFirstDraw label="First draw timestamp" precision={1} fg="#94a3b8" />

The Solid binding exports TimeToFirstDraw and TimeToFirstDrawProps. It also registers the time_to_first_draw intrinsic element automatically. The exported component is the direct public wrapper.

Options#

The core renderable and both framework wrappers accept these options in addition to standard renderable layout options:

User-supplied layout values override the width, height, shrink, and alignment defaults. The Core constructor floors precision and clamps it to zero. A non-finite Core value becomes 2. React and Solid currently assign the prop directly after construction and bypass that normalization. Pass an integer from 0 through 100 to either wrapper. Negative and infinite wrapper values can throw when the component draws, and NaN produces zero decimal places.

The rendered line is ${label}: ${runtimeMs.toFixed(precision)}ms. AiCIPPYTUI centers it by display-cell width and truncates it at a grapheme boundary.

Runtime properties#

The constructor and JSX option names are label and precision. The post-construction setter names are textLabel and decimals.