Add a "pass thru" virtualdom element that accepts a custom rendering callback

[telamonian]

Following up on a suggestion made by @jasongrout during the latest Phosphor session/call, I think we should add a "pass thru" vdom element that renders a real DOM element using a callback. This could act like an escape hatch from Phosphor's vdom and allow for composition with vdom elements from other libraries (like React, hint, hint).

Given the structure of the virtualdom package and the updateContent function, I think it would make sense to implement this via an hpass function with the following signature:

export function hpass(callback: (host: HTMLElement) => void): VirtualElementPass {
  ...
}

This could exist alongside the extant h function. During updateContent, when a node with:

node.type === 'passthru'

is encountered, node.callback(host) will be invoked, and from that point on any diffing/updating will be the responsibility of the callback.

I think the most important/urgent use case for this is allowing for the blending of React vdom into Phosphor vdom. The above pattern can mesh very nicely with ReactDOM.render(host, Component), since that function does its own diffing. This would allow Phosphor to better accommodate React while still avoiding any dependency on it.

I'm currently prepping a PR based on the above.

cc @jasongrout @blink1073 @sccolbert

[telamonian]

hpass/VirtualElementPass avoids the need for any explicit dependency on React in any of the Phosphor core packages. In addition, it might also be nice to make an optional @phosphor/react package that could include sugar such as:

export function hcomponent(component: React.Component): VirtualElementPass {
  ...
}