🍒 Interactive command line ft. Web Workers
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
scripts
README.md
index.html

README.md

Chery 🍒

A drop-in, modular CLI for the web with no dependencies. Uses WebWorkers to run JavaScript files as commands in the background. Output can be styled with normal HTML. And yes, with one R.

chery

How do I install this thing?

Just load the script somewhere on the page. Then put an element somewhere with #chery as ID. If you don't add an element, Chery will just add itself to the body of the page. Magic!

How do I add commands?

Chery looks for the folder ./scripts. In there, just name the script whatever your command should be, with .js. For example, help.js adds a command to Chery called help. This repo has a few examples already.

How do I print stuff on the screen?

Send a message from your WebWorker script like this:

self.postMessage({ type: 'output', content: 'This is some <em>text</em>', final: true })
self.close()

The final option means Chery stops displaying stuff from this command afterwards. If you don't include it, it defaults to false.

Can I style this command line?

You bet your ass you can. Chery doesn't include styling out of the box and everything is just normal HTML elements, so CSS works how you'd expect it to work.

Can I change the default prefix or MOTD? Are there other customization options?

You can add a bunch of attributes to the HTML element you bind Chery to. They are:

  • data-chery-prefix: The prefix for each line, defaults to $ .
  • data-chery-cursor: The character used for the cursor. By default that's .
  • data-chery-message: The Message Of The Day, displayed when Chery starts.
  • data-chery-autofocus: Activates Chery on page load, defaults to false.

How do I add arguments to commands?

Whenever you run a command, Chery sends a message to the WebWorker in the following format:

{
  type: 'argv',
  content: argv
}

Where argv is an array of all arguments entered. (And, like in C, argv[0] is the name of the command itself) This means you can read out the arguments inside your WebWorker script like so:

self.onmessage = function (e) {
  if (e.data.type === 'argv') {
      var arguments = e.data.content
  }
}

Can I use Chery to, say, navigate to other pages?

Yes. You need to add a response handler to do so. Add another script to your page, where you put something like:

chery.addResponseHandler({
		type: 'navigate',
		parse: function (data) {
			window.location.href = data.href
		}
	})

Then, inside your WebWorker script do something like:

self.postMessage({ type: 'handler', handler: 'navigate', href: 'http://google.com' })

Response handlers are really useful for getting stuff back from WebWorkers and using that stuff to modify the DOM. The function addResponseHandler expects an object with a type (corresponding to the handler you send from the WebWorker) and a parse function, which receives the entire message of the WebWorker as its first argument.