glorious-codes / glorious-demo

The easiest way to demonstrate your code in action.
https://glorious.codes/demo
MIT License
3.4k stars 106 forks source link

Support multi-line commands #123

Closed gphilipp closed 10 months ago

gphilipp commented 11 months ago

Hi Rafael, love your nifty library, it's really useful!

I've tried to make multi-line commands work but it's as neat as single line commands:

Eg in order to display :

$ curl \
  http://localhost:8008 \
  --request POST \
  --header "Content-Type: application/json" \
  --data '{"status": "ok"}'

I wrote this script:

const demo = new GDemo('#demo-container');

const inputCommand = `
curl \\
  http://localhost:8008 \\
  --request POST \\
  --header "Content-Type: application/json" \\
  --data '{"status": "ok"}'
`;

const result = `OK`;

demo
    .openApp('terminal',
        {
            minHeight: '350px',
            windowTitle: 'terminal',
            onCompleteDelay: 1000,
            promptString: '$'
        })
    .command(inputCommand, {onCompleteDelay: 500})
    .respond(result)
    .command('')
    .end();

Which produces this result.

image

I tried encoding the inputCommand using HTML with div and span elements but unfortunately, the next.command('') isn't aware of the last line and produces a new prompt on line 2!

rafaelcamargo commented 10 months ago

Hey @gphilipp! Thanks for your compliment! I really appreciate that. 🙂

When I was coding Glorious Demo, I spent some time thinking how would be the best way to accomplish multi-line commands. At the time, I decided that using one .command() for each line would be the best way to offer all the flexibility someone might want. And when I say flexibility, I mean customizing the promptString for every command line, for example. Reflecting now about the decision made some time ago, I have the impression that writing multiples .command() made the API not as intuitive as it should be (Sorry!). Perhaps I'll try to improve this in the upcoming versions. However, for now, you can just write your script like follows:

const demo = new GDemo('#demo-container');

demo
  .openApp('terminal', {
    minHeight: '350px',
    windowTitle: 'terminal',
    onCompleteDelay: 1000,
    promptString: '$'
  })
  .command('curl \\')
  .command('http://localhost:8008 \\', { promptString: '>' })
  .command('--request POST \\')
  .command('--header "Content-Type: application/json" \\')
  .command('--data \'{"status": "ok"}\'', { onCompleteDelay: 500 })
  .respond('OK')
  .command('', { promptString: '$' })
  .end();

Here's a Gist all the necessary code to run the above example: https://gist.github.com/rafaelcamargo/02a8a9fc00f5ca9bb6a3494cb5e95e2e

Hope it helps!

gphilipp commented 10 months ago

Hi @rafaelcamargo, thanks it helps! I had to use &nbsp for the promptString parameter and now it works as expected!