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 string
  • CompositeLogView: 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 } = require('log-frame');
const { ProgressBar } = require('logf-progress');
const { Spinner } = require('logf-spinner');

// root view to display
const view = new CompositeLogView();

// attach the root view to a frame for display. hide the cursor during
//  display.
const frame = new LogFrame({ hideCursor: true });
frame.view = view;

// a header
const header = new RawLogView();
view.addChild(header);

// a spinner with a 'dots' theme
const spinner = new Spinner('dots');
spinner.start();
view.addChild(spinner);

// a progress bar
const bar = new ProgressBar();
bar.width = 50;
view.addChild(bar);

// update the header, and animate the progress to some random value
const update = () => {
  header.content = getRandomHeader();
  bar.setProgress(Math.random(), {
    duration: 300,
  });
};

// initial update, then update every 500ms
update();
setInterval(update, 500);

Making custom LogViews

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: