search

patrick-steele-idem / morphdom

Fast and lightweight DOM diffing/patching (no virtual DOM needed)
MIT License
3.21k stars 129 forks source link

Support diffing #document-fragment #166

Closed dy closed 5 years ago

dy commented 5 years ago

As a reflection of #53 - would be useful to have reverse diffing:

let frag = document.createDocumentFragment()
frag.append(...nodes)

morph(frag, anotherFrag)

Now that is not supported, gives error:

Uncaught TypeError: Cannot read property 'length' of undefined
    at morphAttrs (morphdom-esm.js:10)
    at morphEl (morphdom-esm.js:474)
    at morphdom (morphdom-esm.js:699)

Context: pre-render DOM into background fragment, in order to later insert into some mounted DOM node.

snewcomer commented 5 years ago

I believe we support morph-ing when the first argument is an HTMLElement. One of the requirements is we have to "walk" the DOM tree. Is that possible with document fragments?

dy commented 5 years ago

Yes, there's nothing special about documentFragment, it is instance of Node (nodeType === 11). It can be both walked directly or via TreeWalker

snewcomer commented 5 years ago

So the only thing it doesn't have is attributes. So seems like we need a guard using nodeType === 1. Is that something you have time to put up a PR for with test? Otherwise, I can do it!

dy commented 5 years ago

I have difficulties with setting up mocha/chrome for windows, not sure what's going on. It seems it will be easier if you do it, if you don't mind. Here's the draft PR I came up with, that seems to be the only required change https://github.com/patrick-steele-idem/morphdom/pull/167

dy commented 5 years ago

Fixed per #167