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

Allow multiple independent editors. #111

Closed WadeWaldron closed 1 year ago

WadeWaldron commented 1 year ago

I would like to be able to open multiple editors (one at a time) to represent different files. In otherwords, I'd like to be able to do something like:

demo
  .openApp('editor', {minHeight: '350px', windowTitle: 'file1.js'})
  .write(code, {onCompleteDelay: 1500})
  .openApp('editor', {minHeight: '350px', windowTitle: 'file2.js'})
  .write(otherCode, {onCompleteDelay: 1500})
  .end();

However, with the current implementation, this just appends to the existing editor, rather than creating a new one. It would be better if this would create a new editor with a new window title.

rafaelcamargo commented 1 year ago

Hey @WadeWaldron! How are you?

Interesting suggestion. What d'you think about the possibility of identifying applications? Something like:

demo
  .openApp('editor', {id: 'editor1', minHeight: '350px', windowTitle: 'file1.js'})
  .write(code, {onCompleteDelay: 1500})
  .openApp('editor', {id: 'editor2', minHeight: '350px', windowTitle: 'file2.js'})
  .write(otherCode, {onCompleteDelay: 1500})
  .end();

This way, it would be possible to instantiate more than one application (editor or terminal), and start/continue interacting with the one you identify with the id option. If no id is given, the lib identifies the application as default.

WadeWaldron commented 1 year ago

That would be suitable.

rafaelcamargo commented 1 year ago

Hey @WadeWaldron! Version 0.12.0 just released with this new functionality. Let me know if it works for you.

The final API became:

const gdemo = new GDemo('[data-container');
gdemo
  .openApp('editor', { id: 'editor1', minHeight: '300px', windowTitle: 'editor1.txt' })
  .write('Testing Editor 1', { id: 'editor1', onCompleteDelay: 1000 })
  .openApp('editor', { id: 'editor2', minHeight: '300px', windowTitle: 'editor2.txt' })
  .write('Testing Editor 2', { id: 'editor2', onCompleteDelay: 1000 })
  .openApp('editor', { id: 'editor1' })
  .write('It works!', { id: 'editor1', onCompleteDelay: 1000 })
  .openApp('editor', { id: 'editor2' })
  .write('Ok, it really works.', { id: 'editor2', onCompleteDelay: 1000 })
  .end();

Result

WadeWaldron commented 1 year ago

This works. Thanks.