Vanilla JavaScript Shell Terminal Emulator With Async/Await Functions – jsShell.js

Preview:

Description:

An easy yet feature-rich JavaScript shell emulator (also known as bash terminal) that allows users to execute commands or interact with your app directly in the web browser.

How to use it:

1. Install and import the jsShell.js.

# Yarn
$ yarn add js-shell-emulator
# NPM
$ npm i js-shell-emulator

import { JsShell } from './jsShell.js';

2. Create a basic terminal interface on the page.

<div id="shell"></div>

const shell = new JsShell('shell');

3. Register commands as follows:

const commands = {
      clear: {
        handler: (shell) => {
          shell.clear();
        },
        description: 'Clear console.'
      },
      exit: {
        handler: (shell) => {
          shell.print('Bye!');
        },
        description: 'Stop the shell prompt'
      },
      custom: {
        handler: customFunction,
        description: 'Custom function'
      },
      // more commands here
};
// custom function
async function customFunction(shell) {
      // ...
}

4. API methods.

shell
  .setWidth('100%')
  .setHeight('100vh')
  .setPrompt('$ ')
  .setTextSize('1.25rem')
  .setTextColor('green')
  .setFontFamily('roboto')
  .setForceFocus(true)
  .setBackgroundColor('#222')
   setMargin('2rem auto')
  .setBlinking(true) //blinking cursor
  .setPrompt('$ ')
  .setVisible(true) 
  .print('Plain text!')
  .printHTML("HTML content")
  .newLine()
  .write("without line break")
  .type("with typing animation", 50)
  .focus()
  .clear() // clear the screen

// Ask for plain text
let name = await shell.input("What's your name?")
// Ask for a password
let secret = await shell.password("Enter your password")
// Ask for confirmation. "(y/n)" will be append at the end of the question. 
let confirm = await shell.confirm("Are you sure?")
// Wait a second
await JsShell.sleep(1000)
// Give user a break
await shell.pause("Press any key to continue.")

5. Available options to customize the terminal interface.

const shell = new JsShell('#container', {
      backgroundColor: '#000',
      fontFamily: 'Ubuntu Mono, Monaco, Courier, monospace',
      textColor: '#fff',
      textSize: '1em',
      forceFocus: false, 
      promptPS: '', 
      width: '100%', 
      height: '300px',
      margin: '0',
      overflow: 'auto',
      whiteSpace: 'break-spaces',
      padding: '10px',
      className: 'jsShell',
      cursorType: 'large',
      cursorSpeed: 500,    
})