preactjs / preact / 6790956200

99%

master: 100%

push

github

Rework children diffing to run in multiple phases (#4180)

Rework children diffing to run in multiple phases:

1. First, find matches for all new VNodes in the old VNode tree, and determine which VNodes moved
2. Second, remove any unmatched VNodes in the old tree from the DOM
3. Finally, diff, move, and insert all VNodes in the new tree

A couple additional changes to highlight
* Add new _flags VNode field to capture some diffing state (whether an oldVNode was matched and whether to insert a newVNode)
* Combine `placeChild` and `reorderChildren` into a single `insert` function & simplify insertion logic in diffChildren
* Simplify some _nextDom logic by always setting & clearing it
* Fold _hydrating field into _flags field (+12 B)

Fixes #4156 

Commit list:

* Redo two phase diff on top of main (+108 B)
* Use single flag field for matched and insert (+28 B)
* WIP: add some tests from v11
* Fix new keyed tests
* Replace oldDomRef with newParentVNode._nextDom and move unmounting into constructNewChildrenArray (-27 B)
* Always set _nextDom to simplify code (-4 B)
   Will always be cleared in parent diffChildren or commitRoot
* Combine `placeChild` and `reorderChildren` & simplify insertion condition (-24 B)
* Use .to.equalNode in test
* Always initialize commitQueue & refQueue (-5 B)
* Directly store and read newChildren on newParentVNode (-9 B)
* Fold _hydrating field into _flags field (+12 B)
* Apply Jovi's suggestions from code review
* Add additional suspense hydration test

---------

Co-authored-by: Jovi De Croock <decroockjovi@gmail.com>

1221 of 1252 branches covered (0.0%)

18 of 18 new or added lines in 2 files covered. (100.0%)

744 of 748 relevant lines covered (99.47%)

866.06 hits per line