renderHandler option that will allow to echo different types of data in one place

[jcubic]

I have idea for a new feature for jQuery Terminal

Global echoHandler or renderHandler:

term.echo({xx:10});

this will render [Object object]

I'm thinking about:

renderHandler: function(obj) {
  if (typeof obj !== 'string' && obj !(instanceof Array)) {
      if (obj !== null && typeof obj === 'object') {
         this.echo('[[;;;json]x]', {
             finalize: function(div) {
                 var node = div.find('.json');
                 var new_div = $('<div/>').renderJSON(obj);
                 node.replaceWith(new_div);
             }
         });
      }
      return false;
  }
}

and this can render any object that is passed to echo, as with this Demo: https://codepen.io/jcubic/pen/yLBjJRp?editors=0110

this will be really powerfull because you will be able to render for instance JSX code after transpilation, Maybe this can be simplified to have render method that will allow to use syntax like this:

this.render(function(div) {
});

and render will just do:

render: function(fn) {
    this.echo('', {
        finalize: function(div) {
            fn.call(this, div.empty()));
        }
    });
}

TODO:

• Create POC of rendering React App inside terminal echo
• Figure out to not re render on each resize

[jcubic]

Maybe destroy option to echo, will be also good idea. I should rethink this Demo:
Vintage Terminal on Codepen it most likely create memory leaks because when you call clear it don't revoke the URL if used.

[jcubic]

POC for react inside terminal, with old API, it don't clear on resize.

https://codepen.io/jcubic/pen/ExYRopz?editors=1010

[jcubic]

New API will just allow to echo DOM nodes or jQuery objects. Render handler also can return DOM nodes.

[jcubic]

Here is CodePen demo that shows, how to echo JSX object directly term.echo(<App/>) with new API.

https://codepen.io/jcubic/pen/XWWRLZo?editors=1011