Add eventing system to meta to determine when nodes are processed

[tomdye]

Enhancement

In some circumstances, animations being one of them, we need to delay the requiring of a node until we can be sure that all node properties have been processed and all HTMLElements are correctly laid out. This is especially important in Animations as we need to get access to a nodes dimensions in a lot of cases which may be dependent on the styles applied to parent elements. With the current implementation, the requireNode callback triggers before parents are processed.

We should consider implementing an event based system similar to the way that used in RegistryHandler. The implementation could allow users to register for an event when a given node, or level of nodes has been processed and made available.

For example:

// fires when node with `myKey` is available
nodeHandler.on({ type: 'node', key: 'myKey' }, callback); 

// fires when the widget root is available
nodeHandler.on({ type: 'widget' }, callback); 

// fires when the projector is available
nodeHandler.on({ type: 'projector' }, callback); 

The benefit of this approach is that in the case of animations, you can wait for the projector to be processed before adding any animations. This ensures that all HTMLElements have been laid out and had styles applied.

nodeHandler.on({ type: 'projector' }, () => {
   const myAnimatedNode = this.nodes('myKey');
  // calculate and add animation here
});