Make CLI Run in the Console

We have been using the command line interface (CLI) in the terminal window and the command prompt. Have you thought of a CLI in the console of the browser's developer tool?

I recently created one for the AppRun.

AppRun is a 3K library for building applications using the Elm inspired Architecture, event pub-sub and components.

How does it work?

In the console of the browser's developer tool (F12), you can type the command.

_apprun `<command> [options]`

Just like many other CLI, the help command lists all available commands. In the screenshot above, you can see there are three commands: components, events and log.

Why do we need a CLI in the console?

CLI in the console is convenient for watching run-time data. During the application development, we often need to debug and exam the internal data of the application. Using the console.log function is the easiest yet very powerful way to display the data because the console lets us drill down into the nested array and object structure.

With a CLI in the console, The app code base stays clear of console.log. The CLI provides a non-destructive way of watching the run-time data. We can include the CLI script in the development environment and remove it from the production environment.

How is it made?

It is relatively easy to create a CLI in the console than to create a dev-tool as the browser extension. It is based on the JavaScript tagged templates.

We create the _apprun function in the window object.

window['_apprun'] = (strings) => { }

The _apprun function is called when we type the AppRun commands in the console. The command and the command parameters are passed into the _apprun function as the function parameter strings, which we can parse and then invoke the command functions.

window['_apprun'] = (strings) => {
  const [cmd, ...p] = strings[0].split(' ').filter(c => !!c);
  const command = window[`_apprun-${cmd}`];
  if (command) command[1](...p);
  else window['_apprun-help'][1]();
}

It has an extensive architecture. We create the AppRun commands in the window object. The AppRun command is a tuple that includes the description of the command and the implementation function of the command. E.g. the help command look like this:

window['_apprun-help'] = ['', () => {
  Object.keys(window).forEach(cmd => {
    if (cmd.startsWith('_apprun-')) {
      cmd === '_apprun-help' ?
        console.log('AppRun Commands:') :
        console.log(`* ${cmd.substring(8)}: ${window[cmd][0]}`);
    }
  });
}];

The help command searches for the tuples stored in the window object and prints the description of other AppRun commands.

That's all the infrastructure code we need to create CLI commands in the console. Let's see an example.

Live Demo

AppRun is a modern JavaScript library for building web apps that are fast to the market, high-performance and reliable.
AppRun adopts the principles of Elm architecture and the event publication and subscription pattern. It has a low learning curve and high development productivity.

The AppRun CLI in the console is one of the developer tools includes in the AppRun library. You can visit the AppRun RealWorld Example App https://gothinkster.github.io/apprun-realworld-example-app to see the CLI in actions.

• The components command logs the DOM elements that have AppRun components
• The events command logs the event subscription of the app
• The log command logs the run-time events publication of the app
• The create-event-tests command creates unit tests for the app
• The create-state-tests command creates Jest snapshot tests for the app

Conclusion

Developers like CLI. CLI in the console is useful for getting the run-time events and messages, which is hard for the traditional CLI in the terminal to do. The AppRun CLI in the console even extended the CLI beyond watching the data to generate tests. It increases the development productivity for debugging and testing.

Hope you like the idea. Have fun coding.