Feature suggestion: linked roots in devtools

[jpnelson]

An idea I had that would be handy for our use cases is a concept of "linked roots"

We have this structure in our application where we have multiple roots, each of them managed independently to achieve better scheduling of renders and hydrations, in coordination with code splitting.

This works for us well in practice, but the unfortunate side effect is that the dev tool tree view makes no sense any more – any child that is rendered in a different root is cut off from the main tree, and this makes it much harder to understand the component hierarchy.

The suggestion here is to implement this concept of "linked roots" that would let you link together two trees at the vnode level. This would not affect anything in preact core, but the devtools could understand to look for these links, and render component hierarchies with these. I'm thinking of them as a sort of sym-link for the devtools.

This is what it looks like in the devtools after, which is much closer to what we want:

I haven't gotten this far, but it'd be really neat if these were displayed differently in the dev tools. Possibly some annotation that the parent / child relationship is one of these "links"

Note: this doesn't work in v11 yet, so needs some thought about what's different there. I think it's because my method of setting vnode.__linked_child doesn't work in v11, but I haven't looked into that that much yet.

Interested in your thoughts on this! It doesn't have to be this path exactly, but I'd be interested in knowing if you'd like to better support this pattern