Jsdom: Implement Ranges and Traversal

ugh, that spec made my eyes bleed

yeah, I'd be pretty afraid to implement it without a w3c test suite

What I found out so far:

• There seems to exist some sort of W3C test suite for it, but it never got published apparently. At least the Xerces developer got his hands on it. I contacted Michael of Xerces, maybe he can help.
• Xerces has tests called range, traversal and treewalker; some of them might help
• Also, Acid3 has a bunch of complex tests for this module

This looks promising: https://github.com/w3c/web-platform-tests/tree/master/dom

Note that those test the "versionless DOM" at http://dom.spec.whatwg.org/ and not level 2 specifically. But, they're more likely to reflect real browsers.

I’m basically done with the main functionality, but I have quite some problems keeping the ranges live. I need to tap into basically every DOM mutation and I’m not sure about the best way to do that. In some cases I used the mutation events, in other cases I wrapped the corresponding methods on the prototype.

Right now I’m wondering about how to do node removal. With suppress observers flag set, the event would not get emitted, but the ranges still need to be updated. Does anyone have any ideas? I think maybe we should have a very simple internal event system throughout the DOM for such things; it could be used for _attrModified as well, for example.

@adrianlang that's awesome!

It seems like this is related to our long-standing desire to move away from using mutation events internally, and instead have a private protocol that can never be disabled. See #295. I know it's a lot to ask, but fixing that might be the way to go for this?

Spam +1 comments cause features to get moved to the back of the backlog. Please use the voting buttons instead. Deleting the recent +1s.

I'm still there, btw, as is my half-finished code. I hope to get this done eventually.

@adrianheine Does the TreeWalker implementation which landed help you get any closer to finishing your implementation?

https://twitter.com/slicknet/status/782274190451671040

I use sometimes Range#createContextualFragment, I don't really know why this useful method is there though (it would deserve to be directly on document, or DocumentFragment)

so I ended up doing this for tests

global.document.createRange = () => ({
  createContextualFragment: str => JSDOM.fragment(str)
});

But all the Range API would be a lot more

@domenic I think what @acusti was asking is what are the next steps to get this verified?

I am trying to use this:
https://github.com/PrismJS/prism/issues/896

Can someone recommend an alternative path? I like the idea of having a highlighted diff and syntax highlighting with Prism. Might even come out better than Github's highlighter.

I'd be willing to https://www.patreon.com/ for one more reason to never use SourceTree again.

@adrianheine I might be interested in helping out if you share your WIP.

Got errors in jest tests.

TypeError: document.createRange is not a function

      at createRange (node_modules/popper.js/src/utils/findCommonOffsetParent.js:27:26)
      at findCommonOffsetParent (node_modules/popper.js/src/utils/getReferenceOffsets.js:16:85)
      at Popper.getReferenceOffsets (node_modules/popper.js/src/methods/update.js:29:28)
      at Popper.call (node_modules/popper.js/src/index.js:94:19)
      at node_modules/popper.js/dist/umd/popper.js:51:7

Find link here

Hello, any progress from this?

https://mobile.twitter.com/slicknet/status/782274190451671040

When will it be released? So jest could upgrade to the newest version.