Nest roots based on DOM structure

[wnayes]

For pages that are incorporating Preact gradually, there can often be many render roots. I work with an application like this, where we have many "legacy" UI components (not true Preact components) interspersed with Preact content.

The current behavior is that Preact render roots are shown as root nodes in the inspector UI. Given that they're detached from any other vnode tree, this makes sense from the perspective of the Virtual DOM. But I'm finding that this often doesn't match my mental model of my component structure, which is based more on the page layout (the actual DOM).

A given render tree could render to a certain point (a "leaf node") and at that point hand things over to some other legacy component to render. That legacy component could, in turn, instantiate some new render roots by rendering Preact content deeper within its own DOM structure that it manages.

In other words, I'm often finding that a given render root is "disjoint from, but still nested within" an ancestor render tree. In these cases, I would find it to be really helpful if the inspector showed these roots as nested beneath their "detached ancestor vnode."

This is just an idea I'd like to throw out there, that I think would make some pages show up much better in the inspector. Perhaps it needs to be fleshed out a little more (does there need to be some indication on the node that it is a new root rather than true child? Should it live under a setting or just be default? etc.)

[marvinhagemeister]

Awesome! This is something I've pondering about too as it close relates to rendering Portals properly in the middle of the tree #51 . To do that we'd need a way to specify the parent of the root Fragment node of each tree. Maybe we need to add a new parameter to render() where that can be specified.

Definitely worth investigating 👍

[marvinhagemeister]

Marking as duplicate from #51