Skip to content

Commit

Permalink
[DevTools] Build up DevTools Instance Shadow Tree (#30625)
Browse files Browse the repository at this point in the history
This is the beginning of a refactor of the DevTools Fiber backend. The
new approach is basically that we listen to each commit from Fiber and
traverse the tree - building up a filtered shadow tree. Then we send
diffs based on that tree and perform our own operations against that
instead of using Fibers as the source of truth.

Fiber diffs Elements -> Fibers. The backend diffs Fibers ->
DevToolsInstances as a side-effect it sends deltas to the front end.

This makes the algorithm resilient to a different Fiber implementation
that doesn't use pairs of Fibers (alternates) but instead stateless new
clones each time. In that world we can't treat Fibers as instances. They
can hold onto instances but they're not necessarily 1:1 themselves.

The same thing also applies to Server Components that don't have their
own instances.

The algorithm is more or less the same as React's reconciliation in
ReactChildFiber itself. However, we do a mutable update of the tree as
we go. We also cheat a bit here in the first version in that we still
have fiberToFiberInstance map and alternate which makes reorders easier.
Further down we could do the reorders by adding the previous set to a
temporary map like ChildFiber does but only if they're not already in
order.

This first bit is just about making sure that we produce correct trees.
We have fairly good test coverage already of that already.

In the next few follow ups I'll start simplifying the rest of the logic
by taking advantage of the new tree.
  • Loading branch information
sebmarkbage authored Aug 8, 2024
1 parent fb1c63f commit 587f03c
Showing 1 changed file with 414 additions and 236 deletions.
Loading

0 comments on commit 587f03c

Please sign in to comment.