ESM Yargs

Yargs loading from ESM module in browser.

by bencoe

HTML

<!doctype html>
<body>
  <textarea id="output" placeholder="type '--help' and hit [enter] to get started" readonly="readonly"></textarea>
  <input type="text" placeholder=">" id="input" />
</body>

CSS

#output {
  width: 400px;
  height: 350px;
  font-family: Lucida Console, Courier, monospace;
  display: block;
}
#input {
  width: 400px;
}

JavaScript

// Import the ESM version of the yargs module:
import { Yargs } from 'https://unpkg.com/[email protected]/browser.mjs';
const yargs = Yargs()
  .scriptName('>')
  .command('clear', 'clear the output window', () => {}, () => {
    output.value = '';
  })
  .command('alert <message...>', 'display an alert', () => {}, (argv) => {
    alert(argv.message.join(' '))
  })
  .wrap(null)
  .version('v1.0.0');

// Use the #output element to output parsed "cli" input :
const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('keydown', event => {
  if (event.keyCode === 13) { // Enter.
    const argv = yargs.parse(input.value, (err, argv, _output) => {
      if (output) {
        output.value += `\n${_output}`;
        output.scrollTop = output.scrollHeight;
      }
    });
    input.value = '';
  }
});