solarite 0.1.0 → 0.2.0

package/src/solarite/ExprPath.js

@@ -1,11 +1,14 @@
 import {assert} from "../util/Errors.js";
 import delve from "../util/delve.js";
-import {getObjectId} from "./hash.js";
 import NodeGroup from "./NodeGroup.js";
-import {div, findArrayDiff, setIndent} from "./Util.js";
+import Util, {arraySame, setIndent} from "./Util.js";
+import Template from "./Template.js";
+import Globals from "./Globals.js";
+import MultiValueMap from "../util/MultiValueMap.js";
+import udomdiff from "./udomdiff.js";
 
 /**
- * Path to where an expression should be evaluated within a Shell.
+ * Path to where an expression should be evaluated within a Shell or NodeGroup.
  * Path is only valid until the expressions before it are evaluated.
  * TODO: Make this based on parent and node instead of path? */
 export default class ExprPath {
@@ -44,14 +47,9 @@ export default class ExprPath {
 	 * @type {Node|HTMLElement} */
 	nodeMarker;
 
-	/** @deprecated */
-	get parentNode() {
-		return this.nodeMarker.parentNode;
-	}
 
 	// These are set after an expression is assigned:
 
-
 	/** @type {NodeGroup} */
 	parentNg;
 
@@ -59,8 +57,6 @@ export default class ExprPath {
 	nodeGroups = [];
 
 
-
-
 	// Caches to make things faster
 
 	/**
@@ -68,50 +64,23 @@ export default class ExprPath {
 	 * @type {Node[]} Cached result of getNodes() */
 	nodesCache;
 
-	// What are these?
+	/**
+	 * @type {int} Index of nodeBefore among its parentNode's children. */
 	nodeBeforeIndex;
-	nodeMarkerPath;
 
-    // TODO: Keep this cached?
-    expr;
+	/**
+	 * @type {int[]} Path to the node marker, in reverse for performance reasons. */
+	nodeMarkerPath;
 
-    // for debugging
-	//#IFDEV
-    parentIndex;
-	//#ENDIF
 
 	/**
 	 * @param nodeBefore {Node}
 	 * @param nodeMarker {?Node}
-	 * @param type {string}
+	 * @param type {PathType}
 	 * @param attrName {?string}
 	 * @param attrValue {string[]} */
 	constructor(nodeBefore, nodeMarker, type=PathType.Content, attrName=null, attrValue=null) {
 
-		//#IFDEV
-		/*
-		Object.defineProperty(this, 'debug', {
-			get() {
-				return [
-					`parentNode: ${this.nodeBefore.parentNode?.tagName?.toLowerCase()}`,
-					'nodes:',
-					...setIndent(this.getNodes().map(item => {
-						if (item instanceof Node)
-							return item.outerHTML || item.textContent
-						else if (item instanceof NodeGroup)
-							return item.debug
-					}), 1).flat()
-				]
-			}
-		})
-
-		Object.defineProperty(this, 'debugNodes', {
-			get: () =>
-				this.getNodes()
-		})
-		*/
-		//#ENDIF
-
 		// If path is a node.
 		this.nodeBefore = nodeBefore;
 		this.nodeMarker = nodeMarker;
@@ -122,6 +91,212 @@ export default class ExprPath {
 			this.attrNames = new Set();
 	}
 
+	/**
+	 * Apply any type of expression.
+	 * This calls other apply functions.
+	 *
+	 * One very messy part of this function is that it may apply multiple expressions if they're all part
+	 * of the same attribute value.
+	 *
+	 * We should modify path.applyValueAttrib so it stores the procssed parts and then only calls
+	 * setAttribute() once all the pieces are in place.
+	 *
+	 * @param expr {Expr}
+	 * @param exprs {Expr[]}
+	 * @param exprIndex {int}
+	 * @param componentExprs {object}
+	 * @returns {int} */
+	apply(expr, exprs=null, exprIndex=0, componentExprs={}) {
+		switch (this.type) {
+			case 1: // PathType.Content:
+				this.applyNodes(expr);
+				break;
+			case 2: // PathType.Multiple:
+				this.applyMultipleAttribs(this.nodeMarker, expr);
+				break;
+			case 5: // PathType.Comment:
+				// Expressions inside Html comments.  Deliberately empty because we won't waste time updating them.
+				break;
+			case 6: // PathType.Event:
+				this.applyEventAttrib(this.nodeMarker, expr, this.parentNg.rootNg.root);
+				break;
+			default:
+				if (this.type === 4 /*PathType.Component*/ && this.nodeMarker !== this.parentNg.rootNg.root)
+					componentExprs[this.attrName] = expr;
+				else {
+					// One attribute value may have multiple expressions.  Here we apply them all at once.
+					exprIndex = this.applyValueAttrib(this.nodeMarker, exprs || [expr], exprIndex);
+				}
+				break;
+		}
+
+		return exprIndex;
+	}
+
+	/**
+	 * Insert/replace the nodes created by a single expression.
+	 * Called by applyExprs()
+	 * This function is recursive, as the functions it calls also call it.
+	 * @param expr {Expr}
+	 * @return {Node[]} New Nodes created. */
+	applyNodes(expr) {
+		let path = this;
+
+		/*#IFDEV*/path.verify();/*#ENDIF*/
+
+		/** @type {(Node|NodeGroup|Expr)[]} */
+		let newNodes = [];
+		let oldNodeGroups = path.nodeGroups;
+		/*#IFDEV*/assert(!oldNodeGroups.includes(null))/*#ENDIF*/
+		let secondPass = []; // indices
+
+		path.nodeGroups = []; // Reset before applyExact and the code below rebuilds it.
+		path.applyExact(expr, newNodes, secondPass);
+
+		this.existingTextNodes = null;
+
+		// TODO: Create an array of old vs Nodes and NodeGroups together.
+		// If they're all the same, skip the next steps.
+		// Or calculate it in the loop above as we go?  Have a path.lastNodeGroups property?
+
+		// Second pass to find close-match NodeGroups.
+		let flatten = false;
+		if (secondPass.length) {
+			for (let [nodesIndex, ngIndex] of secondPass) {
+				let ng = path.getNodeGroup(newNodes[nodesIndex], false);
+
+				let ngNodes = ng.getNodes();
+
+				/*#IFDEV*/assert(!(newNodes[nodesIndex] instanceof NodeGroup))/*#ENDIF*/
+
+				if (ngNodes.length === 1) // flatten manually so we can skip flattening below.
+					newNodes[nodesIndex] = ngNodes[0];
+
+				else {
+					newNodes[nodesIndex] = ngNodes;
+					flatten = true;
+				}
+				path.nodeGroups[ngIndex] = ng;
+			}
+
+			if (flatten)
+				newNodes = newNodes.flat(); // Only if second pass happens.
+		}
+
+		/*#IFDEV*/assert(!path.nodeGroups.includes(null))/*#ENDIF*/
+
+
+
+		let oldNodes = path.getNodes();
+
+
+		// This pre-check makes it a few percent faster?
+		let same = arraySame(oldNodes, newNodes);
+		if (!same) {
+
+			path.nodesCache = newNodes; // Replaces value set by path.getNodes()
+
+			if (this.parentNg.parentPath)
+				this.parentNg.parentPath.clearNodesCache();
+
+			// Fast clear method
+			let isNowEmpty = oldNodes.length && !newNodes.length;
+			if (!isNowEmpty || !path.fastClear())
+
+				// Rearrange nodes.
+				udomdiff(path.nodeMarker.parentNode, oldNodes, newNodes, path.nodeMarker)
+
+			Util.saveOrphans(oldNodeGroups, oldNodes);
+		}
+
+		// Must happen after second pass.
+		path.freeNodeGroups();
+
+		/*#IFDEV*/path.verify();/*#ENDIF*/
+	}
+
+
+
+	/**
+	 * Apply Nodes that are an exact match.
+	 * @param expr {Template|Node|Array|function|*}
+	 * @param newNodes {(Node|Template)[]}
+	 * @param secondPass {Array} Locations within newNodes to evaluate later. */
+	applyExact(expr, newNodes, secondPass) {
+
+		if (expr instanceof Template) {
+
+			let ng = this.getNodeGroup(expr, true);
+			if (ng) {
+
+				// TODO: Track ranges of changed nodes and only pass those to udomdiff?
+				// But will that break the swap benchmark?
+				newNodes.push(...ng.getNodes());
+				this.nodeGroups.push(ng);
+			}
+
+			// If expression, mark it to be evaluated later in ExprPath.apply() to find partial match.
+			else {
+				secondPass.push([newNodes.length, this.nodeGroups.length])
+				newNodes.push(expr)
+				this.nodeGroups.push(null); // placeholder
+			}
+		}
+
+		// Node created by an expression.
+		else if (expr instanceof Node) {
+
+			// DocumentFragment created by an expression.
+			if (expr instanceof DocumentFragment)
+				newNodes.push(...expr.childNodes);
+			else
+				newNodes.push(expr);
+		}
+
+		// Arrays and functions.
+		// I tried iterating over the result of a generator function to avoid this recursion and simplify the code,
+		// but that consistently made the js-framework-benchmarks a few percentage points slower.
+		else if (Array.isArray(expr))
+			for (let subExpr of expr)
+				this.applyExact(subExpr, newNodes, secondPass);
+
+		else if (typeof expr === 'function') {
+			Globals.currentExprPath = [this, expr]; // Used by watch3()
+			let result = expr();
+			Globals.currentExprPath = null;
+
+			this.applyExact(result, newNodes, secondPass);
+		}
+
+		// Text
+		else {
+			// Convert falsy values (but not 0) to empty string.
+			// Convert numbers to string so they compare the same.
+			let text = (expr === undefined || expr === false || expr === null) ? '' : (expr + '');
+
+			// Fast path for updating the text of a single text node.
+			let first = this.nodeBefore.nextSibling;
+			if (first.nodeType === 3 && first.nextSibling === this.nodeMarker && !newNodes.includes(first)) {
+				if (first.textContent !== text)
+					first.textContent = text;
+
+				newNodes.push(first);
+			}
+
+			else {
+				// TODO: Optimize this into a Set or Map or something?
+				if (!this.existingTextNodes)
+					this.existingTextNodes = this.getNodes().filter(n => n.nodeType === 3);
+
+				let idx = this.existingTextNodes.findIndex(n => n.textContent === text);
+				if (idx !== -1)
+					newNodes.push(...this.existingTextNodes.splice(idx, 1))
+				else
+					newNodes.push(this.nodeMarker.ownerDocument.createTextNode(text));
+			}
+		}
+	}
+
 	applyMultipleAttribs(node, expr) {
 		/*#IFDEV*/assert(this.type === PathType.Multiple);/*#ENDIF*/
 
@@ -154,86 +329,103 @@ export default class ExprPath {
 	/**
 	 * Handle attributes for event binding, such as:
 	 * onclick=${(e, el) => this.doSomething(el, 'meow')}
-	 * onclick=${[this.doSomething, 'meow']}
+	 * oninput=${[this.doSomething, 'meow']}
 	 * onclick=${[this, 'doSomething', 'meow']}
 	 *
 	 * @param node
 	 * @param expr
 	 * @param root */
 	applyEventAttrib(node, expr, root) {
-		/*#IFDEV*/assert(this.type === PathType.Value || this.type === PathType.Component);/*#ENDIF*/
+		/*#IFDEV*/
+		assert(this.type === PathType.Event/* || this.type === PathType.Component*/);
+		assert(root instanceof HTMLElement);
+		/*#ENDIF*/
 
-		let eventName = this.attrName.slice(2);
+		let eventName = this.attrName.slice(2); // remove "on-" prefix.
 		let func;
 
 		// Convert array to function.
-		// TODO: This doesn't work for [this, 'doSomething', 'meow']
 		let args = [];
 		if (Array.isArray(expr)) {
-			for (let i=0; i<expr.length; i++)
-				if (typeof expr[i] === 'function') {
-					func = expr[i];
-					args = expr.slice(i+1);
-					break;
-				}
 
+			// oninput=${[this.doSomething, 'meow']}
+			if (typeof expr[0] === 'function') {
+				func = expr[0];
+				args = expr.slice(1);
+			}
+
+			// Undocumented.
 			// oninput=${[this, 'value']}
-			if (!func) {
-				func = setValue
+			else {
+				func = setValue;
 				args = [expr[0], expr.slice(1), node]
 				node.value = delve(expr[0], expr.slice(1));
+				// root.render(); // TODO: This causes infinite recursion.
 			}
 		}
 		else
 			func = expr;
 
-		let eventKey = getObjectId(node) + eventName;
-		let [existing, existingBound] = nodeEvents[eventKey] || [];
-		nodeEventArgs[eventKey] = args; // TODO: Put this in nodeEvents[]
+		let nodeEvents = Globals.nodeEvents.get(node);
+		if (!nodeEvents) {
+			nodeEvents = {[eventName]: new Array(3)};
+			Globals.nodeEvents.set(node, nodeEvents);
+		}
+		let nodeEvent = nodeEvents[eventName];
 
 
-		if (existing !== func) {
+
+		// If function has changed, remove and rebind the event.
+		if (nodeEvent[0] !== func) {
+			let [existing, existingBound, _] = nodeEvent;
 			if (existing)
 				node.removeEventListener(eventName, existingBound);
 
 			let originalFunc = func;
 
 			// BoundFunc sets the "this" variable to be the current Solarite component.
-			let boundFunc = event => originalFunc.call(root, ...args, event, node);
+			let boundFunc = (event) => {
+				let args = nodeEvent[2];
+				return originalFunc.call(root, ...args, event, node);
+			}
 
 			// Save both the original and bound functions.
 			// Original so we can compare it against a newly assigned function.
 			// Bound so we can use it with removeEventListner().
-			nodeEvents[eventKey] = [originalFunc, boundFunc];
+			nodeEvent[0] = originalFunc;
+			nodeEvent[1] = boundFunc;
 
 			node.addEventListener(eventName, boundFunc);
 
-			// TODO: classic event attribs:
+			// TODO: classic event attribs?
 			//el[attr.name] = e => // e.g. el.onclick = ...
 			//	(new Function('event', 'el', attr.value)).bind(this.manager.rootEl)(e, el) // put "event", "el", and "this" in scope for the event code.
 		}
+
+		//  Otherwise just update the args to the function.
+		nodeEvents[eventName][2] = args;
 	}
 
 	applyValueAttrib(node, exprs, exprIndex) {
 		let expr = exprs[exprIndex];
-		
-		// Array for form element data binding.
-		// TODO: This never worked, and was moved to applyEventAttrib.
-		// let isArrayValue = Array.isArray(expr);
-		// if (isArrayValue && expr.length >= 2 && !expr.slice(1).find(v => !['string', 'number'].includes(typeof v))) {
-		// 	node.value = delve(expr[0], expr.slice(1));
-		// 	node.addEventListener('input', e => {
-		// 		delve(expr[0], expr.slice(1), node.value) // TODO: support other properties like checked
-		// 	});
-		// }
 
 		// Values to toggle an attribute
 		if (!this.attrValue && (expr === false || expr === null || expr === undefined))
 			node.removeAttribute(this.attrName);
-		
+
 		else if (!this.attrValue && expr === true)
 			node.setAttribute(this.attrName, '');
 
+		// Passing a path to the value attribute.
+		// This same logic is in NodeGroup.createNewComponent() for components.
+		else if ((this.attrName === 'value' || this.attrName === 'data-value') && Util.isPath(expr)) {
+			let [obj, path] = [expr[0], expr.slice(1)];
+			node.value = delve(obj, path);
+			node.addEventListener('input', () => {
+				delve(obj, path, Util.getInputValue(node));
+			}, true); // We use capture so we update the values before other events added by the user.
+		}
+
 		// Regular attribute
 		else {
 			let value = [];
@@ -249,21 +441,25 @@ export default class ExprPath {
 						exprIndex--;
 					}
 				}
-
 				exprIndex ++;
 			}
 			else
 				value.unshift(expr);
 
 			let joinedValue = value.join('')
-			node.setAttribute(this.attrName, joinedValue);
+
+			// Only update attributes if the value has changed.
+			// The .value property is special.  If it changes we don't update the attribute.
+			let oldVal = this.attrName === 'value' ? node.value : node.getAttribute(this.attrName);
+			if (oldVal !== joinedValue) {
+				node.setAttribute(this.attrName, joinedValue);
+			}
 
 			// This is needed for setting input.value, .checked, option.selected, etc.
 			// But in some cases setting the attribute is enough.  such as div.setAttribute('title') updates div.title.
 			// TODO: How to tell which is which?
 			if (this.attrName in node)
 				node[this.attrName] = joinedValue;
-
 		}
 
 		return exprIndex;
@@ -273,55 +469,58 @@ export default class ExprPath {
 	/**
 	 *
 	 * @param newRoot {HTMLElement}
+	 * @param pathOffset {int}
 	 * @return {ExprPath} */
-	clone(newRoot) {
+	clone(newRoot, pathOffset=0) {
 		/*#IFDEV*/this.verify();/*#ENDIF*/
 
-        // Resolve node paths.
+		// Resolve node paths.
 		let nodeMarker, nodeBefore;
-        let root = newRoot;
-        let path = this.nodeMarkerPath;
-        for (let i=path.length-1; i>0; i--)
-            root = root.childNodes[path[i]];
+		let root = newRoot;
+		let path = pathOffset ? this.nodeMarkerPath.slice(0, -pathOffset) : this.nodeMarkerPath;
+		for (let i=path.length-1; i>0; i--) // Resolve the path.
+			root = root.childNodes[path[i]];
 		let childNodes = root.childNodes;
-        nodeMarker = childNodes[path[0]]
-        if (this.nodeBefore)
-            nodeBefore = childNodes[this.nodeBeforeIndex];
+
+		nodeMarker = path.length ? childNodes[path[0]] : newRoot;
+		if (this.nodeBefore)
+			nodeBefore = childNodes[this.nodeBeforeIndex];
 
 		let result = new ExprPath(nodeBefore, nodeMarker, this.type, this.attrName, this.attrValue);
 
 		//#IFDEV
+		result.nodeMarker.exprPath = result;
+		if (result.nodeBefore)
+			result.nodeBefore.prevExprPath = result;
 		result.verify();
-		result.parentIndex = this.parentIndex; // used for debugging?
 		//#ENDIF
 
 		return result;
 	}
-	
+
 	/**
 	 * Clear the nodeCache of this ExprPath, as well as all parent and child ExprPaths that
 	 * share the same DOM parent node.
 	 *
-	 * TODO: Is recursive clearing ever necessary?
-	 */
+	 * TODO: Is recursive clearing ever necessary? */
 	clearNodesCache() {
 		let path = this;
-		
+
 		// Clear cache parent ExprPaths that have the same parentNode
-		let parentNode = this.parentNode;
-		while (path && path.parentNode === parentNode) {
+		let parentNode = this.nodeMarker.parentNode;
+		while (path && path.nodeMarker.parentNode === parentNode) {
 			path.nodesCache = null;
 			path = path.parentNg?.parentPath
-			
+
 			// If stuck in an infinite loop here, the problem is likely due to Template hash colisions.
 			// Which cause one path to be the descendant of itself, creating a cycle.
 		}
-		
+
 		function clearChildNodeCache(path) {
-			
+
 			// Clear cache of child ExprPaths that have the same parentNode
 			for (let ng of path.nodeGroups) {
-				if (ng) // Can be null from applyOneExpr()'s push(null) call.
+				if (ng) // Can be null from apply()'s push(null) call.
 					for (let path2 of ng.paths) {
 						if (path2.type === PathType.Content && path2.parentNode === parentNode) {
 							path2.nodesCache = null;
@@ -330,8 +529,9 @@ export default class ExprPath {
 					}
 			}
 		}
-		
-		clearChildNodeCache(this);
+
+		// Commented out on Sep 30, 2024 b/c it was making the benchmark never finish when adding 10k rows.
+		//clearChildNodeCache(this);
 	}
 
 
@@ -344,46 +544,48 @@ export default class ExprPath {
 
 			// If parent is the only child of the grandparent, replace the whole parent.
 			// And if it has no siblings, it's not created by a NodeGroup/path.
-			let grandparent = parent.parentNode
-			if (grandparent && parent === grandparent.firstChild && parent === grandparent.lastChild && !parent.hasAttribute('id')) {
-				let replacement = document.createElement(parent.tagName)
-				replacement.append(this.nodeBefore, this.nodeMarker)
-				for (let attrib of parent.attributes)
-					replacement.setAttribute(attrib.name, attrib.value)
-				parent.replaceWith(replacement)
-			}
-			else {
+			// Commented out because this will break any references.
+			// And because I don't see much performance difference.
+			// let grandparent = parent.parentNode
+			// if (grandparent && parent === grandparent.firstChild && parent === grandparent.lastChild && !parent.hasAttribute('id')) {
+			// 	let replacement = document.createElement(parent.tagName)
+			// 	replacement.append(this.nodeBefore, this.nodeMarker)
+			// 	for (let attrib of parent.attributes)
+			// 		replacement.setAttribute(attrib.name, attrib.value)
+			// 	parent.replaceWith(replacement)
+			// }
+			// else {
 				parent.innerHTML = ''; // Faster than calling .removeChild() a thousand times.
 				parent.append(this.nodeBefore, this.nodeMarker)
-			}
+			//}
 			return true;
 		}
 		return false;
 	}
-	
+
 	/**
 	 * @return {(Node|HTMLElement)[]} */
 	getNodes() {
-		
+
 		// Why doesn't this work?
 		// let result2 = [];
 		// for (let ng of this.nodeGroups)
 		// 	result2.push(...ng.getNodes())
 		// return result2;
-		
-		
+
+
 		let result
 
 		// This shaves about 5ms off the partialUpdate benchmark.
-		/*result = this.nodesCache;
+		result = this.nodesCache;
 		if (result) {
-			
+
 			//#IFDEV
 			this.checkNodesCache();
 			//#ENDIF
-			
+
 			return result
-		}*/
+		}
 
 		result = [];
 		let current = this.nodeBefore.nextSibling;
@@ -400,13 +602,100 @@ export default class ExprPath {
 	getParentNode() { // Same as this.parentNode
 		return this.nodeMarker.parentNode
 	}
-	
-	removeNodeGroup(ng) {
-		let idx = this.nodeGroups.indexOf(ng);
-		/*#IFDEV*/assert(idx !== -1);/*#ENDIF*/
-		this.nodeGroups.splice(idx);
-		ng.parentPath = null;
-		this.clearNodesCache();
+
+	/**
+	 * Get an unused NodeGroup that matches the template's html and expressions (exact=true)
+	 * or at least the html (exact=false).
+	 * Remove it from nodeGroupsFree if it exists, or create it if not.
+	 * Then add it to nodeGroupsInUse.
+	 *
+	 * @param template {Template}
+	 * @param exact {boolean}
+	 *     If true, return an exact match, or null.
+	 *     If false, either find a match for the template's html and then apply the template's expressions,
+	 *         or createa  new NodeGroup from the template.
+	 * @return {NodeGroup} */
+	getNodeGroup(template, exact=true) {
+		//if (exact && this.nodeGroupsFree.isEmpty())
+		//	return null;
+
+		let result;
+
+		if (exact) {
+			result = this.nodeGroupsFree.delete(template.getExactKey());
+			if (result) // also delete the matching close key.
+				this.nodeGroupsFree.delete(template.getCloseKey(), result);
+			else
+				return null;
+		}
+
+		// Find a close match.
+		// This is a match that has matching html, but different expressions applied.
+		// We can then apply the expressions to make it an exact match.
+		else {
+			result = this.nodeGroupsFree.delete(template.getCloseKey())
+			if (result) {
+				/*#IFDEV*/assert(result.exactKey);/*#ENDIF*/
+				this.nodeGroupsFree.delete(result.exactKey, result);
+
+				// Update this close match with the new expression values.
+				result.applyExprs(template.exprs);
+				result.exactKey = template.getExactKey(); // TODO: Should this be set elsewhere?
+			}
+		}
+
+		if (!result)
+			result = new NodeGroup(template, this);
+
+		// old:
+		this.nodeGroupsInUse.push(result);
+
+		// new:
+		// let ngiu = this.nodeGroupsInUse;
+		// ngiu.add(result.exactKey, result);
+		// ngiu.add(result.closeKey, result);
+
+		/*#IFDEV*/assert(result.parentPath);/*#ENDIF*/
+		return result;
+	}
+
+
+	/**
+	 * Used with getNodeGroup() and freeNodeGroups().
+	 * TODO: Use an array of WeakRef so the gc can collect them?
+	 * TODO: Put items back in nodeGroupsInUse after applyExpr() is called, not before.
+	 * @type {NodeGroup[]} */
+	nodeGroupsInUse = [];
+
+	/** @type {MultiValueMap<key:string, value:NodeGroup>} */
+	//nodeGroupsInUse = new MultiValueMap();
+
+	/**
+	 * Used with getNodeGroup() and freeNodeGroups().
+	 * Each NodeGroup is here twice, once under an exact key, and once under the close key.
+	 * @type {MultiValueMap<key:string, value:NodeGroup>} */
+	nodeGroupsFree = new MultiValueMap();
+
+
+	/**
+	 * Move everything from this.nodeGroupsInUse to this.nodeGroupsFree.
+	 * TODO: this could run as needed in getNodeGroup? */
+	freeNodeGroups() {
+		// old:
+		let ngf = this.nodeGroupsFree;
+		for (let ng of this.nodeGroupsInUse) {
+			ngf.add(ng.exactKey, ng);
+			ngf.add(ng.closeKey, ng);
+		}
+		this.nodeGroupsInUse = [];
+
+		// new:
+		// for (let key in this.nodeGroupsFree.data)
+		// 	for (let item of this.nodeGroupsFree.data[key])
+		// 		this.nodeGroupsInUse.add(key, item);
+		//
+		// this.nodeGroupsFree = this.nodeGroupsInUse;
+		// this.nodeGroupsInUse = new MultiValueMap();
 	}
 
 	//#IFDEV
@@ -481,7 +770,7 @@ export default class ExprPath {
 				nodes.push(current)
 				current = current.nextSibling
 			}
-			assert(findArrayDiff(this.nodesCache, nodes) === false);
+			assert(arraySame(this.nodesCache, nodes) === true);
 		}
 	}
 	//#ENDIF
@@ -501,26 +790,27 @@ function setValue(root, path, node) {
 		val = parseFloat(val);
 
 	delve(root, path, val);
-	
-	//this.render();
 }
 
-/** @enum {string} */
+/** @enum {int} */
 export const PathType = {
 	/** Child of a node */
-	Content: 'content',
+	Content: 1,
 	
 	/** One or more whole attributes */
-	Multiple: 'attrName',
+	Multiple: 2,
 	
 	/** Value of an attribute. */
-	Value: 'attrValue',
+	Value: 3,
 	
 	/** Value of an attribute being passed to a component. */
-	Component: 'component',
+	Component: 4,
 	
 	/** Expressions inside Html comments. */
-	Comment: 'comment',
+	Comment: 5,
+
+	/** Value of an attribute. */
+	Event: 6,
 }
 
 
@@ -549,6 +839,3 @@ export function resolveNodePath(root, path) {
 }
 
 
-// TODO: Memory from this is never freed.  Use a WeakMap<Node, Object<eventName:string, function[]>>
-let nodeEvents = {};
-let nodeEventArgs = {};