Support deferred properties

[matt-gadd]

Type: feature

The following has been addressed in the PR:

• There is a related issue
• All code matches the style guide
• Unit or Functional tests are included in the PR

Description:

v() now supports a function as the second parameter (rather than just VirtualDomProperties). If a callback is passed, the callback will be called on render as per usual, and then again on the next requestAnimationFrame. This allows you to for example measure and apply changes to a property without having to trigger a full re-render, or change a style property to trigger a css transition.

Example usage:

v('div', (inserted /** the dom node has been inserted **/ ) => {
    return {
        opacity: inserted ? '1' : '0',
        classes: [ 'fadeIn' ]
    };
});

There are a few caveats which will likely be resolved in future:

• in lieu of a bonafide scheduler, there is nothing fancy here - it will simply queue a deferred property callback to the next rAF even if a main render is scheduled for the next rAF. In the future it will be more desirable to remove deferred property callbacks from the queue if they are going to be updated as part of a main render anyway.

• there will currently be an issue with using this.meta in a deferred property callback on render due to us scheduling nodes to be added to the node handler (which meta uses for dom node existing) on a rIC rather than a rAF. the node handler also clears out nodes after each __render__, which is problematic for anything deferred after it, so we will need a better way of handling dom nodes generally in the node handler.

I will raise a PR with a readme update separately as their is an outstanding PR open.

Resolves #714

[schontz]

Does inserted = true only for the first time the VNode is added? Or will that function run at each render?

[matt-gadd]

@schontz inserted will always be true once the node is inserted into the dom (ie after the first render).