Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

the current dom insertion/removal/reordering reconciler [1] relies on 1:1 vnode-to-element mapping. this design prevents proper implementation of fragment vnodes, which in turn forces all views to return a single defineElement() vnode.

to resolve this impasse the reconciler must be:

  1. modified to use the old vtree rather than the dom. this is fairly straightforward.
  2. augmented for handling fragment vnodes. this is a bit more involved but workable.
  3. optimized to do parent-down rather than children-up reordering. this can significantly reduce the DOM load by not doing meaningless DOM ops. for instance, in React’s fragment impl, a 12 fragment reversal (with in-fragment reversal) results in 34 appendChild calls [2]. the ideal count should be 23 appendChild (or insertBefore) calls. this appears to translate to ideal fragment revrsal (11) followed by in-fragment reordering (23). the issue in domvm’s case is that it has will/didReinsert lifecycle hooks, so rather than calling 1 per move, it would call multiple (one for each useless move). i think this nicely illustrates the perf overhead that can grow exponentially in dealing with fragments.

[1] [2]

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:1
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

leeoniyacommented, Apr 20, 2018

the current reconciler will do the correct/optimal thing in pretty much all cases. in your example it will only do willReinsert(4)/didReinsert(4) in both actual dom ops and hooks (which are fired by dom ops).

one problem this issue addresses is when you have hooks on fragments or other vtree components like immediately nested views or views returning null from render that will not or cannot exist in the dom. since the current reconciler walks the real old dom, it never encounters vnodes that dont have a physical dom presence.

this is why you currently cant have views that directly return other views, fragments or have render functions that return null while still retaining the stateful/declarative component in the vtree despite removal from dom. if we walk the old vtree in the reconciler, then a lot of this stuff becomes possible and delivers on some additional benefits of maintaining a vdom rather than being partly or purely dom-based #196 😉

lawrence-dolcommented, Feb 19, 2022

Now that we have CSS display: contents, is it still necessary to support fragments? One can wrap the fragment in a <div style="display:contents"> and get 95% of the way there. I’ve done this successfully in a few places.

I think the only gotcha is that CSS immediate child selectors are sensitive to the intervening node so div.table > div.row won’t select the following row:

<div class="table">
    <div class="row-group" style="display:contents">
        <div class="row">
Read more comments on GitHub >

github_iconTop Results From Across the Web

Next Steps Center
For questions about Next Steps Center or UA Admissions: UA Admissions is available Monday-Friday, 8am-5pm (excluding holidays). Call 520-621-5293 or email ...
Read more >
Next Steps Idaho
Next Steps Idaho - College and career planning resources for high school students from the Idaho State Board of Education.
Read more >
Next Steps of OConnor Foundation - Redefining Rehabilitation
Next Steps was the first free standing, non-profit physical therapy and exercise facility devoted to the rehabilitation and overall wellness of people living ......
Read more >
Next Steps – The Colony
Next Steps is a non-profit organization that helps people in The Colony, Texas who are either currently in crisis, or who need coaching...
Read more >
NextSteps is an interactive program to help you manage your life after a serious injury. It will help you explore the ways your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found