Home

Awesome

<h1 align="center"> <br> <img src="https://raw.githubusercontent.com/alicin/promptie/master/static/android-icon-192x192.png" alt="promptie" width="96"> <br> promptie <br> </h1> <h4 align="center">A framework for creating command-line like interfaces in web browsers</h4> <p>Promptie gives you useful and convenient API's to simulate a CLI like interface in the browser. You can easily write your own applications in it and you can even pipe the outputs of your applications to each other.</p> <h2 align="center"> <img src="https://raw.githubusercontent.com/alicin/promptie/master/static/demo1/Large%20GIF%20(640x480).gif" alt="promptie demo" width="640"> <br> <img src="https://raw.githubusercontent.com/alicin/promptie/master/static/demo2/Large%20GIF%20(640x480).gif" alt="promptie demo" width="640"> </h2>

Table of contents

Running and Building

Instructions below are tested with NodeJS v7.7.2 and works with yarn package manager as well.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

Creating an application

Creating an application is very easy in promptie. Just create a folder inside src/bin with the name of your application and put an index.js file inside it. index.js should export a function that returns a javascript Promise. This exported function has two parameters:

screen provides utilities to print text or html on Screen

args is a js object wrapping the parsed command line arguments. Promptie uses minimist to parse arguments, you can check the github page to learn more.

resolve method of the promise takes two arguments. out is a string argument that represents the final output of your application. This is the output that gets piped while using pipes. The second argument is silent. It is a boolean, optional value, false by default. If it is true or left blank, your final output will be printed on the screen on application exit.

Here is an example application that basically colorize the input string. You can check the bin folder to see some other application examples.

import paint from '../system/paint'

export default function (screen, args) {
  return new Promise((resolve) => {
    const colors = ['red', 'yellow', 'green', 'blue', 'magenta', 'cyan']
    let output = ''
    args._plain.split('').forEach(function (char, index) {
      output += paint(char, {styles: [colors[index % colors.length]]})
    })
    resolve(output)
  })
}

API

Promptie has two main API's, Screen and Prompt.

Screen

Screen.lines = []
Screen.push(line, escapeHtml = false)
Screen.pushNewLine()
Screen.replaceLastLine(line)
Screen.removeLastLine()
Screen.removeLastLine()

Prompt

Prompt.prompt = '$'
Prompt.disabled = false
Prompt.getCaretPosition()
Prompt.setCaretPostion(index)
Prompt.pushCaretToEnd()

System

System provides a couple of helpers to be used in your application.

Runner

This is a special type of system helper that is used to run commands in promptie and also can be imported to your applications to run other commands within your application. Runner js has two main methods to parse commands

Runner.run('movie Eternal Sunshine of the Spotless Mind')
import Runner from '../system/runner'
// Passes the string to movie app which queries the OMDB and returns 
// the plot of the movie and colorize it with rainbow command. 
// You can see this in action in the gifs at the top of the page.
Runner.runPipe('echo Star Wars | movie | rainbow')

Paint

Paint helps you add colors, styles and links to your application. It has a special style type called command which creates a clickable command that is executed on click. You can check the paint.css file inside bin/system to see available styles.

import paint from '../system/paint'

screen.push(paint('You will be presented with a dummy determinate loading..', 
{styles: ['magenta', 'underline', 'white-bg']}))

screen.push(paint('movie Star Wars', {styles: ['command']}))
screen.push(paint('google.com', {styles: ['blue', 'bold'], link: 'http://google.ca'}}))

Ask

import progress from '../system/progress'
import paint from '../system/paint'
import ask from '../system/ask'

export default function (screen, args) {
  return new Promise((resolve, reject) => {
    ask('Enter the city name for forecast')
    .then(function (city) {
      progress.pushProgressIndeterminate(['/', '-', '|', '-', '\\', '-'], 100)
      return fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}`)
    })
    .then(function (res) {
      return res.json()
    })
    .then(function (res) {
      progress.removeProgress()
      resolve(`Current temperature for ${res.name} is ${paint(parseInt(res.main.temp) + ' degrees.', {styles: ['bold', 'green']})}`)
    })
  })
}

<img src="https://raw.githubusercontent.com/alicin/promptie/master/static/demo3/Large%20GIF%20(640x520).gif" alt="promptie demo" width="640">

Progress

Progress provides determinate and intereminate progress indicators for your app.

import progress from '../system/progress'

// This will put 'OOOOOO______________ %30' on the screen.
progress.pushProgressDeterminate(0.3, '_', 'O')

// This will continuously loop through given character sequence until you call progress.removeProgress()
progress.pushProgressIndeterminate(['/', '-', '|', '-', '\\', '-'], 100)
progress.removeProgress()

Road Map

Credits

This software mainly uses code from these open source packages.

License

MIT


Twitter @alican