Skip to content
This repository has been archived by the owner on Nov 6, 2019. It is now read-only.

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

Open
telamonian opened this issue Oct 9, 2019 · 1 comment

Comments

@telamonian
Copy link

telamonian commented Oct 9, 2019

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
Copy link
Author

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 {
  ...
}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant