[Suggestion] Make Renderer.Backends a plugin system

[silicakes]

Following a discussion happened here: #338

The suggested ways of just hacking around the DOM inside React's lifecycle hooks actually has no real benefits other than syntactic sugar with some (very) naive automagic rendering.

Since the entire DOM management is delegated to VexFlow, we're kinda missing out on its performance benefits (i.e getting all of this into the virtual DOM).

I'm new to this library, but I think that the right approach should be to create a 'React render context' of sorts and manage the data model via state calls.

Since context is currently hard coded, I was also wondering if we can inject external contexts and register it within the renderer itself.

It seems like a small PR looking at the current implementation :

vexflow/src/renderer.js

Line 136 in 656be04

if (this.backend === Renderer.Backends.CANVAS) {

Taking this:

   if (this.backend === Renderer.Backends.CANVAS) {
      // Create context.
      if (!this.element.getContext) {
        throw new Vex.RERR('BadElement', `Can't get canvas context from element: ${elementId}`);
      }
      this.ctx = Renderer.bolsterCanvasContext(this.element.getContext('2d'));
    } else if (this.backend === Renderer.Backends.RAPHAEL) {
      this.ctx = new RaphaelContext(this.element);
    } else if (this.backend === Renderer.Backends.SVG) {
      this.ctx = new SVGContext(this.element);
    } else {
      throw new Vex.RERR('InvalidBackend', `No support for backend: ${this.backend}`);
    }

and making it into

const backend = Renderer.Backends[this.backend];
if(backend) {
  this.ctx = backend.createContext(this.element); // implemented individually within each context
} else {
  throw new Vex.RERR('InvalidBackend', `No support for backend: ${this.backend}`);
}

This should come with something like Renderer.Backends.register(context) and will allow people to create independent plugins for various rendering scenarios.

If that's something you find interesting, I can submit a PR using D3 to show how this might work.

As for phase 2 for this, we can create a small 'Renderer Backend plugin boilerplate' repo with all the relevant test suits so that people will have confidence with their implementations and will be able to update their code for new features of either VexFlow or their engine of choice.

Would love to hear your comments.