Adding Server Component support to DevTools is going to be a big lift, but generally speaking there are a few initial things to work out:
- Updating the Flight server renderer to stream server component names/types to the client.
- Adding a new hook to DevTools for the Flight client to call.
- Merging the server component subtrees into the DevTools client tree.
Yesterday and today I've been thinking about this last item, and I'm feeling pretty stumped at the moment. Merging the trees isn't that difficult, but preserving the tree across client updates gets nasty when it comes to things like conditionally rendered elements.
Setting performance concerns aside, even if I were to undo the merged trees, apply the client updates, and then redo the merge– I'm still not sure we would definitely end up with the correct final state.
For example, consider the following client component that accepts "children" rendered by a server component: