Log Frame ·
Small framework for making complex dynamic terminal views simply.
Install
npm install log-frame
Overview
LogFrame
: Manages a component tree and updating the screen in response to component updates.- View's: Provide content to be rendered.
log-frame
includes two:RawLogView
: shows any given stringCompositeLogView
: use to compose multiple views together
This example shows how to compose several views together to produce the animation above using logf-spinner
and logf-progress
:
const LogFrame CompositeLogView RawLogView = ;const ProgressBar = ;const Spinner = ; // root view to displayconst view = ; // attach the root view to a frame for display. hide the cursor during// display.const frame = hideCursor: true ;frameview = view; // a headerconst header = ;view; // a spinner with a 'dots' themeconst spinner = 'dots';spinnerstart;view; // a progress barconst bar = ;barwidth = 50;view; // update the header, and animate the progress to some random valueconst update = { headercontent = ; bar;}; // initial update, then update every 500ms;;
LogView
s
Making custom A component is an object conforming to:
content: "hello, world" // a string or an array of other `LogView`s onUpdate: undefined // `onUpdate` will be set by the LogFrame or // a parent `LogView`. The custom view // can call this to let the frame know that // the terminal dispaly should be updated
The simplest example is the source for RawLogView
. For something more complex, check out logf-spinner
and logf-progress
. How to compose multiple views can be seen in CompositeLogView
. The examples directory also contains a game of life component: