Improvements for 6.0

[justinbmeyer]

CanJS 6 relies heavily on this module. While it works right now, it needs a few improvements:

• Allow mutations to the document without having to use can-dom-mutate/node/. We can use isConnected in browsers that support it (currently everyone except edge).
• Make sure it doesn't "leak" if the document gets disconnected without handlers being removed. It seemed like there were weakmap problems.

Other:

• When using createTreeWalker, only walk elements that were actually listened for.
• TreeWalker also gets all nodes instead of nodes that actually have listeners (making a big array)
• We should setup some general performance tests

[justinbmeyer]

<button id="removeChild">domMutateNode.removeChild</button>
<script src="../node_modules/steal/steal.js"></script>
<div id="main"></div>


<script type="text/steal-module">
	var domMutateNode = require("can-dom-mutate/node/node");
	var domMutate = require("can-dom-mutate");

	removeChild.onclick = function(){
		domMutateNode.removeChild.call(document.body, main);
		domMutate.takeRecords();
	}
	function getRandom(current) {
		var total = current.textNodes + current.commentNodes + current.children;
		if(total <=0 ) {
			return;
		}
		var selection = Math.random()* total;
		if(selection < current.textNodes) {
			return {
				state: {...current, textNodes: current.textNodes - 1},
				element: document.createTextNode(" text ")
			}
		} else if(selection < current.textNodes + current.commentNodes) {
			return {
				state: {...current, commentNodes: current.commentNodes - 1},
				element: document.createComment(" text ")
			};
		} else {
			return {
				state: {...current, children: current.children - 1},
				element: document.createElement("div")
			};
		}
	}

	var domLevelCount = [{
		textNodes: 100,
		commentNodes: 100,
		children: 100
	},{
		textNodes: 10,
		commentNodes: 10,
		children: 10
	}];

	function makeFragment(levels) {
		var fragment = document.createDocumentFragment();
		var current = levels[0],
			element;
		if( current ) {
			var result;
			while( result = getRandom(current) ) {
				var element = result.element;
				current = result.state;

				if(element.nodeType === 1) {
					element.appendChild( makeFragment(levels.slice(1) ) );
				}
				fragment.appendChild(element);
			}
		}
		return fragment;
	}

	var frag=  makeFragment(domLevelCount);

	main.appendChild( frag );
</script>

Shows scanning 3000 elements takes 3ms

[justinbmeyer]

More notes from a talk with @bmomberger-bitovi

CANJS 5

domMutate.onNodeRemoval()  //-> onNodeDisconnected 
domMutate.onNodeInsertion() //-> onNodeConnected


CANJS 6#onNodeRemoved 

NEW NAMES
 domMutate.onNodeDisconnected (domMutate.onNodeRemoval aliased to this with a warning)
 domMutate.onNodeConnected 

NEW METHODS 
 domMutate.onNodeRemoved -> if you were removed from any parent, fire this 
 domMutate.onNodeInserted

CHANGES 

  BIPASS use of the MUTATION OBSERVE 

	dispatchNodeInsertion(node, X, isInDocument) {
		if(isInDocument) {
			fireConnectedStuff()
		}
		fireInsertedCallbacks()

		
	}

    appendChild(){
		dispatchNodeInsertion(node, null, isInDocument(node) )
	}

BRAD 

	appendChild(){
		if( node.isConnected ) {
			// actually insert 
		} else {
			// actually insert
			dispatchNodeInsertion(node, null, false )
			
		}
		
	}

[justinbmeyer]

Check memory

test/manual-memory-check.html

• Do we need to expose the weak map?

To make tests:

1. Create a vdom. Add some HTML. Add some onNodeX handlers. Change global DOCUMENT() back to THE document. Look somehow at weakmap ... (hit GC button) ... is there stuff in there?